= {
parameters: {},
argTypes: {
size: {
+ name: 'Spinner sizing',
description:
'Size of the spinner component.
Usage details
To customize its size, set its CSS '
+ 'height to a design token, and its width will automatically match its height. Each size will also require minimum pixel margins.
'
@@ -53,7 +54,7 @@ const metadata: Meta = {
Requires 64px minimum margins.
Use for promoting NI branding and adding a splash of color in a monochromatic setting. Common places to use is home screens, licensing, dialogs and any instances where there will not be a conflict with green representing status.
The green version is not intended to represent “Good” or “Success”.
- `
+ `,
+ table: { category: apiCategory.attributes }
}
},
// Disable animation in Chromatic because it intermittently causes shapshot differences
diff --git a/packages/storybook/src/nimble/table-column/anchor/table-column-anchor.mdx b/packages/storybook/src/nimble/table-column/anchor/table-column-anchor.mdx
index bc4a08c8e1..114aada9ff 100644
--- a/packages/storybook/src/nimble/table-column/anchor/table-column-anchor.mdx
+++ b/packages/storybook/src/nimble/table-column/anchor/table-column-anchor.mdx
@@ -10,8 +10,15 @@ import { tableTag } from '../../../../../nimble-components/src/table';
The column is used to display string fields as links or text in the . If a row provides an href for a link, that cell will display a link, otherwise it will display plain text.
+
+## API
+
+### Target Configuration
+
+
+
## Usage
### Best Practices
@@ -22,10 +29,6 @@ The column is used to display string fields a
- If a label is not available or known for a url, the url itself may be explicitly provided for the label to ensure each distinct url has a distinct label. As grouping is done by label value, this prevents unrelated URLs from being grouped together.
- For records without a url, the label may also be omitted. All omitted labels should consistently use `null`, `undefined`, or empty string but not a combination of those values.
-### Target Configuration
-
-
-
### Angular Usage
In an Angular app, you can configure a callback to intercept clicks so that you may invoke the router to perform the navigation instead of the default handler:
diff --git a/packages/storybook/src/nimble/tabs/tabs.stories.ts b/packages/storybook/src/nimble/tabs/tabs.stories.ts
index d665191de2..0f438969c7 100644
--- a/packages/storybook/src/nimble/tabs/tabs.stories.ts
+++ b/packages/storybook/src/nimble/tabs/tabs.stories.ts
@@ -66,7 +66,7 @@ export const tabs: StoryObj = {
table: { category: apiCategory.slots }
},
change: {
- description: 'Fires when the active tab is changed',
+ description: 'Event emitted when the active tab is changed',
control: false,
table: { category: apiCategory.events }
}
diff --git a/packages/storybook/src/nimble/theme-provider/theme-provider.mdx b/packages/storybook/src/nimble/theme-provider/theme-provider.mdx
index 4161adc422..f45539697c 100644
--- a/packages/storybook/src/nimble/theme-provider/theme-provider.mdx
+++ b/packages/storybook/src/nimble/theme-provider/theme-provider.mdx
@@ -1,5 +1,6 @@
import { Controls, Canvas, Meta, Title } from '@storybook/blocks';
import { themeProvider } from './theme-provider.stories';
+import ComponentApisLink from '../../docs/component-apis-link.mdx';
Theme Provider
@@ -7,4 +8,8 @@ import { themeProvider } from './theme-provider.stories';
The theme provider element allows configuring certain token values for the contained HTML tree.
+
+## API
+
+
diff --git a/packages/storybook/src/nimble/theme-provider/theme-provider.stories.ts b/packages/storybook/src/nimble/theme-provider/theme-provider.stories.ts
index 336817b0e5..8e80c0bcd1 100644
--- a/packages/storybook/src/nimble/theme-provider/theme-provider.stories.ts
+++ b/packages/storybook/src/nimble/theme-provider/theme-provider.stories.ts
@@ -9,7 +9,7 @@ import {
type SharedTableArgs,
sharedTableArgs
} from '../table-column/base/table-column-stories-utils';
-import { createUserSelectedThemeStory } from '../../utilities/storybook';
+import { apiCategory, createUserSelectedThemeStory } from '../../utilities/storybook';
const simpleData = [
{
@@ -88,7 +88,8 @@ export const themeProvider: StoryObj = {
summary: '"light"'
},
options: Object.keys(Theme),
- control: { type: 'radio' }
+ control: { type: 'radio' },
+ table: { category: apiCategory.attributes }
},
lang: {
description: langDescription,
@@ -97,7 +98,8 @@ export const themeProvider: StoryObj = {
'`lang` of the document element if set, otherwise "en-US".'
},
options: ['en-US', 'fr-FR', 'de-DE'],
- control: { type: 'radio' }
+ control: { type: 'radio' },
+ table: { category: apiCategory.attributes }
},
direction: {
description:
@@ -106,7 +108,8 @@ export const themeProvider: StoryObj = {
summary: '"ltr"'
},
options: Object.keys(Direction),
- control: { type: 'radio' }
+ control: { type: 'radio' },
+ table: { category: apiCategory.attributes }
}
},
args: {
diff --git a/packages/storybook/src/nimble/toggle-button/toggle-button.stories.ts b/packages/storybook/src/nimble/toggle-button/toggle-button.stories.ts
index 64ca61d926..27d39ca540 100644
--- a/packages/storybook/src/nimble/toggle-button/toggle-button.stories.ts
+++ b/packages/storybook/src/nimble/toggle-button/toggle-button.stories.ts
@@ -82,7 +82,7 @@ const metadata: Meta = {
table: { category: apiCategory.slots }
},
change: {
- description: 'Fires when the toggle button is pressed via mouse or keyboard.',
+ description: 'Event emitted when the toggle button is pressed via mouse or keyboard.',
table: { category: apiCategory.events },
control: false
}
diff --git a/packages/storybook/src/nimble/toolbar/toolbar.mdx b/packages/storybook/src/nimble/toolbar/toolbar.mdx
index b42fa79ccc..3d05edaadf 100644
--- a/packages/storybook/src/nimble/toolbar/toolbar.mdx
+++ b/packages/storybook/src/nimble/toolbar/toolbar.mdx
@@ -1,6 +1,7 @@
-import { Canvas, Meta, Title } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Title } from '@storybook/blocks';
import { NimbleToolbar } from './toolbar.react';
import * as toolbarStories from './toolbar.stories';
+import ComponentApisLink from '../../docs/component-apis-link.mdx';
@@ -22,6 +23,11 @@ nimble-toolbar::part(positioning-region) {
+## API
+
+
+
+
{/* ## Styling */}
{/* ## Usage */}
diff --git a/packages/storybook/src/nimble/toolbar/toolbar.stories.ts b/packages/storybook/src/nimble/toolbar/toolbar.stories.ts
index 5957d921e3..639593cc88 100644
--- a/packages/storybook/src/nimble/toolbar/toolbar.stories.ts
+++ b/packages/storybook/src/nimble/toolbar/toolbar.stories.ts
@@ -7,9 +7,14 @@ import { iconFilterTag } from '../../../../nimble-components/src/icons/filter';
import { iconPencilTag } from '../../../../nimble-components/src/icons/pencil';
import { iconTrashTag } from '../../../../nimble-components/src/icons/trash';
import { toolbarTag } from '../../../../nimble-components/src/toolbar';
-import { createUserSelectedThemeStory } from '../../utilities/storybook';
+import { apiCategory, createUserSelectedThemeStory } from '../../utilities/storybook';
-const metadata: Meta = {
+interface ToolbarArgs {
+ start: undefined;
+ end: undefined;
+}
+
+const metadata: Meta = {
title: 'Components/Toolbar',
parameters: {},
// prettier-ignore
@@ -37,7 +42,19 @@ const metadata: Meta = {
Filter
- `)
+ `),
+ argTypes: {
+ start: {
+ description: 'Content which will be positioned at the start of the toolbar.',
+ control: false,
+ table: { category: apiCategory.slots }
+ },
+ end: {
+ description: 'Content which will be positioned at the end of the toolbar.',
+ control: false,
+ table: { category: apiCategory.slots }
+ },
+ }
};
export default metadata;
diff --git a/packages/storybook/src/nimble/tree-view/tree-view.mdx b/packages/storybook/src/nimble/tree-view/tree-view.mdx
index c2ae905d1f..8b6865d83b 100644
--- a/packages/storybook/src/nimble/tree-view/tree-view.mdx
+++ b/packages/storybook/src/nimble/tree-view/tree-view.mdx
@@ -1,6 +1,7 @@
import { Controls, Canvas, Meta, Title } from '@storybook/blocks';
import TargetDocs from '../patterns/anchor/target-docs.mdx';
import * as treeViewStories from './tree-view.stories';
+import ComponentApisLink from '../../docs/component-apis-link.mdx';
import { treeViewTag } from '../../../../nimble-components/src/tree-view';
import { treeItemTag } from '../../../../nimble-components/src/tree-item';
import { anchorTreeItemTag } from '../../../../nimble-components/src/anchor-tree-item';
@@ -17,26 +18,37 @@ expanded to reveal the contents of the folder, which may be files, folders, or b
The supports standard and ,
which navigate to a url upon activation. Both types of tree items support icons as slotted content.
+
+
+## API
+
+
+
+
+### Tree Item
+
+Use a child element if you want a tree item that calls a callback, has a value, and/or has child items.
+
-{/* ## Styling */}
+### Anchor Tree Item
-{/* ## Usage */}
+Use a child element to navigate to a URL when the item is activated.
-{/* ## Examples */}
+
+
-### Child Elements
+#### Anchor Tree Item Target Configuration
-- - Use a this child element if you want a tree item
- that calls a callback, has a value, and/or has child items.
-- - Use this child element to navigate to a URL
- when the item is activated.
+
-## Accessibility
+{/* ## Styling */}
-### Anchor Tree Item Target Configuration
+{/* ## Usage */}
-
+{/* ## Examples */}
+
+{/* ## Accessibility */}
{/* ## Resources */}
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 6f99966b78..e12ef8e9b3 100644
--- a/packages/storybook/src/nimble/tree-view/tree-view.stories.ts
+++ b/packages/storybook/src/nimble/tree-view/tree-view.stories.ts
@@ -7,12 +7,14 @@ import { treeItemTag } from '../../../../nimble-components/src/tree-item';
import { anchorTreeItemTag } from '../../../../nimble-components/src/anchor-tree-item';
import { treeViewTag } from '../../../../nimble-components/src/tree-view';
import { TreeViewSelectionMode } from '../../../../nimble-components/src/tree-view/types';
-import { createUserSelectedThemeStory } from '../../utilities/storybook';
+import { apiCategory, createUserSelectedThemeStory, disabledDescription, iconDescription, textContentDescription } from '../../utilities/storybook';
import { hrefDescription } from '../patterns/anchor/anchor-docs';
interface TreeArgs {
selectionMode: TreeViewSelectionMode;
options: ItemArgs[];
+ expandedChange: undefined;
+ selectedChange: undefined;
}
interface ItemArgs {
@@ -33,9 +35,9 @@ interface AnchorItemArgs {
}
const selectionModeDescription = `
-All: all items in the tree are selectable through user interaction
-Leaves only: only the leaf items in the tree are selectable through user interaction
-None: no items in the tree are selectable through user interaction
+all: All items in the tree are selectable through user interaction
+leaves-only: Only the leaf items in the tree are selectable through user interaction
+none: No items in the tree are selectable through user interaction
Note: Changing the selection mode does not affect which items can be selected programmatically.
`;
@@ -47,11 +49,6 @@ const metadata: Meta = {
actions: {
handles: ['expanded-change', 'selected-change']
}
- },
- argTypes: {
- selectionMode: {
- description: selectionModeDescription
- }
}
};
@@ -66,10 +63,32 @@ export const treeItem: StoryObj = {
}
},
argTypes: {
+ label: {
+ name: 'default',
+ description: `${textContentDescription({ componentName: 'tree item' })} Tree items can also contain child tree items to establish hierarchy.`,
+ table: { category: apiCategory.slots }
+ },
+ value: {
+ description: 'A value for this tree item that can be used to identify the item when handling tree events.',
+ table: { category: apiCategory.attributes }
+ },
+ disabled: {
+ description: disabledDescription({ componentName: 'tree item' }),
+ table: { category: apiCategory.attributes }
+ },
icon: {
- description:
- 'When including an icon, set `slot="start"` on the icon to ensure proper styling.'
- }
+ name: 'start',
+ description: iconDescription,
+ table: { category: apiCategory.slots }
+ },
+ selected: {
+ description: 'Whether this item is selected.',
+ table: { category: apiCategory.attributes }
+ },
+ expanded: {
+ description: 'Whether this item is expanded.',
+ table: { category: apiCategory.attributes }
+ },
},
// prettier-ignore
render: createUserSelectedThemeStory(html`
@@ -97,22 +116,34 @@ export const anchorTreeItem: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Use a `nimble-anchor-tree-item` to navigate to a URL from a `nimble-tree-view`. If you want a tree item that can have a value and/or child items, use a `nimble-tree-item` instead.'
+ story: `Use a \`${anchorTreeItemTag}\` to navigate to a URL from a \`${treeViewTag}\`. If you want a tree item that can have a value and/or child items, use a \`${treeItemTag}\` instead.`
}
}
},
argTypes: {
- icon: {
- description:
- 'When including an icon, set `slot="start"` on the icon to ensure proper styling.'
+ label: {
+ name: 'default',
+ description: textContentDescription({ componentName: 'anchor tree item' }),
+ table: { category: apiCategory.slots }
+ },
+ href: {
+ description: hrefDescription({ componentName: 'anchor tree item', includeDisable: false }),
+ table: { category: apiCategory.attributes }
+ },
+ disabled: {
+ description: disabledDescription({ componentName: 'tree item' }),
+ table: { category: apiCategory.attributes }
},
selected: {
description:
- 'Cannot be selected interactively, as click/Enter causes navigation.'
+ 'Set this attribute programmatically to render the item as selected. It cannot be selected interactively, as click/Enter causes navigation.',
+ table: { category: apiCategory.attributes }
+ },
+ icon: {
+ name: 'start',
+ description: iconDescription,
+ table: { category: apiCategory.slots }
},
- href: {
- description: hrefDescription({ componentName: 'anchor tree item', includeDisable: false })
- }
},
// prettier-ignore
render: createUserSelectedThemeStory(html`
@@ -135,9 +166,29 @@ export const anchorTreeItem: StoryObj = {
export const multipleTreeItems: StoryObj = {
argTypes: {
selectionMode: {
+ name: 'selection-mode',
options: Object.values(TreeViewSelectionMode),
- control: { type: 'radio' }
- }
+ control: { type: 'radio' },
+ description: selectionModeDescription,
+ table: { category: apiCategory.attributes }
+
+ },
+ options: {
+ name: 'default',
+ description:
+ `One or more \`${treeItemTag}\` or \`${anchorTreeItemTag}\` elements which populate the tree. Nest items to establish tree hierarchy.`,
+ table: { category: apiCategory.slots }
+ },
+ expandedChange: {
+ name: 'expanded-change',
+ description: 'Event emitted when an item is expanded or collapsed.',
+ table: { category: apiCategory.events }
+ },
+ selectedChange: {
+ name: 'selected-change',
+ description: 'Event emitted when an item is selected or deselected.',
+ table: { category: apiCategory.events }
+ },
},
// prettier-ignore
render: createUserSelectedThemeStory(html`
diff --git a/packages/storybook/src/nimble/wafer-map/wafer-map.stories.ts b/packages/storybook/src/nimble/wafer-map/wafer-map.stories.ts
index b0cedf6337..19d8ce2670 100644
--- a/packages/storybook/src/nimble/wafer-map/wafer-map.stories.ts
+++ b/packages/storybook/src/nimble/wafer-map/wafer-map.stories.ts
@@ -382,7 +382,7 @@ const metadata: Meta = {
dieHover: {
name: 'die-hover',
description:
- 'The event is fired whenever the mouse enters or leaves a die. In the event data, `detail.currentDie` will be set to the `WaferMapDie` element of the `dies` array that is being hovered or `undefined` if the mouse is leaving a die.'
+ 'Event emitted whenever the mouse enters or leaves a die. In the event data, `detail.currentDie` will be set to the `WaferMapDie` element of the `dies` array that is being hovered or `undefined` if the mouse is leaving a die.'
},
validity: {
description: `Readonly object of boolean values that represents the validity states that the wafer map's configuration can be in.
diff --git a/packages/storybook/src/utilities/storybook.ts b/packages/storybook/src/utilities/storybook.ts
index 5e94feaff8..733b14a251 100644
--- a/packages/storybook/src/utilities/storybook.ts
+++ b/packages/storybook/src/utilities/storybook.ts
@@ -169,7 +169,8 @@ export const apiCategory = {
localizableLabels: 'Localizable Labels',
methods: 'Methods',
nonAttributeProperties: 'Properties',
- slots: 'Slots'
+ slots: 'Slots',
+ styles: 'Styles'
} as const;
export const appearanceDescription = (options: { componentName: string }): string => `This attribute affects the appearance of the ${options.componentName}.`;
@@ -184,3 +185,5 @@ export const errorVisibleDescription = 'When set to `true`, the `error-text` mes
export const dropdownPositionDescription = (options: { componentName: string }): string => `Controls the position of the dropdown relative to the ${options.componentName}.`;
export const optionsDescription = `The \`${listOptionTag}\` items for the user to select from.`;
+
+export const preventDismissDescription = (options: { componentName: string }): string => `Prevents the \`Esc\` key from closing the ${options.componentName}.`;