Expose width and height of nimble-dialog & add tokens

[stefanc18]

Pull Request

🤨 Rationale

#1117

👩‍💻 Implementation

• Performed the tasks that are enumerated in the issue linked above.
• Create 2 tokens for the existing (small) dialog: width & max-height
• Create 2 tokens for the large dialog: width & height
• Have the small dialog as the default (width & max-height of small dialog; height set to fit-content, this was the default height that was applied to the dialog until now)
• Added storybook documentation.

🧪 Testing

Manually thorugh the storybook tests & matrix tests in chromatic. The sizes are configurable in the storybook similarly to how the width is configurable for the nimble drawer. For the matrix tests, I added 2 stories: one for the small dialog and one for the large dialog: https://www.chromatic.com/build?appId=60e89457a987cf003efc0a5b&number=7776

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[jattasNI]

@stefanc18 based on your recent updates it looks like this is ready for reviewers to take another look. In future you can signal this by re-requesting review (I did this already in this case but let us know if you're still working on it).

[rajsite]

MaxHeight is a new token suffix and should be added to the list: https://github.com/ni/nimble/blob/main/packages/nimble-components/src/theme-provider/design-token-names.ts#L243

Note the comment at the top, it should come before Height in the list.

[rajsite]

FYI, that will result in you needing to add an entry here as well:

nimble/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts

Line 100 in 73b899d

const tokenTemplates: {

[stefanc18]

added

[rajsite]

Thanks for following up on the feedback, it's getting close!