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`
${dialogTag}>
`;
+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}>
+ <${buttonTag} slot="footer">OK${buttonTag}>
+ ${dialogTag}>
+`;
+
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
@@ -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';
+
+
+
+
+
+
+
+
+
+# Usage Docs
+
+
+
+## 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 = {
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`
${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}
+ )});">${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}
<${dialogTag}>
This is my dialog's title. It is pretty long.
@@ -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 = {
@@ -199,7 +197,7 @@ const metadata: Meta = {
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(
export const dialogSmallWidth = DesignToken.create(
styleNameFromTokenName(tokenNames.dialogSmallWidth)
).withDefault('400px');
+export const dialogSmallHeight = DesignToken.create(
+ styleNameFromTokenName(tokenNames.dialogSmallHeight)
+).withDefault('fit-content');
export const dialogSmallMaxHeight = DesignToken.create(
styleNameFromTokenName(tokenNames.dialogSmallMaxHeight)
).withDefault('600px');
@@ -318,6 +321,9 @@ export const dialogLargeWidth = DesignToken.create(
export const dialogLargeHeight = DesignToken.create(
styleNameFromTokenName(tokenNames.dialogLargeHeight)
).withDefault('680px');
+export const dialogLargeMaxHeight = DesignToken.create(
+ styleNameFromTokenName(tokenNames.dialogLargeMaxHeight)
+).withDefault('680px');
export const bannerGapSize = DesignToken.create(
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}>
This is my dialog's title. It is pretty long.
@@ -43,17 +49,11 @@ const component = html`
${dialogTag}>
`;
-const dialogSizingTestCase = (
- [widthLabel, widthStyle]: [string, string],
- [heightLabel, heightStyle]: [string, string],
- [maxHeightLabel, maxHeightStyle]: [string, string]
-): ViewTemplate => html`
- ${() => widthLabel}; ${() => heightLabel} ${() => maxHeightLabel}
+const dialogSizingTestCase = (size: SizeState): ViewTemplate => html`
+ ${() => size};