Skip to content

UI: Add component status notes to Storybook #77988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 8 commits into from
May 12, 2026
Merged

UI: Add component status notes to Storybook #77988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
93e146f
UI: Add component status indicators
aduth May 5, 2026
48be452
UI: Mark EmptyState as stable
aduth May 5, 2026
07ffec2
UI: Update component status to reflect cautionary use with note
aduth May 5, 2026
f4d91f5
Storybook: Rename component status `stable` to `recommended`
aduth May 7, 2026
0a430b1
UI: Clarify status note wording for use alongside components package
aduth May 7, 2026
5a2115d
UI: Remove inaccurate qualifiers for input status
aduth May 7, 2026
4516752
UI: Drop componentStatus from Badge "Choosing intent" manifest story
aduth May 7, 2026
232ee00
UI: Use "overlays" in status notes for overlay compatibility
aduth May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/alignment-matrix-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const meta: Meta< typeof AlignmentMatrixControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/angle-picker-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const meta: Meta< typeof AnglePickerControl > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/base-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const meta: Meta< typeof BaseControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `Field` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-box-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const meta: Meta< typeof BorderBoxControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const meta: Meta< typeof BorderControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const meta: Meta< typeof Button > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `Button` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/checkbox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const meta: Meta< typeof CheckboxControl > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `CheckboxControl` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-indicator/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const meta: Meta< typeof ColorIndicator > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-palette/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const meta: Meta< typeof ColorPalette > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const meta: Meta< typeof ColorPicker > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/combobox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const meta: Meta< typeof ComboboxControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `SearchableSelectControl` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/composite/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const meta: Meta< typeof Composite > = {
canvas: { sourceState: 'shown' },
},
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/confirm-dialog/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const meta: Meta< typeof ConfirmDialog > = {
expanded: true,
},
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
docs: { canvas: { sourceState: 'shown' } },
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-select-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const meta: Meta< typeof CustomSelectControl > = {
source: { excludeDecorators: true },
},
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/disabled/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const meta: Meta< typeof Disabled > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/drop-zone/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const meta: Meta< typeof DropZone > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const meta: Meta< typeof Dropdown > = {
expanded: true,
},
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const meta: Meta< typeof DuotonePicker > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const meta: Meta< typeof DuotoneSwatch > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/focal-point-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const meta: Meta< typeof FocalPointPicker > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/font-size-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const meta: Meta< typeof FontSizePicker > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/form-file-upload/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const meta: Meta< typeof FormFileUpload > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/form-toggle/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const meta: Meta< typeof FormToggle > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'For standard toggles with labels, use `ToggleControl` instead.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/form-token-field/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const meta: Meta< typeof FormTokenField > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `SearchableChipSelect` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/gradient-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const meta: Meta< typeof GradientPicker > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/guide/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const meta: Meta< typeof Guide > = {
},
parameters: {
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/icon/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const meta: Meta< typeof Icon > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Prefer this component over the `Icon` component from `@wordpress/icons`.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/input-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const meta: Meta< typeof InputControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `InputControl` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/item-group/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const meta: Meta< typeof ItemGroup > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/keyboard-shortcuts/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const meta: Meta< typeof KeyboardShortcuts > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-group/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const meta: Meta< typeof MenuGroup > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Subcomponent of `DropdownMenu`.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-item/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const meta: Meta< typeof MenuItem > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Subcomponent of `DropdownMenu`.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-items-choice/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const meta: Meta< typeof MenuItemsChoice > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Subcomponent of `DropdownMenu`.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const meta: Meta< typeof Menu > = {
source: { excludeDecorators: true },
},
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'When building for the Gutenberg repo, use this component instead of `DropdownMenu`. Otherwise, continue using `DropdownMenu` for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/modal/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const meta: Meta< typeof Modal > = {
parameters: {
controls: { expanded: true },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `Dialog` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/navigator/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const meta: Meta< typeof Navigator > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/notice/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const meta: Meta< typeof Notice > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `Notice` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/number-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const meta: Meta< typeof NumberControl > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
notes: 'Will be superseded by `InputControl` with `type="number"` in `@wordpress/ui`, but continue using for now.',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/palette-edit/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const meta: Meta< typeof PaletteEdit > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/panel/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const meta: Meta< typeof Panel > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/placeholder/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const meta: Meta< typeof Placeholder > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const meta: Meta< typeof Popover > = {
parameters: {
controls: { expanded: true },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/progress-bar/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const meta: Meta< typeof ProgressBar > = {
},
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'global',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/query-controls/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const meta: Meta< typeof QueryControls > = {
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
componentStatus: {
status: 'stable',
status: 'recommended',
whereUsed: 'editor',
},
},
Expand Down
Loading
Loading