From 1afce1d97c8d6d91841d4eb9aa13c5074deb6e1b Mon Sep 17 00:00:00 2001 From: Jesse Attas Date: Mon, 12 Jun 2023 14:01:40 -0500 Subject: [PATCH] Follow new guidance for incubating components and add sections to Storybook (#1292) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## 🤨 Rationale Following the guidance agreed upon in #1249, we want to promote the "Incubating" terminology to describe components that aren't ready for general use. ## 👩‍💻 Implementation 1. Add sections to Storybook for **Incubating** and **Components**. The latter was proposed in #1230 so it seems like a good direction for multiple reasons. 2. Add MDX docs for the Incubating section. 3. Add a link to the corresponding component issue from incubating stories. Update tooltip to use standard incubating header. 4. Rename WaferMap stories to "Wafer Map" to match other components which English naming not code naming (and since this change was already going to cause a Chromatic diff) ## 🧪 Testing ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj --- ...-581ba49b-79b9-4fea-97b9-6f67054df19c.json | 7 +++++++ .../nimble-components/.storybook/preview.js | 8 +++++++- .../nimble-components/docs/incubating.mdx | 19 +++++++++++++++++++ .../tests/anchor-button.stories.ts | 2 +- .../anchor-tabs/tests/anchor-tabs.stories.ts | 2 +- .../src/anchor/tests/anchor.stories.ts | 2 +- .../src/banner/tests/banner.stories.ts | 2 +- .../breadcrumb/tests/breadcrumb.stories.ts | 2 +- .../src/button/tests/button.stories.ts | 2 +- .../card-button/tests/card-button.stories.ts | 2 +- .../src/checkbox/tests/checkbox.stories.ts | 2 +- .../src/combobox/tests/combobox.stories.ts | 2 +- .../src/dialog/tests/dialog.stories.ts | 2 +- .../src/drawer/tests/drawer.stories.ts | 2 +- .../src/icon-base/tests/icons.stories.ts | 2 +- .../menu-button/tests/menu-button.stories.ts | 2 +- .../src/menu/tests/menu.stories.ts | 2 +- .../tests/number-field.stories.ts | 2 +- .../radio-group/tests/radio-group.stories.ts | 2 +- .../src/select/tests/select.stories.ts | 2 +- .../src/spinner/tests/spinner.stories.ts | 2 +- .../src/switch/tests/switch.stories.ts | 2 +- .../tests/table-column-anchor.stories.ts | 6 +++--- .../base/tests/table-column.stories.ts | 18 +++++++++--------- .../text/tests/table-column-text.stories.ts | 9 ++++++--- .../src/table/tests/table.stories.ts | 6 +++--- .../src/tabs/tests/tabs.stories.ts | 2 +- .../src/text-area/tests/text-area.stories.ts | 2 +- .../text-field/tests/text-field.stories.ts | 2 +- .../tests/toggle-button.stories.ts | 2 +- .../src/toolbar/tests/toolbar.stories.ts | 2 +- .../src/tooltip/tests/tooltip.stories.ts | 19 +++++++++---------- .../src/tree-view/tests/tree-view.stories.ts | 2 +- .../src/utilities/tests/storybook.ts | 15 ++++++++++----- .../tests/wafer-map-matrix.stories.ts | 2 +- .../src/wafer-map/tests/wafer-map.stories.ts | 9 ++++++--- 36 files changed, 105 insertions(+), 63 deletions(-) create mode 100644 change/@ni-nimble-components-581ba49b-79b9-4fea-97b9-6f67054df19c.json create mode 100644 packages/nimble-components/docs/incubating.mdx diff --git a/change/@ni-nimble-components-581ba49b-79b9-4fea-97b9-6f67054df19c.json b/change/@ni-nimble-components-581ba49b-79b9-4fea-97b9-6f67054df19c.json new file mode 100644 index 0000000000..a94a70b554 --- /dev/null +++ b/change/@ni-nimble-components-581ba49b-79b9-4fea-97b9-6f67054df19c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Reorganize Storybook to support Incubating components", + "packageName": "@ni/nimble-components", + "email": "jattasNI@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/nimble-components/.storybook/preview.js b/packages/nimble-components/.storybook/preview.js index 0df1fb6834..ab10b06cc5 100644 --- a/packages/nimble-components/.storybook/preview.js +++ b/packages/nimble-components/.storybook/preview.js @@ -15,7 +15,13 @@ export const parameters = { options: { storySort: { method: 'alphabetical', - order: ['Getting Started'] + order: [ + 'Getting Started', + 'Components', + 'Incubating', + 'Tokens', + 'Tests' + ] } }, controls: { diff --git a/packages/nimble-components/docs/incubating.mdx b/packages/nimble-components/docs/incubating.mdx new file mode 100644 index 0000000000..ad7f692036 --- /dev/null +++ b/packages/nimble-components/docs/incubating.mdx @@ -0,0 +1,19 @@ +import { Story, Meta } from '@storybook/addon-docs'; + + + +# Incubating components + +Components are marked as **Incubating** when they're not yet ready for general use. +A component could be in this state if any of the following are true: + +- It is still in development. +- It is currently experimental or application-specific and hasn't yet been generalized for broader use. +- It is missing important features like interaction design, visual design, accessibility, or framework integration. + +See the issue linked from each component's documentation for more information about what it's missing. + +## Using incubating components + +Please talk to the Nimble team before using incubating components in production. +Note that incubating components may make breaking changes without a corresponding `major` version bump. diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button.stories.ts index 247c8b78d5..e810aa5a62 100644 --- a/packages/nimble-components/src/anchor-button/tests/anchor-button.stories.ts +++ b/packages/nimble-components/src/anchor-button/tests/anchor-button.stories.ts @@ -31,7 +31,7 @@ interface AnchorButtonArgs { } const metadata: Meta = { - title: 'Anchor Button', + title: 'Components/Anchor Button', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.stories.ts b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.stories.ts index 8fa7f36a7d..0b74f85e96 100644 --- a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.stories.ts +++ b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.stories.ts @@ -19,7 +19,7 @@ represents a different URL to navigate to. Use the standard tabs component when tab panels hosted on the same page.`; const metadata: Meta = { - title: 'Anchor Tabs', + title: 'Components/Anchor Tabs', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/anchor/tests/anchor.stories.ts b/packages/nimble-components/src/anchor/tests/anchor.stories.ts index 2a26ef7365..2748e04974 100644 --- a/packages/nimble-components/src/anchor/tests/anchor.stories.ts +++ b/packages/nimble-components/src/anchor/tests/anchor.stories.ts @@ -19,7 +19,7 @@ interface AnchorArgs { } const metadata: Meta = { - title: 'Anchor', + title: 'Components/Anchor', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/banner/tests/banner.stories.ts b/packages/nimble-components/src/banner/tests/banner.stories.ts index 79907b90ef..5e2dba711c 100644 --- a/packages/nimble-components/src/banner/tests/banner.stories.ts +++ b/packages/nimble-components/src/banner/tests/banner.stories.ts @@ -41,7 +41,7 @@ should be spaced apart using the \`${bannerGapSize.cssCustomProperty}\` design t `; const metadata: Meta = { - title: 'Banner', + title: 'Components/Banner', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/breadcrumb/tests/breadcrumb.stories.ts b/packages/nimble-components/src/breadcrumb/tests/breadcrumb.stories.ts index 7e47532953..f6f0ad7c86 100644 --- a/packages/nimble-components/src/breadcrumb/tests/breadcrumb.stories.ts +++ b/packages/nimble-components/src/breadcrumb/tests/breadcrumb.stories.ts @@ -28,7 +28,7 @@ See the [nimble-angular Readme](https://github.com/ni/nimble/blob/main/angular-w for information on using this component in Angular with RouterLink directives.`; const metadata: Meta = { - title: 'Breadcrumb', + title: 'Components/Breadcrumb', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/button/tests/button.stories.ts b/packages/nimble-components/src/button/tests/button.stories.ts index 7c4dc0a549..1bb8562d20 100644 --- a/packages/nimble-components/src/button/tests/button.stories.ts +++ b/packages/nimble-components/src/button/tests/button.stories.ts @@ -31,7 +31,7 @@ a dialog is to append "…" (ellipsis) to the button label, e.g., "Save as…". If you want a button that triggers navigation to a URL, use the \`nimble-anchor-button\` instead.`; const metadata: Meta = { - title: 'Button', + title: 'Components/Button', decorators: [withActions], parameters: { docs: { diff --git a/packages/nimble-components/src/card-button/tests/card-button.stories.ts b/packages/nimble-components/src/card-button/tests/card-button.stories.ts index 4fe591f924..65bbc05a3f 100644 --- a/packages/nimble-components/src/card-button/tests/card-button.stories.ts +++ b/packages/nimble-components/src/card-button/tests/card-button.stories.ts @@ -17,7 +17,7 @@ application. The \`nimble-card-button\` is intended to be larger and more promin Note: The styling for the "Color" theme is not complete.`; const metadata: Meta = { - title: 'Card Button', + title: 'Components/Card Button', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts b/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts index 4b8d1615c5..d672b9708e 100644 --- a/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts +++ b/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts @@ -12,7 +12,7 @@ interface CheckboxArgs { } const metadata: Meta = { - title: 'Checkbox', + title: 'Components/Checkbox', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/combobox/tests/combobox.stories.ts b/packages/nimble-components/src/combobox/tests/combobox.stories.ts index d98eedb6f3..5ef30390db 100644 --- a/packages/nimble-components/src/combobox/tests/combobox.stories.ts +++ b/packages/nimble-components/src/combobox/tests/combobox.stories.ts @@ -31,7 +31,7 @@ interface OptionArgs { } const metadata: Meta = { - title: 'Combobox', + title: 'Components/Combobox', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/dialog/tests/dialog.stories.ts b/packages/nimble-components/src/dialog/tests/dialog.stories.ts index e69019580d..13d5b90a73 100644 --- a/packages/nimble-components/src/dialog/tests/dialog.stories.ts +++ b/packages/nimble-components/src/dialog/tests/dialog.stories.ts @@ -50,7 +50,7 @@ const content = { } as const; const metadata: Meta = { - title: 'Dialog', + title: 'Components/Dialog', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/drawer/tests/drawer.stories.ts b/packages/nimble-components/src/drawer/tests/drawer.stories.ts index 7bdea8d6ae..b8256ba273 100644 --- a/packages/nimble-components/src/drawer/tests/drawer.stories.ts +++ b/packages/nimble-components/src/drawer/tests/drawer.stories.ts @@ -114,7 +114,7 @@ ${overrideWarning('Drawer Width', widthDescriptionOverride)} `; const metadata: Meta = { - title: 'Drawer', + title: 'Components/Drawer', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/icon-base/tests/icons.stories.ts b/packages/nimble-components/src/icon-base/tests/icons.stories.ts index bfe3ac091b..dae3c6ebb0 100644 --- a/packages/nimble-components/src/icon-base/tests/icons.stories.ts +++ b/packages/nimble-components/src/icon-base/tests/icons.stories.ts @@ -20,7 +20,7 @@ interface IconArgs { } const metadata: Meta = { - title: 'Icons', + title: 'Components/Icons', tags: ['autodocs'] }; diff --git a/packages/nimble-components/src/menu-button/tests/menu-button.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button.stories.ts index e0540d194d..94b6f29687 100644 --- a/packages/nimble-components/src/menu-button/tests/menu-button.stories.ts +++ b/packages/nimble-components/src/menu-button/tests/menu-button.stories.ts @@ -32,7 +32,7 @@ This icon will be hidden when \`contentHidden\` is set to \`true\` .`; const metadata: Meta = { - title: 'Menu Button', + title: 'Components/Menu Button', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/menu/tests/menu.stories.ts b/packages/nimble-components/src/menu/tests/menu.stories.ts index bb7ab255d4..54c6d1bd18 100644 --- a/packages/nimble-components/src/menu/tests/menu.stories.ts +++ b/packages/nimble-components/src/menu/tests/menu.stories.ts @@ -39,7 +39,7 @@ The \`nimble-menu\` supports several child elements including \`
\`, \`\` or \`\`.`; const metadata: Meta = { - title: 'Menu', + title: 'Components/Menu', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/number-field/tests/number-field.stories.ts b/packages/nimble-components/src/number-field/tests/number-field.stories.ts index a571a84add..9fbfe9c48e 100644 --- a/packages/nimble-components/src/number-field/tests/number-field.stories.ts +++ b/packages/nimble-components/src/number-field/tests/number-field.stories.ts @@ -18,7 +18,7 @@ interface NumberFieldArgs { } const metadata: Meta = { - title: 'Number Field', + title: 'Components/Number Field', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/radio-group/tests/radio-group.stories.ts b/packages/nimble-components/src/radio-group/tests/radio-group.stories.ts index eba0d8461c..e7023df7ab 100644 --- a/packages/nimble-components/src/radio-group/tests/radio-group.stories.ts +++ b/packages/nimble-components/src/radio-group/tests/radio-group.stories.ts @@ -15,7 +15,7 @@ interface RadioGroupArgs { } const metadata: Meta = { - title: 'Radio Group', + title: 'Components/Radio Group', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/select/tests/select.stories.ts b/packages/nimble-components/src/select/tests/select.stories.ts index 2a6142dbd1..fb573a6892 100644 --- a/packages/nimble-components/src/select/tests/select.stories.ts +++ b/packages/nimble-components/src/select/tests/select.stories.ts @@ -25,7 +25,7 @@ interface OptionArgs { } const metadata: Meta = { - title: 'Select', + title: 'Components/Select', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/spinner/tests/spinner.stories.ts b/packages/nimble-components/src/spinner/tests/spinner.stories.ts index 9ec827f75b..a9b415bfda 100644 --- a/packages/nimble-components/src/spinner/tests/spinner.stories.ts +++ b/packages/nimble-components/src/spinner/tests/spinner.stories.ts @@ -29,7 +29,7 @@ const overviewText = '

The `nimble-spinner` is an animating indicator that can + '

See the `size` argument details for information on customizing the spinner size.

'; const metadata: Meta = { - title: 'Spinner', + title: 'Components/Spinner', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/switch/tests/switch.stories.ts b/packages/nimble-components/src/switch/tests/switch.stories.ts index 927ff01946..b78d58c4f7 100644 --- a/packages/nimble-components/src/switch/tests/switch.stories.ts +++ b/packages/nimble-components/src/switch/tests/switch.stories.ts @@ -20,7 +20,7 @@ be checked or not checked and can optionally also allow for a partially checked pressed or not pressed and can optionally allow for a partially pressed state.`; const metadata: Meta = { - title: 'Switch', + title: 'Components/Switch', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/table-column/anchor/tests/table-column-anchor.stories.ts b/packages/nimble-components/src/table-column/anchor/tests/table-column-anchor.stories.ts index f7c979dce3..0ad78d95b9 100644 --- a/packages/nimble-components/src/table-column/anchor/tests/table-column-anchor.stories.ts +++ b/packages/nimble-components/src/table-column/anchor/tests/table-column-anchor.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withActions } from '@storybook/addon-actions/decorator'; import { createUserSelectedThemeStory, - usageWarning + incubatingWarning } from '../../../utilities/tests/storybook'; import { tableTag } from '../../../table'; import { tableColumnAnchorTag } from '..'; @@ -21,7 +21,7 @@ See the **Table** page for information about configuring the table itself and th information about common column configuration.`; const metadata: Meta = { - title: 'Table Column Types', + title: 'Incubating/Table Column Types', decorators: [withActions], tags: ['autodocs'], parameters: { @@ -106,7 +106,7 @@ export const anchorColumn: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" diff --git a/packages/nimble-components/src/table-column/base/tests/table-column.stories.ts b/packages/nimble-components/src/table-column/base/tests/table-column.stories.ts index c6d0bb5e85..1626aaa89e 100644 --- a/packages/nimble-components/src/table-column/base/tests/table-column.stories.ts +++ b/packages/nimble-components/src/table-column/base/tests/table-column.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withActions } from '@storybook/addon-actions/decorator'; import { createUserSelectedThemeStory, - usageWarning + incubatingWarning } from '../../../utilities/tests/storybook'; import { ExampleColumnFractionalWidthType, @@ -81,7 +81,7 @@ See **Table** for information about configuring the table itself and **Table Col information about specific types of column.`; const metadata: Meta = { - title: 'Table Column Configuration', + title: 'Incubating/Table Column Configuration', decorators: [withActions], parameters: { docs: { @@ -95,7 +95,7 @@ const metadata: Meta = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" @@ -169,7 +169,7 @@ export const columnOrder: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" @@ -242,7 +242,7 @@ export const headerContent: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" @@ -301,7 +301,7 @@ export const commonAttributes: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" @@ -417,7 +417,7 @@ export const sorting: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" @@ -604,7 +604,7 @@ export const grouping: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" @@ -728,7 +728,7 @@ export const fractionalWidthColumn: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" diff --git a/packages/nimble-components/src/table-column/text/tests/table-column-text.stories.ts b/packages/nimble-components/src/table-column/text/tests/table-column-text.stories.ts index 6f082e2b9d..41430a59e1 100644 --- a/packages/nimble-components/src/table-column/text/tests/table-column-text.stories.ts +++ b/packages/nimble-components/src/table-column/text/tests/table-column-text.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withActions } from '@storybook/addon-actions/decorator'; import { createUserSelectedThemeStory, - usageWarning + incubatingWarning } from '../../../utilities/tests/storybook'; import { tableTag } from '../../../table'; import { tableColumnTextTag } from '..'; @@ -45,7 +45,7 @@ See the **Table** page for information about configuring the table itself and th information about common column configuration.`; const metadata: Meta = { - title: 'Table Column Types', + title: 'Incubating/Table Column Types', decorators: [withActions], parameters: { docs: { @@ -92,7 +92,10 @@ export const textColumn: StoryObj = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ + componentName: 'table', + statusLink: 'https://github.com/orgs/ni/projects/7/views/21' + })} <${tableTag} ${ref('tableRef')} data-unused="${x => x.updateData(x)}" diff --git a/packages/nimble-components/src/table/tests/table.stories.ts b/packages/nimble-components/src/table/tests/table.stories.ts index b41ed8e864..b30d3afb51 100644 --- a/packages/nimble-components/src/table/tests/table.stories.ts +++ b/packages/nimble-components/src/table/tests/table.stories.ts @@ -3,7 +3,7 @@ import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory, - usageWarning + incubatingWarning } from '../../utilities/tests/storybook'; import { ExampleDataType } from './types'; import { Table, tableTag } from '..'; @@ -120,7 +120,7 @@ If a record does not exist in the table's data, it will not be selected. If mult mode is \`single\`, only the first record that exists in the table's data will become selected.`; const metadata: Meta = { - title: 'Table', + title: 'Incubating/Table', tags: ['autodocs'], decorators: [withActions], parameters: { @@ -140,7 +140,7 @@ const metadata: Meta = { }, // prettier-ignore render: createUserSelectedThemeStory(html` - ${usageWarning('table')} + ${incubatingWarning({ componentName: 'table', statusLink: 'https://github.com/orgs/ni/projects/7/views/21' })} <${tableTag} ${ref('tableRef')} selection-mode="${x => TableRowSelectionMode[x.selectionMode]}" diff --git a/packages/nimble-components/src/tabs/tests/tabs.stories.ts b/packages/nimble-components/src/tabs/tests/tabs.stories.ts index bd2ec9c3a1..762cc9f84d 100644 --- a/packages/nimble-components/src/tabs/tests/tabs.stories.ts +++ b/packages/nimble-components/src/tabs/tests/tabs.stories.ts @@ -25,7 +25,7 @@ horizontal scrolling. Content may be any height; the tab panel will display a ve If you want a sequence of tabs that navigate to different URLs, use the Anchor Tabs component instead.`; const metadata: Meta = { - title: 'Tabs', + title: 'Components/Tabs', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/text-area/tests/text-area.stories.ts b/packages/nimble-components/src/text-area/tests/text-area.stories.ts index bc06c59bdc..591342a48b 100644 --- a/packages/nimble-components/src/text-area/tests/text-area.stories.ts +++ b/packages/nimble-components/src/text-area/tests/text-area.stories.ts @@ -29,7 +29,7 @@ If you configure your text area to be resizable (with the \`resize\` attribute) `; const metadata: Meta = { - title: 'Text Area', + title: 'Components/Text Area', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/text-field/tests/text-field.stories.ts b/packages/nimble-components/src/text-field/tests/text-field.stories.ts index 93c440ad36..5cc17ebfc9 100644 --- a/packages/nimble-components/src/text-field/tests/text-field.stories.ts +++ b/packages/nimble-components/src/text-field/tests/text-field.stories.ts @@ -32,7 +32,7 @@ consuming application must implement that functionality. `; const metadata: Meta = { - title: 'Text Field', + title: 'Components/Text Field', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index 2587635766..565c13a777 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -29,7 +29,7 @@ not change when its state changes. In this example, when the pressed state is tr screen reader would say something like "Mute toggle button pressed".`; const metadata: Meta = { - title: 'Toggle Button', + title: 'Components/Toggle Button', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/toolbar/tests/toolbar.stories.ts b/packages/nimble-components/src/toolbar/tests/toolbar.stories.ts index 78f4bf93e9..16451c967f 100644 --- a/packages/nimble-components/src/toolbar/tests/toolbar.stories.ts +++ b/packages/nimble-components/src/toolbar/tests/toolbar.stories.ts @@ -24,7 +24,7 @@ ${toolbarTag}::part(positioning-region) { \``; const metadata: Meta = { - title: 'Toolbar', + title: 'Components/Toolbar', tags: ['autodocs'], parameters: { docs: { diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts index 97a8994630..3d6f289f0e 100644 --- a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts +++ b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts @@ -2,7 +2,10 @@ import { html, ref } from '@microsoft/fast-element'; import type { AutoUpdateMode } from '@microsoft/fast-foundation'; import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; -import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; +import { + createUserSelectedThemeStory, + incubatingWarning +} from '../../utilities/tests/storybook'; import { borderColor, bodyFont, @@ -91,7 +94,7 @@ const complexContent = html` `; const metadata: Meta = { - title: 'Tooltip', + title: 'Incubating/Tooltip', tags: ['autodocs'], decorators: [withActions], parameters: { @@ -106,10 +109,10 @@ const metadata: Meta = { } }, render: createUserSelectedThemeStory(html` -
- WARNING - The tooltip is still in development and considered - experimental. It is not recommended for application use. -
+ ${incubatingWarning({ + componentName: 'tooltip', + statusLink: 'https://github.com/ni/nimble/issues/309' + })}
Hover here to see ${x => x.content} tooltip
@@ -131,10 +134,6 @@ const metadata: Meta = { width: 80px; height: 60px; } - #usage-warning { - color: red; - font: var(${bodyFont.cssCustomProperty}); - } `), args: { diff --git a/packages/nimble-components/src/tree-view/tests/tree-view.stories.ts b/packages/nimble-components/src/tree-view/tests/tree-view.stories.ts index aa8f694b8c..51eac60ba7 100644 --- a/packages/nimble-components/src/tree-view/tests/tree-view.stories.ts +++ b/packages/nimble-components/src/tree-view/tests/tree-view.stories.ts @@ -53,7 +53,7 @@ In addition to \`href\`, all other attributes of \`\` are also supported, e.g `; const metadata: Meta = { - title: 'Tree View', + title: 'Components/Tree View', tags: ['autodocs'], decorators: [withActions], parameters: { diff --git a/packages/nimble-components/src/utilities/tests/storybook.ts b/packages/nimble-components/src/utilities/tests/storybook.ts index a8429bec16..235c0871b1 100644 --- a/packages/nimble-components/src/utilities/tests/storybook.ts +++ b/packages/nimble-components/src/utilities/tests/storybook.ts @@ -146,16 +146,21 @@ Overrides of properties are not recommended and are not theme-aware by default. ${howToOverride} `; -export const usageWarning = (componentName: string): string => ` +export interface IncubatingWarningConfig { + componentName: string; + statusLink: string; +} + +export const incubatingWarning = (config: IncubatingWarningConfig): string => ` -
-WARNING - The ${componentName} is still in development and considered -experimental. It is not recommended for application use. +`; // On Firefox, on the Docs page, there is a div with a scale(1) transform that causes the dropdown diff --git a/packages/nimble-components/src/wafer-map/tests/wafer-map-matrix.stories.ts b/packages/nimble-components/src/wafer-map/tests/wafer-map-matrix.stories.ts index 0cb1d592ff..cf0475da3c 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map-matrix.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map-matrix.stories.ts @@ -12,7 +12,7 @@ import { import { waferMapTag } from '..'; const metadata: Meta = { - title: 'Tests/WaferMap', + title: 'Tests/Wafer Map', parameters: { ...sharedMatrixParameters() } diff --git a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts index 67654ec127..1faa8832d9 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -3,7 +3,7 @@ import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory, - usageWarning + incubatingWarning } from '../../utilities/tests/storybook'; import { generateWaferData } from './data-generator'; import { goodValueGenerator, badValueGenerator } from './value-generator'; @@ -84,7 +84,7 @@ const getHighLightedValueSets = ( }; const metadata: Meta = { - title: 'WaferMap', + title: 'Incubating/Wafer Map', tags: ['autodocs'], decorators: [withActions], parameters: { @@ -99,7 +99,10 @@ const metadata: Meta = { } }, render: createUserSelectedThemeStory(html` - ${usageWarning('wafer map')} + ${incubatingWarning({ + componentName: 'wafer map', + statusLink: 'https://github.com/ni/nimble/issues/924' + })} <${waferMapTag} id="wafer-map" colors-scale-mode="${x => x.colorScaleMode}"