From d55ef870461ce030a075a278d737df8bf35a653c Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Thu, 8 Aug 2024 09:17:11 -0500 Subject: [PATCH 1/8] tree item padding from 10px to 16px (standardPadding) --- packages/nimble-components/src/tree-item/styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index 5be269a6cc..dbf2cb87d2 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -14,7 +14,8 @@ import { iconSize, mediumDelay, bodyDisabledFontColor, - iconColor + iconColor, + standardPadding } from '../theme-provider/design-tokens'; import { groupSelectedAttribute } from '../tree-view/types'; import { DirectionalStyleSheetBehavior } from '../utilities/style/direction'; @@ -119,7 +120,7 @@ export const styles = css` padding: 0px; justify-content: center; align-items: center; - margin-left: 10px; + margin-left: ${standardPadding}; position: absolute; } From e4e193f03e07f3fbc87a71de75c8c1bbf911dd25 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Thu, 8 Aug 2024 09:18:54 -0500 Subject: [PATCH 2/8] Change files --- ...le-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json diff --git a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json new file mode 100644 index 0000000000..cbe2edc8b8 --- /dev/null +++ b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "tree item padding from 10px to 16px (standardPadding)", + "packageName": "@ni/nimble-components", + "email": "1458528+fredvisser@users.noreply.github.com", + "dependentChangeType": "patch" +} From 22a1cfce6fa4c7b33c7b3d4754754442ffbf10bb Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Thu, 8 Aug 2024 10:54:12 -0500 Subject: [PATCH 3/8] change token and shift all content --- packages/nimble-components/src/tree-item/styles.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index dbf2cb87d2..63705a2318 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -14,8 +14,7 @@ import { iconSize, mediumDelay, bodyDisabledFontColor, - iconColor, - standardPadding + iconColor } from '../theme-provider/design-tokens'; import { groupSelectedAttribute } from '../tree-view/types'; import { DirectionalStyleSheetBehavior } from '../utilities/style/direction'; @@ -99,7 +98,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: 10px; + padding-left: ${iconSize}; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} @@ -120,7 +119,7 @@ export const styles = css` padding: 0px; justify-content: center; align-items: center; - margin-left: ${standardPadding}; + margin-left: ${iconSize}; position: absolute; } From 139a35f5af12feedf1610aad5bb7ca5580397ff3 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 9 Aug 2024 08:49:30 -0500 Subject: [PATCH 4/8] update anchor padding --- packages/nimble-components/src/anchor-tree-item/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts index d116bcc1e1..22e58e91f2 100644 --- a/packages/nimble-components/src/anchor-tree-item/styles.ts +++ b/packages/nimble-components/src/anchor-tree-item/styles.ts @@ -86,7 +86,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: 10px; + padding-left: ${iconSize}; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} From f79d82d79d7450d858dc343a2810f147edcadc66 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 9 Aug 2024 13:26:20 -0500 Subject: [PATCH 5/8] tree-view has 4px padding already; 16-4=12px --- ...imble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json | 2 +- packages/nimble-components/src/anchor-tree-item/styles.ts | 2 +- packages/nimble-components/src/tree-item/styles.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json index cbe2edc8b8..e6db7375ca 100644 --- a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json +++ b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "tree item padding from 10px to 16px (standardPadding)", + "comment": "Update tree item padding from 10px to 12px to match visual design", "packageName": "@ni/nimble-components", "email": "1458528+fredvisser@users.noreply.github.com", "dependentChangeType": "patch" diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts index 22e58e91f2..159eaf6c53 100644 --- a/packages/nimble-components/src/anchor-tree-item/styles.ts +++ b/packages/nimble-components/src/anchor-tree-item/styles.ts @@ -86,7 +86,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: ${iconSize}; + padding-left: 12px; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index 63705a2318..f4c32bee43 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -98,7 +98,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: ${iconSize}; + padding-left: 12px; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} @@ -119,7 +119,7 @@ export const styles = css` padding: 0px; justify-content: center; align-items: center; - margin-left: ${iconSize}; + margin-left: 12px; position: absolute; } From 9d888b6d5a5f2748b2c919cd5d175f763e13f082 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Tue, 13 Aug 2024 11:53:39 -0500 Subject: [PATCH 6/8] review feedback --- ...nts-fdc2a0d0-af90-4afa-a47e-334c918f8566.json | 2 +- .../src/theme-provider/design-token-comments.ts | 1 + .../src/theme-provider/design-token-names.ts | 1 + .../src/theme-provider/design-tokens.ts | 3 +++ .../nimble-components/src/tree-item/styles.ts | 7 ++++--- .../src/nimble/tree-view/tree-view.stories.ts | 16 ++++++++++++++-- 6 files changed, 24 insertions(+), 6 deletions(-) diff --git a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json index e6db7375ca..bb9dc1d9dc 100644 --- a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json +++ b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Update tree item padding from 10px to 12px to match visual design", + "comment": "Update tree item padding from 10px to 8px (mediumPadding) to match standard layout requirements, and expose `treeViewLeftMargin` token to allow override for specific use cases.", "packageName": "@ni/nimble-components", "email": "1458528+fredvisser@users.noreply.github.com", "dependentChangeType": "patch" 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 5185869f6a..5bd5243774 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -71,6 +71,7 @@ export const comments: { readonly [key in TokenName]: string } = { dialogLargeMaxHeight: 'Standard maximum height for large dialogs.', menuMinWidth: 'Standard menu min width for menu popup.', bannerGapSize: 'Space between stacked banners', + treeViewLeftMargin: 'Left margin for tree view items', spinnerSmallHeight: 'Small height (16px) for a spinner component', spinnerMediumHeight: 'Medium height (32px) for a spinner component', spinnerLargeHeight: 'Large height (64px) 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 652aab5d25..3d6dbcb487 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -54,6 +54,7 @@ export const tokenNames: { readonly [key in TokenName]: string } = { dialogLargeWidth: 'dialog-large-width', dialogLargeHeight: 'dialog-large-height', dialogLargeMaxHeight: 'dialog-large-max-height', + treeViewLeftMargin: 'tree-view-left-margin', menuMinWidth: 'menu-min-width', bannerGapSize: 'banner-gap-size', spinnerSmallHeight: 'spinner-small-height', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index b917b57659..8e28d2d6c5 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -492,6 +492,9 @@ export const menuMinWidth = DesignToken.create( export const bannerGapSize = DesignToken.create( styleNameFromTokenName(tokenNames.bannerGapSize) ).withDefault('1px'); +export const treeViewLeftMargin = DesignToken.create( + styleNameFromTokenName(tokenNames.treeViewLeftMargin) +).withDefault(mediumPadding); export const spinnerSmallHeight = DesignToken.create( styleNameFromTokenName(tokenNames.spinnerSmallHeight) diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index f4c32bee43..f9c1984f95 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -14,7 +14,8 @@ import { iconSize, mediumDelay, bodyDisabledFontColor, - iconColor + iconColor, + treeViewLeftMargin } from '../theme-provider/design-tokens'; import { groupSelectedAttribute } from '../tree-view/types'; import { DirectionalStyleSheetBehavior } from '../utilities/style/direction'; @@ -98,7 +99,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: 12px; + padding-left: ${treeViewLeftMargin}; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} @@ -119,7 +120,7 @@ export const styles = css` padding: 0px; justify-content: center; align-items: center; - margin-left: 12px; + margin-left: ${treeViewLeftMargin}; position: absolute; } diff --git a/packages/storybook/src/nimble/tree-view/tree-view.stories.ts b/packages/storybook/src/nimble/tree-view/tree-view.stories.ts index 282f27006d..7c184a1fbf 100644 --- a/packages/storybook/src/nimble/tree-view/tree-view.stories.ts +++ b/packages/storybook/src/nimble/tree-view/tree-view.stories.ts @@ -1,6 +1,7 @@ import { html, repeat, when } from '@microsoft/fast-element'; import { withActions } from '@storybook/addon-actions/decorator'; import type { HtmlRenderer, Meta, StoryObj } from '@storybook/html'; +import { treeViewLeftMargin } from '../../../../nimble-components/src/theme-provider/design-tokens'; import { iconCogTag } from '../../../../nimble-components/src/icons/cog'; import { iconDatabaseTag } from '../../../../nimble-components/src/icons/database'; import { treeItemTag } from '../../../../nimble-components/src/tree-item'; @@ -21,6 +22,7 @@ interface TreeArgs { options: ItemArgs[]; expandedChange: undefined; selectedChange: undefined; + leftMargin: string; } interface ItemArgs { @@ -199,11 +201,20 @@ export const multipleTreeItems: StoryObj = { description: 'Event emitted when an item is selected or deselected.', table: { category: apiCategory.events } + }, + leftMargin: { + name: 'Left margin', + description: 'Overrides the default left margin of the tree view.', + table: { category: apiCategory.styles }, + control: { type: 'text' } } }, // prettier-ignore render: createUserSelectedThemeStory(html` - <${treeViewTag} selection-mode="${x => x.selectionMode}"> + <${treeViewTag} + selection-mode="${x => x.selectionMode}" + style="${x => `${treeViewLeftMargin.cssCustomProperty}:${x.leftMargin};`}" + > ${repeat(x => x.options, html` <${treeItemTag} ?expanded="${x => x.expanded}" value="${x => x.value}"> ${when(x => x.icon, html`<${iconDatabaseTag} slot="start">`)} @@ -263,6 +274,7 @@ export const multipleTreeItems: StoryObj = { selected: false, expanded: false } - ] + ], + leftMargin: '8px' } }; From c9cc5cb0fccfebee1a2ce1f18c708663c1c59099 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Tue, 13 Aug 2024 14:06:01 -0500 Subject: [PATCH 7/8] update anchor-tree-item as well --- packages/nimble-components/src/anchor-tree-item/styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts index 159eaf6c53..14cec9279b 100644 --- a/packages/nimble-components/src/anchor-tree-item/styles.ts +++ b/packages/nimble-components/src/anchor-tree-item/styles.ts @@ -12,7 +12,8 @@ import { fillSelectedColor, bodyFontSize, bodyDisabledFontColor, - iconColor + iconColor, + treeViewLeftMargin } from '../theme-provider/design-tokens'; import { focusVisible } from '../utilities/style/focus'; import { userSelectNone } from '../utilities/style/user-select'; @@ -86,7 +87,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: 12px; + padding-left: ${treeViewLeftMargin}; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} From 7b0d8aca9337bbb5d7a1da3d53a2e4cdbab4eb17 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Tue, 13 Aug 2024 14:41:35 -0500 Subject: [PATCH 8/8] Update token name and fix MDX link formatting --- ...mponents-fdc2a0d0-af90-4afa-a47e-334c918f8566.json | 2 +- .../nimble-components/src/anchor-tree-item/styles.ts | 4 ++-- .../src/theme-provider/design-token-comments.ts | 2 +- .../src/theme-provider/design-token-names.ts | 2 +- .../src/theme-provider/design-tokens.ts | 4 ++-- packages/nimble-components/src/tree-item/styles.ts | 6 +++--- .../nimble/label-provider/base/label-providers.mdx | 5 +---- .../storybook/src/nimble/theme-provider/color.mdx | 11 +++-------- .../storybook/src/nimble/theme-provider/tokens.mdx | 5 +---- .../src/nimble/tree-view/tree-view.stories.ts | 4 ++-- 10 files changed, 17 insertions(+), 28 deletions(-) diff --git a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json index bb9dc1d9dc..a1b8b90f68 100644 --- a/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json +++ b/change/@ni-nimble-components-fdc2a0d0-af90-4afa-a47e-334c918f8566.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Update tree item padding from 10px to 8px (mediumPadding) to match standard layout requirements, and expose `treeViewLeftMargin` token to allow override for specific use cases.", + "comment": "Update tree item padding from 10px to 8px (mediumPadding) to match standard layout requirements, and expose `treeViewPaddingLeftSize` token to allow override for specific use cases.", "packageName": "@ni/nimble-components", "email": "1458528+fredvisser@users.noreply.github.com", "dependentChangeType": "patch" diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts index 14cec9279b..e3a07f5027 100644 --- a/packages/nimble-components/src/anchor-tree-item/styles.ts +++ b/packages/nimble-components/src/anchor-tree-item/styles.ts @@ -13,7 +13,7 @@ import { bodyFontSize, bodyDisabledFontColor, iconColor, - treeViewLeftMargin + treeViewPaddingLeftSize } from '../theme-provider/design-tokens'; import { focusVisible } from '../utilities/style/focus'; import { userSelectNone } from '../utilities/style/user-select'; @@ -87,7 +87,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: ${treeViewLeftMargin}; + padding-left: ${treeViewPaddingLeftSize}; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} 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 5bd5243774..040b533d3d 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -71,7 +71,7 @@ export const comments: { readonly [key in TokenName]: string } = { dialogLargeMaxHeight: 'Standard maximum height for large dialogs.', menuMinWidth: 'Standard menu min width for menu popup.', bannerGapSize: 'Space between stacked banners', - treeViewLeftMargin: 'Left margin for tree view items', + treeViewPaddingLeftSize: 'Left margin for tree view items', spinnerSmallHeight: 'Small height (16px) for a spinner component', spinnerMediumHeight: 'Medium height (32px) for a spinner component', spinnerLargeHeight: 'Large height (64px) 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 3d6dbcb487..4c2efd9a68 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -54,7 +54,7 @@ export const tokenNames: { readonly [key in TokenName]: string } = { dialogLargeWidth: 'dialog-large-width', dialogLargeHeight: 'dialog-large-height', dialogLargeMaxHeight: 'dialog-large-max-height', - treeViewLeftMargin: 'tree-view-left-margin', + treeViewPaddingLeftSize: 'tree-view-padding-left-size', menuMinWidth: 'menu-min-width', bannerGapSize: 'banner-gap-size', spinnerSmallHeight: 'spinner-small-height', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index 8e28d2d6c5..ba7103c29c 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -492,8 +492,8 @@ export const menuMinWidth = DesignToken.create( export const bannerGapSize = DesignToken.create( styleNameFromTokenName(tokenNames.bannerGapSize) ).withDefault('1px'); -export const treeViewLeftMargin = DesignToken.create( - styleNameFromTokenName(tokenNames.treeViewLeftMargin) +export const treeViewPaddingLeftSize = DesignToken.create( + styleNameFromTokenName(tokenNames.treeViewPaddingLeftSize) ).withDefault(mediumPadding); export const spinnerSmallHeight = DesignToken.create( diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index f9c1984f95..74d7d8ff36 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -15,7 +15,7 @@ import { mediumDelay, bodyDisabledFontColor, iconColor, - treeViewLeftMargin + treeViewPaddingLeftSize } from '../theme-provider/design-tokens'; import { groupSelectedAttribute } from '../tree-view/types'; import { DirectionalStyleSheetBehavior } from '../utilities/style/direction'; @@ -99,7 +99,7 @@ export const styles = css` align-items: center; white-space: nowrap; width: 100%; - padding-left: ${treeViewLeftMargin}; + padding-left: ${treeViewPaddingLeftSize}; font: inherit; font-size: ${bodyFontSize}; ${userSelectNone} @@ -120,7 +120,7 @@ export const styles = css` padding: 0px; justify-content: center; align-items: center; - margin-left: ${treeViewLeftMargin}; + margin-left: ${treeViewPaddingLeftSize}; position: absolute; } diff --git a/packages/storybook/src/nimble/label-provider/base/label-providers.mdx b/packages/storybook/src/nimble/label-provider/base/label-providers.mdx index 87e9765083..8193cb064d 100644 --- a/packages/storybook/src/nimble/label-provider/base/label-providers.mdx +++ b/packages/storybook/src/nimble/label-provider/base/label-providers.mdx @@ -13,10 +13,7 @@ provided only in English. An application can provide localized versions of these strings by using design tokens set on label provider elements. See the - - - nimble-components - +[nimble-components](https://github.com/ni/nimble/tree/main/packages/nimble-components) readme and contributing docs for more information. ### Angular diff --git a/packages/storybook/src/nimble/theme-provider/color.mdx b/packages/storybook/src/nimble/theme-provider/color.mdx index 9814609d22..17ed4a3ad4 100644 --- a/packages/storybook/src/nimble/theme-provider/color.mdx +++ b/packages/storybook/src/nimble/theme-provider/color.mdx @@ -5,15 +5,10 @@ import * as colorStories from './color.stories'; Base colors are defined by the visual design team, managed in the - -<a href="https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/89e665af-d24c-4f5e-b547-294caeccd29a"> - Nimble_Component -</a> -Adobe XD spec, and exported in `nimble-tokens`. Most client applications +[Nimble_Component](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/89e665af-d24c-4f5e-b547-294caeccd29a) +Adobe Adobe XD spec, and exported in `nimble-tokens`. Most client applications shouldn't use these tokens directly. See the -<a href="https://github.com/ni/nimble/tree/main/packages/nimble-tokens"> - nimble-token -</a> +[nimble-token](https://github.com/ni/nimble/tree/main/packages/nimble-tokens) readme for more information. <Canvas of={colorStories.baseColors} /> diff --git a/packages/storybook/src/nimble/theme-provider/tokens.mdx b/packages/storybook/src/nimble/theme-provider/tokens.mdx index 7cbc8bbf02..7dcaf030d9 100644 --- a/packages/storybook/src/nimble/theme-provider/tokens.mdx +++ b/packages/storybook/src/nimble/theme-provider/tokens.mdx @@ -5,10 +5,7 @@ import * as tokensStories from './tokens.stories'; <Title of={tokensStories} /> Design Tokens to use in applications. See the - -<a href="https://github.com/ni/nimble/tree/main/packages/nimble-components"> - nimble-components -</a> +[nimble-components](https://github.com/ni/nimble/tree/main/packages/nimble-components) readme for more information. <Canvas of={tokensStories.themeAwareTokens} /> diff --git a/packages/storybook/src/nimble/tree-view/tree-view.stories.ts b/packages/storybook/src/nimble/tree-view/tree-view.stories.ts index 7c184a1fbf..08a4746b3d 100644 --- a/packages/storybook/src/nimble/tree-view/tree-view.stories.ts +++ b/packages/storybook/src/nimble/tree-view/tree-view.stories.ts @@ -1,7 +1,7 @@ import { html, repeat, when } from '@microsoft/fast-element'; import { withActions } from '@storybook/addon-actions/decorator'; import type { HtmlRenderer, Meta, StoryObj } from '@storybook/html'; -import { treeViewLeftMargin } from '../../../../nimble-components/src/theme-provider/design-tokens'; +import { treeViewPaddingLeftSize } from '../../../../nimble-components/src/theme-provider/design-tokens'; import { iconCogTag } from '../../../../nimble-components/src/icons/cog'; import { iconDatabaseTag } from '../../../../nimble-components/src/icons/database'; import { treeItemTag } from '../../../../nimble-components/src/tree-item'; @@ -213,7 +213,7 @@ export const multipleTreeItems: StoryObj<TreeArgs> = { render: createUserSelectedThemeStory(html` <${treeViewTag} selection-mode="${x => x.selectionMode}" - style="${x => `${treeViewLeftMargin.cssCustomProperty}:${x.leftMargin};`}" + style="${x => `${treeViewPaddingLeftSize.cssCustomProperty}:${x.leftMargin};`}" > ${repeat(x => x.options, html<ItemArgs>` <${treeItemTag} ?expanded="${x => x.expanded}" value="${x => x.value}">