From d9f88804d952ee4cd1509341f7eb70103768b0de Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 27 Aug 2026 16:34:01 +0530 Subject: [PATCH 01/19] Storybook: Declare an explicit ID on every story and doc --- packages/admin-ui/src/breadcrumbs/stories/index.story.tsx | 1 + packages/admin-ui/src/page/stories/index.story.tsx | 1 + .../alignment-control/stories/aliginment-toolbar.story.jsx | 1 + .../src/components/alignment-control/stories/index.story.jsx | 1 + .../block-alignment-matrix-control/stories/index.story.jsx | 1 + .../src/components/block-draggable/stories/index.story.jsx | 5 ++++- .../block-heading-level-dropdown/stories/index.story.jsx | 1 + .../src/components/block-mover/stories/index.story.jsx | 1 + .../components/block-patterns-list/stories/index.story.jsx | 1 + .../src/components/block-popover/stories/index.story.jsx | 1 + .../src/components/block-title/stories/index.story.jsx | 1 + .../components/border-radius-control/stories/index.story.jsx | 1 + .../src/components/color-palette/stories/control.story.jsx | 1 + .../components/date-format-picker/stories/index.story.jsx | 1 + .../src/components/dimension-control/stories/index.story.jsx | 1 + .../dimensions-tool/stories/aspect-ratio-tool.story.jsx | 1 + .../src/components/dimensions-tool/stories/index.story.jsx | 1 + .../components/dimensions-tool/stories/scale-tool.story.jsx | 1 + .../dimensions-tool/stories/width-height-tool.story.jsx | 1 + .../src/components/font-family/stories/index.story.jsx | 1 + .../src/components/height-control/stories/index.story.jsx | 1 + .../src/components/inner-blocks/stories/index.story.jsx | 1 + .../src/components/inserter/stories/index.story.jsx | 2 +- .../letter-spacing-control/stories/index.story.jsx | 1 + .../components/line-height-control/stories/index.story.jsx | 1 + .../src/components/plain-text/stories/index.story.jsx | 1 + .../src/components/resolution-tool/stories/index.story.jsx | 1 + .../src/components/tabbed-sidebar/stories/index.story.jsx | 1 + .../text-alignment-control/stories/index.story.jsx | 1 + .../text-decoration-control/stories/index.story.jsx | 1 + .../text-transform-control/stories/index.story.jsx | 1 + .../src/components/unit-control/stories/index.story.jsx | 1 + .../src/components/url-popover/stories/index.story.jsx | 1 + .../src/components/warning/stories/index.story.jsx | 1 + .../components/writing-mode-control/stories/index.story.jsx | 1 + .../src/alignment-matrix-control/stories/index.story.tsx | 1 + .../src/angle-picker-control/stories/index.story.tsx | 1 + .../src/border-box-control/stories/index.story.tsx | 1 + .../components/src/border-control/stories/index.story.tsx | 1 + packages/components/src/box-control/stories/index.story.tsx | 1 + packages/components/src/button/stories/best-practices.mdx | 2 +- .../src/duotone-picker/stories/duotone-picker.story.tsx | 1 + .../src/duotone-picker/stories/duotone-swatch.story.tsx | 1 + packages/components/src/elevation/stories/index.story.tsx | 1 + packages/components/src/flex/stories/index.story.tsx | 1 + .../src/focal-point-picker/stories/index.story.tsx | 1 + .../components/src/font-size-picker/stories/index.story.tsx | 1 + packages/components/src/form-toggle/stories/index.story.tsx | 1 + packages/components/src/grid/stories/index.story.tsx | 1 + packages/components/src/guide/stories/index.story.tsx | 1 + packages/components/src/icon/stories/index.story.tsx | 1 + packages/components/src/item-group/stories/index.story.tsx | 1 + packages/components/src/palette-edit/stories/index.story.tsx | 1 + packages/components/src/placeholder/stories/index.story.tsx | 1 + .../components/src/query-controls/stories/index.story.tsx | 1 + packages/components/src/scrollable/stories/index.story.tsx | 1 + packages/components/src/spacer/stories/index.story.tsx | 1 + packages/components/src/toolbar/stories/index.story.tsx | 1 + packages/components/src/tools-panel/stories/index.story.tsx | 1 + .../validated-form-controls/components/stories/overview.mdx | 2 +- packages/components/src/view/stories/index.story.tsx | 1 + packages/components/src/z-stack/stories/index.story.tsx | 1 + packages/dataviews/src/dataform/stories/content.story.tsx | 1 + packages/dataviews/src/dataform/stories/index.story.tsx | 1 + .../dataviews/src/dataviews-picker/stories/index.story.tsx | 1 + packages/dataviews/src/dataviews/stories/index.story.tsx | 1 + packages/dataviews/src/field-types/stories/index.story.tsx | 1 + .../upload-progress-snackbar/stories/index.story.tsx | 1 + packages/fields/src/stories/index.story.tsx | 1 + packages/global-styles-ui/src/stories/index.story.jsx | 5 ++++- packages/grid/src/dashboard-grid/stories/index.story.tsx | 1 + packages/grid/src/dashboard-lanes/stories/index.story.tsx | 1 + packages/icons/src/icon/stories/index.story.tsx | 1 + packages/image-cropper/src/stories/index.story.tsx | 1 + .../src/components/rotation-ruler/stories/index.story.tsx | 1 + .../src/image-editor/stories/rectangle-crop.story.tsx | 1 + packages/media-fields/src/stories/index.story.tsx | 1 + .../theme/src/color-ramps/stories/brand-fallbacks.story.tsx | 1 + packages/theme/src/color-ramps/stories/index.story.tsx | 1 + packages/theme/src/stories/index.story.tsx | 1 + packages/theme/src/stories/introduction.mdx | 2 +- packages/theme/src/stories/tokens.mdx | 2 +- packages/theme/src/stories/typography.mdx | 2 +- packages/ui/src/alert-dialog/stories/index.story.tsx | 1 + packages/ui/src/badge/stories/index.story.tsx | 1 + packages/ui/src/badge/stories/usage-guidelines.story.tsx | 1 + packages/ui/src/button/stories/index.story.tsx | 1 + packages/ui/src/button/stories/usage-guidelines.story.tsx | 1 + packages/ui/src/calendar/stories/index.story.tsx | 1 + packages/ui/src/calendar/stories/range-calendar.story.tsx | 1 + packages/ui/src/calendar/stories/usage-guidelines.mdx | 2 +- packages/ui/src/card/stories/index.story.tsx | 1 + packages/ui/src/collapsible-card/stories/index.story.tsx | 1 + packages/ui/src/collapsible/stories/index.story.tsx | 1 + packages/ui/src/dialog/stories/index.story.tsx | 1 + packages/ui/src/dialog/stories/usage-guidelines.story.tsx | 1 + packages/ui/src/drawer/stories/index.story.tsx | 1 + packages/ui/src/empty-state/stories/index.story.tsx | 1 + packages/ui/src/form/input-control/stories/index.story.tsx | 1 + .../src/form/primitives/autocomplete/stories/index.story.tsx | 1 + .../ui/src/form/primitives/checkbox/stories/index.story.tsx | 1 + .../ui/src/form/primitives/combobox/stories/index.story.tsx | 1 + .../primitives/control-with-error/stories/index.story.tsx | 1 + .../ui/src/form/primitives/field/stories/index.story.tsx | 1 + .../ui/src/form/primitives/fieldset/stories/index.story.tsx | 1 + .../src/form/primitives/input-layout/stories/index.story.tsx | 1 + .../ui/src/form/primitives/input/stories/index.story.tsx | 1 + .../searchable-chip-select/stories/index.story.tsx | 1 + .../ui/src/form/primitives/select/stories/index.story.tsx | 1 + packages/ui/src/form/primitives/stories/overview.mdx | 2 +- .../ui/src/form/primitives/textarea/stories/index.story.tsx | 1 + .../primitives/validity-indicator/stories/index.story.tsx | 1 + .../searchable-chip-select-control/stories/index.story.tsx | 1 + packages/ui/src/form/select-control/stories/index.story.tsx | 1 + .../ui/src/form/textarea-control/stories/index.story.tsx | 1 + .../validated-input-control/stories/index.story.tsx | 1 + .../validated-textarea-control/stories/index.story.tsx | 1 + packages/ui/src/icon-button/stories/index.story.tsx | 1 + packages/ui/src/icon/stories/index.story.tsx | 1 + packages/ui/src/link-button/stories/index.story.tsx | 1 + packages/ui/src/link/stories/index.story.tsx | 1 + packages/ui/src/menu/stories/index.story.tsx | 1 + packages/ui/src/menu/stories/usage-guidelines.story.tsx | 1 + packages/ui/src/notice/stories/index.story.tsx | 1 + packages/ui/src/popover/stories/index.story.tsx | 1 + packages/ui/src/skeleton/stories/index.story.tsx | 1 + packages/ui/src/spinner/stories/index.story.tsx | 1 + packages/ui/src/stack/stories/index.story.tsx | 1 + packages/ui/src/stories/introduction.mdx | 2 +- packages/ui/src/tabs/stories/best-practices.mdx | 2 +- packages/ui/src/tabs/stories/index.story.tsx | 1 + packages/ui/src/text/stories/index.story.tsx | 1 + packages/ui/src/tooltip/stories/index.story.tsx | 1 + packages/ui/src/tooltip/stories/usage-guidelines.story.tsx | 1 + packages/ui/src/visually-hidden/stories/index.story.tsx | 1 + packages/widget-dashboard/src/stories/anatomy.mdx | 2 +- packages/widget-dashboard/src/stories/index.story.tsx | 1 + packages/widget-dashboard/src/stories/introduction.mdx | 2 +- packages/widget-dashboard/src/stories/policy.mdx | 2 +- packages/widget-dashboard/src/stories/widget-chrome.mdx | 2 +- .../src/components/widget-render/stories/index.story.tsx | 1 + packages/widget-primitives/src/stories/actions.mdx | 2 +- packages/widget-primitives/src/stories/anatomy.mdx | 2 +- packages/widget-primitives/src/stories/field-types.mdx | 2 +- packages/widget-primitives/src/stories/icons.mdx | 2 +- packages/widget-primitives/src/stories/introduction.mdx | 2 +- .../widget-primitives/src/stories/system-architecture.mdx | 2 +- packages/widget-primitives/src/stories/widget-host.mdx | 2 +- storybook/stories/design-system/introduction.mdx | 2 +- .../stories/design-system/patterns/destructive-actions.mdx | 2 +- storybook/stories/design-system/patterns/error-messages.mdx | 2 +- .../stories/design-system/patterns/save-and-submit.story.tsx | 1 + .../design-system/theme-example-application.story.tsx | 1 + storybook/stories/design-system/tokens/motion.story.tsx | 1 + storybook/stories/docs/components/contributing.mdx | 2 +- storybook/stories/docs/components/readme.mdx | 2 +- storybook/stories/foundations/design-language/elevation.mdx | 2 +- storybook/stories/foundations/design-language/radius.mdx | 2 +- storybook/stories/foundations/layout.mdx | 2 +- storybook/stories/icons/library.story.tsx | 1 + storybook/stories/introduction.mdx | 2 +- .../playground/draggable-cross-document-fallback.story.jsx | 1 + storybook/stories/playground/index.story.jsx | 1 + storybook/stories/playground/popover-with-slotfill.story.jsx | 1 + .../stories/playground/wp-compat-overlay-slot.story.jsx | 1 + storybook/stories/tokens/color.mdx | 2 +- storybook/stories/tokens/elevation.mdx | 2 +- storybook/stories/tokens/radius.mdx | 2 +- storybook/stories/tokens/typography.mdx | 2 +- 169 files changed, 175 insertions(+), 36 deletions(-) diff --git a/packages/admin-ui/src/breadcrumbs/stories/index.story.tsx b/packages/admin-ui/src/breadcrumbs/stories/index.story.tsx index 798a8d206f6598..956e864ad45f3e 100644 --- a/packages/admin-ui/src/breadcrumbs/stories/index.story.tsx +++ b/packages/admin-ui/src/breadcrumbs/stories/index.story.tsx @@ -5,6 +5,7 @@ import { withRouter } from '../../stories/with-router'; const meta: Meta< typeof Breadcrumbs > = { component: Breadcrumbs, title: 'Admin UI/Breadcrumbs', + id: 'admin-ui-breadcrumbs', decorators: [ withRouter ], }; diff --git a/packages/admin-ui/src/page/stories/index.story.tsx b/packages/admin-ui/src/page/stories/index.story.tsx index fbd19df2b3a8d6..55b38b57954651 100644 --- a/packages/admin-ui/src/page/stories/index.story.tsx +++ b/packages/admin-ui/src/page/stories/index.story.tsx @@ -11,6 +11,7 @@ import { withRouter } from '../../stories/with-router'; const meta: Meta< typeof Page > = { component: Page, title: 'Admin UI/Page', + id: 'admin-ui-page', parameters: { layout: 'fullscreen', }, diff --git a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.jsx b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.jsx index 1d29c96f4aed00..2dd8ae6199ccbb 100644 --- a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.jsx +++ b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.jsx @@ -6,6 +6,7 @@ import { AlignmentToolbar } from '..'; */ const meta = { title: 'BlockEditor/AlignmentToolbar', + id: 'blockeditor-alignmenttoolbar', component: AlignmentToolbar, argTypes: { value: { diff --git a/packages/block-editor/src/components/alignment-control/stories/index.story.jsx b/packages/block-editor/src/components/alignment-control/stories/index.story.jsx index 126f2975326130..046aefc49c63aa 100644 --- a/packages/block-editor/src/components/alignment-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/alignment-control/stories/index.story.jsx @@ -10,6 +10,7 @@ import { AlignmentControl } from '../'; */ const meta = { title: 'BlockEditor/AlignmentControl', + id: 'blockeditor-alignmentcontrol', component: AlignmentControl, argTypes: { value: { diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.jsx b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.jsx index b55a1f7638efe4..da05e5d86e0c35 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import BlockAlignmentMatrixControl from '../'; const meta = { title: 'BlockEditor/BlockAlignmentMatrixControl', + id: 'blockeditor-blockalignmentmatrixcontrol', component: BlockAlignmentMatrixControl, parameters: { docs: { diff --git a/packages/block-editor/src/components/block-draggable/stories/index.story.jsx b/packages/block-editor/src/components/block-draggable/stories/index.story.jsx index bdd08c07c28532..d725e9b279b5eb 100644 --- a/packages/block-editor/src/components/block-draggable/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-draggable/stories/index.story.jsx @@ -1,6 +1,9 @@ import BlockDraggableChip from '../draggable-chip'; -export default { title: 'BlockEditor/BlockDraggable' }; +export default { + title: 'BlockEditor/BlockDraggable', + id: 'blockeditor-blockdraggable', +}; export const _default = () => { // Create a wrapper box for the absolutely-positioned child component. diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.jsx b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.jsx index 677c815a74418c..86202e7ba5674d 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.jsx @@ -3,6 +3,7 @@ import HeadingLevelDropdown from '../'; const meta = { title: 'BlockEditor/HeadingLevelDropdown', + id: 'blockeditor-headingleveldropdown', component: HeadingLevelDropdown, parameters: { docs: { diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.jsx b/packages/block-editor/src/components/block-mover/stories/index.story.jsx index 4af8395b5fb06b..d86bdb1d5da157 100644 --- a/packages/block-editor/src/components/block-mover/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-mover/stories/index.story.jsx @@ -29,6 +29,7 @@ const blocks = [ */ const meta = { title: 'BlockEditor/BlockMover', + id: 'blockeditor-blockmover', component: BlockMover, parameters: { docs: { canvas: { sourceState: 'shown' } }, diff --git a/packages/block-editor/src/components/block-patterns-list/stories/index.story.jsx b/packages/block-editor/src/components/block-patterns-list/stories/index.story.jsx index 67f8429d30bc7a..baf51e5f096ac5 100644 --- a/packages/block-editor/src/components/block-patterns-list/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-patterns-list/stories/index.story.jsx @@ -11,6 +11,7 @@ const blockEditorSettings = { export default { component: BlockPatternsList, title: 'BlockEditor/BlockPatternsList', + id: 'blockeditor-blockpatternslist', }; export const Default = { diff --git a/packages/block-editor/src/components/block-popover/stories/index.story.jsx b/packages/block-editor/src/components/block-popover/stories/index.story.jsx index 2bdfc340aa6be0..4774c7c9e29174 100644 --- a/packages/block-editor/src/components/block-popover/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-popover/stories/index.story.jsx @@ -69,6 +69,7 @@ const clientIdLabels = Object.fromEntries( const meta = { title: 'BlockEditor/BlockPopover', + id: 'blockeditor-blockpopover', component: BlockPopover, parameters: { docs: { diff --git a/packages/block-editor/src/components/block-title/stories/index.story.jsx b/packages/block-editor/src/components/block-title/stories/index.story.jsx index 0316872aba2719..1a83dffc182fcb 100644 --- a/packages/block-editor/src/components/block-title/stories/index.story.jsx +++ b/packages/block-editor/src/components/block-title/stories/index.story.jsx @@ -11,6 +11,7 @@ const blocks = [ createBlock( 'core/paragraph' ) ]; const meta = { title: 'BlockEditor/BlockTitle', + id: 'blockeditor-blocktitle', component: BlockTitle, parameters: { docs: { diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.jsx b/packages/block-editor/src/components/border-radius-control/stories/index.story.jsx index 1c26143e054797..15cf46b1990b0b 100644 --- a/packages/block-editor/src/components/border-radius-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import BorderRadiusControl from '../'; const meta = { title: 'BlockEditor/BorderRadiusControl', + id: 'blockeditor-borderradiuscontrol', component: BorderRadiusControl, parameters: { docs: { diff --git a/packages/block-editor/src/components/color-palette/stories/control.story.jsx b/packages/block-editor/src/components/color-palette/stories/control.story.jsx index 62284033badb80..ddafbb1b634cef 100644 --- a/packages/block-editor/src/components/color-palette/stories/control.story.jsx +++ b/packages/block-editor/src/components/color-palette/stories/control.story.jsx @@ -3,6 +3,7 @@ import ColorPaletteControl from '../control'; export default { title: 'BlockEditor/ColorPaletteControl', + id: 'blockeditor-colorpalettecontrol', component: ColorPaletteControl, parameters: { controls: { expanded: true }, diff --git a/packages/block-editor/src/components/date-format-picker/stories/index.story.jsx b/packages/block-editor/src/components/date-format-picker/stories/index.story.jsx index cef7b47620eb09..aa02b281f349e1 100644 --- a/packages/block-editor/src/components/date-format-picker/stories/index.story.jsx +++ b/packages/block-editor/src/components/date-format-picker/stories/index.story.jsx @@ -3,6 +3,7 @@ import DateFormatPicker from '../'; export default { title: 'BlockEditor/DateFormatPicker', + id: 'blockeditor-dateformatpicker', component: DateFormatPicker, parameters: { docs: { diff --git a/packages/block-editor/src/components/dimension-control/stories/index.story.jsx b/packages/block-editor/src/components/dimension-control/stories/index.story.jsx index a46df890319377..e54a0af366e9b3 100644 --- a/packages/block-editor/src/components/dimension-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/dimension-control/stories/index.story.jsx @@ -4,6 +4,7 @@ import DimensionControl from '../'; export default { component: DimensionControl, title: 'BlockEditor/DimensionControl', + id: 'blockeditor-dimensioncontrol', }; const Template = ( props ) => { diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.jsx b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.jsx index 7f50b3f399e4ae..072db5afd052ca 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.jsx +++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.jsx @@ -7,6 +7,7 @@ import AspectRatioTool from '../aspect-ratio-tool'; export default { title: 'BlockEditor/DimensionsTool/AspectRatioTool', + id: 'blockeditor-dimensionstool-aspectratiotool', component: AspectRatioTool, tags: [ 'status-private' ], argTypes: { diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.story.jsx b/packages/block-editor/src/components/dimensions-tool/stories/index.story.jsx index 24eea6b00fedd2..2a7af67415c448 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/index.story.jsx +++ b/packages/block-editor/src/components/dimensions-tool/stories/index.story.jsx @@ -7,6 +7,7 @@ import DimensionsTool from '..'; export default { title: 'BlockEditor/DimensionsTool/DimensionsTool', + id: 'blockeditor-dimensionstool-dimensionstool', component: DimensionsTool, tags: [ 'status-private' ], argTypes: { diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.jsx b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.jsx index 574c52fd09572c..496e2115fe515c 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.jsx +++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.jsx @@ -7,6 +7,7 @@ import ScaleTool from '../scale-tool'; export default { title: 'BlockEditor/DimensionsTool/ScaleTool', + id: 'blockeditor-dimensionstool-scaletool', component: ScaleTool, tags: [ 'status-private' ], argTypes: { diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.jsx b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.jsx index 1113ea27d16b10..90f0783a7fbb12 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.jsx +++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.jsx @@ -7,6 +7,7 @@ import WidthHeightTool from '../width-height-tool'; export default { title: 'BlockEditor/DimensionsTool/WidthHeightTool', + id: 'blockeditor-dimensionstool-widthheighttool', component: WidthHeightTool, tags: [ 'status-private' ], argTypes: { diff --git a/packages/block-editor/src/components/font-family/stories/index.story.jsx b/packages/block-editor/src/components/font-family/stories/index.story.jsx index c2758fd6037dc2..1a636cf9c475bf 100644 --- a/packages/block-editor/src/components/font-family/stories/index.story.jsx +++ b/packages/block-editor/src/components/font-family/stories/index.story.jsx @@ -4,6 +4,7 @@ import FontFamilyControl from '..'; export default { component: FontFamilyControl, title: 'BlockEditor/FontFamilyControl', + id: 'blockeditor-fontfamilycontrol', }; export const Default = { diff --git a/packages/block-editor/src/components/height-control/stories/index.story.jsx b/packages/block-editor/src/components/height-control/stories/index.story.jsx index 3d4ede02b2d864..19ac8bef5379c7 100644 --- a/packages/block-editor/src/components/height-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/height-control/stories/index.story.jsx @@ -4,6 +4,7 @@ import HeightControl from '../'; export default { component: HeightControl, title: 'BlockEditor/HeightControl', + id: 'blockeditor-heightcontrol', }; const Template = ( props ) => { diff --git a/packages/block-editor/src/components/inner-blocks/stories/index.story.jsx b/packages/block-editor/src/components/inner-blocks/stories/index.story.jsx index 14a982dac6b62d..82815683559db0 100644 --- a/packages/block-editor/src/components/inner-blocks/stories/index.story.jsx +++ b/packages/block-editor/src/components/inner-blocks/stories/index.story.jsx @@ -128,6 +128,7 @@ const sourceCode = `registerBlockType( 'my-plugin/my-block', { const meta = { title: 'BlockEditor/InnerBlocks', + id: 'blockeditor-innerblocks', component: InnerBlocks, parameters: { docs: { diff --git a/packages/block-editor/src/components/inserter/stories/index.story.jsx b/packages/block-editor/src/components/inserter/stories/index.story.jsx index 6db66ca5e78d3a..fc9f360b3b9803 100644 --- a/packages/block-editor/src/components/inserter/stories/index.story.jsx +++ b/packages/block-editor/src/components/inserter/stories/index.story.jsx @@ -4,7 +4,7 @@ import { ExperimentalBlockEditorProvider } from '../../provider'; import { patternCategories, patterns, reusableBlocks } from './utils/fixtures'; import Inserter from '../'; -export default { title: 'BlockEditor/Inserter' }; +export default { title: 'BlockEditor/Inserter', id: 'blockeditor-inserter' }; // For the purpose of this story, we need to register the core blocks samples. registerCoreBlocks(); diff --git a/packages/block-editor/src/components/letter-spacing-control/stories/index.story.jsx b/packages/block-editor/src/components/letter-spacing-control/stories/index.story.jsx index 41f701256d85e9..05248c74da36f7 100644 --- a/packages/block-editor/src/components/letter-spacing-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/letter-spacing-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import LetterSpacingControl from '../'; const meta = { title: 'BlockEditor/LetterSpacingControl', + id: 'blockeditor-letterspacingcontrol', component: LetterSpacingControl, parameters: { docs: { diff --git a/packages/block-editor/src/components/line-height-control/stories/index.story.jsx b/packages/block-editor/src/components/line-height-control/stories/index.story.jsx index f1576c886c62cd..4b965f056bbb65 100644 --- a/packages/block-editor/src/components/line-height-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/line-height-control/stories/index.story.jsx @@ -4,6 +4,7 @@ import LineHeightControl from '../'; export default { component: LineHeightControl, title: 'BlockEditor/LineHeightControl', + id: 'blockeditor-lineheightcontrol', }; const Template = ( props ) => { diff --git a/packages/block-editor/src/components/plain-text/stories/index.story.jsx b/packages/block-editor/src/components/plain-text/stories/index.story.jsx index 5a8d5f41ee20f8..443e56cb9d45cb 100644 --- a/packages/block-editor/src/components/plain-text/stories/index.story.jsx +++ b/packages/block-editor/src/components/plain-text/stories/index.story.jsx @@ -3,6 +3,7 @@ import PlainText from '..'; const meta = { title: 'BlockEditor/PlainText', + id: 'blockeditor-plaintext', component: PlainText, parameters: { // FIXME: Story renders PlainText without a label (label). diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.jsx b/packages/block-editor/src/components/resolution-tool/stories/index.story.jsx index f01fd75a0e4787..8aeee78f741468 100644 --- a/packages/block-editor/src/components/resolution-tool/stories/index.story.jsx +++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.jsx @@ -7,6 +7,7 @@ import ResolutionTool from '..'; export default { title: 'BlockEditor/ResolutionControl', + id: 'blockeditor-resolutioncontrol', component: ResolutionTool, tags: [ 'status-private' ], parameters: { diff --git a/packages/block-editor/src/components/tabbed-sidebar/stories/index.story.jsx b/packages/block-editor/src/components/tabbed-sidebar/stories/index.story.jsx index 77d2b561c65b28..462fd510556326 100644 --- a/packages/block-editor/src/components/tabbed-sidebar/stories/index.story.jsx +++ b/packages/block-editor/src/components/tabbed-sidebar/stories/index.story.jsx @@ -3,6 +3,7 @@ import TabbedSidebar from '../'; const meta = { title: 'BlockEditor/TabbedSidebar', + id: 'blockeditor-tabbedsidebar', component: TabbedSidebar, tags: [ 'status-private' ], parameters: { diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.jsx b/packages/block-editor/src/components/text-alignment-control/stories/index.story.jsx index 348329eb8a67cd..aad416d80e52ad 100644 --- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import TextAlignmentControl from '../'; const meta = { title: 'BlockEditor/TextAlignmentControl', + id: 'blockeditor-textalignmentcontrol', component: TextAlignmentControl, tags: [ 'status-private' ], parameters: { diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.jsx b/packages/block-editor/src/components/text-decoration-control/stories/index.story.jsx index c6d41dd1e7251a..1ae338721ee543 100644 --- a/packages/block-editor/src/components/text-decoration-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/text-decoration-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import TextDecorationControl from '../'; const meta = { title: 'BlockEditor/TextDecorationControl', + id: 'blockeditor-textdecorationcontrol', component: TextDecorationControl, parameters: { docs: { diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.jsx b/packages/block-editor/src/components/text-transform-control/stories/index.story.jsx index ff429ae2ed8476..a1798df7e9bad2 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import TextTransformControl from '../'; const meta = { title: 'BlockEditor/TextTransformControl', + id: 'blockeditor-texttransformcontrol', component: TextTransformControl, parameters: { docs: { diff --git a/packages/block-editor/src/components/unit-control/stories/index.story.jsx b/packages/block-editor/src/components/unit-control/stories/index.story.jsx index 58e61b274777dd..c3b6a6ee1e312b 100644 --- a/packages/block-editor/src/components/unit-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/unit-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import UnitControl from '../'; const meta = { title: 'BlockEditor/UnitControl', + id: 'blockeditor-unitcontrol', component: UnitControl, parameters: { docs: { diff --git a/packages/block-editor/src/components/url-popover/stories/index.story.jsx b/packages/block-editor/src/components/url-popover/stories/index.story.jsx index c458d244c29606..191bd9039e94fe 100644 --- a/packages/block-editor/src/components/url-popover/stories/index.story.jsx +++ b/packages/block-editor/src/components/url-popover/stories/index.story.jsx @@ -6,6 +6,7 @@ import URLPopover from '../'; const meta = { title: 'BlockEditor/URLPopover', + id: 'blockeditor-urlpopover', component: URLPopover, parameters: { // FIXME: Story uses a raw unstyled input whose placeholder fails color-contrast. diff --git a/packages/block-editor/src/components/warning/stories/index.story.jsx b/packages/block-editor/src/components/warning/stories/index.story.jsx index 79098753352206..8e50dd5e614f50 100644 --- a/packages/block-editor/src/components/warning/stories/index.story.jsx +++ b/packages/block-editor/src/components/warning/stories/index.story.jsx @@ -4,6 +4,7 @@ import Warning from '../'; const meta = { title: 'BlockEditor/Warning', + id: 'blockeditor-warning', component: Warning, parameters: { docs: { diff --git a/packages/block-editor/src/components/writing-mode-control/stories/index.story.jsx b/packages/block-editor/src/components/writing-mode-control/stories/index.story.jsx index 1e80d08a6d8661..ed5f0309df152b 100644 --- a/packages/block-editor/src/components/writing-mode-control/stories/index.story.jsx +++ b/packages/block-editor/src/components/writing-mode-control/stories/index.story.jsx @@ -3,6 +3,7 @@ import WritingModeControl from '../'; const meta = { title: 'BlockEditor/WritingModeControl', + id: 'blockeditor-writingmodecontrol', component: WritingModeControl, parameters: { docs: { diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx index e87fb90c08f53f..378a27079e86ee 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx +++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx @@ -8,6 +8,7 @@ import type { AlignmentMatrixControlProps } from '../types'; const meta: Meta< typeof AlignmentMatrixControl > = { title: 'Components/AlignmentMatrixControl', + id: 'components-alignmentmatrixcontrol', component: AlignmentMatrixControl, subcomponents: { 'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon, diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx index 3a48c36aa3a938..11fc0faac2cfb7 100644 --- a/packages/components/src/angle-picker-control/stories/index.story.tsx +++ b/packages/components/src/angle-picker-control/stories/index.story.tsx @@ -5,6 +5,7 @@ import { AnglePickerControl } from '..'; const meta: Meta< typeof AnglePickerControl > = { title: 'Components/AnglePickerControl', + id: 'components-anglepickercontrol', component: AnglePickerControl, argTypes: { as: { control: false }, diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx index 8f0bacdbe96553..abc30f96b5b033 100644 --- a/packages/components/src/border-box-control/stories/index.story.tsx +++ b/packages/components/src/border-box-control/stories/index.story.tsx @@ -6,6 +6,7 @@ import { BorderBoxControl } from '../'; const meta: Meta< typeof BorderBoxControl > = { title: 'Components/BorderBoxControl', + id: 'components-borderboxcontrol', component: BorderBoxControl, argTypes: { onChange: { action: 'onChange' }, diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 58a766667a704f..73095c8f6e64e7 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -6,6 +6,7 @@ import type { Border } from '../types'; const meta: Meta< typeof BorderControl > = { title: 'Components/BorderControl', + id: 'components-bordercontrol', component: BorderControl, argTypes: { onChange: { diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index f860ec6811c5ed..d8c3a93a42b3b7 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -5,6 +5,7 @@ import BoxControl from '../'; const meta: Meta< typeof BoxControl > = { title: 'Components/BoxControl', + id: 'components-boxcontrol', component: BoxControl, argTypes: { values: { control: false }, diff --git a/packages/components/src/button/stories/best-practices.mdx b/packages/components/src/button/stories/best-practices.mdx index cb3ca3a347ba55..8054a3066cd817 100644 --- a/packages/components/src/button/stories/best-practices.mdx +++ b/packages/components/src/button/stories/best-practices.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Button diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx index 5b84c17f26989f..9cdb1c7a44fd63 100644 --- a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx +++ b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx @@ -5,6 +5,7 @@ import { DuotonePicker } from '..'; const meta: Meta< typeof DuotonePicker > = { title: 'Components/DuotonePicker', + id: 'components-duotonepicker', component: DuotonePicker, args: { onChange: fn(), diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx index 3e7b1d8a27ea86..c68eec5915c9ff 100644 --- a/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx +++ b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx @@ -3,6 +3,7 @@ import { DuotoneSwatch } from '..'; const meta: Meta< typeof DuotoneSwatch > = { title: 'Components/DuotoneSwatch', + id: 'components-duotoneswatch', component: DuotoneSwatch, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/elevation/stories/index.story.tsx b/packages/components/src/elevation/stories/index.story.tsx index 69448d1792528c..16e4f6ae786e26 100644 --- a/packages/components/src/elevation/stories/index.story.tsx +++ b/packages/components/src/elevation/stories/index.story.tsx @@ -4,6 +4,7 @@ import { Elevation } from '..'; const meta: Meta< typeof Elevation > = { component: Elevation, title: 'Components/Elevation', + id: 'components-elevation', argTypes: { as: { control: { type: 'text' } }, borderRadius: { control: { type: 'text' } }, diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx index c10f81553ab891..a7dd182fcea71c 100644 --- a/packages/components/src/flex/stories/index.story.tsx +++ b/packages/components/src/flex/stories/index.story.tsx @@ -5,6 +5,7 @@ import { View } from '../../view'; const meta: Meta< typeof Flex > = { component: Flex, title: 'Components/Flex', + id: 'components-flex', subcomponents: { FlexBlock, FlexItem }, argTypes: { align: { control: { type: 'text' } }, diff --git a/packages/components/src/focal-point-picker/stories/index.story.tsx b/packages/components/src/focal-point-picker/stories/index.story.tsx index 7a15dd52657db1..3b8b37d2b9ca77 100644 --- a/packages/components/src/focal-point-picker/stories/index.story.tsx +++ b/packages/components/src/focal-point-picker/stories/index.story.tsx @@ -5,6 +5,7 @@ import FocalPointPicker from '..'; const meta: Meta< typeof FocalPointPicker > = { title: 'Components/FocalPointPicker', + id: 'components-focalpointpicker', component: FocalPointPicker, argTypes: { help: { control: 'text' }, diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx index ee0e50ca720016..c88859dc5b1e5d 100644 --- a/packages/components/src/font-size-picker/stories/index.story.tsx +++ b/packages/components/src/font-size-picker/stories/index.story.tsx @@ -5,6 +5,7 @@ import FontSizePicker from '../'; const meta: Meta< typeof FontSizePicker > = { title: 'Components/FontSizePicker', + id: 'components-fontsizepicker', component: FontSizePicker, argTypes: { value: { control: false }, diff --git a/packages/components/src/form-toggle/stories/index.story.tsx b/packages/components/src/form-toggle/stories/index.story.tsx index 3ce81ed9aed22d..bc325fcb79e2ae 100644 --- a/packages/components/src/form-toggle/stories/index.story.tsx +++ b/packages/components/src/form-toggle/stories/index.story.tsx @@ -6,6 +6,7 @@ const meta: Meta< typeof FormToggle > = { tags: [ 'manifest' ], component: FormToggle, title: 'Components/FormToggle', + id: 'components-formtoggle', argTypes: { onChange: { action: 'onChange', diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx index b49a1c127cbce6..240fca1df4de85 100644 --- a/packages/components/src/grid/stories/index.story.tsx +++ b/packages/components/src/grid/stories/index.story.tsx @@ -5,6 +5,7 @@ import { Grid } from '..'; const meta: Meta< typeof Grid > = { component: Grid, title: 'Components/Grid', + id: 'components-grid', argTypes: { as: { control: { type: 'text' } }, align: { control: { type: 'text' } }, diff --git a/packages/components/src/guide/stories/index.story.tsx b/packages/components/src/guide/stories/index.story.tsx index 81cad4c6423c86..b5f05995fe6631 100644 --- a/packages/components/src/guide/stories/index.story.tsx +++ b/packages/components/src/guide/stories/index.story.tsx @@ -5,6 +5,7 @@ import Guide from '..'; const meta: Meta< typeof Guide > = { title: 'Components/Guide', + id: 'components-guide', component: Guide, argTypes: { contentLabel: { control: 'text' }, diff --git a/packages/components/src/icon/stories/index.story.tsx b/packages/components/src/icon/stories/index.story.tsx index 3682609b76c79e..eb1a6002032248 100644 --- a/packages/components/src/icon/stories/index.story.tsx +++ b/packages/components/src/icon/stories/index.story.tsx @@ -6,6 +6,7 @@ import { VStack } from '../../v-stack'; const meta: Meta< typeof Icon > = { title: 'Components/Icon', + id: 'components-icon', component: Icon, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx index d8ed6a12998dc2..d3951c668c6f04 100644 --- a/packages/components/src/item-group/stories/index.story.tsx +++ b/packages/components/src/item-group/stories/index.story.tsx @@ -8,6 +8,7 @@ const meta: Meta< typeof ItemGroup > = { component: ItemGroup, subcomponents: { Item }, title: 'Components/ItemGroup', + id: 'components-itemgroup', argTypes: { as: { control: false }, children: { control: false }, diff --git a/packages/components/src/palette-edit/stories/index.story.tsx b/packages/components/src/palette-edit/stories/index.story.tsx index 704e47a5611a6f..2041f3dde8625d 100644 --- a/packages/components/src/palette-edit/stories/index.story.tsx +++ b/packages/components/src/palette-edit/stories/index.story.tsx @@ -6,6 +6,7 @@ import type { Color, Duotone, Gradient, PaletteElement } from '../types'; const meta: Meta< typeof PaletteEdit > = { title: 'Components/PaletteEdit', + id: 'components-paletteedit', component: PaletteEdit, args: { onChange: fn(), diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx index 7b6f763f9c1ba8..657966a06b6199 100644 --- a/packages/components/src/placeholder/stories/index.story.tsx +++ b/packages/components/src/placeholder/stories/index.story.tsx @@ -9,6 +9,7 @@ const ICONS = { starEmpty, starFilled, styles, wordpress }; const meta: Meta< typeof Placeholder > = { component: Placeholder, title: 'Components/Placeholder', + id: 'components-placeholder', argTypes: { children: { control: false }, notices: { control: false }, diff --git a/packages/components/src/query-controls/stories/index.story.tsx b/packages/components/src/query-controls/stories/index.story.tsx index fa58215d4eff11..02d8dd5e4b6fcd 100644 --- a/packages/components/src/query-controls/stories/index.story.tsx +++ b/packages/components/src/query-controls/stories/index.story.tsx @@ -10,6 +10,7 @@ import type { const meta: Meta< typeof QueryControls > = { title: 'Components/QueryControls', + id: 'components-querycontrols', component: QueryControls, argTypes: { numberOfItems: { control: false }, diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx index 1332ffc76c5017..926a6f7eb1c05a 100644 --- a/packages/components/src/scrollable/stories/index.story.tsx +++ b/packages/components/src/scrollable/stories/index.story.tsx @@ -6,6 +6,7 @@ import { Scrollable } from '..'; const meta: Meta< typeof Scrollable > = { component: Scrollable, title: 'Components/Scrollable', + id: 'components-scrollable', argTypes: { as: { control: { type: 'text' }, diff --git a/packages/components/src/spacer/stories/index.story.tsx b/packages/components/src/spacer/stories/index.story.tsx index cf04b4a9f0eb2b..34c4dc04ad6890 100644 --- a/packages/components/src/spacer/stories/index.story.tsx +++ b/packages/components/src/spacer/stories/index.story.tsx @@ -25,6 +25,7 @@ const controls = [ const meta: Meta< typeof Spacer > = { component: Spacer, title: 'Components/Spacer', + id: 'components-spacer', argTypes: { as: { control: { type: 'text' } }, children: { diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx index 4d5441c8b63fe2..356fb803f27e59 100644 --- a/packages/components/src/toolbar/stories/index.story.tsx +++ b/packages/components/src/toolbar/stories/index.story.tsx @@ -28,6 +28,7 @@ import DropdownMenu from '../../dropdown-menu'; const meta: Meta< typeof Toolbar > = { title: 'Components/Toolbar', + id: 'components-toolbar', component: Toolbar, subcomponents: { ToolbarButton, diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 10dbb043bb5cd5..9b97946bc26ef0 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -13,6 +13,7 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill'; const meta: Meta< typeof ToolsPanel > = { title: 'Components/ToolsPanel', + id: 'components-toolspanel', component: ToolsPanel, subcomponents: { ToolsPanelItem }, argTypes: { diff --git a/packages/components/src/validated-form-controls/components/stories/overview.mdx b/packages/components/src/validated-form-controls/components/stories/overview.mdx index 0aad40e8ab6c90..ff195f34700b68 100644 --- a/packages/components/src/validated-form-controls/components/stories/overview.mdx +++ b/packages/components/src/validated-form-controls/components/stories/overview.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Validated Form Controls diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx index 8cda8da4d20cc5..6efb3f8848fe7b 100644 --- a/packages/components/src/view/stories/index.story.tsx +++ b/packages/components/src/view/stories/index.story.tsx @@ -4,6 +4,7 @@ import { View } from '..'; const meta: Meta< typeof View > = { component: View, title: 'Components/View', + id: 'components-view', argTypes: { as: { control: false }, children: { control: { type: 'text' } }, diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx index 70e084e8dc8fa2..80d8acc8dc04c9 100644 --- a/packages/components/src/z-stack/stories/index.story.tsx +++ b/packages/components/src/z-stack/stories/index.story.tsx @@ -7,6 +7,7 @@ import { ZStack } from '..'; const meta: Meta< typeof ZStack > = { component: ZStack, title: 'Components/ZStack', + id: 'components-zstack', argTypes: { as: { control: { type: 'text' } }, children: { control: false }, diff --git a/packages/dataviews/src/dataform/stories/content.story.tsx b/packages/dataviews/src/dataform/stories/content.story.tsx index 8a2b42128dd4bc..692108e8301a21 100644 --- a/packages/dataviews/src/dataform/stories/content.story.tsx +++ b/packages/dataviews/src/dataform/stories/content.story.tsx @@ -7,6 +7,7 @@ import type { Field, Form } from '../../types'; const meta: Meta< typeof DataForm > = { title: 'DataViews/DataForm/Content', + id: 'dataviews-dataform-content', component: DataForm, parameters: { controls: { disable: true }, diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx index 7ad249b81773b8..dfcfc48c91d489 100644 --- a/packages/dataviews/src/dataform/stories/index.story.tsx +++ b/packages/dataviews/src/dataform/stories/index.story.tsx @@ -13,6 +13,7 @@ import VisibilityComponent from './visibility'; const meta = { tags: [ 'manifest' ], title: 'DataViews/DataForm', + id: 'dataviews-dataform', component: DataForm, }; export default meta; diff --git a/packages/dataviews/src/dataviews-picker/stories/index.story.tsx b/packages/dataviews/src/dataviews-picker/stories/index.story.tsx index 27ade143cf19c5..67a4adfc3c58b0 100644 --- a/packages/dataviews/src/dataviews-picker/stories/index.story.tsx +++ b/packages/dataviews/src/dataviews-picker/stories/index.story.tsx @@ -11,6 +11,7 @@ import { data, fields, type SpaceObject } from './fixtures'; const meta = { tags: [ 'manifest' ], title: 'DataViews/DataViewsPicker', + id: 'dataviews-dataviewspicker', component: DataViewsPicker, } as Meta< typeof DataViewsPicker >; diff --git a/packages/dataviews/src/dataviews/stories/index.story.tsx b/packages/dataviews/src/dataviews/stories/index.story.tsx index 22527ba369d1d1..5dbe64c0333b15 100644 --- a/packages/dataviews/src/dataviews/stories/index.story.tsx +++ b/packages/dataviews/src/dataviews/stories/index.story.tsx @@ -17,6 +17,7 @@ import './style.css'; const meta = { tags: [ 'manifest' ], title: 'DataViews/DataViews', + id: 'dataviews-dataviews', component: DataViews, args: { containerHeight: 'auto', diff --git a/packages/dataviews/src/field-types/stories/index.story.tsx b/packages/dataviews/src/field-types/stories/index.story.tsx index 70883fa8b888bd..47f8ddd3515ea6 100644 --- a/packages/dataviews/src/field-types/stories/index.story.tsx +++ b/packages/dataviews/src/field-types/stories/index.story.tsx @@ -19,6 +19,7 @@ const meta = { }, title: 'DataViews/FieldTypes', + id: 'dataviews-fieldtypes', component: DataForm, argTypes: { type: { diff --git a/packages/editor/src/components/upload-progress-snackbar/stories/index.story.tsx b/packages/editor/src/components/upload-progress-snackbar/stories/index.story.tsx index 14bf08f5edd350..b6d8ba746f7ff1 100644 --- a/packages/editor/src/components/upload-progress-snackbar/stories/index.story.tsx +++ b/packages/editor/src/components/upload-progress-snackbar/stories/index.story.tsx @@ -12,6 +12,7 @@ import { UPLOAD_DONE, UPLOAD_SPINNER } from '../index'; */ const meta: Meta< typeof Snackbar > = { title: 'Editor/UploadProgressSnackbar', + id: 'editor-uploadprogresssnackbar', component: Snackbar, parameters: { docs: { canvas: { sourceState: 'shown' } }, diff --git a/packages/fields/src/stories/index.story.tsx b/packages/fields/src/stories/index.story.tsx index 649d0e18339421..b023f9e0b0500b 100644 --- a/packages/fields/src/stories/index.story.tsx +++ b/packages/fields/src/stories/index.story.tsx @@ -54,6 +54,7 @@ const authorFieldForStory: Field< any > = { export default { title: 'Fields/Base Fields', + id: 'fields-base-fields', component: DataForm, }; diff --git a/packages/global-styles-ui/src/stories/index.story.jsx b/packages/global-styles-ui/src/stories/index.story.jsx index 19dceffea37f61..d8538d4714d244 100644 --- a/packages/global-styles-ui/src/stories/index.story.jsx +++ b/packages/global-styles-ui/src/stories/index.story.jsx @@ -1,7 +1,10 @@ import { useState } from '@wordpress/element'; import { GlobalStylesUI as GlobalStylesUIComponent } from '../global-styles-ui'; -export default { title: 'GlobalStylesUI/GlobalStylesUI' }; +export default { + title: 'GlobalStylesUI/GlobalStylesUI', + id: 'globalstylesui-globalstylesui', +}; const BASE_SETTINGS = { settings: { diff --git a/packages/grid/src/dashboard-grid/stories/index.story.tsx b/packages/grid/src/dashboard-grid/stories/index.story.tsx index f7a65d684defbc..838997bac741b9 100644 --- a/packages/grid/src/dashboard-grid/stories/index.story.tsx +++ b/packages/grid/src/dashboard-grid/stories/index.story.tsx @@ -13,6 +13,7 @@ import type { const meta: Meta< typeof DashboardGrid > = { title: 'Grid/DashboardGrid', + id: 'grid-dashboardgrid', component: DashboardGrid, tags: [ 'status-experimental' ], args: { diff --git a/packages/grid/src/dashboard-lanes/stories/index.story.tsx b/packages/grid/src/dashboard-lanes/stories/index.story.tsx index 56fa882b25c358..f8ce14ba8d22b2 100644 --- a/packages/grid/src/dashboard-lanes/stories/index.story.tsx +++ b/packages/grid/src/dashboard-lanes/stories/index.story.tsx @@ -6,6 +6,7 @@ import type { GridOverlayRenderProps } from '../../shared/types'; const meta: Meta< typeof DashboardLanes > = { title: 'Grid/DashboardLanes', + id: 'grid-dashboardlanes', component: DashboardLanes, tags: [ 'status-experimental' ], args: { diff --git a/packages/icons/src/icon/stories/index.story.tsx b/packages/icons/src/icon/stories/index.story.tsx index 1a60e3907e312a..553b569f9478ba 100644 --- a/packages/icons/src/icon/stories/index.story.tsx +++ b/packages/icons/src/icon/stories/index.story.tsx @@ -7,6 +7,7 @@ import * as icons from '../../'; const meta = { component: Icon, title: 'Icons/Icon', + id: 'icons-icon', parameters: { controls: { hideNoControlsWarning: true }, }, diff --git a/packages/image-cropper/src/stories/index.story.tsx b/packages/image-cropper/src/stories/index.story.tsx index 0e9e2d5ebb235a..b2cf6a407475a3 100644 --- a/packages/image-cropper/src/stories/index.story.tsx +++ b/packages/image-cropper/src/stories/index.story.tsx @@ -14,6 +14,7 @@ import './style.css'; export default { title: 'ImageCropper/ImageCropper', + id: 'imagecropper-imagecropper', component: ImageCropper, }; diff --git a/packages/media-editor/src/components/rotation-ruler/stories/index.story.tsx b/packages/media-editor/src/components/rotation-ruler/stories/index.story.tsx index 38a4856ba4fe01..09152f6504275b 100644 --- a/packages/media-editor/src/components/rotation-ruler/stories/index.story.tsx +++ b/packages/media-editor/src/components/rotation-ruler/stories/index.story.tsx @@ -6,6 +6,7 @@ import '../style.scss'; const meta: Meta< typeof RotationRuler > = { title: 'MediaEditor/RotationRuler', + id: 'mediaeditor-rotationruler', component: RotationRuler, args: { label: __( 'Fine rotation' ), diff --git a/packages/media-editor/src/image-editor/stories/rectangle-crop.story.tsx b/packages/media-editor/src/image-editor/stories/rectangle-crop.story.tsx index 891ccad4373dd1..c0dda52cc91db1 100644 --- a/packages/media-editor/src/image-editor/stories/rectangle-crop.story.tsx +++ b/packages/media-editor/src/image-editor/stories/rectangle-crop.story.tsx @@ -119,6 +119,7 @@ function resolveAspectRatio( const meta: Meta< typeof Cropper > = { title: 'MediaEditor/ImageEditor', + id: 'mediaeditor-imageeditor', component: Cropper, tags: [ 'status-experimental' ], }; diff --git a/packages/media-fields/src/stories/index.story.tsx b/packages/media-fields/src/stories/index.story.tsx index c4e0d551536ef0..565b2a499f663c 100644 --- a/packages/media-fields/src/stories/index.story.tsx +++ b/packages/media-fields/src/stories/index.story.tsx @@ -19,6 +19,7 @@ import { export default { title: 'Fields/Media Fields', + id: 'fields-media-fields', component: DataForm, }; diff --git a/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx b/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx index 71f22494f72abe..a46b2588dfb6b6 100644 --- a/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx +++ b/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx @@ -45,6 +45,7 @@ const Verifier: React.FC< VerifierProps > = () => null; */ const meta: Meta< typeof Verifier > = { title: 'Design System/Theme/Theme Provider/Brand Color Fallbacks', + id: 'design-system-theme-theme-provider-brand-color-fallbacks', component: Verifier, argTypes: { adminThemeColor: { diff --git a/packages/theme/src/color-ramps/stories/index.story.tsx b/packages/theme/src/color-ramps/stories/index.story.tsx index 440a9d5cd9b92e..3186c2c79229bb 100644 --- a/packages/theme/src/color-ramps/stories/index.story.tsx +++ b/packages/theme/src/color-ramps/stories/index.story.tsx @@ -20,6 +20,7 @@ const ColorGen = ( props: { const meta: Meta< typeof ColorGen > = { title: 'Design System/Theme/Theme Provider/Color Scales', + id: 'design-system-theme-theme-provider-color-scales', component: ColorGen, argTypes: { background: { diff --git a/packages/theme/src/stories/index.story.tsx b/packages/theme/src/stories/index.story.tsx index 3196b745412216..0b7fe875300ecf 100644 --- a/packages/theme/src/stories/index.story.tsx +++ b/packages/theme/src/stories/index.story.tsx @@ -9,6 +9,7 @@ const wpdsColorTokens = wpdsTokens.filter( ( name ) => const meta: Meta< typeof ThemeProvider > = { title: 'Design System/Theme/Theme Provider', + id: 'design-system-theme-theme-provider', component: ThemeProvider, args: { isRoot: true, diff --git a/packages/theme/src/stories/introduction.mdx b/packages/theme/src/stories/introduction.mdx index 48466f6d120b10..d19e08bb930cb4 100644 --- a/packages/theme/src/stories/introduction.mdx +++ b/packages/theme/src/stories/introduction.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import Readme from '../../README.md?raw'; - + {Readme} diff --git a/packages/theme/src/stories/tokens.mdx b/packages/theme/src/stories/tokens.mdx index fdbe171645b3e2..ede51670cb89df 100644 --- a/packages/theme/src/stories/tokens.mdx +++ b/packages/theme/src/stories/tokens.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import Tokens from '../../docs/tokens.md?raw'; - + {Tokens} diff --git a/packages/theme/src/stories/typography.mdx b/packages/theme/src/stories/typography.mdx index da97a1b0ac03ba..9305d3bec9fe9f 100644 --- a/packages/theme/src/stories/typography.mdx +++ b/packages/theme/src/stories/typography.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; import { TypographyTokenPreview } from './typography-preview'; import '@wordpress/theme/design-tokens.css'; - + # Typography tokens diff --git a/packages/ui/src/alert-dialog/stories/index.story.tsx b/packages/ui/src/alert-dialog/stories/index.story.tsx index 37c82c17a416aa..8558d2b40fd57e 100644 --- a/packages/ui/src/alert-dialog/stories/index.story.tsx +++ b/packages/ui/src/alert-dialog/stories/index.story.tsx @@ -9,6 +9,7 @@ import { Text } from '../../text'; const meta: Meta< typeof AlertDialog.Root > = { title: 'Design System/Components/AlertDialog', + id: 'design-system-components-alertdialog', component: AlertDialog.Root, subcomponents: { 'AlertDialog.Trigger': AlertDialog.Trigger, diff --git a/packages/ui/src/badge/stories/index.story.tsx b/packages/ui/src/badge/stories/index.story.tsx index 1a1a0462c56731..c29d55f78ef2c5 100644 --- a/packages/ui/src/badge/stories/index.story.tsx +++ b/packages/ui/src/badge/stories/index.story.tsx @@ -5,6 +5,7 @@ import { Badge } from '../index'; const meta: Meta< typeof Badge > = { tags: [ 'manifest' ], title: 'Design System/Components/Badge', + id: 'design-system-components-badge', component: Badge, parameters: { componentStatus: { diff --git a/packages/ui/src/badge/stories/usage-guidelines.story.tsx b/packages/ui/src/badge/stories/usage-guidelines.story.tsx index fcdbedaca5f8f8..341c790ed54325 100644 --- a/packages/ui/src/badge/stories/usage-guidelines.story.tsx +++ b/packages/ui/src/badge/stories/usage-guidelines.story.tsx @@ -7,6 +7,7 @@ import { Text } from '../../text'; const meta: Meta< typeof Badge > = { title: 'Design System/Components/Badge/Usage Guidelines', + id: 'design-system-components-badge-usage-guidelines', component: Badge, decorators: [ ( Story ) => ( diff --git a/packages/ui/src/button/stories/index.story.tsx b/packages/ui/src/button/stories/index.story.tsx index cd438f959839dc..b9f1c5efda8193 100644 --- a/packages/ui/src/button/stories/index.story.tsx +++ b/packages/ui/src/button/stories/index.story.tsx @@ -16,6 +16,7 @@ import * as Tooltip from '../../tooltip'; const meta: Meta< typeof Button > = { title: 'Design System/Components/Button', + id: 'design-system-components-button', component: Button, subcomponents: { 'Button.Icon': Button.Icon, diff --git a/packages/ui/src/button/stories/usage-guidelines.story.tsx b/packages/ui/src/button/stories/usage-guidelines.story.tsx index 662bed331536f0..756134181c7fe5 100644 --- a/packages/ui/src/button/stories/usage-guidelines.story.tsx +++ b/packages/ui/src/button/stories/usage-guidelines.story.tsx @@ -11,6 +11,7 @@ import * as Tooltip from '../../tooltip'; const meta: Meta = { title: 'Design System/Components/Button/Usage Guidelines', + id: 'design-system-components-button-usage-guidelines', parameters: { controls: { disable: true }, }, diff --git a/packages/ui/src/calendar/stories/index.story.tsx b/packages/ui/src/calendar/stories/index.story.tsx index 85e1a937d2bd17..3608bd3a46d2fd 100644 --- a/packages/ui/src/calendar/stories/index.story.tsx +++ b/packages/ui/src/calendar/stories/index.story.tsx @@ -13,6 +13,7 @@ import { const meta: Meta< typeof Calendar > = { tags: [ 'manifest' ], title: 'Design System/Components/Calendar/Calendar', + id: 'design-system-components-calendar-calendar', component: Calendar, parameters: { componentStatus: { diff --git a/packages/ui/src/calendar/stories/range-calendar.story.tsx b/packages/ui/src/calendar/stories/range-calendar.story.tsx index 862ef56347f933..cd7b320c753179 100644 --- a/packages/ui/src/calendar/stories/range-calendar.story.tsx +++ b/packages/ui/src/calendar/stories/range-calendar.story.tsx @@ -14,6 +14,7 @@ import { const meta: Meta< typeof RangeCalendar > = { tags: [ 'manifest' ], title: 'Design System/Components/Calendar/RangeCalendar', + id: 'design-system-components-calendar-rangecalendar', component: RangeCalendar, parameters: { componentStatus: { diff --git a/packages/ui/src/calendar/stories/usage-guidelines.mdx b/packages/ui/src/calendar/stories/usage-guidelines.mdx index 364bc387e0d77c..9adee0c24544f6 100644 --- a/packages/ui/src/calendar/stories/usage-guidelines.mdx +++ b/packages/ui/src/calendar/stories/usage-guidelines.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Calendar diff --git a/packages/ui/src/card/stories/index.story.tsx b/packages/ui/src/card/stories/index.story.tsx index 4f55c18e40a01b..61e1feeddf2535 100644 --- a/packages/ui/src/card/stories/index.story.tsx +++ b/packages/ui/src/card/stories/index.story.tsx @@ -6,6 +6,7 @@ import * as Card from '../index'; const meta: Meta< typeof Card.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/Card', + id: 'design-system-components-card', component: Card.Root, subcomponents: { 'Card.Header': Card.Header, diff --git a/packages/ui/src/collapsible-card/stories/index.story.tsx b/packages/ui/src/collapsible-card/stories/index.story.tsx index 7e61b2a4891ec0..5d274bde141b35 100644 --- a/packages/ui/src/collapsible-card/stories/index.story.tsx +++ b/packages/ui/src/collapsible-card/stories/index.story.tsx @@ -7,6 +7,7 @@ import * as CollapsibleCard from '../index'; const meta: Meta< typeof CollapsibleCard.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/CollapsibleCard', + id: 'design-system-components-collapsiblecard', component: CollapsibleCard.Root, subcomponents: { 'CollapsibleCard.Header': CollapsibleCard.Header, diff --git a/packages/ui/src/collapsible/stories/index.story.tsx b/packages/ui/src/collapsible/stories/index.story.tsx index fbadfe8a1382b8..c71e49942ffbf8 100644 --- a/packages/ui/src/collapsible/stories/index.story.tsx +++ b/packages/ui/src/collapsible/stories/index.story.tsx @@ -5,6 +5,7 @@ import * as Collapsible from '../index'; const meta: Meta< typeof Collapsible.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/Collapsible', + id: 'design-system-components-collapsible', component: Collapsible.Root, subcomponents: { 'Collapsible.Trigger': Collapsible.Trigger, diff --git a/packages/ui/src/dialog/stories/index.story.tsx b/packages/ui/src/dialog/stories/index.story.tsx index 511be586d43db9..4cc86058e3e26e 100644 --- a/packages/ui/src/dialog/stories/index.story.tsx +++ b/packages/ui/src/dialog/stories/index.story.tsx @@ -7,6 +7,7 @@ import * as Dialog from '../index'; const meta: Meta< typeof Dialog.Root > = { title: 'Design System/Components/Dialog', + id: 'design-system-components-dialog', component: Dialog.Root, subcomponents: { 'Dialog.Trigger': Dialog.Trigger, diff --git a/packages/ui/src/dialog/stories/usage-guidelines.story.tsx b/packages/ui/src/dialog/stories/usage-guidelines.story.tsx index 9dba03e5727227..52fc3b9ef919a3 100644 --- a/packages/ui/src/dialog/stories/usage-guidelines.story.tsx +++ b/packages/ui/src/dialog/stories/usage-guidelines.story.tsx @@ -8,6 +8,7 @@ import * as Dialog from '../index'; const meta: Meta = { title: 'Design System/Components/Dialog/Usage Guidelines', + id: 'design-system-components-dialog-usage-guidelines', parameters: { controls: { disable: true }, }, diff --git a/packages/ui/src/drawer/stories/index.story.tsx b/packages/ui/src/drawer/stories/index.story.tsx index d5ba642b43a5e7..4c233aaaacfc7c 100644 --- a/packages/ui/src/drawer/stories/index.story.tsx +++ b/packages/ui/src/drawer/stories/index.story.tsx @@ -6,6 +6,7 @@ import * as Drawer from '../index'; const meta: Meta< typeof Drawer.Root > = { title: 'Design System/Components/Drawer', + id: 'design-system-components-drawer', component: Drawer.Root, subcomponents: { 'Drawer.Trigger': Drawer.Trigger, diff --git a/packages/ui/src/empty-state/stories/index.story.tsx b/packages/ui/src/empty-state/stories/index.story.tsx index 6809f515c91f0e..1713f97dc90a3c 100644 --- a/packages/ui/src/empty-state/stories/index.story.tsx +++ b/packages/ui/src/empty-state/stories/index.story.tsx @@ -6,6 +6,7 @@ import * as EmptyState from '../'; const meta: Meta< typeof EmptyState.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/EmptyState', + id: 'design-system-components-emptystate', component: EmptyState.Root, subcomponents: { 'EmptyState.Visual': EmptyState.Visual, diff --git a/packages/ui/src/form/input-control/stories/index.story.tsx b/packages/ui/src/form/input-control/stories/index.story.tsx index b3ac513f7b39d4..6cd2f28772e56a 100644 --- a/packages/ui/src/form/input-control/stories/index.story.tsx +++ b/packages/ui/src/form/input-control/stories/index.story.tsx @@ -17,6 +17,7 @@ import { const meta: Meta< typeof InputControl > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/InputControl', + id: 'design-system-components-form-inputcontrol', component: InputControl, argTypes: { defaultValue: { control: false }, diff --git a/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx b/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx index b222fde1e1e579..a066e38b64505b 100644 --- a/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx @@ -22,6 +22,7 @@ import { const meta: Meta< typeof Autocomplete.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/Autocomplete', + id: 'design-system-components-form-primitives-autocomplete', component: Autocomplete.Root, subcomponents: { 'Autocomplete.Portal': Autocomplete.Portal, diff --git a/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx b/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx index 07448e13bc47e6..5313a60ca31fab 100644 --- a/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx @@ -3,6 +3,7 @@ import { Checkbox } from '../'; const meta: Meta< typeof Checkbox > = { title: 'Design System/Components/Form/Primitives/Checkbox', + id: 'design-system-components-form-primitives-checkbox', component: Checkbox, parameters: { componentStatus: { diff --git a/packages/ui/src/form/primitives/combobox/stories/index.story.tsx b/packages/ui/src/form/primitives/combobox/stories/index.story.tsx index fad44d7bdccc7a..27dcfd6a12039d 100644 --- a/packages/ui/src/form/primitives/combobox/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/combobox/stories/index.story.tsx @@ -13,6 +13,7 @@ import { const meta: Meta< typeof Combobox.Root > = { title: 'Design System/Components/Form/Primitives/Combobox', + id: 'design-system-components-form-primitives-combobox', component: Combobox.Root, subcomponents: { 'Combobox.Trigger': Combobox.Trigger, diff --git a/packages/ui/src/form/primitives/control-with-error/stories/index.story.tsx b/packages/ui/src/form/primitives/control-with-error/stories/index.story.tsx index 60b059c0858499..ae9726568a6c47 100644 --- a/packages/ui/src/form/primitives/control-with-error/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/control-with-error/stories/index.story.tsx @@ -6,6 +6,7 @@ import { formDecorator } from '../../../stories/shared'; const meta: Meta< typeof ControlWithError > = { title: 'Design System/Components/Form/Primitives/ControlWithError', + id: 'design-system-components-form-primitives-controlwitherror', component: ControlWithError, argTypes: { children: { control: false }, diff --git a/packages/ui/src/form/primitives/field/stories/index.story.tsx b/packages/ui/src/form/primitives/field/stories/index.story.tsx index 5b66d5fa99a017..2fcd5b9f7f839c 100644 --- a/packages/ui/src/form/primitives/field/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/field/stories/index.story.tsx @@ -8,6 +8,7 @@ import { DETAILS_EXAMPLE } from '../../../stories/shared'; const meta: Meta< typeof Field.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/Field', + id: 'design-system-components-form-primitives-field', component: Field.Root, subcomponents: { 'Field.Item': Field.Item, diff --git a/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx b/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx index f7bd94d2502b47..7bb7f7ca281c63 100644 --- a/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx @@ -5,6 +5,7 @@ import { DETAILS_EXAMPLE } from '../../../stories/shared'; const meta: Meta< typeof Fieldset.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/Fieldset', + id: 'design-system-components-form-primitives-fieldset', component: Fieldset.Root, subcomponents: { 'Fieldset.Legend': Fieldset.Legend, diff --git a/packages/ui/src/form/primitives/input-layout/stories/index.story.tsx b/packages/ui/src/form/primitives/input-layout/stories/index.story.tsx index 1d2ac3631e523f..df04b249d1ab39 100644 --- a/packages/ui/src/form/primitives/input-layout/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/input-layout/stories/index.story.tsx @@ -6,6 +6,7 @@ import { IconButton } from '../../../../icon-button'; const meta: Meta< typeof InputLayout > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/InputLayout', + id: 'design-system-components-form-primitives-inputlayout', component: InputLayout, subcomponents: { 'InputLayout.Slot': InputLayout.Slot, diff --git a/packages/ui/src/form/primitives/input/stories/index.story.tsx b/packages/ui/src/form/primitives/input/stories/index.story.tsx index 585190d0421416..030728cabd8e1c 100644 --- a/packages/ui/src/form/primitives/input/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/input/stories/index.story.tsx @@ -6,6 +6,7 @@ import { WithSuffixControl as InputLayoutWithSuffixControl } from '../../input-l const meta: Meta< typeof Input > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/Input', + id: 'design-system-components-form-primitives-input', component: Input, argTypes: { defaultValue: { control: false }, diff --git a/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx b/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx index b583e8afa68d5b..b00f5319ab95b7 100644 --- a/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx @@ -11,6 +11,7 @@ import { ITEMS } from './fixtures'; const meta: Meta< typeof SearchableChipSelect > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/SearchableChipSelect', + id: 'design-system-components-form-primitives-searchablechipselect', component: SearchableChipSelect, subcomponents: { 'SearchableChipSelect.Group': SearchableChipSelect.Group, diff --git a/packages/ui/src/form/primitives/select/stories/index.story.tsx b/packages/ui/src/form/primitives/select/stories/index.story.tsx index 8b06139905ab48..45d25901eb120c 100644 --- a/packages/ui/src/form/primitives/select/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/select/stories/index.story.tsx @@ -4,6 +4,7 @@ import * as Select from '../'; const meta: Meta< typeof Select.Root > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/Select', + id: 'design-system-components-form-primitives-select', component: Select.Root, subcomponents: { 'Select.Trigger': Select.Trigger, diff --git a/packages/ui/src/form/primitives/stories/overview.mdx b/packages/ui/src/form/primitives/stories/overview.mdx index 4bc23ab241d404..c297f5214c9bd0 100644 --- a/packages/ui/src/form/primitives/stories/overview.mdx +++ b/packages/ui/src/form/primitives/stories/overview.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; # Form Primitives - + These form primitives are the low-level building blocks for form-related components. Outside of rare, special use cases, a normal developer should not need to use these primitives directly. diff --git a/packages/ui/src/form/primitives/textarea/stories/index.story.tsx b/packages/ui/src/form/primitives/textarea/stories/index.story.tsx index 666be5cb877fe3..05c327f0ba63df 100644 --- a/packages/ui/src/form/primitives/textarea/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/textarea/stories/index.story.tsx @@ -4,6 +4,7 @@ import { Textarea } from '../index'; const meta: Meta< typeof Textarea > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/Textarea', + id: 'design-system-components-form-primitives-textarea', component: Textarea, parameters: { componentStatus: { diff --git a/packages/ui/src/form/primitives/validity-indicator/stories/index.story.tsx b/packages/ui/src/form/primitives/validity-indicator/stories/index.story.tsx index c3eea387646d91..7afab8ac76c091 100644 --- a/packages/ui/src/form/primitives/validity-indicator/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/validity-indicator/stories/index.story.tsx @@ -4,6 +4,7 @@ import { ValidityIndicator } from '../index'; const meta: Meta< typeof ValidityIndicator > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/Primitives/ValidityIndicator', + id: 'design-system-components-form-primitives-validityindicator', component: ValidityIndicator, parameters: { componentStatus: { diff --git a/packages/ui/src/form/searchable-chip-select-control/stories/index.story.tsx b/packages/ui/src/form/searchable-chip-select-control/stories/index.story.tsx index 088cd828c1885a..517326a46c86f8 100644 --- a/packages/ui/src/form/searchable-chip-select-control/stories/index.story.tsx +++ b/packages/ui/src/form/searchable-chip-select-control/stories/index.story.tsx @@ -22,6 +22,7 @@ import { const meta: Meta< typeof SearchableChipSelectControl > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/SearchableChipSelectControl', + id: 'design-system-components-form-searchablechipselectcontrol', component: SearchableChipSelectControl, subcomponents: { 'SearchableChipSelectControl.Group': SearchableChipSelectControl.Group, diff --git a/packages/ui/src/form/select-control/stories/index.story.tsx b/packages/ui/src/form/select-control/stories/index.story.tsx index b87657e6aa61d4..d9ac094dc6ca20 100644 --- a/packages/ui/src/form/select-control/stories/index.story.tsx +++ b/packages/ui/src/form/select-control/stories/index.story.tsx @@ -10,6 +10,7 @@ import { const meta: Meta< typeof SelectControl > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/SelectControl', + id: 'design-system-components-form-selectcontrol', component: SelectControl, subcomponents: { 'SelectControl.Group': SelectControl.Group, diff --git a/packages/ui/src/form/textarea-control/stories/index.story.tsx b/packages/ui/src/form/textarea-control/stories/index.story.tsx index 6435ee4cfc5400..6e7b40f36992e1 100644 --- a/packages/ui/src/form/textarea-control/stories/index.story.tsx +++ b/packages/ui/src/form/textarea-control/stories/index.story.tsx @@ -8,6 +8,7 @@ import { const meta: Meta< typeof TextareaControl > = { tags: [ 'manifest' ], title: 'Design System/Components/Form/TextareaControl', + id: 'design-system-components-form-textareacontrol', component: TextareaControl, argTypes: { defaultValue: { control: false }, diff --git a/packages/ui/src/form/with-validation/validated-input-control/stories/index.story.tsx b/packages/ui/src/form/with-validation/validated-input-control/stories/index.story.tsx index 3ff0dc7987d888..bf235e20e83c50 100644 --- a/packages/ui/src/form/with-validation/validated-input-control/stories/index.story.tsx +++ b/packages/ui/src/form/with-validation/validated-input-control/stories/index.story.tsx @@ -8,6 +8,7 @@ import { formDecorator } from '../../../stories/shared'; const meta: Meta< typeof ValidatedInputControl > = { title: 'Design System/Components/Form/With Validation/ValidatedInputControl', + id: 'design-system-components-form-with-validation-validatedinputcontrol', component: ValidatedInputControl, argTypes: { customValidity: { control: false }, diff --git a/packages/ui/src/form/with-validation/validated-textarea-control/stories/index.story.tsx b/packages/ui/src/form/with-validation/validated-textarea-control/stories/index.story.tsx index df8e60dd981aa2..5593dc1e062ad1 100644 --- a/packages/ui/src/form/with-validation/validated-textarea-control/stories/index.story.tsx +++ b/packages/ui/src/form/with-validation/validated-textarea-control/stories/index.story.tsx @@ -5,6 +5,7 @@ import { formDecorator } from '../../../stories/shared'; const meta: Meta< typeof ValidatedTextareaControl > = { title: 'Design System/Components/Form/With Validation/ValidatedTextareaControl', + id: 'design-system-components-form-with-validation-validatedtextareacontrol', component: ValidatedTextareaControl, argTypes: { customValidity: { control: false }, diff --git a/packages/ui/src/icon-button/stories/index.story.tsx b/packages/ui/src/icon-button/stories/index.story.tsx index eb38b925a172bb..2dc77b317adb52 100644 --- a/packages/ui/src/icon-button/stories/index.story.tsx +++ b/packages/ui/src/icon-button/stories/index.story.tsx @@ -19,6 +19,7 @@ import * as Tooltip from '../../tooltip'; const meta: Meta< typeof IconButton > = { title: 'Design System/Components/IconButton', + id: 'design-system-components-iconbutton', component: IconButton, argTypes: { 'aria-pressed': { diff --git a/packages/ui/src/icon/stories/index.story.tsx b/packages/ui/src/icon/stories/index.story.tsx index aa9de814ca5929..a8324f0d80329b 100644 --- a/packages/ui/src/icon/stories/index.story.tsx +++ b/packages/ui/src/icon/stories/index.story.tsx @@ -4,6 +4,7 @@ import { Icon } from '../index'; const meta: Meta< typeof Icon > = { title: 'Design System/Components/Icon', + id: 'design-system-components-icon', component: Icon, tags: [ 'manifest' ], decorators: [ diff --git a/packages/ui/src/link-button/stories/index.story.tsx b/packages/ui/src/link-button/stories/index.story.tsx index 51bb900f87dc81..4de77ff9ac0f89 100644 --- a/packages/ui/src/link-button/stories/index.story.tsx +++ b/packages/ui/src/link-button/stories/index.story.tsx @@ -5,6 +5,7 @@ import { LinkButton } from '../index'; const meta: Meta< typeof LinkButton > = { title: 'Design System/Components/LinkButton', + id: 'design-system-components-linkbutton', component: LinkButton, subcomponents: { 'LinkButton.Icon': LinkButton.Icon, diff --git a/packages/ui/src/link/stories/index.story.tsx b/packages/ui/src/link/stories/index.story.tsx index 77db6759d60682..a3d907fc42832b 100644 --- a/packages/ui/src/link/stories/index.story.tsx +++ b/packages/ui/src/link/stories/index.story.tsx @@ -5,6 +5,7 @@ import { Text } from '../../text'; const meta: Meta< typeof Link > = { title: 'Design System/Components/Link', + id: 'design-system-components-link', component: Link, tags: [ 'manifest' ], parameters: { diff --git a/packages/ui/src/menu/stories/index.story.tsx b/packages/ui/src/menu/stories/index.story.tsx index 7c89883ed0c8e4..f23fdd8777f453 100644 --- a/packages/ui/src/menu/stories/index.story.tsx +++ b/packages/ui/src/menu/stories/index.story.tsx @@ -16,6 +16,7 @@ import * as Menu from '../'; const meta: Meta< typeof Menu.Root > = { title: 'Design System/Components/Menu', + id: 'design-system-components-menu', component: Menu.Root, subcomponents: { 'Menu.Trigger': Menu.Trigger, diff --git a/packages/ui/src/menu/stories/usage-guidelines.story.tsx b/packages/ui/src/menu/stories/usage-guidelines.story.tsx index 5a3f6057368762..7c00ea0ad32445 100644 --- a/packages/ui/src/menu/stories/usage-guidelines.story.tsx +++ b/packages/ui/src/menu/stories/usage-guidelines.story.tsx @@ -6,6 +6,7 @@ import * as Menu from '../'; const meta: Meta = { title: 'Design System/Components/Menu/Usage Guidelines', + id: 'design-system-components-menu-usage-guidelines', parameters: { controls: { disable: true }, }, diff --git a/packages/ui/src/notice/stories/index.story.tsx b/packages/ui/src/notice/stories/index.story.tsx index 28a2ceaf1119a1..e66475b56cbb2c 100644 --- a/packages/ui/src/notice/stories/index.story.tsx +++ b/packages/ui/src/notice/stories/index.story.tsx @@ -4,6 +4,7 @@ import * as Notice from '../index'; const meta: Meta< typeof Notice.Root > = { title: 'Design System/Components/Notice', + id: 'design-system-components-notice', component: Notice.Root, subcomponents: { 'Notice.Title': Notice.Title, diff --git a/packages/ui/src/popover/stories/index.story.tsx b/packages/ui/src/popover/stories/index.story.tsx index 8abcb814006aab..8dcaaf44859525 100644 --- a/packages/ui/src/popover/stories/index.story.tsx +++ b/packages/ui/src/popover/stories/index.story.tsx @@ -10,6 +10,7 @@ import { GenericIframe, useMeasure } from './utils'; const meta: Meta< typeof Popover.Root > = { title: 'Design System/Components/Popover', + id: 'design-system-components-popover', component: Popover.Root, subcomponents: { 'Popover.Trigger': Popover.Trigger, diff --git a/packages/ui/src/skeleton/stories/index.story.tsx b/packages/ui/src/skeleton/stories/index.story.tsx index 686005b37fb460..ee4beb4010c67f 100644 --- a/packages/ui/src/skeleton/stories/index.story.tsx +++ b/packages/ui/src/skeleton/stories/index.story.tsx @@ -4,6 +4,7 @@ import { Skeleton } from '../index'; const meta: Meta< typeof Skeleton > = { tags: [ 'manifest' ], title: 'Design System/Components/Skeleton', + id: 'design-system-components-skeleton', component: Skeleton, parameters: { componentStatus: { diff --git a/packages/ui/src/spinner/stories/index.story.tsx b/packages/ui/src/spinner/stories/index.story.tsx index baf5ce48b04b12..9a4ec305e65538 100644 --- a/packages/ui/src/spinner/stories/index.story.tsx +++ b/packages/ui/src/spinner/stories/index.story.tsx @@ -4,6 +4,7 @@ import { Spinner } from '../index'; const meta: Meta< typeof Spinner > = { tags: [ 'manifest' ], title: 'Design System/Components/Spinner', + id: 'design-system-components-spinner', component: Spinner, parameters: { componentStatus: { diff --git a/packages/ui/src/stack/stories/index.story.tsx b/packages/ui/src/stack/stories/index.story.tsx index fed5f6f990efd7..80700c0fe0bec2 100644 --- a/packages/ui/src/stack/stories/index.story.tsx +++ b/packages/ui/src/stack/stories/index.story.tsx @@ -4,6 +4,7 @@ import { Stack } from '../index'; const meta: Meta< typeof Stack > = { tags: [ 'manifest' ], title: 'Design System/Components/Stack', + id: 'design-system-components-stack', component: Stack, parameters: { componentStatus: { diff --git a/packages/ui/src/stories/introduction.mdx b/packages/ui/src/stories/introduction.mdx index 9a096d0d5c34c3..5665f0a9a41d9a 100644 --- a/packages/ui/src/stories/introduction.mdx +++ b/packages/ui/src/stories/introduction.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import Readme from '../../README.md?raw'; - + {Readme} diff --git a/packages/ui/src/tabs/stories/best-practices.mdx b/packages/ui/src/tabs/stories/best-practices.mdx index 785d9048d8790a..3ad92d021982a9 100644 --- a/packages/ui/src/tabs/stories/best-practices.mdx +++ b/packages/ui/src/tabs/stories/best-practices.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Tabs diff --git a/packages/ui/src/tabs/stories/index.story.tsx b/packages/ui/src/tabs/stories/index.story.tsx index 49509704a9940e..a10f7595e3835a 100644 --- a/packages/ui/src/tabs/stories/index.story.tsx +++ b/packages/ui/src/tabs/stories/index.story.tsx @@ -6,6 +6,7 @@ import * as Tooltip from '../../tooltip'; const meta: Meta< typeof Tabs.Root > = { title: 'Design System/Components/Tabs', + id: 'design-system-components-tabs', component: Tabs.Root, tags: [ 'manifest' ], subcomponents: { diff --git a/packages/ui/src/text/stories/index.story.tsx b/packages/ui/src/text/stories/index.story.tsx index 61a14a95eadb95..98e4b7d23af005 100644 --- a/packages/ui/src/text/stories/index.story.tsx +++ b/packages/ui/src/text/stories/index.story.tsx @@ -5,6 +5,7 @@ import { Stack } from '../../stack'; const meta: Meta< typeof Text > = { tags: [ 'manifest' ], title: 'Design System/Components/Text', + id: 'design-system-components-text', component: Text, parameters: { componentStatus: { diff --git a/packages/ui/src/tooltip/stories/index.story.tsx b/packages/ui/src/tooltip/stories/index.story.tsx index 792593c6b3aab1..cb1920e9e8b9cb 100644 --- a/packages/ui/src/tooltip/stories/index.story.tsx +++ b/packages/ui/src/tooltip/stories/index.story.tsx @@ -5,6 +5,7 @@ import * as Tooltip from '../'; const meta: Meta< typeof Tooltip.Root > = { title: 'Design System/Components/Tooltip', + id: 'design-system-components-tooltip', component: Tooltip.Root, tags: [ 'manifest' ], subcomponents: { diff --git a/packages/ui/src/tooltip/stories/usage-guidelines.story.tsx b/packages/ui/src/tooltip/stories/usage-guidelines.story.tsx index 222e29734ff3ba..45f8ed541c69f4 100644 --- a/packages/ui/src/tooltip/stories/usage-guidelines.story.tsx +++ b/packages/ui/src/tooltip/stories/usage-guidelines.story.tsx @@ -13,6 +13,7 @@ import { VisuallyHidden } from '../../visually-hidden'; const meta: Meta = { title: 'Design System/Components/Tooltip/Usage Guidelines', + id: 'design-system-components-tooltip-usage-guidelines', parameters: { controls: { disable: true }, }, diff --git a/packages/ui/src/visually-hidden/stories/index.story.tsx b/packages/ui/src/visually-hidden/stories/index.story.tsx index f6ca16423a95e8..e1ba2ab591ecf6 100644 --- a/packages/ui/src/visually-hidden/stories/index.story.tsx +++ b/packages/ui/src/visually-hidden/stories/index.story.tsx @@ -5,6 +5,7 @@ import { VisuallyHidden } from '../'; const meta: Meta< typeof VisuallyHidden > = { tags: [ 'manifest' ], title: 'Design System/Components/VisuallyHidden', + id: 'design-system-components-visuallyhidden', component: VisuallyHidden, parameters: { componentStatus: { diff --git a/packages/widget-dashboard/src/stories/anatomy.mdx b/packages/widget-dashboard/src/stories/anatomy.mdx index 8d8234cfd8d87a..479260e30079c8 100644 --- a/packages/widget-dashboard/src/stories/anatomy.mdx +++ b/packages/widget-dashboard/src/stories/anatomy.mdx @@ -2,7 +2,7 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import AnatomyDoc from './anatomy.md?raw'; import dashboardAnatomy from './assets/dashboard-anatomy.svg'; - + { AnatomyDoc.replace( './assets/dashboard-anatomy.svg', dashboardAnatomy ) } diff --git a/packages/widget-dashboard/src/stories/index.story.tsx b/packages/widget-dashboard/src/stories/index.story.tsx index eab4fcad6155c0..bdef69c7c4c626 100644 --- a/packages/widget-dashboard/src/stories/index.story.tsx +++ b/packages/widget-dashboard/src/stories/index.story.tsx @@ -346,6 +346,7 @@ const INITIAL_LAYOUT: DashboardWidget[] = [ const meta: Meta< typeof WidgetDashboard > = { title: 'Widget Dashboard/Playground', + id: 'widget-dashboard-playground', component: WidgetDashboard, tags: [ 'status-experimental' ], parameters: { diff --git a/packages/widget-dashboard/src/stories/introduction.mdx b/packages/widget-dashboard/src/stories/introduction.mdx index 06b1a2f4b7af37..bcf3519fe9b30c 100644 --- a/packages/widget-dashboard/src/stories/introduction.mdx +++ b/packages/widget-dashboard/src/stories/introduction.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import IntroductionDoc from './introduction.md?raw'; - + { IntroductionDoc } diff --git a/packages/widget-dashboard/src/stories/policy.mdx b/packages/widget-dashboard/src/stories/policy.mdx index b841793ac2e5ab..98240b513c009a 100644 --- a/packages/widget-dashboard/src/stories/policy.mdx +++ b/packages/widget-dashboard/src/stories/policy.mdx @@ -2,7 +2,7 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import PolicyDoc from './policy.md?raw'; import policySeam from './assets/policy-seam.svg'; - + { PolicyDoc.replace( './assets/policy-seam.svg', policySeam ) } diff --git a/packages/widget-dashboard/src/stories/widget-chrome.mdx b/packages/widget-dashboard/src/stories/widget-chrome.mdx index a76ce70477979b..eae8ef8c8dc645 100644 --- a/packages/widget-dashboard/src/stories/widget-chrome.mdx +++ b/packages/widget-dashboard/src/stories/widget-chrome.mdx @@ -5,7 +5,7 @@ import headerAnatomy from './assets/header-anatomy.svg'; import headerFit from './assets/header-fit.svg'; import footerAnatomy from './assets/footer-anatomy.svg'; - + { WidgetChromeDoc.replace( './assets/tile-anatomy.svg', tileAnatomy ) diff --git a/packages/widget-primitives/src/components/widget-render/stories/index.story.tsx b/packages/widget-primitives/src/components/widget-render/stories/index.story.tsx index ac196d357b0282..fe63bf9fe6d4b0 100644 --- a/packages/widget-primitives/src/components/widget-render/stories/index.story.tsx +++ b/packages/widget-primitives/src/components/widget-render/stories/index.story.tsx @@ -151,6 +151,7 @@ const resolveDemoModule = async () => ( { const meta: Meta< typeof WidgetRender > = { title: 'Widget Primitives/WidgetRender', + id: 'widget-primitives-widgetrender', component: WidgetRender, tags: [ 'status-experimental' ], parameters: { diff --git a/packages/widget-primitives/src/stories/actions.mdx b/packages/widget-primitives/src/stories/actions.mdx index 81734b2e1906e6..dff59d0bc757c4 100644 --- a/packages/widget-primitives/src/stories/actions.mdx +++ b/packages/widget-primitives/src/stories/actions.mdx @@ -3,7 +3,7 @@ import ActionsDoc from './actions.md?raw'; import actionAxes from './assets/action-axes.svg'; import actionSurfaces from './assets/action-surfaces.svg'; - + { ActionsDoc.replace( './assets/action-axes.svg', actionAxes ).replace( diff --git a/packages/widget-primitives/src/stories/anatomy.mdx b/packages/widget-primitives/src/stories/anatomy.mdx index 8ade40bf8baa77..8e2735a250d2f2 100644 --- a/packages/widget-primitives/src/stories/anatomy.mdx +++ b/packages/widget-primitives/src/stories/anatomy.mdx @@ -7,7 +7,7 @@ import presentationFullBleed from './assets/presentation-full-bleed.svg'; import representation from './assets/representation.svg'; import attributeRelevance from './assets/attribute-relevance.svg'; - + { AnatomyDoc.replace( './assets/three-layers.svg', threeLayers ) diff --git a/packages/widget-primitives/src/stories/field-types.mdx b/packages/widget-primitives/src/stories/field-types.mdx index af5cc91b7a768a..1e9394119b1eb1 100644 --- a/packages/widget-primitives/src/stories/field-types.mdx +++ b/packages/widget-primitives/src/stories/field-types.mdx @@ -2,7 +2,7 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import FieldTypesDoc from './field-types.md?raw'; import fieldTypePipeline from './assets/field-type-pipeline.svg'; - + { FieldTypesDoc.replace( diff --git a/packages/widget-primitives/src/stories/icons.mdx b/packages/widget-primitives/src/stories/icons.mdx index 3d6e5efa3296d9..b89387207546c0 100644 --- a/packages/widget-primitives/src/stories/icons.mdx +++ b/packages/widget-primitives/src/stories/icons.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import IconsDoc from './icons.md?raw'; - + { IconsDoc } diff --git a/packages/widget-primitives/src/stories/introduction.mdx b/packages/widget-primitives/src/stories/introduction.mdx index d8a20bb72b9d12..3b56cb8cfc10b0 100644 --- a/packages/widget-primitives/src/stories/introduction.mdx +++ b/packages/widget-primitives/src/stories/introduction.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import IntroductionDoc from './introduction.md?raw'; - + { IntroductionDoc } diff --git a/packages/widget-primitives/src/stories/system-architecture.mdx b/packages/widget-primitives/src/stories/system-architecture.mdx index ee0a29e478c4fa..4d51bfa98382f8 100644 --- a/packages/widget-primitives/src/stories/system-architecture.mdx +++ b/packages/widget-primitives/src/stories/system-architecture.mdx @@ -4,7 +4,7 @@ import pipelineDiagram from '../../../../docs/explanations/architecture/assets/d {/* Use the locally served diagram so Storybook renders it offline. */} - + { ArchitectureDoc.replace( diff --git a/packages/widget-primitives/src/stories/widget-host.mdx b/packages/widget-primitives/src/stories/widget-host.mdx index 9dcd61a9eb3fbe..2f10d2a384039c 100644 --- a/packages/widget-primitives/src/stories/widget-host.mdx +++ b/packages/widget-primitives/src/stories/widget-host.mdx @@ -2,7 +2,7 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import WidgetHostDoc from './widget-host.md?raw'; import widgetHostSeam from './assets/widget-host-seam.svg'; - + { WidgetHostDoc.replace( './assets/widget-host-seam.svg', widgetHostSeam ) } diff --git a/storybook/stories/design-system/introduction.mdx b/storybook/stories/design-system/introduction.mdx index 481094f871b047..399d891b1b39c9 100644 --- a/storybook/stories/design-system/introduction.mdx +++ b/storybook/stories/design-system/introduction.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # WordPress Design System diff --git a/storybook/stories/design-system/patterns/destructive-actions.mdx b/storybook/stories/design-system/patterns/destructive-actions.mdx index 3e0195384c06ad..8d950d856c6f98 100644 --- a/storybook/stories/design-system/patterns/destructive-actions.mdx +++ b/storybook/stories/design-system/patterns/destructive-actions.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Destructive Actions diff --git a/storybook/stories/design-system/patterns/error-messages.mdx b/storybook/stories/design-system/patterns/error-messages.mdx index fa0a212787b016..72f6cbd23f69ac 100644 --- a/storybook/stories/design-system/patterns/error-messages.mdx +++ b/storybook/stories/design-system/patterns/error-messages.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Error Messages diff --git a/storybook/stories/design-system/patterns/save-and-submit.story.tsx b/storybook/stories/design-system/patterns/save-and-submit.story.tsx index 1a1cb3f5462694..973c1fee2eea56 100644 --- a/storybook/stories/design-system/patterns/save-and-submit.story.tsx +++ b/storybook/stories/design-system/patterns/save-and-submit.story.tsx @@ -53,6 +53,7 @@ const LayoutCardSaveExample = () => { const meta: Meta< typeof LayoutCardSaveExample > = { title: 'Design System/Patterns/Save & Submit', + id: 'design-system-patterns-save-submit', component: LayoutCardSaveExample, parameters: { controls: { disable: true }, diff --git a/storybook/stories/design-system/theme-example-application.story.tsx b/storybook/stories/design-system/theme-example-application.story.tsx index d49d1dce4bb3d0..44ae1fb0cb6107 100644 --- a/storybook/stories/design-system/theme-example-application.story.tsx +++ b/storybook/stories/design-system/theme-example-application.story.tsx @@ -140,6 +140,7 @@ const siteLanguageOptions = [ const meta: Meta< ExampleApplicationArgs > = { title: 'Design System/Theme/Theme Provider/Example Application', + id: 'design-system-theme-theme-provider-example-application', component: ThemeProvider, parameters: { controls: { expanded: true }, diff --git a/storybook/stories/design-system/tokens/motion.story.tsx b/storybook/stories/design-system/tokens/motion.story.tsx index 530fca9d3bd8d7..326835da89dc3a 100644 --- a/storybook/stories/design-system/tokens/motion.story.tsx +++ b/storybook/stories/design-system/tokens/motion.story.tsx @@ -233,6 +233,7 @@ function MotionDemo() { const meta: Meta< typeof MotionDemo > = { title: 'Design System/Tokens/Motion', + id: 'design-system-tokens-motion', component: MotionDemo, parameters: { controls: { hideNoControlsWarning: true }, diff --git a/storybook/stories/docs/components/contributing.mdx b/storybook/stories/docs/components/contributing.mdx index 720f03110d1dea..6af66d7b4c4d3f 100644 --- a/storybook/stories/docs/components/contributing.mdx +++ b/storybook/stories/docs/components/contributing.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import Contributing from '@wordpress/components/CONTRIBUTING.md?raw'; - + {Contributing} diff --git a/storybook/stories/docs/components/readme.mdx b/storybook/stories/docs/components/readme.mdx index 999780d9aa793a..50ff44808988da 100644 --- a/storybook/stories/docs/components/readme.mdx +++ b/storybook/stories/docs/components/readme.mdx @@ -1,6 +1,6 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import Readme from '@wordpress/components/README.md?raw'; - + {Readme} diff --git a/storybook/stories/foundations/design-language/elevation.mdx b/storybook/stories/foundations/design-language/elevation.mdx index 11591568b3600c..7346ca6d6c9c84 100644 --- a/storybook/stories/foundations/design-language/elevation.mdx +++ b/storybook/stories/foundations/design-language/elevation.mdx @@ -2,7 +2,7 @@ import { Meta, Typeset } from '@storybook/addon-docs/blocks'; import elevation from './static/elevation.svg'; import elevationExamples from './static/elevation-examples.svg'; - + # Elevation diff --git a/storybook/stories/foundations/design-language/radius.mdx b/storybook/stories/foundations/design-language/radius.mdx index fda9bcdb85219a..837f07d1c17979 100644 --- a/storybook/stories/foundations/design-language/radius.mdx +++ b/storybook/stories/foundations/design-language/radius.mdx @@ -3,7 +3,7 @@ import radius from './static/radius.svg'; import radiusDo from './static/radius-do.svg'; import radiusDont from './static/radius-dont.svg'; - + # Radius diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx index 7dc3fac489a3e5..4923cbab38f49c 100644 --- a/storybook/stories/foundations/layout.mdx +++ b/storybook/stories/foundations/layout.mdx @@ -6,7 +6,7 @@ import pageLayoutExample3 from './static/page-layout-example-3.svg'; import pageLayoutExample4 from './static/page-layout-example-4.svg'; - + # Layout diff --git a/storybook/stories/icons/library.story.tsx b/storybook/stories/icons/library.story.tsx index badbb415a125f2..1eff840e42992f 100644 --- a/storybook/stories/icons/library.story.tsx +++ b/storybook/stories/icons/library.story.tsx @@ -60,6 +60,7 @@ function nameToSlug( name: string ): string { const meta: Meta = { component: Icon, title: 'Icons/Icon', + id: 'icons-icon', tags: [ '!autodocs' ], parameters: { controls: { hideNoControlsWarning: true }, diff --git a/storybook/stories/introduction.mdx b/storybook/stories/introduction.mdx index 82111a8e4ca8c9..7c7b0201055a4a 100644 --- a/storybook/stories/introduction.mdx +++ b/storybook/stories/introduction.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; import { JumpToIcon } from '@storybook/icons'; import { InlineIcon } from './docs/inline-icon'; - + # Introduction diff --git a/storybook/stories/playground/draggable-cross-document-fallback.story.jsx b/storybook/stories/playground/draggable-cross-document-fallback.story.jsx index e81d316d389821..834bdb509a857d 100644 --- a/storybook/stories/playground/draggable-cross-document-fallback.story.jsx +++ b/storybook/stories/playground/draggable-cross-document-fallback.story.jsx @@ -8,6 +8,7 @@ import { WithWpCompatOverlaySlot } from './with-wp-compat-overlay-slot'; export default { title: 'Playground/Debug fixtures/Draggable cross-document fallback', + id: 'playground-debug-fixtures-draggable-cross-document-fallback', component: Draggable, decorators: [ WithWpCompatOverlaySlot ], }; diff --git a/storybook/stories/playground/index.story.jsx b/storybook/stories/playground/index.story.jsx index 2fae1d7b760bc5..b8ef828ff2d9a7 100644 --- a/storybook/stories/playground/index.story.jsx +++ b/storybook/stories/playground/index.story.jsx @@ -5,6 +5,7 @@ import EditorZoomOut from './zoom-out'; export default { title: 'Playground/Block Editor', + id: 'playground-block-editor', parameters: { sourceLink: 'storybook/stories/playground', }, diff --git a/storybook/stories/playground/popover-with-slotfill.story.jsx b/storybook/stories/playground/popover-with-slotfill.story.jsx index 43ad8b0c9a7e2a..0bde02e0117861 100644 --- a/storybook/stories/playground/popover-with-slotfill.story.jsx +++ b/storybook/stories/playground/popover-with-slotfill.story.jsx @@ -4,6 +4,7 @@ import { Popover } from '@wordpress/ui'; export default { title: 'Playground/Debug fixtures/Popover with SlotFill', + id: 'playground-debug-fixtures-popover-with-slotfill', component: Popover.Root, }; diff --git a/storybook/stories/playground/wp-compat-overlay-slot.story.jsx b/storybook/stories/playground/wp-compat-overlay-slot.story.jsx index 989e1c63f87ed8..95ca08d200ae59 100644 --- a/storybook/stories/playground/wp-compat-overlay-slot.story.jsx +++ b/storybook/stories/playground/wp-compat-overlay-slot.story.jsx @@ -77,6 +77,7 @@ function UiPopoverFixture() { // of scope. export default { title: 'Playground/Debug fixtures/WP Compat Overlay Slot', + id: 'playground-debug-fixtures-wp-compat-overlay-slot', decorators: [ WithWpCompatOverlaySlot ], }; diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx index 05f15830bb47e5..f374d8e79701c1 100644 --- a/storybook/stories/tokens/color.mdx +++ b/storybook/stories/tokens/color.mdx @@ -1,6 +1,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; - + # Color diff --git a/storybook/stories/tokens/elevation.mdx b/storybook/stories/tokens/elevation.mdx index 5afb7e75266c4a..ce42bc17294cc7 100644 --- a/storybook/stories/tokens/elevation.mdx +++ b/storybook/stories/tokens/elevation.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; import { TokensTable } from './components.tsx'; - + # Elevation tokens diff --git a/storybook/stories/tokens/radius.mdx b/storybook/stories/tokens/radius.mdx index ac51ee47e47d2f..029da3015f1a6f 100644 --- a/storybook/stories/tokens/radius.mdx +++ b/storybook/stories/tokens/radius.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs/blocks'; import { TokensTable } from './components.tsx'; - + # Radius diff --git a/storybook/stories/tokens/typography.mdx b/storybook/stories/tokens/typography.mdx index 830177a4ffb853..97dde84f0027fa 100644 --- a/storybook/stories/tokens/typography.mdx +++ b/storybook/stories/tokens/typography.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Typography tokens From 3aa6769ec2944df4e2b86b7abcd45ce6dc299c16 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 27 Aug 2026 16:35:34 +0530 Subject: [PATCH 02/19] Storybook: Extract the stories globs into their own module --- storybook/main.ts | 31 ++----------------------------- storybook/story-globs.ts | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 29 deletions(-) create mode 100644 storybook/story-globs.ts diff --git a/storybook/main.ts b/storybook/main.ts index 6cec3f74baf815..6bde7e51bb0448 100644 --- a/storybook/main.ts +++ b/storybook/main.ts @@ -6,6 +6,7 @@ import type { StorybookConfig } from '@storybook/react-vite'; import dsTokenFallbacks from '@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks'; import dsTokenFallbacksJs from '@wordpress/theme/vite-plugins/vite-ds-token-fallbacks'; import babel from './vite-babel-plugin.js'; +import { storyGlobs } from './story-globs.js'; /** * @see https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments @@ -18,39 +19,11 @@ function getAbsolutePath( packageName: string ) { const { NODE_ENV = 'development' } = process.env; -const stories = [ - './stories/playground/**/*.story.@(jsx|tsx)', - './stories/**/*.mdx', - './stories/design-system/**/*.story.@(ts|tsx|mts|cts)', - '../packages/block-editor/src/**/stories/*.story.@(jsx|tsx|mdx)', - '../packages/editor/src/**/stories/*.story.@(jsx|tsx|mdx)', - '../packages/global-styles-ui/src/**/stories/*.story.@(jsx|tsx|mdx)', - '../packages/components/src/**/stories/*.story.@(jsx|tsx)', - '../packages/components/src/**/stories/*.mdx', - '../packages/icons/src/**/stories/*.story.@(tsx|mdx)', - './stories/icons/**/*.story.@(ts|tsx|mts|cts)', - '../packages/dataviews/src/**/stories/*.story.@(tsx|mdx)', - '../packages/fields/src/**/stories/*.story.@(tsx|mdx)', - '../packages/image-cropper/src/**/stories/*.story.@(tsx|mdx)', - '../packages/media-editor/src/**/stories/*.story.@(tsx|mdx)', - '../packages/media-fields/src/**/stories/*.story.@(tsx|mdx)', - '../packages/theme/src/**/stories/*.mdx', - '../packages/theme/src/**/stories/*.story.@(tsx|mdx)', - '../packages/grid/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/widget-primitives/src/**/stories/*.mdx', - '../packages/widget-primitives/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/widget-dashboard/src/**/stories/*.mdx', - '../packages/widget-dashboard/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/ui/src/**/stories/*.mdx', - '../packages/ui/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/admin-ui/src/**/stories/*.story.@(ts|tsx|mts|cts)', -]; - const config: StorybookConfig = { core: { disableTelemetry: true, }, - stories, + stories: storyGlobs, staticDirs: [ './static' ], addons: [ { diff --git a/storybook/story-globs.ts b/storybook/story-globs.ts new file mode 100644 index 00000000000000..8e312675a6e1a6 --- /dev/null +++ b/storybook/story-globs.ts @@ -0,0 +1,32 @@ +/** + * Globs matching every story and doc Storybook indexes, relative to this + * directory. Kept apart from `main.ts` so the story ID test can walk the same + * set of files without loading the full Storybook configuration. + */ +export const storyGlobs = [ + './stories/playground/**/*.story.@(jsx|tsx)', + './stories/**/*.mdx', + './stories/design-system/**/*.story.@(ts|tsx|mts|cts)', + '../packages/block-editor/src/**/stories/*.story.@(jsx|tsx|mdx)', + '../packages/editor/src/**/stories/*.story.@(jsx|tsx|mdx)', + '../packages/global-styles-ui/src/**/stories/*.story.@(jsx|tsx|mdx)', + '../packages/components/src/**/stories/*.story.@(jsx|tsx)', + '../packages/components/src/**/stories/*.mdx', + '../packages/icons/src/**/stories/*.story.@(tsx|mdx)', + './stories/icons/**/*.story.@(ts|tsx|mts|cts)', + '../packages/dataviews/src/**/stories/*.story.@(tsx|mdx)', + '../packages/fields/src/**/stories/*.story.@(tsx|mdx)', + '../packages/image-cropper/src/**/stories/*.story.@(tsx|mdx)', + '../packages/media-editor/src/**/stories/*.story.@(tsx|mdx)', + '../packages/media-fields/src/**/stories/*.story.@(tsx|mdx)', + '../packages/theme/src/**/stories/*.mdx', + '../packages/theme/src/**/stories/*.story.@(tsx|mdx)', + '../packages/grid/src/**/stories/*.story.@(ts|tsx|mts|cts)', + '../packages/widget-primitives/src/**/stories/*.mdx', + '../packages/widget-primitives/src/**/stories/*.story.@(ts|tsx|mts|cts)', + '../packages/widget-dashboard/src/**/stories/*.mdx', + '../packages/widget-dashboard/src/**/stories/*.story.@(ts|tsx|mts|cts)', + '../packages/ui/src/**/stories/*.mdx', + '../packages/ui/src/**/stories/*.story.@(ts|tsx|mts|cts)', + '../packages/admin-ui/src/**/stories/*.story.@(ts|tsx|mts|cts)', +]; From 8d3d3071c6813f5bb35f7a4843d17cc70774809b Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 27 Aug 2026 16:36:17 +0530 Subject: [PATCH 03/19] Storybook: Test that every story and doc declares an ID --- storybook/test/story-ids.test.ts | 178 +++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 storybook/test/story-ids.test.ts diff --git a/storybook/test/story-ids.test.ts b/storybook/test/story-ids.test.ts new file mode 100644 index 00000000000000..f8d0f19ffbf200 --- /dev/null +++ b/storybook/test/story-ids.test.ts @@ -0,0 +1,178 @@ +import { readdirSync, readFileSync } from 'node:fs'; +import path from 'node:path'; +import { parseSync, traverse } from '@babel/core'; +import type { Node, ObjectExpression } from '@babel/types'; +import { storyGlobs } from '../story-globs'; + +const CONFIG_DIR = path.join( __dirname, '..' ); + +/** + * Turns one of Storybook's `stories` globs into an equivalent regular + * expression. Only the syntax those globs use is supported: `**`, `*` and + * `@(a|b)`. + * + * @param glob A glob relative to the Storybook config directory. + * @return A pattern matching the paths the glob covers. + */ +function globToRegExp( glob: string ) { + const escape = ( value: string ) => + value.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ); + const tokens = glob.match( /@\([^)]+\)|\*\*\/|\*|[^*@]+|./g ) ?? []; + + const pattern = tokens + .map( ( token ) => { + if ( token.startsWith( '@(' ) ) { + const alternatives = token.slice( 2, -1 ).split( '|' ); + return `(?:${ alternatives.map( escape ).join( '|' ) })`; + } + if ( token === '**/' ) { + return '(?:[^/]+/)*'; + } + if ( token === '*' ) { + return '[^/]*'; + } + return escape( token ); + } ) + .join( '' ); + + return new RegExp( `^${ pattern }$` ); +} + +/** + * Lists every story and doc Storybook indexes, by walking the directories the + * `stories` globs point at and keeping the paths those globs match. + * + * @return Paths relative to the Storybook config directory, written the same + * way the globs are so they can be matched against them. + */ +function findStoryFiles() { + const files = new Set< string >(); + + for ( const glob of storyGlobs ) { + const prefix = glob.slice( 0, glob.indexOf( '*' ) ); + const walked = readdirSync( path.join( CONFIG_DIR, prefix ), { + recursive: true, + } ); + const matches = globToRegExp( glob ); + + for ( const entry of walked ) { + const file = + prefix + entry.toString().split( path.sep ).join( '/' ); + if ( matches.test( file ) ) { + files.add( file ); + } + } + } + + return [ ...files ].sort(); +} + +/** + * Unwraps the `as`/`satisfies` assertions Storybook metas are often written + * with, returning the object expression underneath. + * + * @param node The default export, or a variable's initializer. + * @return The object expression, or `undefined` for anything else. + */ +function toObjectExpression( + node: Node | null | undefined +): ObjectExpression | undefined { + let current = node; + while ( + current?.type === 'TSAsExpression' || + current?.type === 'TSSatisfiesExpression' + ) { + current = current.expression; + } + return current?.type === 'ObjectExpression' ? current : undefined; +} + +/** + * Finds the meta object a CSF file exports by default, whether it is written + * inline (`export default { ... }`) or through a variable + * (`const meta = { ... }`). + * + * @param source The file's contents. + * @return The meta object, or `undefined` when there is no object to find. + */ +function findMeta( source: string ): ObjectExpression | undefined { + const ast = parseSync( source, { + babelrc: false, + configFile: false, + filename: 'story.tsx', + parserOpts: { plugins: [ 'typescript', 'jsx' ] }, + } ); + if ( ! ast ) { + return undefined; + } + + let meta: ObjectExpression | undefined; + let metaName: string | undefined; + + traverse( ast, { + ExportDefaultDeclaration( { node } ) { + meta = toObjectExpression( node.declaration ); + if ( ! meta && node.declaration.type === 'Identifier' ) { + metaName = node.declaration.name; + } + }, + } ); + + if ( ! meta && metaName ) { + traverse( ast, { + VariableDeclarator( { node } ) { + if ( + node.id.type === 'Identifier' && + node.id.name === metaName + ) { + meta = toObjectExpression( node.init ); + } + }, + } ); + } + + return meta; +} + +/** + * Whether a story or doc pins its own URL with an `id`. + * + * An MDX doc attached to a CSF file with `of={ ... }` inherits that file's ID, + * so it has nothing of its own to declare. + * + * @param file Path to the story or doc, relative to the Storybook config. + * @return `true` when the file's URL cannot move with its title. + */ +function hasStableId( file: string ) { + const source = readFileSync( path.join( CONFIG_DIR, file ), 'utf8' ); + + if ( file.endsWith( '.mdx' ) ) { + const tag = source.match( // )?.[ 0 ] ?? ''; + return /\bid=/.test( tag ) || /\bof=/.test( tag ); + } + + return Boolean( + findMeta( source )?.properties.some( + ( property ) => + property.type === 'ObjectProperty' && + property.key.type === 'Identifier' && + property.key.name === 'id' + ) + ); +} + +describe( 'story IDs', () => { + const files = findStoryFiles(); + + it( 'covers every story and doc', () => { + // Guards against the walk silently matching nothing, which would let + // the check below pass without reading a single file. + expect( files.length ).toBeGreaterThan( 250 ); + } ); + + // A story's URL is built from its `id`, falling back to its `title`. Only a + // declared `id` keeps the URL from moving when the story does. + it.each( files )( '%s declares an id', ( file ) => { + expect( hasStableId( file ) ).toBe( true ); + } ); +} ); From 3188a2d3cf0cecef69e12a2ddc86e46c7a226586 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 27 Aug 2026 16:37:11 +0530 Subject: [PATCH 04/19] Storybook: Fail CI when a published story URL disappears --- .github/workflows/storybook-check.yml | 14 + package.json | 1 + storybook/package.json | 1 + .../scripts/generate-story-id-snapshot.mjs | 87 ++ storybook/story-ids.txt | 1058 +++++++++++++++++ 5 files changed, 1161 insertions(+) create mode 100644 storybook/scripts/generate-story-id-snapshot.mjs create mode 100644 storybook/story-ids.txt diff --git a/.github/workflows/storybook-check.yml b/.github/workflows/storybook-check.yml index 3e4f50630ff1ef..672eb973f6c93a 100644 --- a/.github/workflows/storybook-check.yml +++ b/.github/workflows/storybook-check.yml @@ -35,6 +35,20 @@ jobs: - name: Setup Node.js and install dependencies uses: ./.github/setup-node + # Every story URL is built from a declared ID. Regenerating the + # committed list of them fails when one is gone, so losing a + # published URL has to be deliberate. The story index is read from + # source, so this runs before the build rather than after it. + - name: Check no story URL disappeared + run: npm run storybook:story-id-snapshot + + - name: Check story ID snapshot is up to date + run: | + if ! git diff --exit-code -- storybook/story-ids.txt; then + echo "::error::The Storybook story ID snapshot is out of date. Review the diff above to confirm the change is expected, then run 'npm run storybook:story-id-snapshot' locally and commit the updated storybook/story-ids.txt." + exit 1 + fi + - name: Build Storybook env: NODE_OPTIONS: --max-old-space-size=8192 diff --git a/package.json b/package.json index 1384dfb82d0135..da18567ad31113 100644 --- a/package.json +++ b/package.json @@ -175,6 +175,7 @@ "storybook:e2e:build": "npm run --workspace @wordpress/storybook-playwright storybook:build", "storybook:manifest-snapshot": "npm run --workspace @wordpress/storybook manifest-snapshot", "test": "npm run lint && npm run test:unit", + "storybook:story-id-snapshot": "npm run --workspace @wordpress/storybook story-id-snapshot", "test:create-block": "npm run --workspace @wordpress/validation-tools test-create-block --", "test:e2e": "npm exec --no --workspace @wordpress/e2e-tests-playwright -- wp-scripts test-e2e --config playwright.config.ts", "test:e2e:debug": "npm exec --no --workspace @wordpress/e2e-tests-playwright -- wp-scripts test-e2e --config playwright.config.ts --ui", diff --git a/storybook/package.json b/storybook/package.json index ad358d0eaa732f..d063ebf43ec114 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -83,6 +83,7 @@ }, "scripts": { "manifest-snapshot": "node ./scripts/generate-manifest-snapshot.mjs ./build/manifests/components.json", + "story-id-snapshot": "node ./scripts/generate-story-id-snapshot.mjs", "postmanifest-snapshot": "prettier --write components-manifest.yml", "storybook:build": "NODE_OPTIONS=--max-old-space-size=8192 storybook build -c . -o ./build && node ./scripts/sanitize-components-manifest.mjs ./build/manifests/components.json && node ./scripts/inject-legacy-docgen.mjs ./build/manifests/components.json", "storybook:dev": "storybook dev -c . -p 50240", diff --git a/storybook/scripts/generate-story-id-snapshot.mjs b/storybook/scripts/generate-story-id-snapshot.mjs new file mode 100644 index 00000000000000..1cc9010f6ef5bd --- /dev/null +++ b/storybook/scripts/generate-story-id-snapshot.mjs @@ -0,0 +1,87 @@ +#!/usr/bin/env node +/** + * Generates a snapshot of every Storybook story and doc URL. + * + * A story's URL is its ID, and every published link, bookmark, handbook page + * and deprecation notice points at one. The snapshot records the full set so + * that losing one has to be a deliberate act rather than a side effect of a + * rename nobody looked at twice. + * + * The snapshot is regenerated in CI, which fails if an ID it used to contain + * is gone. Removing a page on purpose still works: delete it and commit the + * regenerated snapshot in the same change, where the loss is visible in the + * diff. New IDs are written without complaint. + * + * The story index is built from source, so this needs no Storybook build. + * + * Usage: node generate-story-id-snapshot.mjs + */ +import { readFile, writeFile } from 'node:fs/promises'; +import path from 'node:path'; +import { buildIndex } from 'storybook/internal/core-server'; + +const CONFIG_DIR = path.join( import.meta.dirname, '..' ); +const SNAPSHOT_PATH = path.join( CONFIG_DIR, 'story-ids.txt' ); + +const HEADER = + '# Auto-generated snapshot of every Storybook story and doc URL.\n' + + '# Do not edit by hand. Regenerate with `npm run storybook:story-id-snapshot`\n' + + '# and commit the result. See `storybook/README.md` for details.\n'; + +/** + * Reads the IDs out of the committed snapshot, ignoring its header. + * + * @return {Promise} The IDs, or an empty list if there is no + * snapshot yet. + */ +async function readSnapshot() { + try { + const raw = await readFile( SNAPSHOT_PATH, 'utf8' ); + return raw + .split( '\n' ) + .map( ( line ) => line.trim() ) + .filter( ( line ) => line && ! line.startsWith( '#' ) ); + } catch ( error ) { + if ( + /** @type {NodeJS.ErrnoException} */ ( error ).code !== 'ENOENT' + ) { + throw error; + } + return []; + } +} + +const { entries } = await buildIndex( { configDir: CONFIG_DIR } ); +const current = Object.keys( entries ).sort(); + +if ( current.length === 0 ) { + console.error( + 'No stories were indexed. The Storybook configuration may have changed.' + ); + process.exit( 1 ); +} + +const committed = await readSnapshot(); +const currentIds = new Set( current ); +const committedIds = new Set( committed ); +const removed = committed.filter( ( id ) => ! currentIds.has( id ) ); +const added = current.filter( ( id ) => ! committedIds.has( id ) ); + +await writeFile( SNAPSHOT_PATH, HEADER + current.join( '\n' ) + '\n' ); + +if ( added.length > 0 ) { + console.log( `Added ${ added.length } story ID(s) to the snapshot.` ); +} + +if ( removed.length > 0 ) { + console.error( + `${ removed.length } story URL(s) no longer exist:\n\n` + + removed.map( ( id ) => ` - ${ id }` ).join( '\n' ) + + `\n\nEach of these is a published URL that will start 404ing. If a story moved\n` + + `in the sidebar, give it back its original \`id\` so the URL follows it.\n` + + `Documentation for a deprecated component is usually better marked deprecated\n` + + `than deleted. If the removal is intended, commit the regenerated\n` + + `storybook/story-ids.txt so the lost URLs show up in the diff.\n` + ); + process.exitCode = 1; +} diff --git a/storybook/story-ids.txt b/storybook/story-ids.txt new file mode 100644 index 00000000000000..972124c14d932b --- /dev/null +++ b/storybook/story-ids.txt @@ -0,0 +1,1058 @@ +# Auto-generated snapshot of every Storybook story and doc URL. +# Do not edit by hand. Regenerate with `npm run storybook:story-id-snapshot` +# and commit the result. See `storybook/README.md` for details. +admin-ui-breadcrumbs--docs +admin-ui-breadcrumbs--single-item +admin-ui-breadcrumbs--three-levels +admin-ui-breadcrumbs--two-levels +admin-ui-page--default +admin-ui-page--docs +admin-ui-page--full-header +admin-ui-page--with-actions +admin-ui-page--with-breadcrumbs +admin-ui-page--with-breadcrumbs-and-badges +admin-ui-page--with-breadcrumbs-and-subtitle +admin-ui-page--with-image-visual +admin-ui-page--with-interactive-navigation +admin-ui-page--with-navigation +admin-ui-page--with-navigation-and-actions +admin-ui-page--with-subtitle +admin-ui-page--with-title-and-badges +admin-ui-page--with-visual +admin-ui-page--with-visual-and-breadcrumbs +admin-ui-page--without-header +blockeditor-alignmentcontrol--default +blockeditor-alignmentcontrol--docs +blockeditor-alignmenttoolbar--default +blockeditor-alignmenttoolbar--docs +blockeditor-blockalignmentmatrixcontrol--default +blockeditor-blockalignmentmatrixcontrol--docs +blockeditor-blockdraggable--default +blockeditor-blockdraggable--docs +blockeditor-blockmover--default +blockeditor-blockmover--docs +blockeditor-blockmover--hide-drag-handle +blockeditor-blockmover--horizontal +blockeditor-blockpatternslist--default +blockeditor-blockpatternslist--docs +blockeditor-blockpopover--default +blockeditor-blockpopover--docs +blockeditor-blocktitle--default +blockeditor-blocktitle--docs +blockeditor-borderradiuscontrol--default +blockeditor-borderradiuscontrol--docs +blockeditor-colorpalettecontrol--default +blockeditor-colorpalettecontrol--docs +blockeditor-dateformatpicker--default +blockeditor-dateformatpicker--docs +blockeditor-dimensioncontrol--default +blockeditor-dimensioncontrol--docs +blockeditor-dimensioncontrol--with-custom-label +blockeditor-dimensioncontrol--with-initial-value +blockeditor-dimensioncontrol--with-min-height-label +blockeditor-dimensioncontrol--with-preset-value +blockeditor-dimensioncontrol--with-presets +blockeditor-dimensioncontrol--with-width-label +blockeditor-dimensionstool-aspectratiotool--default +blockeditor-dimensionstool-aspectratiotool--docs +blockeditor-dimensionstool-dimensionstool--default +blockeditor-dimensionstool-dimensionstool--docs +blockeditor-dimensionstool-scaletool--default +blockeditor-dimensionstool-scaletool--docs +blockeditor-dimensionstool-widthheighttool--default +blockeditor-dimensionstool-widthheighttool--docs +blockeditor-fontfamilycontrol--default +blockeditor-fontfamilycontrol--docs +blockeditor-headingleveldropdown--default +blockeditor-headingleveldropdown--docs +blockeditor-heightcontrol--default +blockeditor-heightcontrol--docs +blockeditor-innerblocks--default +blockeditor-innerblocks--docs +blockeditor-inserter--docs +blockeditor-inserter--full-inserter +blockeditor-inserter--library-with-patterns +blockeditor-inserter--library-with-patterns-and-reusable-blocks +blockeditor-inserter--library-without-patterns +blockeditor-inserter--quick-inserter +blockeditor-letterspacingcontrol--default +blockeditor-letterspacingcontrol--docs +blockeditor-lineheightcontrol--default +blockeditor-lineheightcontrol--docs +blockeditor-lineheightcontrol--unconstrained-width +blockeditor-plaintext--default +blockeditor-plaintext--docs +blockeditor-resolutioncontrol--default +blockeditor-resolutioncontrol--docs +blockeditor-tabbedsidebar--default +blockeditor-tabbedsidebar--docs +blockeditor-textalignmentcontrol--default +blockeditor-textalignmentcontrol--docs +blockeditor-textdecorationcontrol--default +blockeditor-textdecorationcontrol--docs +blockeditor-texttransformcontrol--default +blockeditor-texttransformcontrol--docs +blockeditor-unitcontrol--default +blockeditor-unitcontrol--docs +blockeditor-urlpopover--default +blockeditor-urlpopover--docs +blockeditor-warning--default +blockeditor-warning--docs +blockeditor-warning--with-actions +blockeditor-warning--with-secondary-actions +blockeditor-writingmodecontrol--default +blockeditor-writingmodecontrol--docs +components-actions-button-best-practices--docs +components-alignmentmatrixcontrol--default +components-alignmentmatrixcontrol--docs +components-alignmentmatrixcontrol--icon-subcomponent +components-anglepickercontrol--default +components-anglepickercontrol--docs +components-animate--appear-bottom-left +components-animate--appear-bottom-right +components-animate--appear-top-left +components-animate--appear-top-right +components-animate--default +components-animate--docs +components-animate--slide-in +components-badge--default +components-badge--docs +components-badge--error +components-badge--info +components-badge--success +components-badge--warning +components-basecontrol--default +components-basecontrol--docs +components-basecontrol--with-help-text +components-basecontrol--with-visual-label +components-borderboxcontrol--default +components-borderboxcontrol--docs +components-bordercontrol--default +components-bordercontrol--docs +components-bordercontrol--is-compact +components-bordercontrol--with-multiple-origins +components-bordercontrol--with-slider +components-bordercontrol--with-slider-custom-width +components-boxcontrol--arbitrary-sides +components-boxcontrol--axial-controls +components-boxcontrol--axial-controls-with-single-side +components-boxcontrol--control-with-presets +components-boxcontrol--controlled +components-boxcontrol--default +components-boxcontrol--docs +components-boxcontrol--single-side +components-button--default +components-button--docs +components-button--grouped-icons +components-button--icon +components-button--is-destructive +components-button--link +components-button--primary +components-button--secondary +components-button--tertiary +components-buttongroup--default +components-buttongroup--docs +components-card--default +components-card--docs +components-card--full-bleed-content +components-card--padding-variations +components-checkboxcontrol--default +components-checkboxcontrol--docs +components-checkboxcontrol--indeterminate +components-checkboxcontrol--with-custom-label +components-checkboxcontrol--with-visual +components-circularoptionpicker--as-toggle-buttons +components-circularoptionpicker--default +components-circularoptionpicker--docs +components-circularoptionpicker--with-button-action +components-circularoptionpicker--with-dropdown-link-action +components-circularoptionpicker--with-looping-disabled +components-colorindicator--default +components-colorindicator--docs +components-colorpalette--css-variables +components-colorpalette--default +components-colorpalette--docs +components-colorpalette--duplicate-colors +components-colorpalette--initial-value +components-colorpalette--multiple-origins +components-colorpicker--default +components-colorpicker--docs +components-comboboxcontrol--default +components-comboboxcontrol--docs +components-comboboxcontrol--not-expand-on-focus +components-comboboxcontrol--with-custom-render-item +components-comboboxcontrol--with-disabled-options +components-composite--default +components-composite--docs +components-composite--grid +components-composite--groups +components-composite--hover +components-composite--typeahead +components-composite--with-slot-fill +components-composite--with-tooltips +components-composite-unstable--docs +components-composite-unstable--one-dimension-with-spread-props +components-composite-unstable--one-dimension-with-state-prop +components-composite-unstable--two-dimensions-with-spread-props +components-composite-unstable--two-dimensions-with-state-prop +components-confirmdialog--default +components-confirmdialog--docs +components-confirmdialog--with-custom-button-labels +components-contenteditablecontrol--default +components-contenteditablecontrol--docs +components-contributing-guidelines--docs +components-customgradientpicker--default +components-customgradientpicker--docs +components-customselectcontrol--default +components-customselectcontrol--docs +components-customselectcontrol--with-hints +components-customselectcontrol--with-long-labels +components-customselectcontrol-v2--custom-selected-value +components-customselectcontrol-v2--default +components-customselectcontrol-v2--docs +components-customselectcontrol-v2--multiple-selection +components-datepicker--default +components-datepicker--docs +components-datepicker--with-events +components-datepicker--with-invalid-dates +components-datetimepicker--default +components-datetimepicker--docs +components-datetimepicker--with-events +components-datetimepicker--with-invalid-dates +components-disabled--content-editable +components-disabled--default +components-disabled--docs +components-divider--docs +components-divider--horizontal +components-divider--in-flex-container +components-divider--vertical +components-draggable--append-element-to-owner-document +components-draggable--default +components-draggable--docs +components-dropdown--default +components-dropdown--docs +components-dropdown--with-menu-items +components-dropdown--with-more-padding +components-dropdown--with-no-padding +components-dropdownmenu--default +components-dropdownmenu--docs +components-dropdownmenu--with-children +components-dropzone--default +components-dropzone--docs +components-duotonepicker--default +components-duotonepicker--docs +components-duotonepicker--duplicate-duotones +components-duotoneswatch--default +components-duotoneswatch--docs +components-duotoneswatch--null +components-duotoneswatch--single-color +components-elevation--default +components-elevation--docs +components-elevation--with-custom-interactive +components-elevation--with-interactive +components-externallink--default +components-externallink--docs +components-flex--default +components-flex--docs +components-flex--responsive-direction +components-focalpointpicker--default +components-focalpointpicker--docs +components-focalpointpicker--image +components-focalpointpicker--snapping +components-focalpointpicker--video +components-fontsizepicker--default +components-fontsizepicker--docs +components-fontsizepicker--with-complex-css-values +components-fontsizepicker--with-custom-sizes-disabled +components-fontsizepicker--with-more-font-sizes +components-fontsizepicker--with-slider +components-fontsizepicker--with-units +components-formfileupload--allow-multiple-files +components-formfileupload--default +components-formfileupload--docs +components-formfileupload--restrict-file-types +components-formfileupload--with-custom-render +components-formfileupload--with-icon +components-formtoggle--default +components-formtoggle--docs +components-formtokenfield--async +components-formtokenfield--default +components-formtokenfield--docs +components-formtokenfield--dropdown-selector +components-formtokenfield--validate-new-tokens +components-formtokenfield--with-custom-rendered-items +components-gradientpicker--css-variables +components-gradientpicker--default +components-gradientpicker--docs +components-gradientpicker--duplicate-gradients +components-gradientpicker--multiple-origins +components-gradientpicker--with-no-existing-gradients +components-grid--default +components-grid--docs +components-guide--default +components-guide--docs +components-heading--default +components-heading--docs +components-hstack--default +components-hstack--docs +components-icon--default +components-icon--docs +components-icon--with-a-component +components-icon--with-a-dashicon +components-icon--with-a-function +components-icon--with-an-svg +components-inputcontrol--default +components-inputcontrol--docs +components-inputcontrol--migration-guide +components-inputcontrol--show-password +components-inputcontrol--with-edge-label +components-inputcontrol--with-help-text +components-inputcontrol--with-icon-or-control +components-inputcontrol--with-prefix +components-inputcontrol--with-side-label +components-inputcontrol--with-suffix +components-introduction--docs +components-itemgroup--custom-item-size +components-itemgroup--default +components-itemgroup--docs +components-itemgroup--non-clickable-items +components-itemgroup--without-border +components-keyboardshortcuts--default +components-keyboardshortcuts--docs +components-menu--best-practices +components-menu--default +components-menu--docs +components-menu--inside-modal +components-menu--toolbar-variant +components-menu--with-checkboxes +components-menu--with-modal +components-menu--with-radios +components-menu--with-slot-fill +components-menu--with-submenu +components-menugroup--default +components-menugroup--docs +components-menugroup--with-separator +components-menuitem--default +components-menuitem--docs +components-menuitem--is-selected +components-menuitem--with-icon +components-menuitem--with-info +components-menuitem--with-suffix +components-menuitemschoice--default +components-menuitemschoice--docs +components-modal--default +components-modal--docs +components-modal--with-header-actions +components-modal--withsize-small +components-navigablemenu--default +components-navigablemenu--docs +components-navigator--default +components-navigator--docs +components-navigator--skip-focus +components-navigator--with-nested-initial-path +components-notice--default +components-notice--docs +components-notice--notice-list-subcomponent +components-notice--with-actions +components-notice--with-custom-spoken-message +components-notice--with-disabled-action +components-notice--with-jsx-children +components-numbercontrol--default +components-numbercontrol--docs +components-paletteedit--default +components-paletteedit--docs +components-paletteedit--duotones +components-paletteedit--gradients +components-panel--default +components-panel--disabled-section +components-panel--docs +components-panel--panel-row +components-panel--with-icon +components-placeholder--default +components-placeholder--docs +components-popover--all-placements +components-popover--default +components-popover--docs +components-popover--dynamic-height +components-popover--unstyled +components-popover--with-close-handlers +components-popover--with-slot-outside-iframe +components-progressbar--default +components-progressbar--docs +components-progressbar--with-custom-width +components-querycontrols--default +components-querycontrols--docs +components-querycontrols--select-single-category +components-radiocontrol--default +components-radiocontrol--docs +components-radiocontrol--with-disabled-option +components-radiocontrol--with-option-descriptions +components-radiogroup--controlled +components-radiogroup--default +components-radiogroup--disabled +components-radiogroup--docs +components-rangecontrol--default +components-rangecontrol--docs +components-rangecontrol--with-any-step +components-rangecontrol--with-any-step-and-marks +components-rangecontrol--with-decimal-step-and-marks +components-rangecontrol--with-integer-step-and-marks +components-rangecontrol--with-negative-minimum-and-marks +components-rangecontrol--with-negative-range-and-marks +components-resizablebox--default +components-resizablebox--disabled-directions +components-resizablebox--docs +components-resizablebox--with-resize-tooltip +components-responsivewrapper--default +components-responsivewrapper--docs +components-responsivewrapper--with-svg +components-sandbox--default +components-sandbox--docs +components-sandbox--with-form +components-scrollable--default +components-scrollable--docs +components-scrolllock--default +components-scrolllock--docs +components-searchcontrol--default +components-searchcontrol--docs +components-selectcontrol--default +components-selectcontrol--docs +components-selectcontrol--minimal +components-selectcontrol--with-custom-children +components-selectcontrol--with-label-and-help-text +components-selectcontrol--with-prefix +components-selection-input-validated-form-controls-overview--docs +components-shortcut--default +components-shortcut--docs +components-shortcut--with-aria-label +components-slotfill--cross-document-styles +components-slotfill--default +components-slotfill--docs +components-slotfill--with-context +components-slotfill--with-fill-props +components-slotfill--with-slot-children +components-snackbar--default +components-snackbar--docs +components-snackbar--with-action-and-explicit-dismiss +components-snackbar--with-actions +components-snackbar--with-explicit-dismiss +components-snackbar--with-icon +components-snackbarlist--default +components-snackbarlist--docs +components-spacer--default +components-spacer--docs +components-spacer--nested +components-spinner--custom-size +components-spinner--default +components-spinner--docs +components-surface--default +components-surface--docs +components-tabbablecontainer--default +components-tabbablecontainer--docs +components-tabpanel--default +components-tabpanel--disabled-tab +components-tabpanel--docs +components-tabpanel--manual-activation +components-tabpanel--with-tab-icons-and-tooltips +components-tabs--best-practices +components-tabs--default +components-tabs--disabled-tab +components-tabs--docs +components-tabs--insert-custom-elements +components-tabs--manual-activation +components-tabs--size-and-overflow-playground +components-tabs--using-slot-fill +components-tabs--vertical +components-tabs--with-tab-icons-and-tooltips +components-text--default +components-text--docs +components-text--highlight +components-text--truncate +components-textareacontrol--default +components-textareacontrol--docs +components-textareacontrol--migration-guide +components-textcontrol--default +components-textcontrol--docs +components-textcontrol--with-label-and-help-text +components-texthighlight--default +components-texthighlight--docs +components-timepicker--default +components-timepicker--docs +components-timepicker--time-input +components-tip--default +components-tip--docs +components-togglecontrol--default +components-togglecontrol--docs +components-togglecontrol--with-help-text +components-togglecontrol--with-visual +components-togglegroupcontrol--default +components-togglegroupcontrol--deselectable +components-togglegroupcontrol--docs +components-togglegroupcontrol--with-icons +components-togglegroupcontrol--with-tooltip +components-toolbar--default +components-toolbar--docs +components-toolbar--unstyled +components-toolbar--without-group +components-toolspanel--default +components-toolspanel--docs +components-toolspanel--with-conditional-default-control +components-toolspanel--with-conditionally-rendered-control +components-toolspanel--with-non-tools-panel-items +components-toolspanel--with-optional-items-plus-icon +components-toolspanel--with-slot-fill-items +components-tooltip--default +components-tooltip--docs +components-tooltip--keyboard-shortcut +components-tooltip--nested +components-treegrid--default +components-treegrid--docs +components-treeselect--default +components-treeselect--docs +components-truncate--character-count +components-truncate--default +components-truncate--docs +components-unitcontrol--default +components-unitcontrol--docs +components-unitcontrol--press-enter-to-change +components-unitcontrol--tweaking-the-number-input +components-unitcontrol--with-custom-units +components-unitcontrol--with-single-unit +components-validatedcontenteditablecontrol--default +components-validatedcontenteditablecontrol--docs +components-validatedcustomselectcontrol--default +components-validatedcustomselectcontrol--docs +components-validatedrangecontrol--default +components-validatedrangecontrol--docs +components-view--default +components-view--docs +components-visuallyhidden--default +components-visuallyhidden--docs +components-visuallyhidden--with-additional-class-names +components-visuallyhidden--with-forwarded-props +components-vstack--default +components-vstack--docs +components-zstack--default +components-zstack--docs +dataviews-dataform--data-adapter +dataviews-dataform--docs +dataviews-dataform--layout-card +dataviews-dataform--layout-details +dataviews-dataform--layout-mixed +dataviews-dataform--layout-panel +dataviews-dataform--layout-regular +dataviews-dataform--layout-row +dataviews-dataform--validation +dataviews-dataform--validation-panel-error-indicator +dataviews-dataform--visibility +dataviews-dataform-content--docs +dataviews-dataform-content--help-text +dataviews-dataform-content--high-level-help-text +dataviews-dataform-content--labels +dataviews-dataform-content--placeholders +dataviews-dataform-content--validation-messages +dataviews-dataviews--async-infinite-scroll +dataviews-dataviews--best-practices +dataviews-dataviews--docs +dataviews-dataviews--empty +dataviews-dataviews--free-composition +dataviews-dataviews--infinite-scroll +dataviews-dataviews--layout-activity +dataviews-dataviews--layout-custom +dataviews-dataviews--layout-grid +dataviews-dataviews--layout-list +dataviews-dataviews--layout-table +dataviews-dataviews--minimal-ui +dataviews-dataviews--with-card +dataviews-dataviewspicker--default +dataviews-dataviewspicker--docs +dataviews-dataviewspicker--with-modal +dataviews-fieldtypes--all-component +dataviews-fieldtypes--array-component +dataviews-fieldtypes--boolean-component +dataviews-fieldtypes--color-component +dataviews-fieldtypes--date-component +dataviews-fieldtypes--date-time-component +dataviews-fieldtypes--docs +dataviews-fieldtypes--email-component +dataviews-fieldtypes--integer-component +dataviews-fieldtypes--media-component +dataviews-fieldtypes--no-type-component +dataviews-fieldtypes--number-component +dataviews-fieldtypes--password-component +dataviews-fieldtypes--telephone-component +dataviews-fieldtypes--text-component +dataviews-fieldtypes--time-component +dataviews-fieldtypes--url-component +design-system-components-alertdialog--async-confirm +design-system-components-alertdialog--controlled +design-system-components-alertdialog--custom-labels +design-system-components-alertdialog--default +design-system-components-alertdialog--docs +design-system-components-alertdialog--irreversible +design-system-components-alertdialog--menu-trigger +design-system-components-alertdialog--scrollable +design-system-components-alertdialog--with-custom-content +design-system-components-alertdialog--with-custom-z-index +design-system-components-badge--all-intents +design-system-components-badge--default +design-system-components-badge--docs +design-system-components-badge--draft +design-system-components-badge--high +design-system-components-badge--informational +design-system-components-badge--low +design-system-components-badge--medium +design-system-components-badge--none +design-system-components-badge--stable +design-system-components-badge-usage-guidelines--all-intents +design-system-components-badge-usage-guidelines--comment-status +design-system-components-badge-usage-guidelines--docs +design-system-components-badge-usage-guidelines--draft +design-system-components-badge-usage-guidelines--high +design-system-components-badge-usage-guidelines--incorrect-badge-with-icon +design-system-components-badge-usage-guidelines--informational +design-system-components-badge-usage-guidelines--low +design-system-components-badge-usage-guidelines--medium +design-system-components-badge-usage-guidelines--none +design-system-components-badge-usage-guidelines--page-status +design-system-components-badge-usage-guidelines--plugin-status +design-system-components-badge-usage-guidelines--stable +design-system-components-badge-usage-guidelines--text-only-badges +design-system-components-badge-usage-guidelines--with-adjacent-content-icon +design-system-components-button--all-tones-and-variants +design-system-components-button--compact +design-system-components-button--default +design-system-components-button--docs +design-system-components-button--loading +design-system-components-button--minimal +design-system-components-button--neutral +design-system-components-button--neutral-outline +design-system-components-button--outline +design-system-components-button--pressed +design-system-components-button--small +design-system-components-button--unstyled +design-system-components-button--with-icon +design-system-components-button--with-keyboard-shortcut +design-system-components-button-usage-guidelines--docs +design-system-components-button-usage-guidelines--use-button-for-actions +design-system-components-button-usage-guidelines--use-link-button-for-navigation +design-system-components-button-usage-guidelines--use-link-for-inline-navigation +design-system-components-calendar-calendar--default +design-system-components-calendar-calendar--disabled-dates +design-system-components-calendar-calendar--docs +design-system-components-calendar-calendar--with-outside-days +design-system-components-calendar-calendar--with-selected-date-and-month +design-system-components-calendar-calendar--with-time-zone +design-system-components-calendar-rangecalendar--default +design-system-components-calendar-rangecalendar--disabled-dates +design-system-components-calendar-rangecalendar--docs +design-system-components-calendar-rangecalendar--with-outside-days +design-system-components-calendar-rangecalendar--with-range-constraints +design-system-components-calendar-rangecalendar--with-selected-range-and-month +design-system-components-calendar-rangecalendar--with-time-zone +design-system-components-calendar-usage-guidelines--docs +design-system-components-card--custom-semantics +design-system-components-card--default +design-system-components-card--docs +design-system-components-card--full-bleed-cover-only +design-system-components-card--full-bleed-cover-with-header +design-system-components-card--full-bleed-hero-only +design-system-components-card--full-bleed-hero-with-title +design-system-components-card--header-only +design-system-components-card--with-full-bleed +design-system-components-collapsible--controlled +design-system-components-collapsible--default +design-system-components-collapsible--default-open +design-system-components-collapsible--disabled +design-system-components-collapsible--docs +design-system-components-collapsible--hidden-until-found +design-system-components-collapsiblecard--compared-to-card +design-system-components-collapsiblecard--default +design-system-components-collapsiblecard--disabled +design-system-components-collapsiblecard--docs +design-system-components-collapsiblecard--full-bleed-cover-with-header +design-system-components-collapsiblecard--initially-opened +design-system-components-collapsiblecard--stacked +design-system-components-collapsiblecard--with-full-bleed +design-system-components-collapsiblecard--with-header-description +design-system-components-collapsiblecard--with-heading-element +design-system-components-dialog--all-sizes +design-system-components-dialog--default +design-system-components-dialog--docs +design-system-components-dialog--scrollable +design-system-components-dialog--with-custom-z-index +design-system-components-dialog--with-visually-hidden-title +design-system-components-dialog-usage-guidelines--alert-dialog-for-deliberate-interruption +design-system-components-dialog-usage-guidelines--dialog-for-focused-task +design-system-components-dialog-usage-guidelines--docs +design-system-components-dialog-usage-guidelines--drawer-for-contextual-editing +design-system-components-drawer--all-sides +design-system-components-drawer--controlled +design-system-components-drawer--default +design-system-components-drawer--docs +design-system-components-drawer--non-modal +design-system-components-drawer--scrollable +design-system-components-drawer--size-playground +design-system-components-drawer--with-custom-z-index +design-system-components-emptystate--default +design-system-components-emptystate--docs +design-system-components-emptystate--with-custom-visual +design-system-components-form-inputcontrol--date +design-system-components-form-inputcontrol--default +design-system-components-form-inputcontrol--disabled +design-system-components-form-inputcontrol--docs +design-system-components-form-inputcontrol--number +design-system-components-form-inputcontrol--number-with-steppers +design-system-components-form-inputcontrol--password +design-system-components-form-inputcontrol--visually-hidden-label +design-system-components-form-inputcontrol--with-details +design-system-components-form-inputcontrol--with-prefix +design-system-components-form-inputcontrol--with-suffix-control +design-system-components-form-primitives--overview +design-system-components-form-primitives-autocomplete--async-items +design-system-components-form-primitives-autocomplete--default +design-system-components-form-primitives-autocomplete--docs +design-system-components-form-primitives-autocomplete--grid +design-system-components-form-primitives-autocomplete--grouped +design-system-components-form-primitives-autocomplete--inline +design-system-components-form-primitives-autocomplete--inline-mention-autocomplete +design-system-components-form-primitives-autocomplete--open-only-on-match +design-system-components-form-primitives-autocomplete--with-custom-z-index +design-system-components-form-primitives-autocomplete--with-search-icon-and-clear-button +design-system-components-form-primitives-checkbox--checked +design-system-components-form-primitives-checkbox--default +design-system-components-form-primitives-checkbox--disabled +design-system-components-form-primitives-checkbox--disabled-checked +design-system-components-form-primitives-checkbox--docs +design-system-components-form-primitives-checkbox--indeterminate +design-system-components-form-primitives-combobox--async-items +design-system-components-form-primitives-combobox--compact +design-system-components-form-primitives-combobox--creatable +design-system-components-form-primitives-combobox--default +design-system-components-form-primitives-combobox--detached-inline +design-system-components-form-primitives-combobox--docs +design-system-components-form-primitives-combobox--grouped +design-system-components-form-primitives-combobox--with-custom-trigger-and-item +design-system-components-form-primitives-combobox--with-custom-z-index +design-system-components-form-primitives-controlwitherror--default +design-system-components-form-primitives-controlwitherror--docs +design-system-components-form-primitives-controlwitherror--with-custom-validity +design-system-components-form-primitives-field--default +design-system-components-form-primitives-field--docs +design-system-components-form-primitives-field--hidden-label +design-system-components-form-primitives-field--using-aria-labelledby +design-system-components-form-primitives-field--using-html-for +design-system-components-form-primitives-field--with-details +design-system-components-form-primitives-fieldset--default +design-system-components-form-primitives-fieldset--docs +design-system-components-form-primitives-fieldset--hidden-legend +design-system-components-form-primitives-fieldset--with-details +design-system-components-form-primitives-input--default +design-system-components-form-primitives-input--disabled +design-system-components-form-primitives-input--docs +design-system-components-form-primitives-input--with-prefix +design-system-components-form-primitives-input--with-suffix-control +design-system-components-form-primitives-inputlayout--compact +design-system-components-form-primitives-inputlayout--default +design-system-components-form-primitives-inputlayout--docs +design-system-components-form-primitives-inputlayout--small +design-system-components-form-primitives-inputlayout--with-padded-prefix +design-system-components-form-primitives-inputlayout--with-prefix +design-system-components-form-primitives-inputlayout--with-suffix-control +design-system-components-form-primitives-searchablechipselect--default +design-system-components-form-primitives-searchablechipselect--docs +design-system-components-form-primitives-searchablechipselect--grouped +design-system-components-form-primitives-searchablechipselect--with-custom-chips-and-items +design-system-components-form-primitives-searchablechipselect--with-custom-empty-content +design-system-components-form-primitives-searchablechipselect--without-clear-button +design-system-components-form-primitives-select--compact +design-system-components-form-primitives-select--default +design-system-components-form-primitives-select--disabled +design-system-components-form-primitives-select--docs +design-system-components-form-primitives-select--grouped +design-system-components-form-primitives-select--labeling +design-system-components-form-primitives-select--minimal +design-system-components-form-primitives-select--with-custom-placeholder +design-system-components-form-primitives-select--with-custom-trigger-and-item +design-system-components-form-primitives-select--with-custom-z-index +design-system-components-form-primitives-select--with-disabled-item +design-system-components-form-primitives-select--with-null-value-option +design-system-components-form-primitives-select--with-overflow +design-system-components-form-primitives-textarea--default +design-system-components-form-primitives-textarea--disabled +design-system-components-form-primitives-textarea--docs +design-system-components-form-primitives-textarea--with-one-row +design-system-components-form-primitives-textarea--with-overflow +design-system-components-form-primitives-validityindicator--docs +design-system-components-form-primitives-validityindicator--invalid +design-system-components-form-primitives-validityindicator--valid +design-system-components-form-primitives-validityindicator--validating +design-system-components-form-searchablechipselectcontrol--creatable +design-system-components-form-searchablechipselectcontrol--default +design-system-components-form-searchablechipselectcontrol--docs +design-system-components-form-searchablechipselectcontrol--grouped +design-system-components-form-searchablechipselectcontrol--grouped-creatable +design-system-components-form-searchablechipselectcontrol--visually-hidden-label +design-system-components-form-searchablechipselectcontrol--with-custom-chips-and-items +design-system-components-form-searchablechipselectcontrol--with-custom-empty-content +design-system-components-form-searchablechipselectcontrol--with-custom-search-placeholder +design-system-components-form-searchablechipselectcontrol--with-details +design-system-components-form-searchablechipselectcontrol--with-disabled-option +design-system-components-form-searchablechipselectcontrol--without-clear-button +design-system-components-form-selectcontrol--default +design-system-components-form-selectcontrol--docs +design-system-components-form-selectcontrol--grouped +design-system-components-form-selectcontrol--visually-hidden-label +design-system-components-form-selectcontrol--with-custom-placeholder +design-system-components-form-selectcontrol--with-custom-trigger-and-items +design-system-components-form-selectcontrol--with-details +design-system-components-form-selectcontrol--with-disabled-option +design-system-components-form-selectcontrol--with-items-array-and-partial-customization +design-system-components-form-selectcontrol--with-null-value-option +design-system-components-form-textareacontrol--default +design-system-components-form-textareacontrol--disabled +design-system-components-form-textareacontrol--docs +design-system-components-form-textareacontrol--resize +design-system-components-form-textareacontrol--visually-hidden-label +design-system-components-form-textareacontrol--with-details +design-system-components-form-textareacontrol--with-overflow +design-system-components-form-with-validation-validatedinputcontrol--default +design-system-components-form-with-validation-validatedinputcontrol--docs +design-system-components-form-with-validation-validatedinputcontrol--password +design-system-components-form-with-validation-validatedinputcontrol--with-custom-validity +design-system-components-form-with-validation-validatedtextareacontrol--default +design-system-components-form-with-validation-validatedtextareacontrol--docs +design-system-components-form-with-validation-validatedtextareacontrol--with-custom-validity +design-system-components-icon--default +design-system-components-icon--docs +design-system-components-iconbutton--default +design-system-components-iconbutton--disabled +design-system-components-iconbutton--docs +design-system-components-iconbutton--minimal +design-system-components-iconbutton--neutral +design-system-components-iconbutton--neutral-outline +design-system-components-iconbutton--outline +design-system-components-iconbutton--pressed +design-system-components-iconbutton--with-custom-positioner +design-system-components-iconbutton--with-different-icons +design-system-components-iconbutton--with-shortcut +design-system-components-introduction--docs +design-system-components-link--all-tones-and-variants +design-system-components-link--default +design-system-components-link--docs +design-system-components-link--inline +design-system-components-link--standalone +design-system-components-linkbutton--all-tones-and-variants +design-system-components-linkbutton--compact +design-system-components-linkbutton--default +design-system-components-linkbutton--docs +design-system-components-linkbutton--minimal +design-system-components-linkbutton--neutral +design-system-components-linkbutton--neutral-outline +design-system-components-linkbutton--open-in-new-tab +design-system-components-linkbutton--outline +design-system-components-linkbutton--small +design-system-components-linkbutton--unstyled +design-system-components-linkbutton--with-icon +design-system-components-menu--checkbox-items +design-system-components-menu--default +design-system-components-menu--docs +design-system-components-menu--grouped-items +design-system-components-menu--link-item +design-system-components-menu--positioning +design-system-components-menu--radio-items +design-system-components-menu--rich-items +design-system-components-menu--submenu +design-system-components-menu--with-custom-z-index +design-system-components-menu-usage-guidelines--autocomplete-for-searchable-commands +design-system-components-menu-usage-guidelines--checked-options-within-a-command-menu +design-system-components-menu-usage-guidelines--docs +design-system-components-menu-usage-guidelines--menu-for-commands +design-system-components-menu-usage-guidelines--select-for-values +design-system-components-notice--default +design-system-components-notice--description-only +design-system-components-notice--docs +design-system-components-notice--error +design-system-components-notice--info +design-system-components-notice--non-dismissible +design-system-components-notice--success +design-system-components-notice--title-only +design-system-components-notice--warning +design-system-components-notice--without-actions +design-system-components-notice--without-icon +design-system-components-popover--anchor +design-system-components-popover--collision-avoidance +design-system-components-popover--controlled +design-system-components-popover--cross-iframe +design-system-components-popover--default +design-system-components-popover--docs +design-system-components-popover--hover-trigger +design-system-components-popover--infotip +design-system-components-popover--initial-focus +design-system-components-popover--inline +design-system-components-popover--modal +design-system-components-popover--no-arrow +design-system-components-popover--on-open-change-details +design-system-components-popover--overlay-placement +design-system-components-popover--positioning +design-system-components-popover--toolbar-variant +design-system-components-popover--trap-focus +design-system-components-popover--unstyled +design-system-components-popover--viewport-constrained-size +design-system-components-popover--with-close-button +design-system-components-popover--with-custom-z-index +design-system-components-skeleton--card-placeholder +design-system-components-skeleton--circle +design-system-components-skeleton--default +design-system-components-skeleton--docs +design-system-components-skeleton--text-lines +design-system-components-spinner--custom-size +design-system-components-spinner--default +design-system-components-spinner--docs +design-system-components-stack--default +design-system-components-stack--docs +design-system-components-stack--nested +design-system-components-tabs--default +design-system-components-tabs--docs +design-system-components-tabs--minimal +design-system-components-tabs--size-and-overflow-playground +design-system-components-tabs--vertical +design-system-components-tabs--with-disabled-tab +design-system-components-tabs--with-non-focusable-panels +design-system-components-tabs--with-panels-always-mounted +design-system-components-tabs--with-tab-icons-and-tooltips +design-system-components-tabs-best-practices--docs +design-system-components-text--all-variants +design-system-components-text--default +design-system-components-text--docs +design-system-components-text--with-render-prop +design-system-components-tooltip--default +design-system-components-tooltip--disabled +design-system-components-tooltip--docs +design-system-components-tooltip--positioning +design-system-components-tooltip--with-custom-positioner +design-system-components-tooltip--with-custom-z-index +design-system-components-tooltip--with-provider +design-system-components-tooltip-usage-guidelines--docs +design-system-components-tooltip-usage-guidelines--icon-button-with-tooltip +design-system-components-tooltip-usage-guidelines--infotip-with-popover +design-system-components-tooltip-usage-guidelines--recommended-usage +design-system-components-visuallyhidden--default +design-system-components-visuallyhidden--docs +design-system-components-visuallyhidden--with-custom-element +design-system-form-with-validation-overview--async-validation +design-system-form-with-validation-overview--custom-errors-on-submit +design-system-form-with-validation-overview--docs +design-system-form-with-validation-overview--showing-errors-at-arbitrary-times +design-system-form-with-validation-overview--showing-errors-without-moving-focus +design-system-form-with-validation-overview--validate-in-modal +design-system-form-with-validation-overview--validate-on-popover-close +design-system-form-with-validation-overview--with-multiple-controls +design-system-introduction--docs +design-system-patterns-destructive-actions--docs +design-system-patterns-error-messages--docs +design-system-patterns-save-submit--docs +design-system-patterns-save-submit--save-form-layout-card +design-system-theme-introduction--docs +design-system-theme-theme-provider--default +design-system-theme-theme-provider--docs +design-system-theme-theme-provider--nesting-and-inheriting +design-system-theme-theme-provider--with-picker +design-system-theme-theme-provider-brand-color-fallbacks--default +design-system-theme-theme-provider-brand-color-fallbacks--docs +design-system-theme-theme-provider-color-scales--default +design-system-theme-theme-provider-color-scales--docs +design-system-theme-theme-provider-color-scales--sample-combinations +design-system-theme-theme-provider-example-application--docs +design-system-theme-theme-provider-example-application--example-application +design-system-tokens-introduction--docs +design-system-tokens-motion--default +design-system-tokens-motion--docs +design-system-tokens-typography--docs +editor-uploadprogresssnackbar--all-states +editor-uploadprogresssnackbar--complete +editor-uploadprogresssnackbar--docs +editor-uploadprogresssnackbar--uploading +editor-uploadprogresssnackbar--uploading-multiple +fields-base-fields--data-forms-preview +fields-base-fields--data-views-preview +fields-base-fields--docs +fields-media-fields--data-forms-preview +fields-media-fields--data-views-preview +fields-media-fields--docs +foundations-design-language-elevation--page +foundations-design-language-radius--page +foundations-layout--page +globalstylesui-globalstylesui--docs +globalstylesui-globalstylesui--global-styles-ui +grid-dashboardgrid--custom-grid-overlay-story +grid-dashboardgrid--customization +grid-dashboardgrid--default +grid-dashboardgrid--docs +grid-dashboardgrid--edit-mode +grid-dashboardgrid--fill-width +grid-dashboardgrid--full-width +grid-dashboardgrid--layered +grid-dashboardgrid--responsive +grid-dashboardgrid--row-height +grid-dashboardlanes--custom-grid-overlay-story +grid-dashboardlanes--default +grid-dashboardlanes--docs +grid-dashboardlanes--edit-mode +grid-dashboardlanes--layered +grid-dashboardlanes--responsive +grid-dashboardlanes--spanning +icons-icon--current-color +icons-icon--default +icons-icon--docs +icons-icon--library +imagecropper-imagecropper--default +imagecropper-imagecropper--docs +imagecropper-imagecropper--with-controls +introduction--page +mediaeditor-imageeditor--debug +mediaeditor-imageeditor--default +mediaeditor-imageeditor--docs +mediaeditor-imageeditor--with-controls +mediaeditor-rotationruler--default +mediaeditor-rotationruler--docs +playground-block-editor--box +playground-block-editor--default +playground-block-editor--docs +playground-block-editor--undo-redo +playground-block-editor--zoom-out +playground-debug-fixtures-draggable-cross-document-fallback--docs +playground-debug-fixtures-draggable-cross-document-fallback--inside-iframe-with-compat-slot +playground-debug-fixtures-popover-with-slotfill--cross-iframe-with-slot-fill +playground-debug-fixtures-popover-with-slotfill--docs +playground-debug-fixtures-wp-compat-overlay-slot--docs +playground-debug-fixtures-wp-compat-overlay-slot--inside-components-modal +playground-debug-fixtures-wp-compat-overlay-slot--inside-components-popover +tokens-color--page +tokens-elevation--page +tokens-radius--page +tokens-typography--page +widget-dashboard-anatomy--docs +widget-dashboard-introduction--docs +widget-dashboard-playground--default +widget-dashboard-playground--docs +widget-dashboard-playground--host-links +widget-dashboard-playground--long-title +widget-dashboard-playground--policy +widget-dashboard-policy--docs +widget-dashboard-widget-chrome--docs +widget-primitives-actions--docs +widget-primitives-anatomy--docs +widget-primitives-field-types--docs +widget-primitives-icons--docs +widget-primitives-introduction--docs +widget-primitives-system-architecture--docs +widget-primitives-widget-host--docs +widget-primitives-widgetrender--default +widget-primitives-widgetrender--docs +widget-primitives-widgetrender--with-actions +widget-primitives-widgetrender--with-field-type +widget-primitives-widgetrender--with-host-chrome +widget-primitives-widgetrender--with-icon-reference +widget-primitives-widgetrender--with-relevance +widget-primitives-widgetrender--with-settings From a52a39d569e4d911626f076d60e30c7256cb3d5b Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 27 Aug 2026 16:37:56 +0530 Subject: [PATCH 05/19] Storybook: Document the stable story URL convention --- storybook/README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/storybook/README.md b/storybook/README.md index f27cba30dc0643..199ad4436998b0 100644 --- a/storybook/README.md +++ b/storybook/README.md @@ -8,6 +8,46 @@ View online at: https://wordpress.github.io/gutenberg/ Run locally in your development environment running: `npm run storybook:dev` from the top-level Gutenberg directory. +## Stable story URLs + +Every story and doc declares an explicit `id`. The `id` is the story's URL; the `title` is only its position in the sidebar: + +``` +wordpress.github.io/gutenberg/?path=/docs/components-card--docs + ^ the id +``` + +Without an `id`, Storybook derives one from the `title` on every build, so moving a story to another sidebar folder silently changes its URL and breaks every existing link to it. Declaring the `id` decouples the two: the sidebar can be reorganized freely, and published URLs stay put. + +Set it next to the `title`, in CSF: + +```ts +const meta: Meta< typeof Card > = { + title: 'Components/Containers/Card', // Sidebar position, free to change. + id: 'components-card', // URL, frozen. +}; +``` + +And in MDX: + +```mdx + +``` + +For a new story, use the ID Storybook would have derived anyway: the lowercased `title` with each non-alphanumeric run replaced by a single hyphen (`Components/Containers/Card` becomes `components-containers-card`). For an existing one, never change the `id` — that is the link everyone already has. + +An MDX doc attached to a CSF file with `of={ … }` inherits that file's `id` and declares nothing of its own. + +Two checks keep this from eroding: + +- `storybook/test/story-ids.test.ts` fails when a story or doc is missing an `id`. +- `storybook/story-ids.txt` is a committed list of every story and doc URL. CI regenerates it and fails when an ID it used to contain has disappeared, so losing a published URL has to be deliberate rather than a side effect of a rename. Regenerate it with `npm run storybook:story-id-snapshot` and commit the result. It reads the story index from source, so no Storybook build is needed. + +Documentation for a deprecated component is meant to stay reachable, so the usual answer for an outdated page is to mark it deprecated and point at its replacement rather than delete it. + ## Manifest snapshot regression testing Storybook upgrades and inocuous code refactoring have been a frequent source of accidental documentation regressions, resulting in component or prop descriptions being accidentally removed. From c3574e43b270cd52ef521ab707e41403c55761a3 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Fri, 28 Aug 2026 11:58:23 +0530 Subject: [PATCH 06/19] Storybook: Note the ID shared between the two Icon story files --- packages/icons/src/icon/stories/index.story.tsx | 1 + storybook/stories/icons/library.story.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/icons/src/icon/stories/index.story.tsx b/packages/icons/src/icon/stories/index.story.tsx index 553b569f9478ba..ba9233234c5230 100644 --- a/packages/icons/src/icon/stories/index.story.tsx +++ b/packages/icons/src/icon/stories/index.story.tsx @@ -6,6 +6,7 @@ import * as icons from '../../'; const meta = { component: Icon, + // Keep in sync with `storybook/stories/icons/library.story.tsx` title: 'Icons/Icon', id: 'icons-icon', parameters: { diff --git a/storybook/stories/icons/library.story.tsx b/storybook/stories/icons/library.story.tsx index 1eff840e42992f..6e52fe72269ffc 100644 --- a/storybook/stories/icons/library.story.tsx +++ b/storybook/stories/icons/library.story.tsx @@ -59,6 +59,7 @@ function nameToSlug( name: string ): string { const meta: Meta = { component: Icon, + // Keep in sync with `packages/icons/src/icon/stories/index.story.tsx`. title: 'Icons/Icon', id: 'icons-icon', tags: [ '!autodocs' ], From e6fbe1703d92f62062551f54145b51e32b00e92b Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Fri, 28 Aug 2026 12:11:57 +0530 Subject: [PATCH 07/19] Add new story IDs for searchable chip select and select controls --- storybook/story-ids.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/storybook/story-ids.txt b/storybook/story-ids.txt index 972124c14d932b..60c84166e69bc6 100644 --- a/storybook/story-ids.txt +++ b/storybook/story-ids.txt @@ -792,6 +792,7 @@ design-system-components-form-searchablechipselectcontrol--default design-system-components-form-searchablechipselectcontrol--docs design-system-components-form-searchablechipselectcontrol--grouped design-system-components-form-searchablechipselectcontrol--grouped-creatable +design-system-components-form-searchablechipselectcontrol--popup-width design-system-components-form-searchablechipselectcontrol--visually-hidden-label design-system-components-form-searchablechipselectcontrol--with-custom-chips-and-items design-system-components-form-searchablechipselectcontrol--with-custom-empty-content @@ -802,6 +803,7 @@ design-system-components-form-searchablechipselectcontrol--without-clear-button design-system-components-form-selectcontrol--default design-system-components-form-selectcontrol--docs design-system-components-form-selectcontrol--grouped +design-system-components-form-selectcontrol--popup-width design-system-components-form-selectcontrol--visually-hidden-label design-system-components-form-selectcontrol--with-custom-placeholder design-system-components-form-selectcontrol--with-custom-trigger-and-items From 27c0701825b1b43f3bb1e33c3d3142dfb7d7e7ba Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Fri, 28 Aug 2026 16:21:58 +0530 Subject: [PATCH 08/19] Add new story IDs for grid dashboard and lanes size limits --- storybook/story-ids.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/storybook/story-ids.txt b/storybook/story-ids.txt index 60c84166e69bc6..e3eb63822537b1 100644 --- a/storybook/story-ids.txt +++ b/storybook/story-ids.txt @@ -997,12 +997,14 @@ grid-dashboardgrid--full-width grid-dashboardgrid--layered grid-dashboardgrid--responsive grid-dashboardgrid--row-height +grid-dashboardgrid--size-limits grid-dashboardlanes--custom-grid-overlay-story grid-dashboardlanes--default grid-dashboardlanes--docs grid-dashboardlanes--edit-mode grid-dashboardlanes--layered grid-dashboardlanes--responsive +grid-dashboardlanes--size-limits grid-dashboardlanes--spanning icons-icon--current-color icons-icon--default From d576ccaa9829930f862c09ec2f57efa4c7d524f0 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 22 Sep 2026 17:11:07 +0530 Subject: [PATCH 09/19] Add new story IDs for various design system components and playground features --- storybook/story-ids.txt | 76 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 4 deletions(-) diff --git a/storybook/story-ids.txt b/storybook/story-ids.txt index e3eb63822537b1..302fbc5a1103d7 100644 --- a/storybook/story-ids.txt +++ b/storybook/story-ids.txt @@ -127,6 +127,7 @@ components-basecontrol--with-help-text components-basecontrol--with-visual-label components-borderboxcontrol--default components-borderboxcontrol--docs +components-borderboxcontrol--without-label components-bordercontrol--default components-bordercontrol--docs components-bordercontrol--is-compact @@ -359,6 +360,7 @@ components-notice--with-disabled-action components-notice--with-jsx-children components-numbercontrol--default components-numbercontrol--docs +components-packages-introduction--docs components-paletteedit--default components-paletteedit--docs components-paletteedit--duotones @@ -487,6 +489,7 @@ components-togglecontrol--with-help-text components-togglecontrol--with-visual components-togglegroupcontrol--default components-togglegroupcontrol--deselectable +components-togglegroupcontrol--disabled components-togglegroupcontrol--docs components-togglegroupcontrol--with-icons components-togglegroupcontrol--with-tooltip @@ -556,6 +559,7 @@ dataviews-dataviews--best-practices dataviews-dataviews--docs dataviews-dataviews--empty dataviews-dataviews--free-composition +dataviews-dataviews--hierarchical-levels dataviews-dataviews--infinite-scroll dataviews-dataviews--layout-activity dataviews-dataviews--layout-custom @@ -619,6 +623,11 @@ design-system-components-badge-usage-guidelines--plugin-status design-system-components-badge-usage-guidelines--stable design-system-components-badge-usage-guidelines--text-only-badges design-system-components-badge-usage-guidelines--with-adjacent-content-icon +design-system-components-breadcrumb--default +design-system-components-breadcrumb--docs +design-system-components-breadcrumb--long-labels-and-rtl +design-system-components-breadcrumb--responsive-states +design-system-components-breadcrumb--router-link-composition design-system-components-button--all-tones-and-variants design-system-components-button--compact design-system-components-button--default @@ -697,6 +706,18 @@ design-system-components-drawer--with-custom-z-index design-system-components-emptystate--default design-system-components-emptystate--docs design-system-components-emptystate--with-custom-visual +design-system-components-form-best-practices--docs +design-system-components-form-best-practices--labeling-composed-components +design-system-components-form-checkbox-groups--docs +design-system-components-form-checkbox-groups--grouping-checkboxes +design-system-components-form-checkbox-groups--nesting +design-system-components-form-checkboxcontrol--default +design-system-components-form-checkboxcontrol--disabled +design-system-components-form-checkboxcontrol--docs +design-system-components-form-checkboxcontrol--visually-hidden-label +design-system-components-form-checkboxcontrol--with-description +design-system-components-form-checkboxcontrol--with-details +design-system-components-form-checkboxcontrol--with-long-label design-system-components-form-inputcontrol--date design-system-components-form-inputcontrol--default design-system-components-form-inputcontrol--disabled @@ -725,6 +746,9 @@ design-system-components-form-primitives-checkbox--disabled design-system-components-form-primitives-checkbox--disabled-checked design-system-components-form-primitives-checkbox--docs design-system-components-form-primitives-checkbox--indeterminate +design-system-components-form-primitives-checkboxgroup--default +design-system-components-form-primitives-checkboxgroup--docs +design-system-components-form-primitives-checkboxgroup--with-parent-checkbox design-system-components-form-primitives-combobox--async-items design-system-components-form-primitives-combobox--compact design-system-components-form-primitives-combobox--creatable @@ -743,6 +767,7 @@ design-system-components-form-primitives-field--hidden-label design-system-components-form-primitives-field--using-aria-labelledby design-system-components-form-primitives-field--using-html-for design-system-components-form-primitives-field--with-details +design-system-components-form-primitives-field--with-visual-label design-system-components-form-primitives-fieldset--default design-system-components-form-primitives-fieldset--docs design-system-components-form-primitives-fieldset--hidden-legend @@ -759,12 +784,27 @@ design-system-components-form-primitives-inputlayout--small design-system-components-form-primitives-inputlayout--with-padded-prefix design-system-components-form-primitives-inputlayout--with-prefix design-system-components-form-primitives-inputlayout--with-suffix-control +design-system-components-form-primitives-radio--checked +design-system-components-form-primitives-radio--default +design-system-components-form-primitives-radio--disabled +design-system-components-form-primitives-radio--disabled-checked +design-system-components-form-primitives-radio--docs +design-system-components-form-primitives-radiogroup--checked +design-system-components-form-primitives-radiogroup--default +design-system-components-form-primitives-radiogroup--disabled +design-system-components-form-primitives-radiogroup--docs design-system-components-form-primitives-searchablechipselect--default design-system-components-form-primitives-searchablechipselect--docs design-system-components-form-primitives-searchablechipselect--grouped design-system-components-form-primitives-searchablechipselect--with-custom-chips-and-items design-system-components-form-primitives-searchablechipselect--with-custom-empty-content design-system-components-form-primitives-searchablechipselect--without-clear-button +design-system-components-form-primitives-searchableselect--default +design-system-components-form-primitives-searchableselect--docs +design-system-components-form-primitives-searchableselect--grouped +design-system-components-form-primitives-searchableselect--with-custom-empty-content +design-system-components-form-primitives-searchableselect--with-custom-placeholder +design-system-components-form-primitives-searchableselect--with-custom-trigger-and-items design-system-components-form-primitives-select--compact design-system-components-form-primitives-select--default design-system-components-form-primitives-select--disabled @@ -776,8 +816,15 @@ design-system-components-form-primitives-select--with-custom-placeholder design-system-components-form-primitives-select--with-custom-trigger-and-item design-system-components-form-primitives-select--with-custom-z-index design-system-components-form-primitives-select--with-disabled-item +design-system-components-form-primitives-select--with-item-description +design-system-components-form-primitives-select--with-long-list design-system-components-form-primitives-select--with-null-value-option design-system-components-form-primitives-select--with-overflow +design-system-components-form-primitives-switch--checked +design-system-components-form-primitives-switch--default +design-system-components-form-primitives-switch--disabled +design-system-components-form-primitives-switch--disabled-checked +design-system-components-form-primitives-switch--docs design-system-components-form-primitives-textarea--default design-system-components-form-primitives-textarea--disabled design-system-components-form-primitives-textarea--docs @@ -787,6 +834,15 @@ design-system-components-form-primitives-validityindicator--docs design-system-components-form-primitives-validityindicator--invalid design-system-components-form-primitives-validityindicator--valid design-system-components-form-primitives-validityindicator--validating +design-system-components-form-radiogroupcontrol--default +design-system-components-form-radiogroupcontrol--disabled +design-system-components-form-radiogroupcontrol--docs +design-system-components-form-radiogroupcontrol--visually-hidden-label +design-system-components-form-radiogroupcontrol--with-description +design-system-components-form-radiogroupcontrol--with-details +design-system-components-form-radiogroupcontrol--with-disabled-item +design-system-components-form-radiogroupcontrol--with-long-label +design-system-components-form-searchablechipselectcontrol--async-items design-system-components-form-searchablechipselectcontrol--creatable design-system-components-form-searchablechipselectcontrol--default design-system-components-form-searchablechipselectcontrol--docs @@ -809,8 +865,17 @@ design-system-components-form-selectcontrol--with-custom-placeholder design-system-components-form-selectcontrol--with-custom-trigger-and-items design-system-components-form-selectcontrol--with-details design-system-components-form-selectcontrol--with-disabled-option +design-system-components-form-selectcontrol--with-item-description design-system-components-form-selectcontrol--with-items-array-and-partial-customization design-system-components-form-selectcontrol--with-null-value-option +design-system-components-form-switchcontrol--default +design-system-components-form-switchcontrol--disabled +design-system-components-form-switchcontrol--disabled-checked +design-system-components-form-switchcontrol--docs +design-system-components-form-switchcontrol--visually-hidden-label +design-system-components-form-switchcontrol--with-description +design-system-components-form-switchcontrol--with-details +design-system-components-form-switchcontrol--with-long-label design-system-components-form-textareacontrol--default design-system-components-form-textareacontrol--disabled design-system-components-form-textareacontrol--docs @@ -843,6 +908,7 @@ design-system-components-link--all-tones-and-variants design-system-components-link--default design-system-components-link--docs design-system-components-link--inline +design-system-components-link--open-in-new-tab design-system-components-link--standalone design-system-components-linkbutton--all-tones-and-variants design-system-components-linkbutton--compact @@ -871,6 +937,7 @@ design-system-components-menu-usage-guidelines--checked-options-within-a-command design-system-components-menu-usage-guidelines--docs design-system-components-menu-usage-guidelines--menu-for-commands design-system-components-menu-usage-guidelines--select-for-values +design-system-components-notice--custom-icon design-system-components-notice--default design-system-components-notice--description-only design-system-components-notice--docs @@ -890,6 +957,7 @@ design-system-components-popover--default design-system-components-popover--docs design-system-components-popover--hover-trigger design-system-components-popover--infotip +design-system-components-popover--infotip-with-link design-system-components-popover--initial-focus design-system-components-popover--inline design-system-components-popover--modal @@ -1032,17 +1100,16 @@ playground-debug-fixtures-popover-with-slotfill--docs playground-debug-fixtures-wp-compat-overlay-slot--docs playground-debug-fixtures-wp-compat-overlay-slot--inside-components-modal playground-debug-fixtures-wp-compat-overlay-slot--inside-components-popover -tokens-color--page -tokens-elevation--page -tokens-radius--page -tokens-typography--page widget-dashboard-anatomy--docs widget-dashboard-introduction--docs widget-dashboard-playground--default widget-dashboard-playground--docs +widget-dashboard-playground--grid-settings widget-dashboard-playground--host-links widget-dashboard-playground--long-title widget-dashboard-playground--policy +widget-dashboard-playground-debug--docs +widget-dashboard-playground-debug--staging-enforcement widget-dashboard-policy--docs widget-dashboard-widget-chrome--docs widget-primitives-actions--docs @@ -1057,6 +1124,7 @@ widget-primitives-widgetrender--docs widget-primitives-widgetrender--with-actions widget-primitives-widgetrender--with-field-type widget-primitives-widgetrender--with-host-chrome +widget-primitives-widgetrender--with-host-link widget-primitives-widgetrender--with-icon-reference widget-primitives-widgetrender--with-relevance widget-primitives-widgetrender--with-settings From 592ef723213174df286cda4ce1540989d3c766ac Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:53:06 +0530 Subject: [PATCH 10/19] Storybook: Import the Vitest globals in the story ID test --- storybook/test/story-ids.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook/test/story-ids.test.ts b/storybook/test/story-ids.test.ts index f8d0f19ffbf200..8f5b769384616d 100644 --- a/storybook/test/story-ids.test.ts +++ b/storybook/test/story-ids.test.ts @@ -2,6 +2,7 @@ import { readdirSync, readFileSync } from 'node:fs'; import path from 'node:path'; import { parseSync, traverse } from '@babel/core'; import type { Node, ObjectExpression } from '@babel/types'; +import { describe, expect, it } from 'vitest'; import { storyGlobs } from '../story-globs'; const CONFIG_DIR = path.join( __dirname, '..' ); From 59e3f33d33d9750a442fd5c8e345e0a83c27d99e Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:53:38 +0530 Subject: [PATCH 11/19] Storybook: Read story metas with Storybook's CSF parser --- storybook/test/story-ids.test.ts | 84 +++----------------------------- 1 file changed, 7 insertions(+), 77 deletions(-) diff --git a/storybook/test/story-ids.test.ts b/storybook/test/story-ids.test.ts index 8f5b769384616d..070bf6a5237347 100644 --- a/storybook/test/story-ids.test.ts +++ b/storybook/test/story-ids.test.ts @@ -1,7 +1,6 @@ import { readdirSync, readFileSync } from 'node:fs'; import path from 'node:path'; -import { parseSync, traverse } from '@babel/core'; -import type { Node, ObjectExpression } from '@babel/types'; +import { loadCsf } from 'storybook/internal/csf-tools'; import { describe, expect, it } from 'vitest'; import { storyGlobs } from '../story-globs'; @@ -68,73 +67,6 @@ function findStoryFiles() { return [ ...files ].sort(); } -/** - * Unwraps the `as`/`satisfies` assertions Storybook metas are often written - * with, returning the object expression underneath. - * - * @param node The default export, or a variable's initializer. - * @return The object expression, or `undefined` for anything else. - */ -function toObjectExpression( - node: Node | null | undefined -): ObjectExpression | undefined { - let current = node; - while ( - current?.type === 'TSAsExpression' || - current?.type === 'TSSatisfiesExpression' - ) { - current = current.expression; - } - return current?.type === 'ObjectExpression' ? current : undefined; -} - -/** - * Finds the meta object a CSF file exports by default, whether it is written - * inline (`export default { ... }`) or through a variable - * (`const meta = { ... }`). - * - * @param source The file's contents. - * @return The meta object, or `undefined` when there is no object to find. - */ -function findMeta( source: string ): ObjectExpression | undefined { - const ast = parseSync( source, { - babelrc: false, - configFile: false, - filename: 'story.tsx', - parserOpts: { plugins: [ 'typescript', 'jsx' ] }, - } ); - if ( ! ast ) { - return undefined; - } - - let meta: ObjectExpression | undefined; - let metaName: string | undefined; - - traverse( ast, { - ExportDefaultDeclaration( { node } ) { - meta = toObjectExpression( node.declaration ); - if ( ! meta && node.declaration.type === 'Identifier' ) { - metaName = node.declaration.name; - } - }, - } ); - - if ( ! meta && metaName ) { - traverse( ast, { - VariableDeclarator( { node } ) { - if ( - node.id.type === 'Identifier' && - node.id.name === metaName - ) { - meta = toObjectExpression( node.init ); - } - }, - } ); - } - - return meta; -} - /** * Whether a story or doc pins its own URL with an `id`. * @@ -152,14 +84,12 @@ function hasStableId( file: string ) { return /\bid=/.test( tag ) || /\bof=/.test( tag ); } - return Boolean( - findMeta( source )?.properties.some( - ( property ) => - property.type === 'ObjectProperty' && - property.key.type === 'Identifier' && - property.key.name === 'id' - ) - ); + // Storybook's own CSF parser only fills in `id` when the meta declares one. + const csf = loadCsf( source, { + fileName: file, + makeTitle: ( title ) => title, + } ).parse(); + return Boolean( csf._meta?.id ); } describe( 'story IDs', () => { From c768a63f7e9bf5d184d8f26e78d626b0bb05981c Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:54:06 +0530 Subject: [PATCH 12/19] Storybook: Reuse the shared stories globs in main.ts --- storybook/main.ts | 31 ++----------------------------- 1 file changed, 2 insertions(+), 29 deletions(-) diff --git a/storybook/main.ts b/storybook/main.ts index f7dc6882b12ed3..506f20b6029a95 100644 --- a/storybook/main.ts +++ b/storybook/main.ts @@ -7,6 +7,7 @@ import type { StorybookConfig } from '@storybook/react-vite'; import dsTokenFallbacks from '@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks'; import dsTokenFallbacksJs from '@wordpress/theme/vite-plugins/vite-ds-token-fallbacks'; import { statusIndexer } from './status-indexer.js'; +import { storyGlobs } from './story-globs.js'; /** * @see https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments @@ -19,39 +20,11 @@ function getAbsolutePath( packageName: string ) { const { NODE_ENV = 'development' } = process.env; -const stories = [ - './stories/playground/**/*.story.@(jsx|tsx)', - './stories/**/*.mdx', - './stories/design-system/**/*.story.@(ts|tsx|mts|cts)', - '../packages/block-editor/src/**/stories/*.story.@(jsx|tsx|mdx)', - '../packages/editor/src/**/stories/*.story.@(jsx|tsx|mdx)', - '../packages/global-styles-ui/src/**/stories/*.story.@(jsx|tsx|mdx)', - '../packages/components/src/**/stories/*.story.@(jsx|tsx)', - '../packages/components/src/**/stories/*.mdx', - '../packages/icons/src/**/stories/*.story.@(tsx|mdx)', - './stories/icons/**/*.story.@(ts|tsx|mts|cts)', - '../packages/dataviews/src/**/stories/*.story.@(tsx|mdx)', - '../packages/fields/src/**/stories/*.story.@(tsx|mdx)', - '../packages/image-cropper/src/**/stories/*.story.@(tsx|mdx)', - '../packages/media-editor/src/**/stories/*.story.@(tsx|mdx)', - '../packages/media-fields/src/**/stories/*.story.@(tsx|mdx)', - '../packages/theme/src/**/stories/*.mdx', - '../packages/theme/src/**/stories/*.story.@(tsx|mdx)', - '../packages/grid/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/widget-primitives/src/**/stories/*.mdx', - '../packages/widget-primitives/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/widget-dashboard/src/**/stories/*.mdx', - '../packages/widget-dashboard/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/ui/src/**/stories/*.mdx', - '../packages/ui/src/**/stories/*.story.@(ts|tsx|mts|cts)', - '../packages/admin-ui/src/**/stories/*.story.@(ts|tsx|mts|cts)', -]; - const config: StorybookConfig = { core: { disableTelemetry: true, }, - stories, + stories: storyGlobs, // Tags stories with their `componentStatus` so the sidebar can show it. experimental_indexers: ( existing = [] ) => [ statusIndexer, ...existing ], staticDirs: [ './static' ], From e722df57253795411dd4e3de82a631729e97b21e Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:54:38 +0530 Subject: [PATCH 13/19] Storybook: Restore the note on the ID shared by the Icon story files --- packages/icons/src/icon/stories/index.story.tsx | 2 ++ storybook/stories/icons/library.story.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/icons/src/icon/stories/index.story.tsx b/packages/icons/src/icon/stories/index.story.tsx index 4b6aacd2a2455a..7f917fcaa13917 100644 --- a/packages/icons/src/icon/stories/index.story.tsx +++ b/packages/icons/src/icon/stories/index.story.tsx @@ -6,6 +6,8 @@ import * as icons from '../../'; const meta = { component: Icon, + // Shares its `id` and `title` with `storybook/stories/icons/library.story.tsx` + // so both files merge into one entry. Change them together. id: 'icons-icon', title: 'Design System/Icons/Icon', parameters: { diff --git a/storybook/stories/icons/library.story.tsx b/storybook/stories/icons/library.story.tsx index 8ff4faf4921a95..72a9216ae994f9 100644 --- a/storybook/stories/icons/library.story.tsx +++ b/storybook/stories/icons/library.story.tsx @@ -62,6 +62,8 @@ function nameToSlug( name: string ): string { const meta: Meta = { component: Icon, + // Shares its `id` and `title` with `packages/icons/src/icon/stories/index.story.tsx` + // so both files merge into one entry. Change them together. id: 'icons-icon', title: 'Design System/Icons/Icon', tags: [ '!autodocs' ], From e7a37f6cd36f3880e86f1a841b6c6b5c6eee0801 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:55:04 +0530 Subject: [PATCH 14/19] Storybook: Declare an ID on the Design System contributing doc --- storybook/stories/design-system/contributing.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/stories/design-system/contributing.mdx b/storybook/stories/design-system/contributing.mdx index 1b1a1eebffacdc..ec6bd9788fdbf2 100644 --- a/storybook/stories/design-system/contributing.mdx +++ b/storybook/stories/design-system/contributing.mdx @@ -1,7 +1,7 @@ import { Meta, Markdown } from '@storybook/addon-docs/blocks'; import Contributing from './contributing.md?raw'; - + { /* The content lives in contributing.md so people and agents can read the same text outside Storybook. */ } From 7c7af360a578028b0756415b1a7b9d545a4ccd16 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 6 Oct 2026 22:55:51 +0530 Subject: [PATCH 15/19] Storybook: Refresh the story ID snapshot after merging trunk --- storybook/story-ids.txt | 83 ++++++++++++++++++++++++++++++++--------- 1 file changed, 66 insertions(+), 17 deletions(-) diff --git a/storybook/story-ids.txt b/storybook/story-ids.txt index 302fbc5a1103d7..275adb444e5dca 100644 --- a/storybook/story-ids.txt +++ b/storybook/story-ids.txt @@ -160,6 +160,7 @@ components-card--padding-variations components-checkboxcontrol--default components-checkboxcontrol--docs components-checkboxcontrol--indeterminate +components-checkboxcontrol--migration-guide components-checkboxcontrol--with-custom-label components-checkboxcontrol--with-visual components-circularoptionpicker--as-toggle-buttons @@ -208,10 +209,6 @@ components-customselectcontrol--default components-customselectcontrol--docs components-customselectcontrol--with-hints components-customselectcontrol--with-long-labels -components-customselectcontrol-v2--custom-selected-value -components-customselectcontrol-v2--default -components-customselectcontrol-v2--docs -components-customselectcontrol-v2--multiple-selection components-datepicker--default components-datepicker--docs components-datepicker--with-events @@ -387,6 +384,7 @@ components-querycontrols--docs components-querycontrols--select-single-category components-radiocontrol--default components-radiocontrol--docs +components-radiocontrol--migration-guide components-radiocontrol--with-disabled-option components-radiocontrol--with-option-descriptions components-radiogroup--controlled @@ -485,6 +483,7 @@ components-tip--default components-tip--docs components-togglecontrol--default components-togglecontrol--docs +components-togglecontrol--migration-guide components-togglecontrol--with-help-text components-togglecontrol--with-visual components-togglegroupcontrol--default @@ -570,6 +569,7 @@ dataviews-dataviews--minimal-ui dataviews-dataviews--with-card dataviews-dataviewspicker--default dataviews-dataviewspicker--docs +dataviews-dataviewspicker--free-composition dataviews-dataviewspicker--with-modal dataviews-fieldtypes--all-component dataviews-fieldtypes--array-component @@ -644,8 +644,20 @@ design-system-components-button--with-icon design-system-components-button--with-keyboard-shortcut design-system-components-button-usage-guidelines--docs design-system-components-button-usage-guidelines--use-button-for-actions -design-system-components-button-usage-guidelines--use-link-button-for-navigation +design-system-components-button-usage-guidelines--use-button-link-for-navigation design-system-components-button-usage-guidelines--use-link-for-inline-navigation +design-system-components-buttonlink--all-tones-and-variants +design-system-components-buttonlink--compact +design-system-components-buttonlink--default +design-system-components-buttonlink--docs +design-system-components-buttonlink--minimal +design-system-components-buttonlink--neutral +design-system-components-buttonlink--neutral-outline +design-system-components-buttonlink--open-in-new-tab +design-system-components-buttonlink--outline +design-system-components-buttonlink--small +design-system-components-buttonlink--unstyled +design-system-components-buttonlink--with-icon design-system-components-calendar-calendar--default design-system-components-calendar-calendar--disabled-dates design-system-components-calendar-calendar--docs @@ -739,7 +751,9 @@ design-system-components-form-primitives-autocomplete--inline design-system-components-form-primitives-autocomplete--inline-mention-autocomplete design-system-components-form-primitives-autocomplete--open-only-on-match design-system-components-form-primitives-autocomplete--with-custom-z-index +design-system-components-form-primitives-autocomplete--with-item-descriptions design-system-components-form-primitives-autocomplete--with-search-icon-and-clear-button +design-system-components-form-primitives-autocomplete--with-separator design-system-components-form-primitives-checkbox--checked design-system-components-form-primitives-checkbox--default design-system-components-form-primitives-checkbox--disabled @@ -758,6 +772,7 @@ design-system-components-form-primitives-combobox--docs design-system-components-form-primitives-combobox--grouped design-system-components-form-primitives-combobox--with-custom-trigger-and-item design-system-components-form-primitives-combobox--with-custom-z-index +design-system-components-form-primitives-combobox--with-separator design-system-components-form-primitives-controlwitherror--default design-system-components-form-primitives-controlwitherror--docs design-system-components-form-primitives-controlwitherror--with-custom-validity @@ -798,6 +813,8 @@ design-system-components-form-primitives-searchablechipselect--docs design-system-components-form-primitives-searchablechipselect--grouped design-system-components-form-primitives-searchablechipselect--with-custom-chips-and-items design-system-components-form-primitives-searchablechipselect--with-custom-empty-content +design-system-components-form-primitives-searchablechipselect--with-item-descriptions +design-system-components-form-primitives-searchablechipselect--with-separator design-system-components-form-primitives-searchablechipselect--without-clear-button design-system-components-form-primitives-searchableselect--default design-system-components-form-primitives-searchableselect--docs @@ -805,6 +822,8 @@ design-system-components-form-primitives-searchableselect--grouped design-system-components-form-primitives-searchableselect--with-custom-empty-content design-system-components-form-primitives-searchableselect--with-custom-placeholder design-system-components-form-primitives-searchableselect--with-custom-trigger-and-items +design-system-components-form-primitives-searchableselect--with-item-descriptions +design-system-components-form-primitives-searchableselect--with-separator design-system-components-form-primitives-select--compact design-system-components-form-primitives-select--default design-system-components-form-primitives-select--disabled @@ -820,6 +839,7 @@ design-system-components-form-primitives-select--with-item-description design-system-components-form-primitives-select--with-long-list design-system-components-form-primitives-select--with-null-value-option design-system-components-form-primitives-select--with-overflow +design-system-components-form-primitives-select--with-separator design-system-components-form-primitives-switch--checked design-system-components-form-primitives-switch--default design-system-components-form-primitives-switch--disabled @@ -855,7 +875,25 @@ design-system-components-form-searchablechipselectcontrol--with-custom-empty-con design-system-components-form-searchablechipselectcontrol--with-custom-search-placeholder design-system-components-form-searchablechipselectcontrol--with-details design-system-components-form-searchablechipselectcontrol--with-disabled-option +design-system-components-form-searchablechipselectcontrol--with-item-descriptions +design-system-components-form-searchablechipselectcontrol--with-separator design-system-components-form-searchablechipselectcontrol--without-clear-button +design-system-components-form-searchableselectcontrol--async-items +design-system-components-form-searchableselectcontrol--creatable +design-system-components-form-searchableselectcontrol--default +design-system-components-form-searchableselectcontrol--docs +design-system-components-form-searchableselectcontrol--grouped +design-system-components-form-searchableselectcontrol--grouped-creatable +design-system-components-form-searchableselectcontrol--popup-width +design-system-components-form-searchableselectcontrol--visually-hidden-label +design-system-components-form-searchableselectcontrol--with-custom-empty-content +design-system-components-form-searchableselectcontrol--with-custom-placeholder +design-system-components-form-searchableselectcontrol--with-custom-search-placeholder +design-system-components-form-searchableselectcontrol--with-custom-trigger-and-items +design-system-components-form-searchableselectcontrol--with-details +design-system-components-form-searchableselectcontrol--with-disabled-option +design-system-components-form-searchableselectcontrol--with-item-descriptions +design-system-components-form-searchableselectcontrol--with-separator design-system-components-form-selectcontrol--default design-system-components-form-selectcontrol--docs design-system-components-form-selectcontrol--grouped @@ -868,6 +906,7 @@ design-system-components-form-selectcontrol--with-disabled-option design-system-components-form-selectcontrol--with-item-description design-system-components-form-selectcontrol--with-items-array-and-partial-customization design-system-components-form-selectcontrol--with-null-value-option +design-system-components-form-selectcontrol--with-separator design-system-components-form-switchcontrol--default design-system-components-form-switchcontrol--disabled design-system-components-form-switchcontrol--disabled-checked @@ -910,18 +949,6 @@ design-system-components-link--docs design-system-components-link--inline design-system-components-link--open-in-new-tab design-system-components-link--standalone -design-system-components-linkbutton--all-tones-and-variants -design-system-components-linkbutton--compact -design-system-components-linkbutton--default -design-system-components-linkbutton--docs -design-system-components-linkbutton--minimal -design-system-components-linkbutton--neutral -design-system-components-linkbutton--neutral-outline -design-system-components-linkbutton--open-in-new-tab -design-system-components-linkbutton--outline -design-system-components-linkbutton--small -design-system-components-linkbutton--unstyled -design-system-components-linkbutton--with-icon design-system-components-menu--checkbox-items design-system-components-menu--default design-system-components-menu--docs @@ -937,6 +964,12 @@ design-system-components-menu-usage-guidelines--checked-options-within-a-command design-system-components-menu-usage-guidelines--docs design-system-components-menu-usage-guidelines--menu-for-commands design-system-components-menu-usage-guidelines--select-for-values +design-system-components-meter--bar-only +design-system-components-meter--brand +design-system-components-meter--custom-value-format +design-system-components-meter--default +design-system-components-meter--docs +design-system-components-meter-usage-guidelines--docs design-system-components-notice--custom-icon design-system-components-notice--default design-system-components-notice--description-only @@ -949,6 +982,10 @@ design-system-components-notice--title-only design-system-components-notice--warning design-system-components-notice--without-actions design-system-components-notice--without-icon +design-system-components-notice-announcements--docs +design-system-components-notice-announcements--polite-status +design-system-components-notice-announcements--static-notice +design-system-components-notice-announcements--urgent-error design-system-components-popover--anchor design-system-components-popover--collision-avoidance design-system-components-popover--controlled @@ -971,11 +1008,21 @@ design-system-components-popover--unstyled design-system-components-popover--viewport-constrained-size design-system-components-popover--with-close-button design-system-components-popover--with-custom-z-index +design-system-components-progress--bar-only +design-system-components-progress--current-color +design-system-components-progress--custom-color +design-system-components-progress--custom-value-format +design-system-components-progress--default +design-system-components-progress--docs +design-system-components-progress--indeterminate +design-system-components-progress-usage-guidelines--docs design-system-components-skeleton--card-placeholder design-system-components-skeleton--circle design-system-components-skeleton--default design-system-components-skeleton--docs design-system-components-skeleton--text-lines +design-system-components-spinner--current-color +design-system-components-spinner--custom-color design-system-components-spinner--custom-size design-system-components-spinner--default design-system-components-spinner--docs @@ -1010,6 +1057,7 @@ design-system-components-tooltip-usage-guidelines--recommended-usage design-system-components-visuallyhidden--default design-system-components-visuallyhidden--docs design-system-components-visuallyhidden--with-custom-element +design-system-contributing--docs design-system-form-with-validation-overview--async-validation design-system-form-with-validation-overview--custom-errors-on-submit design-system-form-with-validation-overview--docs @@ -1108,6 +1156,7 @@ widget-dashboard-playground--grid-settings widget-dashboard-playground--host-links widget-dashboard-playground--long-title widget-dashboard-playground--policy +widget-dashboard-playground--runtime-actions widget-dashboard-playground-debug--docs widget-dashboard-playground-debug--staging-enforcement widget-dashboard-policy--docs From 5a7affea8aefc2a5873b83d950a0d966a7497a3f Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 8 Oct 2026 00:55:44 +0530 Subject: [PATCH 16/19] Storybook: Find story files with globSync in the story ID test Replaces the hand-written glob parser and directory walk. --- storybook/test/story-ids.test.ts | 60 +++----------------------------- 1 file changed, 4 insertions(+), 56 deletions(-) diff --git a/storybook/test/story-ids.test.ts b/storybook/test/story-ids.test.ts index 070bf6a5237347..82fc1e2466af9b 100644 --- a/storybook/test/story-ids.test.ts +++ b/storybook/test/story-ids.test.ts @@ -1,4 +1,4 @@ -import { readdirSync, readFileSync } from 'node:fs'; +import { globSync, readFileSync } from 'node:fs'; import path from 'node:path'; import { loadCsf } from 'storybook/internal/csf-tools'; import { describe, expect, it } from 'vitest'; @@ -7,64 +7,12 @@ import { storyGlobs } from '../story-globs'; const CONFIG_DIR = path.join( __dirname, '..' ); /** - * Turns one of Storybook's `stories` globs into an equivalent regular - * expression. Only the syntax those globs use is supported: `**`, `*` and - * `@(a|b)`. + * Lists every story and doc Storybook indexes. * - * @param glob A glob relative to the Storybook config directory. - * @return A pattern matching the paths the glob covers. - */ -function globToRegExp( glob: string ) { - const escape = ( value: string ) => - value.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ); - const tokens = glob.match( /@\([^)]+\)|\*\*\/|\*|[^*@]+|./g ) ?? []; - - const pattern = tokens - .map( ( token ) => { - if ( token.startsWith( '@(' ) ) { - const alternatives = token.slice( 2, -1 ).split( '|' ); - return `(?:${ alternatives.map( escape ).join( '|' ) })`; - } - if ( token === '**/' ) { - return '(?:[^/]+/)*'; - } - if ( token === '*' ) { - return '[^/]*'; - } - return escape( token ); - } ) - .join( '' ); - - return new RegExp( `^${ pattern }$` ); -} - -/** - * Lists every story and doc Storybook indexes, by walking the directories the - * `stories` globs point at and keeping the paths those globs match. - * - * @return Paths relative to the Storybook config directory, written the same - * way the globs are so they can be matched against them. + * @return Paths relative to the Storybook config directory. */ function findStoryFiles() { - const files = new Set< string >(); - - for ( const glob of storyGlobs ) { - const prefix = glob.slice( 0, glob.indexOf( '*' ) ); - const walked = readdirSync( path.join( CONFIG_DIR, prefix ), { - recursive: true, - } ); - const matches = globToRegExp( glob ); - - for ( const entry of walked ) { - const file = - prefix + entry.toString().split( path.sep ).join( '/' ); - if ( matches.test( file ) ) { - files.add( file ); - } - } - } - - return [ ...files ].sort(); + return globSync( storyGlobs, { cwd: CONFIG_DIR } ).sort(); } /** From 94000092cdca37e71f8b2a376069da6d91b6bde9 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 8 Oct 2026 00:56:05 +0530 Subject: [PATCH 17/19] Storybook: Document the stable story URL convention --- storybook/README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/storybook/README.md b/storybook/README.md index 0c6c17af2f21a5..a29f5b5498266b 100644 --- a/storybook/README.md +++ b/storybook/README.md @@ -29,3 +29,31 @@ When a snapshot changes due to code changes or Storybook upgrades, a pull reques npm run storybook:build npm run storybook:manifest-snapshot ``` + +## Stable story URLs + +A story's URL is built from its `id`. Without one, Storybook derives the `id` from the `title`, so moving a story to another sidebar folder changes its URL and breaks existing links. Every story and doc therefore declares an `id`, and the `title` only sets its place in the sidebar: + +```ts +const meta = { + title: 'Components/Containers/Card', // Sidebar position, free to change. + id: 'components-card', // URL, never changes. +}; +``` + +In MDX, set it on the `Meta` block: ``. An MDX doc attached to a CSF file with `of={ … }` inherits that file's `id` and needs none of its own. + +For a new story, use the `id` Storybook would derive from the `title`: lowercase, with each run of other characters replaced by a hyphen (`Components/Containers/Card` becomes `components-containers-card`). Never change the `id` of an existing story. + +Two checks enforce this: + +- `storybook/test/story-ids.test.ts` fails when a story or doc does not declare an `id`. +- `storybook/story-ids.txt` lists every published story and doc URL. CI regenerates it and fails when a URL in the committed list has disappeared. + +To update the list, run the following from the top-level Gutenberg directory and commit the result. No Storybook build is needed. + +```bash +npm run storybook:story-id-snapshot +``` + +New URLs are added without complaint. If a URL disappears because a story moved, restore its original `id` instead. If the removal is intended, for example when a component's stories are deleted, commit the regenerated list in the same pull request so the removed URLs are visible in the diff. Documentation for a deprecated component should usually be marked deprecated rather than deleted, so its URL keeps working. From 8424800c883b1e982598e742e863f16ee052ab30 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 8 Oct 2026 01:02:05 +0530 Subject: [PATCH 18/19] Storybook: Refresh the story ID snapshot after merging trunk --- storybook/story-ids.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook/story-ids.txt b/storybook/story-ids.txt index 275adb444e5dca..640f9980c28682 100644 --- a/storybook/story-ids.txt +++ b/storybook/story-ids.txt @@ -1126,6 +1126,7 @@ icons-icon--current-color icons-icon--default icons-icon--docs icons-icon--library +icons-icon--stroke-scaling imagecropper-imagecropper--default imagecropper-imagecropper--docs imagecropper-imagecropper--with-controls From 7427d66bccc9b3d21cd7f0d0be2faf0012e14dfb Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Thu, 8 Oct 2026 01:57:36 +0530 Subject: [PATCH 19/19] Storybook: Check MDX doc IDs with Storybook's MDX analyzer --- storybook/test/story-ids.test.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/storybook/test/story-ids.test.ts b/storybook/test/story-ids.test.ts index 82fc1e2466af9b..11af3aa87d1b3e 100644 --- a/storybook/test/story-ids.test.ts +++ b/storybook/test/story-ids.test.ts @@ -1,5 +1,6 @@ import { globSync, readFileSync } from 'node:fs'; import path from 'node:path'; +import { analyzeMdx } from 'storybook/internal/core-server'; import { loadCsf } from 'storybook/internal/csf-tools'; import { describe, expect, it } from 'vitest'; import { storyGlobs } from '../story-globs'; @@ -22,14 +23,15 @@ function findStoryFiles() { * so it has nothing of its own to declare. * * @param file Path to the story or doc, relative to the Storybook config. - * @return `true` when the file's URL cannot move with its title. + * @return Resolves to `true` when the file's URL cannot move with its title. */ -function hasStableId( file: string ) { +async function hasStableId( file: string ) { const source = readFileSync( path.join( CONFIG_DIR, file ), 'utf8' ); if ( file.endsWith( '.mdx' ) ) { - const tag = source.match( // )?.[ 0 ] ?? ''; - return /\bid=/.test( tag ) || /\bof=/.test( tag ); + // Storybook's own MDX analyzer, which the indexer builds docs IDs from. + const { id, of } = await analyzeMdx( source ); + return Boolean( id || of ); } // Storybook's own CSF parser only fills in `id` when the meta declares one. @@ -51,7 +53,7 @@ describe( 'story IDs', () => { // A story's URL is built from its `id`, falling back to its `title`. Only a // declared `id` keeps the URL from moving when the story does. - it.each( files )( '%s declares an id', ( file ) => { - expect( hasStableId( file ) ).toBe( true ); + it.each( files )( '%s declares an id', async ( file ) => { + expect( await hasStableId( file ) ).toBe( true ); } ); } );