From 7442a72d9accdd8d39c0a49e625b977e21fa7a13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= Date: Wed, 20 Sep 2023 16:02:06 +0300 Subject: [PATCH 01/12] Expose width and height of nimble-dialog & add tokens --- .../nimble-components/src/dialog/styles.ts | 15 ++- .../src/dialog/tests/dialog-matrix.stories.ts | 45 +++++++- .../src/dialog/tests/dialog.stories.ts | 102 +++++++++++++++++- .../src/dialog/tests/types.ts | 7 ++ .../theme-provider/design-token-comments.ts | 4 + .../src/theme-provider/design-token-names.ts | 4 + .../src/theme-provider/design-tokens.ts | 12 +++ 7 files changed, 182 insertions(+), 7 deletions(-) diff --git a/packages/nimble-components/src/dialog/styles.ts b/packages/nimble-components/src/dialog/styles.ts index 05e3e1003a..ba56e371b9 100644 --- a/packages/nimble-components/src/dialog/styles.ts +++ b/packages/nimble-components/src/dialog/styles.ts @@ -12,7 +12,9 @@ import { smallPadding, subtitleFont, subtitleFontColor, - elevation3BoxShadow + elevation3BoxShadow, + dialogSmallWidth, + dialogSmallMaxHeight } from '../theme-provider/design-tokens'; import { modalBackdropColorThemeColorStatic, @@ -25,14 +27,21 @@ import { themeBehavior } from '../utilities/style/theme'; export const styles = css` ${display('grid')} + :host { + width: ${dialogSmallWidth}; + height: fit-content; + max-height: ${dialogSmallMaxHeight}; + } + dialog { flex-direction: column; background-color: ${applicationBackgroundColor}; border: none; box-shadow: ${elevation3BoxShadow}; padding: 0px; - width: 400px; - max-height: 600px; + width: inherit; + height: inherit; + max-height: inherit; } dialog[open] { diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index f5e2999179..390fd28693 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -1,10 +1,12 @@ import type { StoryFn, Meta } from '@storybook/html'; -import { html } from '@microsoft/fast-element'; -import { createFixedThemeStory } from '../../utilities/tests/storybook'; -import { sharedMatrixParameters } from '../../utilities/tests/matrix'; +import { html, ViewTemplate } from '@microsoft/fast-element'; +import { createFixedThemeStory, createStory } from '../../utilities/tests/storybook'; +import { createMatrix, sharedMatrixParameters } from '../../utilities/tests/matrix'; import { backgroundStates } from '../../utilities/tests/states'; import { dialogTag } from '..'; import { buttonTag } from '../../button'; +import { cssPropertyFromTokenName, tokenNames } from '../../theme-provider/design-token-names'; +import { dialogLargeHeight, dialogLargeWidth, dialogSmallMaxHeight, dialogSmallWidth } from '../../theme-provider/design-tokens'; const metadata: Meta = { title: 'Tests/Dialog', @@ -28,6 +30,26 @@ const component = html` `; +const dialogSizingTestCase = ( + [widthLabel, widthStyle]: [string, string], + [heightLabel, heightStyle]: [string, string], + [maxHeightLabel, maxHeightStyle]: [string, string] +): ViewTemplate => html` +

${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}

+ <${dialogTag} style="${() => widthStyle}; ${() => heightStyle}; ${() => maxHeightStyle};"> + This is my dialog's title. It is pretty long. + The dialog has a subtitle here. +
Here is the first piece of content in the dialog
+
+ Here is another piece of content in the dialog. It is a bit longer. +
+ <${buttonTag} slot="footer">Cancel + <${buttonTag} slot="footer">OK + +`; + const [ lightThemeWhiteBackground, colorThemeDarkGreenBackground, @@ -60,3 +82,20 @@ export const dialogDarkThemeBlackBackground: StoryFn = createFixedThemeStory( ); dialogDarkThemeBlackBackground.play = playFunction; + +export const richTextEditorSizing: StoryFn = createStory(html` + ${createMatrix(dialogSizingTestCase, [ + [ + [`Width ${dialogSmallWidth.getValueFor(document.body)}`, `width: ${dialogSmallWidth.getValueFor(document.body)}`], + [`Width ${dialogLargeWidth.getValueFor(document.body)}`, `width: ${dialogLargeWidth.getValueFor(document.body)}`], + ], + [ + ['Height fit-content', 'height: fit-content'], + [`Height ${dialogLargeHeight.getValueFor(document.body)}`, `height: ${dialogLargeHeight.getValueFor(document.body)}`], + ], + [ + [`Max height ${dialogSmallMaxHeight.getValueFor(document.body)}`, `max-height: ${dialogSmallMaxHeight.getValueFor(document.body)}`], + [`Max height ${dialogLargeHeight.getValueFor(document.body)}`, `max-height: ${dialogLargeHeight.getValueFor(document.body)}`], + ] + ])} +`); diff --git a/packages/nimble-components/src/dialog/tests/dialog.stories.ts b/packages/nimble-components/src/dialog/tests/dialog.stories.ts index 8321cc5d31..712a60e69d 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog.stories.ts @@ -3,10 +3,12 @@ import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { Dialog, dialogTag, UserDismissed } from '..'; import { TextField, textFieldTag } from '../../text-field'; -import { ExampleContentType } from './types'; +import { DialogSizeOptions, ExampleContentType } from './types'; import { loremIpsum } from '../../utilities/tests/lorem-ipsum'; import { buttonTag } from '../../button'; import { checkboxTag } from '../../checkbox'; +import { dialogLargeHeight, dialogLargeWidth, dialogSmallMaxHeight, dialogSmallWidth } from '../../theme-provider/design-tokens'; +import { scssPropertyFromTokenName, tokenNames } from '../../theme-provider/design-token-names'; interface DialogArgs { title: string; @@ -16,6 +18,9 @@ interface DialogArgs { includeFooterButtons: boolean; preventDismiss: boolean; content: ExampleContentType; + width: DialogSizeOptions; + height: DialogSizeOptions; + maxHeight: DialogSizeOptions; show: undefined; close: undefined; dialogRef: Dialog; @@ -49,6 +54,41 @@ const content = { [ExampleContentType.longContent]: longContent } as const; +const widthDescription = ` +Width of a nimble dialog. +The default width that the dialog has is given by ${scssPropertyFromTokenName(tokenNames.dialogSmallWidth)}. + +The width can be overriden by setting a different value for the width attribute. For large dialogs, there is a nimble token available: ${scssPropertyFromTokenName(tokenNames.dialogLargeWidth)} +`; + +const heightDescription = ` +Height of a nimble dialog. + +The height can be overriden by setting a different value for the height attribute. For large dialogs, there is a nimble token available: ${scssPropertyFromTokenName(tokenNames.dialogLargeHeight)} +`; + +const maxHeightDescription = ` +Maximum height of a nimble dialog. +The default maximum height that the dialog has is given by ${scssPropertyFromTokenName(tokenNames.dialogSmallMaxHeight)}. + +The maximum height can be overriden by setting a different value for the maximum height attribute. +`; + +const widths = { + [DialogSizeOptions.default]: dialogSmallWidth.getValueFor(document.body), + [DialogSizeOptions.large]: dialogLargeWidth.getValueFor(document.body) +} as const; + +const heights = { + [DialogSizeOptions.default]: 'fit-content', + [DialogSizeOptions.large]: dialogLargeHeight.getValueFor(document.body) +} as const; + +const maxHeights = { + [DialogSizeOptions.default]: dialogSmallMaxHeight.getValueFor(document.body), + [DialogSizeOptions.large]: dialogLargeHeight.getValueFor(document.body) +} as const; + const metadata: Meta = { title: 'Components/Dialog', tags: ['autodocs'], @@ -71,6 +111,11 @@ const metadata: Meta = { ?prevent-dismiss="${x => x.preventDismiss}" ?header-hidden="${x => x.headerHidden}" ?footer-hidden="${x => x.footerHidden}" + style="${x => ` + width:${widths[x.width]}; + height:${heights[x.height]}; + max-height:${maxHeights[x.maxHeight]}; + `}" > ${x => x.title} ${x => x.subtitle} @@ -154,6 +199,58 @@ const metadata: Meta = { } } }, + width: { + description: widthDescription, + options: [ + DialogSizeOptions.default, + DialogSizeOptions.large + ], + control: { + type: 'select', + labels: { + [DialogSizeOptions.default]: `Default (${dialogSmallWidth.getValueFor( + document.body + )})`, + [DialogSizeOptions.large]: `Large (${dialogLargeWidth.getValueFor( + document.body + )})`, + } + } + }, + height: { + description: heightDescription, + options: [ + DialogSizeOptions.default, + DialogSizeOptions.large + ], + control: { + type: 'select', + labels: { + [DialogSizeOptions.default]: 'Default (fit-content)', + [DialogSizeOptions.large]: `Large (${dialogLargeHeight.getValueFor( + document.body + )})`, + } + } + }, + maxHeight: { + description: maxHeightDescription, + options: [ + DialogSizeOptions.default, + DialogSizeOptions.large + ], + control: { + type: 'select', + labels: { + [DialogSizeOptions.default]: `Default (${dialogSmallMaxHeight.getValueFor( + document.body + )})`, + [DialogSizeOptions.large]: `Large (${dialogLargeHeight.getValueFor( + document.body + )})`, + } + } + }, show: { name: 'show()', description: @@ -178,6 +275,9 @@ const metadata: Meta = { includeFooterButtons: true, preventDismiss: false, content: ExampleContentType.shortContent, + width: DialogSizeOptions.default, + height: DialogSizeOptions.default, + maxHeight: DialogSizeOptions.default, openAndHandleResult: (dialogRef, textFieldRef) => { void (async () => { const reason = await dialogRef.show(); diff --git a/packages/nimble-components/src/dialog/tests/types.ts b/packages/nimble-components/src/dialog/tests/types.ts index ae5d2ca4fb..325e7268c6 100644 --- a/packages/nimble-components/src/dialog/tests/types.ts +++ b/packages/nimble-components/src/dialog/tests/types.ts @@ -4,3 +4,10 @@ export const ExampleContentType = { } as const; export type ExampleContentType = (typeof ExampleContentType)[keyof typeof ExampleContentType]; + +export const DialogSizeOptions = { + default: 'Default', + large: 'Large' +} as const; +export type DialogSizeOptions = + (typeof DialogSizeOptions)[keyof typeof DialogSizeOptions]; \ No newline at end of file diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts index b2df0007b3..1513d2f501 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -58,6 +58,10 @@ export const comments: { readonly [key in TokenName]: string | null } = { iconSize: 'Standard layout height for all icons', groupHeaderTextTransform: 'CSS text-transform string to use for headers', drawerWidth: 'TODO: delete when able', + dialogSmallWidth: 'Standard width for small dialogs like a confirmation dialog.', + dialogSmallMaxHeight: 'Standard maximum height for small dialogs like a confirmation dialog.', + dialogLargeWidth: 'Standard width for large dialogs.', + dialogLargeHeight: 'Standard height for large dialogs.', bannerGapSize: 'Space between stacked banners', spinnerSmallHeight: 'Small height (16px) for a spinner component', spinnerMediumHeight: 'Medium height (32px) for a spinner component', diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts index 4660faf16c..10328a85c4 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -45,6 +45,10 @@ export const tokenNames: { readonly [key in TokenName]: string } = { iconSize: 'icon-size', groupHeaderTextTransform: 'group-header-text-transform', drawerWidth: 'drawer-width', + dialogSmallWidth: 'dialog-small-width', + dialogSmallMaxHeight: 'dialog-small-max-height', + dialogLargeWidth: 'dialog-large-width', + dialogLargeHeight: 'dialog-large-height', bannerGapSize: 'banner-gap-size', spinnerSmallHeight: 'spinner-small-height', spinnerMediumHeight: 'spinner-medium-height', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index fa14e6393e..e55a066242 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -299,6 +299,18 @@ export const iconSize = DesignToken.create( export const drawerWidth = DesignToken.create( styleNameFromTokenName(tokenNames.drawerWidth) ).withDefault('784px'); +export const dialogSmallWidth = DesignToken.create( + styleNameFromTokenName(tokenNames.dialogSmallWidth) +).withDefault('400px'); +export const dialogSmallMaxHeight = DesignToken.create( + styleNameFromTokenName(tokenNames.dialogSmallMaxHeight) +).withDefault('600px'); +export const dialogLargeWidth = DesignToken.create( + styleNameFromTokenName(tokenNames.dialogLargeWidth) +).withDefault('1024px'); +export const dialogLargeHeight = DesignToken.create( + styleNameFromTokenName(tokenNames.dialogLargeHeight) +).withDefault('680px'); export const bannerGapSize = DesignToken.create( styleNameFromTokenName(tokenNames.bannerGapSize) ).withDefault('1px'); From f1f4f458d64ece3ed17259bbe2861f16e8f66f30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= Date: Wed, 20 Sep 2023 16:02:42 +0300 Subject: [PATCH 02/12] Change files --- ...le-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json diff --git a/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json b/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json new file mode 100644 index 0000000000..cb6b4ce0bb --- /dev/null +++ b/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Expose width and height of nimble-dialog & add tokens", + "packageName": "@ni/nimble-components", + "email": "stefan.ciuprina@ni.com", + "dependentChangeType": "patch" +} From 832cbc4ab43fd0f6472d315aef4fbda350283b70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= Date: Wed, 20 Sep 2023 16:42:56 +0300 Subject: [PATCH 03/12] lint --- .../src/dialog/tests/dialog-matrix.stories.ts | 47 ++++++++++++---- .../src/dialog/tests/dialog.stories.ts | 53 +++++++++++-------- .../src/dialog/tests/types.ts | 2 +- .../theme-provider/design-token-comments.ts | 6 ++- 4 files changed, 74 insertions(+), 34 deletions(-) diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 390fd28693..93d8bad69f 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -1,12 +1,26 @@ import type { StoryFn, Meta } from '@storybook/html'; import { html, ViewTemplate } from '@microsoft/fast-element'; -import { createFixedThemeStory, createStory } from '../../utilities/tests/storybook'; -import { createMatrix, sharedMatrixParameters } from '../../utilities/tests/matrix'; +import { + createFixedThemeStory, + createStory +} from '../../utilities/tests/storybook'; +import { + createMatrix, + sharedMatrixParameters +} from '../../utilities/tests/matrix'; import { backgroundStates } from '../../utilities/tests/states'; import { dialogTag } from '..'; import { buttonTag } from '../../button'; -import { cssPropertyFromTokenName, tokenNames } from '../../theme-provider/design-token-names'; -import { dialogLargeHeight, dialogLargeWidth, dialogSmallMaxHeight, dialogSmallWidth } from '../../theme-provider/design-tokens'; +import { + cssPropertyFromTokenName, + tokenNames +} from '../../theme-provider/design-token-names'; +import { + dialogLargeHeight, + dialogLargeWidth, + dialogSmallMaxHeight, + dialogSmallWidth +} from '../../theme-provider/design-tokens'; const metadata: Meta = { title: 'Tests/Dialog', @@ -86,16 +100,31 @@ dialogDarkThemeBlackBackground.play = playFunction; export const richTextEditorSizing: StoryFn = createStory(html` ${createMatrix(dialogSizingTestCase, [ [ - [`Width ${dialogSmallWidth.getValueFor(document.body)}`, `width: ${dialogSmallWidth.getValueFor(document.body)}`], - [`Width ${dialogLargeWidth.getValueFor(document.body)}`, `width: ${dialogLargeWidth.getValueFor(document.body)}`], + [ + `Width ${dialogSmallWidth.getValueFor(document.body)}`, + `width: ${dialogSmallWidth.getValueFor(document.body)}` + ], + [ + `Width ${dialogLargeWidth.getValueFor(document.body)}`, + `width: ${dialogLargeWidth.getValueFor(document.body)}` + ] ], [ ['Height fit-content', 'height: fit-content'], - [`Height ${dialogLargeHeight.getValueFor(document.body)}`, `height: ${dialogLargeHeight.getValueFor(document.body)}`], + [ + `Height ${dialogLargeHeight.getValueFor(document.body)}`, + `height: ${dialogLargeHeight.getValueFor(document.body)}` + ] ], [ - [`Max height ${dialogSmallMaxHeight.getValueFor(document.body)}`, `max-height: ${dialogSmallMaxHeight.getValueFor(document.body)}`], - [`Max height ${dialogLargeHeight.getValueFor(document.body)}`, `max-height: ${dialogLargeHeight.getValueFor(document.body)}`], + [ + `Max height ${dialogSmallMaxHeight.getValueFor(document.body)}`, + `max-height: ${dialogSmallMaxHeight.getValueFor(document.body)}` + ], + [ + `Max height ${dialogLargeHeight.getValueFor(document.body)}`, + `max-height: ${dialogLargeHeight.getValueFor(document.body)}` + ] ] ])} `); diff --git a/packages/nimble-components/src/dialog/tests/dialog.stories.ts b/packages/nimble-components/src/dialog/tests/dialog.stories.ts index 712a60e69d..52945b8f0b 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog.stories.ts @@ -7,8 +7,16 @@ import { DialogSizeOptions, ExampleContentType } from './types'; import { loremIpsum } from '../../utilities/tests/lorem-ipsum'; import { buttonTag } from '../../button'; import { checkboxTag } from '../../checkbox'; -import { dialogLargeHeight, dialogLargeWidth, dialogSmallMaxHeight, dialogSmallWidth } from '../../theme-provider/design-tokens'; -import { scssPropertyFromTokenName, tokenNames } from '../../theme-provider/design-token-names'; +import { + dialogLargeHeight, + dialogLargeWidth, + dialogSmallMaxHeight, + dialogSmallWidth +} from '../../theme-provider/design-tokens'; +import { + scssPropertyFromTokenName, + tokenNames +} from '../../theme-provider/design-token-names'; interface DialogArgs { title: string; @@ -56,20 +64,28 @@ const content = { const widthDescription = ` Width of a nimble dialog. -The default width that the dialog has is given by ${scssPropertyFromTokenName(tokenNames.dialogSmallWidth)}. +The default width that the dialog has is given by ${scssPropertyFromTokenName( + tokenNames.dialogSmallWidth + )}. -The width can be overriden by setting a different value for the width attribute. For large dialogs, there is a nimble token available: ${scssPropertyFromTokenName(tokenNames.dialogLargeWidth)} +The width can be overriden by setting a different value for the width attribute. For large dialogs, there is a nimble token available: ${scssPropertyFromTokenName( + tokenNames.dialogLargeWidth + )} `; const heightDescription = ` Height of a nimble dialog. -The height can be overriden by setting a different value for the height attribute. For large dialogs, there is a nimble token available: ${scssPropertyFromTokenName(tokenNames.dialogLargeHeight)} +The height can be overriden by setting a different value for the height attribute. For large dialogs, there is a nimble token available: ${scssPropertyFromTokenName( + tokenNames.dialogLargeHeight + )} `; const maxHeightDescription = ` Maximum height of a nimble dialog. -The default maximum height that the dialog has is given by ${scssPropertyFromTokenName(tokenNames.dialogSmallMaxHeight)}. +The default maximum height that the dialog has is given by ${scssPropertyFromTokenName( + tokenNames.dialogSmallMaxHeight + )}. The maximum height can be overriden by setting a different value for the maximum height attribute. `; @@ -85,7 +101,9 @@ const heights = { } as const; const maxHeights = { - [DialogSizeOptions.default]: dialogSmallMaxHeight.getValueFor(document.body), + [DialogSizeOptions.default]: dialogSmallMaxHeight.getValueFor( + document.body + ), [DialogSizeOptions.large]: dialogLargeHeight.getValueFor(document.body) } as const; @@ -201,10 +219,7 @@ const metadata: Meta = { }, width: { description: widthDescription, - options: [ - DialogSizeOptions.default, - DialogSizeOptions.large - ], + options: [DialogSizeOptions.default, DialogSizeOptions.large], control: { type: 'select', labels: { @@ -213,32 +228,26 @@ const metadata: Meta = { )})`, [DialogSizeOptions.large]: `Large (${dialogLargeWidth.getValueFor( document.body - )})`, + )})` } } }, height: { description: heightDescription, - options: [ - DialogSizeOptions.default, - DialogSizeOptions.large - ], + options: [DialogSizeOptions.default, DialogSizeOptions.large], control: { type: 'select', labels: { [DialogSizeOptions.default]: 'Default (fit-content)', [DialogSizeOptions.large]: `Large (${dialogLargeHeight.getValueFor( document.body - )})`, + )})` } } }, maxHeight: { description: maxHeightDescription, - options: [ - DialogSizeOptions.default, - DialogSizeOptions.large - ], + options: [DialogSizeOptions.default, DialogSizeOptions.large], control: { type: 'select', labels: { @@ -247,7 +256,7 @@ const metadata: Meta = { )})`, [DialogSizeOptions.large]: `Large (${dialogLargeHeight.getValueFor( document.body - )})`, + )})` } } }, diff --git a/packages/nimble-components/src/dialog/tests/types.ts b/packages/nimble-components/src/dialog/tests/types.ts index 325e7268c6..c60e78290b 100644 --- a/packages/nimble-components/src/dialog/tests/types.ts +++ b/packages/nimble-components/src/dialog/tests/types.ts @@ -10,4 +10,4 @@ export const DialogSizeOptions = { large: 'Large' } as const; export type DialogSizeOptions = - (typeof DialogSizeOptions)[keyof typeof DialogSizeOptions]; \ No newline at end of file + (typeof DialogSizeOptions)[keyof typeof DialogSizeOptions]; diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts index 1513d2f501..16eea13d9f 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -58,8 +58,10 @@ export const comments: { readonly [key in TokenName]: string | null } = { iconSize: 'Standard layout height for all icons', groupHeaderTextTransform: 'CSS text-transform string to use for headers', drawerWidth: 'TODO: delete when able', - dialogSmallWidth: 'Standard width for small dialogs like a confirmation dialog.', - dialogSmallMaxHeight: 'Standard maximum height for small dialogs like a confirmation dialog.', + dialogSmallWidth: + 'Standard width for small dialogs like a confirmation dialog.', + dialogSmallMaxHeight: + 'Standard maximum height for small dialogs like a confirmation dialog.', dialogLargeWidth: 'Standard width for large dialogs.', dialogLargeHeight: 'Standard height for large dialogs.', bannerGapSize: 'Space between stacked banners', From f3166798eeab7000a83060fe1c6640ef81866d55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= Date: Thu, 21 Sep 2023 10:19:18 +0300 Subject: [PATCH 04/12] split into 2 stories --- .../src/dialog/tests/dialog-matrix.stories.ts | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 93d8bad69f..405add9178 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -97,30 +97,41 @@ export const dialogDarkThemeBlackBackground: StoryFn = createFixedThemeStory( dialogDarkThemeBlackBackground.play = playFunction; -export const richTextEditorSizing: StoryFn = createStory(html` +export const smallDialogSizing: StoryFn = createStory(html` ${createMatrix(dialogSizingTestCase, [ [ [ `Width ${dialogSmallWidth.getValueFor(document.body)}`, `width: ${dialogSmallWidth.getValueFor(document.body)}` - ], + ] + ], + [['Height fit-content', 'height: fit-content']], + [ + [ + `Max height ${dialogSmallMaxHeight.getValueFor(document.body)}`, + `max-height: ${dialogSmallMaxHeight.getValueFor(document.body)}` + ] + ] + ])} +`); + +smallDialogSizing.play = playFunction; + +export const largeDialogSizing: StoryFn = createStory(html` + ${createMatrix(dialogSizingTestCase, [ + [ [ `Width ${dialogLargeWidth.getValueFor(document.body)}`, `width: ${dialogLargeWidth.getValueFor(document.body)}` ] ], [ - ['Height fit-content', 'height: fit-content'], [ `Height ${dialogLargeHeight.getValueFor(document.body)}`, `height: ${dialogLargeHeight.getValueFor(document.body)}` ] ], [ - [ - `Max height ${dialogSmallMaxHeight.getValueFor(document.body)}`, - `max-height: ${dialogSmallMaxHeight.getValueFor(document.body)}` - ], [ `Max height ${dialogLargeHeight.getValueFor(document.body)}`, `max-height: ${dialogLargeHeight.getValueFor(document.body)}` @@ -128,3 +139,5 @@ export const richTextEditorSizing: StoryFn = createStory(html` ] ])} `); + +largeDialogSizing.play = playFunction; From 61867a2e5cb3ca43d3fe434c4483abcbc767d993 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Fri, 27 Oct 2023 12:24:26 +0300 Subject: [PATCH 05/12] style shadow dom using part --- ...ponents-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json | 2 +- packages/nimble-components/src/dialog/styles.ts | 11 ++--------- packages/nimble-components/src/dialog/template.ts | 1 + .../src/dialog/tests/dialog-matrix.stories.ts | 9 ++++++++- .../src/dialog/tests/dialog.stories.ts | 12 +++++++----- 5 files changed, 19 insertions(+), 16 deletions(-) diff --git a/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json b/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json index cb6b4ce0bb..f0e50e10fa 100644 --- a/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json +++ b/change/@ni-nimble-components-1e4a5579-af4c-4960-8cfc-32d8417d1a34.json @@ -2,6 +2,6 @@ "type": "minor", "comment": "Expose width and height of nimble-dialog & add tokens", "packageName": "@ni/nimble-components", - "email": "stefan.ciuprina@ni.com", + "email": "57374665+stefanc18@users.noreply.github.com", "dependentChangeType": "patch" } diff --git a/packages/nimble-components/src/dialog/styles.ts b/packages/nimble-components/src/dialog/styles.ts index a1fc1ab899..e3a96ff26a 100644 --- a/packages/nimble-components/src/dialog/styles.ts +++ b/packages/nimble-components/src/dialog/styles.ts @@ -28,21 +28,14 @@ import { accessiblyHidden } from '../utilities/style/accessibly-hidden'; export const styles = css` ${display('grid')} - :host { - width: ${dialogSmallWidth}; - height: fit-content; - max-height: ${dialogSmallMaxHeight}; - } - dialog { flex-direction: column; background-color: ${applicationBackgroundColor}; border: none; box-shadow: ${elevation3BoxShadow}; padding: 0px; - width: inherit; - height: inherit; - max-height: inherit; + width: ${dialogSmallWidth}; + max-height: ${dialogSmallMaxHeight}; } dialog[open] { diff --git a/packages/nimble-components/src/dialog/template.ts b/packages/nimble-components/src/dialog/template.ts index e124f76214..1cfbc0a82b 100644 --- a/packages/nimble-components/src/dialog/template.ts +++ b/packages/nimble-components/src/dialog/template.ts @@ -6,6 +6,7 @@ export const template = html` diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 405add9178..67f6e3fcb9 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -52,7 +52,14 @@ const dialogSizingTestCase = (

${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}

- <${dialogTag} style="${() => widthStyle}; ${() => heightStyle}; ${() => maxHeightStyle};"> + + <${dialogTag}> This is my dialog's title. It is pretty long. The dialog has a subtitle here.
Here is the first piece of content in the dialog
diff --git a/packages/nimble-components/src/dialog/tests/dialog.stories.ts b/packages/nimble-components/src/dialog/tests/dialog.stories.ts index 52945b8f0b..4f1f21a36d 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog.stories.ts @@ -123,17 +123,19 @@ const metadata: Meta = { .first-button { margin-right: auto; } + ${dialogTag}::part(dialog) { + ${x => ` + width:${widths[x.width]}; + height:${heights[x.height]}; + max-height:${maxHeights[x.maxHeight]}; + `} + } <${dialogTag} ${ref('dialogRef')} ?prevent-dismiss="${x => x.preventDismiss}" ?header-hidden="${x => x.headerHidden}" ?footer-hidden="${x => x.footerHidden}" - style="${x => ` - width:${widths[x.width]}; - height:${heights[x.height]}; - max-height:${maxHeights[x.maxHeight]}; - `}" > ${x => x.title} ${x => x.subtitle} From 9a8bcb0266615ce8f13cbb7dbd5b4e85eb12bd3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Mon, 30 Oct 2023 14:19:10 +0200 Subject: [PATCH 06/12] feedback --- .../nimble-components/src/dialog/template.ts | 2 +- .../src/dialog/tests/dialog-matrix.stories.ts | 2 +- .../src/dialog/tests/dialog.stories.ts | 107 ++++-------------- .../src/dialog/tests/types.ts | 4 +- .../src/theme-provider/design-token-names.ts | 1 + .../theme-provider/tests/tokens.stories.ts | 1 + 6 files changed, 30 insertions(+), 87 deletions(-) diff --git a/packages/nimble-components/src/dialog/template.ts b/packages/nimble-components/src/dialog/template.ts index 1cfbc0a82b..d27899a530 100644 --- a/packages/nimble-components/src/dialog/template.ts +++ b/packages/nimble-components/src/dialog/template.ts @@ -6,7 +6,7 @@ export const template = html` diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 67f6e3fcb9..f1b20b4fd9 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -53,7 +53,7 @@ const dialogSizingTestCase = ( tokenNames.bodyFont )}); margin-bottom: 0px;">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}

@@ -219,46 +191,17 @@ const metadata: Meta = { } } }, - width: { - description: widthDescription, - options: [DialogSizeOptions.default, DialogSizeOptions.large], - control: { - type: 'select', - labels: { - [DialogSizeOptions.default]: `Default (${dialogSmallWidth.getValueFor( - document.body - )})`, - [DialogSizeOptions.large]: `Large (${dialogLargeWidth.getValueFor( - document.body - )})` - } - } - }, - height: { - description: heightDescription, - options: [DialogSizeOptions.default, DialogSizeOptions.large], - control: { - type: 'select', - labels: { - [DialogSizeOptions.default]: 'Default (fit-content)', - [DialogSizeOptions.large]: `Large (${dialogLargeHeight.getValueFor( - document.body - )})` - } - } - }, - maxHeight: { - description: maxHeightDescription, - options: [DialogSizeOptions.default, DialogSizeOptions.large], + size: { + description: sizeDescription, + options: [ + DialogSizeOptions.smallGrowable, + DialogSizeOptions.largeFixed + ], control: { type: 'select', labels: { - [DialogSizeOptions.default]: `Default (${dialogSmallMaxHeight.getValueFor( - document.body - )})`, - [DialogSizeOptions.large]: `Large (${dialogLargeHeight.getValueFor( - document.body - )})` + [DialogSizeOptions.smallGrowable]: 'Small growable', + [DialogSizeOptions.largeFixed]: 'Large fixed' } } }, @@ -286,9 +229,7 @@ const metadata: Meta = { includeFooterButtons: true, preventDismiss: false, content: ExampleContentType.shortContent, - width: DialogSizeOptions.default, - height: DialogSizeOptions.default, - maxHeight: DialogSizeOptions.default, + size: DialogSizeOptions.smallGrowable, openAndHandleResult: (dialogRef, textFieldRef) => { void (async () => { const reason = await dialogRef.show(); diff --git a/packages/nimble-components/src/dialog/tests/types.ts b/packages/nimble-components/src/dialog/tests/types.ts index c60e78290b..7c5787c420 100644 --- a/packages/nimble-components/src/dialog/tests/types.ts +++ b/packages/nimble-components/src/dialog/tests/types.ts @@ -6,8 +6,8 @@ export type ExampleContentType = (typeof ExampleContentType)[keyof typeof ExampleContentType]; export const DialogSizeOptions = { - default: 'Default', - large: 'Large' + smallGrowable: 'Small growable', + largeFixed: 'Large growable' } as const; export type DialogSizeOptions = (typeof DialogSizeOptions)[keyof typeof DialogSizeOptions]; diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts index 2f858a569f..6fdca30d7e 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -253,6 +253,7 @@ const tokenSuffixes = [ 'TextTransform', 'FontFamily', 'BoxShadow', + 'MaxHeight', 'Font', 'Size', 'Width', diff --git a/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts b/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts index 2bb56f9115..675dbf4a24 100644 --- a/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts +++ b/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts @@ -109,6 +109,7 @@ const tokenTemplates: { TextTransform: stringValueTemplate, FontFamily: stringValueTemplate, BoxShadow: stringValueTemplate, + MaxHeight: stringValueTemplate, Font: fontTemplate, Size: stringValueTemplate, Width: stringValueTemplate, From e1a908440e682e93dff8e94d57b68a17ad996277 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Tue, 31 Oct 2023 13:06:56 +0200 Subject: [PATCH 07/12] add usage docs --- .../src/dialog/tests/dialog.mdx | 46 +++++++++++++++++++ .../src/dialog/tests/dialog.stories.ts | 3 +- 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 packages/nimble-components/src/dialog/tests/dialog.mdx diff --git a/packages/nimble-components/src/dialog/tests/dialog.mdx b/packages/nimble-components/src/dialog/tests/dialog.mdx new file mode 100644 index 0000000000..cf04065afe --- /dev/null +++ b/packages/nimble-components/src/dialog/tests/dialog.mdx @@ -0,0 +1,46 @@ +import { + DocsStory, + Meta, + Controls, + Stories, + Title, + Description +} from '@storybook/blocks'; +import * as dialogStories from './dialog.stories'; + + + + +<Description of={dialogStories} /> + +<DocsStory of={dialogStories.dialog} expanded={false} /> +<Controls of={dialogStories.dialog} /> + +# Usage Docs + +<br /> + +## Sizing + +The dialog size can be customized by modyfing the width, height and max-height properties of `nimble-dialog::part(control)`. + +By default, the dialog is sized to be small and growable. This should be used for small dialogs like a confirmation dialog. +This is equivalent of using the following style configuration: + +```scss +nimble-dialog::part(control) { + width: $ni-nimble-dialog-small-width; + height: fit-content; + max-height: $ni-nimble-dialog-small-max-height; +} +``` + +For larger dialogs, for example a wizard-like dialog, the following style configuration should be used: + +```scss +nimble-dialog::part(control) { + width: $ni-nimble-dialog-large-width; + height: $ni-nimble-dialog-large-height; + max-height: $ni-nimble-dialog-large-height; +} +``` diff --git a/packages/nimble-components/src/dialog/tests/dialog.stories.ts b/packages/nimble-components/src/dialog/tests/dialog.stories.ts index 64b443bade..58e8073c1e 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog.stories.ts @@ -58,6 +58,8 @@ const content = { const sizeDescription = ` Size of a nimble dialog. + +See the Sizing section below for information on controlling the size of the dialog. `; const widths = { @@ -81,7 +83,6 @@ const maxHeights = { const metadata: Meta<DialogArgs> = { title: 'Components/Dialog', - tags: ['autodocs'], parameters: { docs: { description: { From 8b4c29ecc9beebbecae263856a8987890ea3efaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:15:03 +0200 Subject: [PATCH 08/12] remove margin-bottom --- .../nimble-components/src/dialog/tests/dialog-matrix.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index f1b20b4fd9..f9bf68ef05 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -51,7 +51,7 @@ const dialogSizingTestCase = ( ): ViewTemplate => html` <p style="font: var(${cssPropertyFromTokenName( tokenNames.bodyFont - )}); margin-bottom: 0px;">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> + )});">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> <style> ${dialogTag}::part(control) { ${() => widthStyle}; From eebd05ac2016f43a2d54190536327b3a18c4f8f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:53:20 +0200 Subject: [PATCH 09/12] add padding bottom to p element --- .../nimble-components/src/dialog/tests/dialog-matrix.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index f9bf68ef05..561eba9784 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -51,7 +51,7 @@ const dialogSizingTestCase = ( ): ViewTemplate => html` <p style="font: var(${cssPropertyFromTokenName( tokenNames.bodyFont - )});">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> + )}); padding-bottom: 1000px;">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> <style> ${dialogTag}::part(control) { ${() => widthStyle}; From 6e3ec8c4a6b973ad8d9489b57a64f63b82b62b21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Thu, 2 Nov 2023 10:31:11 +0200 Subject: [PATCH 10/12] feedback --- .../nimble-components/src/dialog/styles.ts | 2 + .../src/dialog/tests/dialog-matrix.stories.ts | 43 +++++++++++-------- .../src/dialog/tests/dialog.mdx | 4 +- .../src/dialog/tests/dialog.stories.ts | 22 +++++----- .../theme-provider/design-token-comments.ts | 3 ++ .../src/theme-provider/design-token-names.ts | 2 + .../src/theme-provider/design-tokens.ts | 6 +++ 7 files changed, 50 insertions(+), 32 deletions(-) diff --git a/packages/nimble-components/src/dialog/styles.ts b/packages/nimble-components/src/dialog/styles.ts index e3a96ff26a..653fcd6c0b 100644 --- a/packages/nimble-components/src/dialog/styles.ts +++ b/packages/nimble-components/src/dialog/styles.ts @@ -14,6 +14,7 @@ import { subtitleFontColor, elevation3BoxShadow, dialogSmallWidth, + dialogSmallHeight, dialogSmallMaxHeight } from '../theme-provider/design-tokens'; import { @@ -35,6 +36,7 @@ export const styles = css` box-shadow: ${elevation3BoxShadow}; padding: 0px; width: ${dialogSmallWidth}; + height: ${dialogSmallHeight}; max-height: ${dialogSmallMaxHeight}; } diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 561eba9784..60bdaab2bb 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -12,12 +12,11 @@ import { backgroundStates } from '../../utilities/tests/states'; import { dialogTag } from '..'; import { buttonTag } from '../../button'; import { - cssPropertyFromTokenName, - tokenNames -} from '../../theme-provider/design-token-names'; -import { + bodyFont, dialogLargeHeight, + dialogLargeMaxHeight, dialogLargeWidth, + dialogSmallHeight, dialogSmallMaxHeight, dialogSmallWidth } from '../../theme-provider/design-tokens'; @@ -49,15 +48,18 @@ const dialogSizingTestCase = ( [heightLabel, heightStyle]: [string, string], [maxHeightLabel, maxHeightStyle]: [string, string] ): ViewTemplate => html` - <p style="font: var(${cssPropertyFromTokenName( - tokenNames.bodyFont - )}); padding-bottom: 1000px;">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> + <p class="spacer">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> <style> ${dialogTag}::part(control) { ${() => widthStyle}; ${() => heightStyle}; ${() => maxHeightStyle}; } + + .spacer { + font: var(${bodyFont.cssCustomProperty}); + padding-bottom: 1000px; + } </style> <${dialogTag}> <span slot="title">This is my dialog's title. It is pretty long.</span> @@ -108,15 +110,20 @@ export const smallDialogSizing: StoryFn = createStory(html` ${createMatrix(dialogSizingTestCase, [ [ [ - `Width ${dialogSmallWidth.getValueFor(document.body)}`, - `width: ${dialogSmallWidth.getValueFor(document.body)}` + 'Width Small Dialog', + `width: var(${dialogSmallWidth.cssCustomProperty})` + ] + ], + [ + [ + 'Height Small Dialog', + `width: var(${dialogSmallHeight.cssCustomProperty})` ] ], - [['Height fit-content', 'height: fit-content']], [ [ - `Max height ${dialogSmallMaxHeight.getValueFor(document.body)}`, - `max-height: ${dialogSmallMaxHeight.getValueFor(document.body)}` + 'Max Height Small Dialog', + `width: var(${dialogSmallMaxHeight.cssCustomProperty})` ] ] ])} @@ -128,20 +135,20 @@ export const largeDialogSizing: StoryFn = createStory(html` ${createMatrix(dialogSizingTestCase, [ [ [ - `Width ${dialogLargeWidth.getValueFor(document.body)}`, - `width: ${dialogLargeWidth.getValueFor(document.body)}` + 'Width Large Dialog', + `width: var(${dialogLargeWidth.cssCustomProperty})` ] ], [ [ - `Height ${dialogLargeHeight.getValueFor(document.body)}`, - `height: ${dialogLargeHeight.getValueFor(document.body)}` + 'Height Large Dialog', + `width: var(${dialogLargeHeight.cssCustomProperty})` ] ], [ [ - `Max height ${dialogLargeHeight.getValueFor(document.body)}`, - `max-height: ${dialogLargeHeight.getValueFor(document.body)}` + 'Max Height Large Dialog', + `width: var(${dialogLargeMaxHeight.cssCustomProperty})` ] ] ])} diff --git a/packages/nimble-components/src/dialog/tests/dialog.mdx b/packages/nimble-components/src/dialog/tests/dialog.mdx index cf04065afe..5cb5ca52ab 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.mdx +++ b/packages/nimble-components/src/dialog/tests/dialog.mdx @@ -30,7 +30,7 @@ This is equivalent of using the following style configuration: ```scss nimble-dialog::part(control) { width: $ni-nimble-dialog-small-width; - height: fit-content; + height: $ni-nimble-dialog-small-height; max-height: $ni-nimble-dialog-small-max-height; } ``` @@ -41,6 +41,6 @@ For larger dialogs, for example a wizard-like dialog, the following style config nimble-dialog::part(control) { width: $ni-nimble-dialog-large-width; height: $ni-nimble-dialog-large-height; - max-height: $ni-nimble-dialog-large-height; + max-height: $ni-nimble-dialog-large-max-height; } ``` diff --git a/packages/nimble-components/src/dialog/tests/dialog.stories.ts b/packages/nimble-components/src/dialog/tests/dialog.stories.ts index 58e8073c1e..7f2d9f7a06 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog.stories.ts @@ -9,7 +9,9 @@ import { buttonTag } from '../../button'; import { checkboxTag } from '../../checkbox'; import { dialogLargeHeight, + dialogLargeMaxHeight, dialogLargeWidth, + dialogSmallHeight, dialogSmallMaxHeight, dialogSmallWidth } from '../../theme-provider/design-tokens'; @@ -59,26 +61,22 @@ const content = { const sizeDescription = ` Size of a nimble dialog. -See the Sizing section below for information on controlling the size of the dialog. +See the Sizing section of the Usage Docs for information on controlling the size of the dialog. `; const widths = { - [DialogSizeOptions.smallGrowable]: dialogSmallWidth.getValueFor( - document.body - ), - [DialogSizeOptions.largeFixed]: dialogLargeWidth.getValueFor(document.body) + [DialogSizeOptions.smallGrowable]: `var(${dialogSmallWidth.cssCustomProperty})`, + [DialogSizeOptions.largeFixed]: `var(${dialogLargeWidth.cssCustomProperty})` } as const; const heights = { - [DialogSizeOptions.smallGrowable]: 'fit-content', - [DialogSizeOptions.largeFixed]: dialogLargeHeight.getValueFor(document.body) + [DialogSizeOptions.smallGrowable]: `var(${dialogSmallHeight.cssCustomProperty})`, + [DialogSizeOptions.largeFixed]: `var(${dialogLargeHeight.cssCustomProperty})` } as const; const maxHeights = { - [DialogSizeOptions.smallGrowable]: dialogSmallMaxHeight.getValueFor( - document.body - ), - [DialogSizeOptions.largeFixed]: dialogLargeHeight.getValueFor(document.body) + [DialogSizeOptions.smallGrowable]: `var(${dialogSmallMaxHeight.cssCustomProperty})`, + [DialogSizeOptions.largeFixed]: `var(${dialogLargeMaxHeight.cssCustomProperty})` } as const; const metadata: Meta<DialogArgs> = { @@ -199,7 +197,7 @@ const metadata: Meta<DialogArgs> = { DialogSizeOptions.largeFixed ], control: { - type: 'select', + type: 'radio', labels: { [DialogSizeOptions.smallGrowable]: 'Small growable', [DialogSizeOptions.largeFixed]: 'Large fixed' diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts index 2b35a225a0..3530fe5a26 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -63,10 +63,13 @@ export const comments: { readonly [key in TokenName]: string | null } = { drawerWidth: 'TODO: delete when able', dialogSmallWidth: 'Standard width for small dialogs like a confirmation dialog.', + dialogSmallHeight: + 'Standard height for small dialogs like a confirmation dialog.', dialogSmallMaxHeight: 'Standard maximum height for small dialogs like a confirmation dialog.', dialogLargeWidth: 'Standard width for large dialogs.', dialogLargeHeight: 'Standard height for large dialogs.', + dialogLargeMaxHeight: 'Standard maximum height for large dialogs.', bannerGapSize: 'Space between stacked banners', spinnerSmallHeight: 'Small height (16px) for a spinner component', spinnerMediumHeight: 'Medium height (32px) for a spinner component', diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts index 6fdca30d7e..24ce825650 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -48,9 +48,11 @@ export const tokenNames: { readonly [key in TokenName]: string } = { groupHeaderTextTransform: 'group-header-text-transform', drawerWidth: 'drawer-width', dialogSmallWidth: 'dialog-small-width', + dialogSmallHeight: 'dialog-small-height', dialogSmallMaxHeight: 'dialog-small-max-height', dialogLargeWidth: 'dialog-large-width', dialogLargeHeight: 'dialog-large-height', + dialogLargeMaxHeight: 'dialog-large-max-height', bannerGapSize: 'banner-gap-size', spinnerSmallHeight: 'spinner-small-height', spinnerMediumHeight: 'spinner-medium-height', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index ff590aa639..ccc762e764 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -309,6 +309,9 @@ export const drawerWidth = DesignToken.create<string>( export const dialogSmallWidth = DesignToken.create<string>( styleNameFromTokenName(tokenNames.dialogSmallWidth) ).withDefault('400px'); +export const dialogSmallHeight = DesignToken.create<string>( + styleNameFromTokenName(tokenNames.dialogSmallHeight) +).withDefault('fit-content'); export const dialogSmallMaxHeight = DesignToken.create<string>( styleNameFromTokenName(tokenNames.dialogSmallMaxHeight) ).withDefault('600px'); @@ -318,6 +321,9 @@ export const dialogLargeWidth = DesignToken.create<string>( export const dialogLargeHeight = DesignToken.create<string>( styleNameFromTokenName(tokenNames.dialogLargeHeight) ).withDefault('680px'); +export const dialogLargeMaxHeight = DesignToken.create<string>( + styleNameFromTokenName(tokenNames.dialogLargeMaxHeight) +).withDefault('680px'); export const bannerGapSize = DesignToken.create<string>( styleNameFromTokenName(tokenNames.bannerGapSize) ).withDefault('1px'); From ce9a2cb89acde9455edd6dab7a6941fdab00f42f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:10:43 +0200 Subject: [PATCH 11/12] feedback --- .../src/dialog/tests/dialog-matrix.stories.ts | 96 ++++++------------- 1 file changed, 30 insertions(+), 66 deletions(-) diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 60bdaab2bb..180e07826c 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -1,13 +1,7 @@ import type { StoryFn, Meta } from '@storybook/html'; import { html, ViewTemplate } from '@microsoft/fast-element'; -import { - createFixedThemeStory, - createStory -} from '../../utilities/tests/storybook'; -import { - createMatrix, - sharedMatrixParameters -} from '../../utilities/tests/matrix'; +import { createFixedThemeStory } from '../../utilities/tests/storybook'; +import { sharedMatrixParameters } from '../../utilities/tests/matrix'; import { backgroundStates } from '../../utilities/tests/states'; import { dialogTag } from '..'; import { buttonTag } from '../../button'; @@ -30,6 +24,18 @@ const metadata: Meta = { export default metadata; +const sizeStates = [ + [ + 'small', + `width: var(${dialogSmallWidth.cssCustomProperty}); height: var(${dialogSmallHeight.cssCustomProperty}); max-height: var(${dialogSmallMaxHeight.cssCustomProperty});` + ], + [ + 'large', + `width: var(${dialogLargeWidth.cssCustomProperty}); height: var(${dialogLargeHeight.cssCustomProperty}); max-height: var(${dialogLargeMaxHeight.cssCustomProperty});` + ] +] as const; +type SizeState = (typeof sizeStates)[number]; + const component = html` <${dialogTag}> <span slot="title">This is my dialog's title. It is pretty long.</span> @@ -43,17 +49,11 @@ const component = html` </${dialogTag}> `; -const dialogSizingTestCase = ( - [widthLabel, widthStyle]: [string, string], - [heightLabel, heightStyle]: [string, string], - [maxHeightLabel, maxHeightStyle]: [string, string] -): ViewTemplate => html` - <p class="spacer">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}</p> +const dialogSizingTestCase = (size: SizeState): ViewTemplate => html` + <p class="spacer">${() => size};</p> <style> ${dialogTag}::part(control) { - ${() => widthStyle}; - ${() => heightStyle}; - ${() => maxHeightStyle}; + ${() => size}; } .spacer { @@ -106,52 +106,16 @@ export const dialogDarkThemeBlackBackground: StoryFn = createFixedThemeStory( dialogDarkThemeBlackBackground.play = playFunction; -export const smallDialogSizing: StoryFn = createStory(html` - ${createMatrix(dialogSizingTestCase, [ - [ - [ - 'Width Small Dialog', - `width: var(${dialogSmallWidth.cssCustomProperty})` - ] - ], - [ - [ - 'Height Small Dialog', - `width: var(${dialogSmallHeight.cssCustomProperty})` - ] - ], - [ - [ - 'Max Height Small Dialog', - `width: var(${dialogSmallMaxHeight.cssCustomProperty})` - ] - ] - ])} -`); - -smallDialogSizing.play = playFunction; - -export const largeDialogSizing: StoryFn = createStory(html` - ${createMatrix(dialogSizingTestCase, [ - [ - [ - 'Width Large Dialog', - `width: var(${dialogLargeWidth.cssCustomProperty})` - ] - ], - [ - [ - 'Height Large Dialog', - `width: var(${dialogLargeHeight.cssCustomProperty})` - ] - ], - [ - [ - 'Max Height Large Dialog', - `width: var(${dialogLargeMaxHeight.cssCustomProperty})` - ] - ] - ])} -`); - -largeDialogSizing.play = playFunction; +export const dialogSmallSize: StoryFn = createFixedThemeStory( + dialogSizingTestCase(sizeStates[0]), + lightThemeWhiteBackground +); + +dialogSmallSize.play = playFunction; + +export const dialogLargeSize: StoryFn = createFixedThemeStory( + dialogSizingTestCase(sizeStates[1]), + lightThemeWhiteBackground +); + +dialogLargeSize.play = playFunction; From 703849d95972aea52714f3d42d7d54c9463ab6c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C8=98tefan=20Ciuprina?= <57374665+stefanc18@users.noreply.github.com> Date: Fri, 3 Nov 2023 15:14:23 +0200 Subject: [PATCH 12/12] fix --- .../src/dialog/tests/dialog-matrix.stories.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts index 180e07826c..d073fb8af8 100644 --- a/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog-matrix.stories.ts @@ -25,14 +25,8 @@ const metadata: Meta = { export default metadata; const sizeStates = [ - [ - 'small', - `width: var(${dialogSmallWidth.cssCustomProperty}); height: var(${dialogSmallHeight.cssCustomProperty}); max-height: var(${dialogSmallMaxHeight.cssCustomProperty});` - ], - [ - 'large', - `width: var(${dialogLargeWidth.cssCustomProperty}); height: var(${dialogLargeHeight.cssCustomProperty}); max-height: var(${dialogLargeMaxHeight.cssCustomProperty});` - ] + `width: var(${dialogSmallWidth.cssCustomProperty}); height: var(${dialogSmallHeight.cssCustomProperty}); max-height: var(${dialogSmallMaxHeight.cssCustomProperty});`, + `width: var(${dialogLargeWidth.cssCustomProperty}); height: var(${dialogLargeHeight.cssCustomProperty}); max-height: var(${dialogLargeMaxHeight.cssCustomProperty});` ] as const; type SizeState = (typeof sizeStates)[number];