diff --git a/change/@ni-nimble-components-7612f990-8c7c-49a4-bfa2-53d913115c1d.json b/change/@ni-nimble-components-7612f990-8c7c-49a4-bfa2-53d913115c1d.json new file mode 100644 index 0000000000..0d214eafb0 --- /dev/null +++ b/change/@ni-nimble-components-7612f990-8c7c-49a4-bfa2-53d913115c1d.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Fix Actions tab in Storybook", + "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 3e121e2227..2924f38792 100644 --- a/packages/nimble-components/.storybook/preview.js +++ b/packages/nimble-components/.storybook/preview.js @@ -26,5 +26,5 @@ export const parameters = { // be quite large, such as in a table with a lot of records. Therefore, the serialization depth // should be limited to avoid poor performance. configureActions({ - depth: 6 + depth: 1 }); diff --git a/packages/nimble-components/src/banner/tests/banner.stories.ts b/packages/nimble-components/src/banner/tests/banner.stories.ts index ecb9d40476..79907b90ef 100644 --- a/packages/nimble-components/src/banner/tests/banner.stories.ts +++ b/packages/nimble-components/src/banner/tests/banner.stories.ts @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { BannerSeverity } from '../types'; import { bannerGapSize } from '../../theme-provider/design-tokens'; @@ -42,6 +43,7 @@ should be spaced apart using the \`${bannerGapSize.cssCustomProperty}\` design t const metadata: Meta = { title: 'Banner', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/button/tests/button.stories.ts b/packages/nimble-components/src/button/tests/button.stories.ts index 0a5e92fe45..ba78388623 100644 --- a/packages/nimble-components/src/button/tests/button.stories.ts +++ b/packages/nimble-components/src/button/tests/button.stories.ts @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { ButtonAppearance, ButtonAppearanceVariant } from '../types'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { @@ -32,6 +33,7 @@ If you want a button that triggers navigation to a URL, use the \`nimble-anchor- const metadata: Meta = { title: 'Button', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 b61d2211f7..4fe591f924 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 @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { html } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { bodyFont } from '../../theme-provider/design-tokens'; import { cardButtonTag } from '..'; @@ -18,6 +19,7 @@ Note: The styling for the "Color" theme is not complete.`; const metadata: Meta = { title: 'Card Button', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts b/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts index e39630fa1a..4b8d1615c5 100644 --- a/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts +++ b/packages/nimble-components/src/checkbox/tests/checkbox.stories.ts @@ -1,4 +1,5 @@ import { html } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { checkboxTag } from '..'; @@ -13,6 +14,7 @@ interface CheckboxArgs { const metadata: Meta = { title: 'Checkbox', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/combobox/tests/combobox.stories.ts b/packages/nimble-components/src/combobox/tests/combobox.stories.ts index b9996588bd..5114b4fb76 100644 --- a/packages/nimble-components/src/combobox/tests/combobox.stories.ts +++ b/packages/nimble-components/src/combobox/tests/combobox.stories.ts @@ -1,6 +1,7 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { ComboboxAutocomplete } from '@microsoft/fast-foundation'; import { html, repeat } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { listOptionTag } from '../../list-option'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { @@ -29,6 +30,7 @@ interface OptionArgs { const metadata: Meta = { title: 'Combobox', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/drawer/tests/drawer.stories.ts b/packages/nimble-components/src/drawer/tests/drawer.stories.ts index 3cfad56571..7bdea8d6ae 100644 --- a/packages/nimble-components/src/drawer/tests/drawer.stories.ts +++ b/packages/nimble-components/src/drawer/tests/drawer.stories.ts @@ -1,4 +1,5 @@ import { html, ref } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { DrawerWidthOptions, ExampleContentType } from './types'; import { @@ -115,6 +116,7 @@ ${overrideWarning('Drawer Width', widthDescriptionOverride)} const metadata: Meta = { title: 'Drawer', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 45a3bf7223..676fdd5828 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 @@ -1,4 +1,5 @@ import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { ButtonAppearance, MenuButtonPosition } from '../types'; @@ -30,6 +31,7 @@ This icon will be hidden when \`contentHidden\` is set to \`true\` const metadata: Meta = { title: 'Menu Button', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/menu/tests/menu.stories.ts b/packages/nimble-components/src/menu/tests/menu.stories.ts index 1b9fd125f1..bb7ab255d4 100644 --- a/packages/nimble-components/src/menu/tests/menu.stories.ts +++ b/packages/nimble-components/src/menu/tests/menu.stories.ts @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { html, repeat, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { menuTag } from '..'; import { iconArrowLeftFromLineTag } from '../../icons/arrow-left-from-line'; @@ -40,6 +41,7 @@ and will format them and any Nimble icons added as children of \` = { title: 'Menu', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 22dcfc5956..a571a84add 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 @@ -1,4 +1,5 @@ import { html } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { NumberFieldAppearance } from '../types'; @@ -19,6 +20,7 @@ interface NumberFieldArgs { const metadata: Meta = { title: 'Number Field', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 832b4203c7..eba0d8461c 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 @@ -1,5 +1,6 @@ import { html } from '@microsoft/fast-element'; import { Orientation } from '@microsoft/fast-web-utilities'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { radioGroupTag } from '..'; @@ -16,6 +17,7 @@ interface RadioGroupArgs { const metadata: Meta = { title: 'Radio Group', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/select/tests/select.stories.ts b/packages/nimble-components/src/select/tests/select.stories.ts index 5757dd6292..5de5f9a538 100644 --- a/packages/nimble-components/src/select/tests/select.stories.ts +++ b/packages/nimble-components/src/select/tests/select.stories.ts @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { html, repeat } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { DropdownAppearance } from '../../patterns/dropdown/types'; import { selectTag } from '..'; @@ -23,6 +24,7 @@ interface OptionArgs { const metadata: Meta = { title: 'Select', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/switch/tests/switch.stories.ts b/packages/nimble-components/src/switch/tests/switch.stories.ts index 63c7d1bbe4..927ff01946 100644 --- a/packages/nimble-components/src/switch/tests/switch.stories.ts +++ b/packages/nimble-components/src/switch/tests/switch.stories.ts @@ -1,4 +1,5 @@ import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { switchTag } from '..'; @@ -21,6 +22,7 @@ pressed or not pressed and can optionally allow for a partially pressed state.`; const metadata: Meta = { title: 'Switch', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/table/tests/table.stories.ts b/packages/nimble-components/src/table/tests/table.stories.ts index 9ea747f75e..1d4a03e7d7 100644 --- a/packages/nimble-components/src/table/tests/table.stories.ts +++ b/packages/nimble-components/src/table/tests/table.stories.ts @@ -1,4 +1,5 @@ import { html, ref } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory, @@ -108,6 +109,7 @@ The object's type is \`TableValidityState\`, and it contains the following boole const metadata: Meta = { title: 'Table', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/tabs/tests/tabs.stories.ts b/packages/nimble-components/src/tabs/tests/tabs.stories.ts index 0e66450897..bd2ec9c3a1 100644 --- a/packages/nimble-components/src/tabs/tests/tabs.stories.ts +++ b/packages/nimble-components/src/tabs/tests/tabs.stories.ts @@ -1,4 +1,5 @@ import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { tabsTag } from '..'; @@ -26,6 +27,7 @@ If you want a sequence of tabs that navigate to different URLs, use the Anchor T const metadata: Meta = { title: 'Tabs', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 7ce6fe3685..bc06c59bdc 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 @@ -1,4 +1,5 @@ import { html } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { TextAreaAppearance, TextAreaResize } from '../types'; @@ -30,6 +31,7 @@ If you configure your text area to be resizable (with the \`resize\` attribute) const metadata: Meta = { title: 'Text Area', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 6f2849c183..93c440ad36 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 @@ -1,4 +1,5 @@ import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { TextFieldAppearance, TextFieldType } from '../types'; @@ -33,6 +34,7 @@ consuming application must implement that functionality. const metadata: Meta = { title: 'Text Field', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 10235b5aae..2587635766 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 @@ -1,4 +1,5 @@ import { html, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { ButtonAppearance } from '../types'; @@ -30,6 +31,7 @@ screen reader would say something like "Mute toggle button pressed".`; const metadata: Meta = { title: 'Toggle Button', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts index e6693a0fc1..97a8994630 100644 --- a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts +++ b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts @@ -1,6 +1,7 @@ import { html, ref } from '@microsoft/fast-element'; -import type { Meta, StoryObj } from '@storybook/html'; 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 { borderColor, @@ -92,6 +93,7 @@ const complexContent = html` const metadata: Meta = { title: 'Tooltip', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { 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 14613f342d..793c896966 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 @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html'; import { html, repeat, when } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { TreeViewSelectionMode } from '../types'; import { treeViewTag } from '..'; @@ -37,6 +38,7 @@ Note: Changing the selection mode does not affect which items can be selected pr const metadata: Meta = { title: 'Tree View', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: { diff --git a/packages/nimble-components/src/utilities/tests/storybook-declarations.d.ts b/packages/nimble-components/src/utilities/tests/storybook-declarations.d.ts new file mode 100644 index 0000000000..b5cad96add --- /dev/null +++ b/packages/nimble-components/src/utilities/tests/storybook-declarations.d.ts @@ -0,0 +1,3 @@ +// This file is a workaround to allow Nimble to import types that Storybook doesn't export correctly +// https://github.com/storybookjs/storybook/issues/21887#issuecomment-1495427769 +declare module '@storybook/addon-actions/decorator'; 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 3d64194910..67654ec127 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 @@ -1,4 +1,5 @@ import { html } from '@microsoft/fast-element'; +import { withActions } from '@storybook/addon-actions/decorator'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory, @@ -85,6 +86,7 @@ const getHighLightedValueSets = ( const metadata: Meta = { title: 'WaferMap', tags: ['autodocs'], + decorators: [withActions], parameters: { docs: { description: {