Storybook: add synonyms for UI components

packages/components/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Documentation
 
+-   Storybook: Add search synonyms for `@wordpress/ui` design system components so sidebar search matches common terms (e.g. `modal` finds `Dialog`) ([#78951](https://github.com/WordPress/gutenberg/pull/78951)).
 -   Fix documentation typos and grammar ([#78686](https://github.com/WordPress/gutenberg/pull/78686)).
 
 ## 34.0.0 (2026-05-27)

packages/theme/tsconfig.json

@@ -6,7 +6,6 @@
 	"files": [],
 	"references": [
 		{ "path": "../style-runtime" },
-		{ "path": "./tsconfig.src.json" },
-		{ "path": "./tsconfig.bin.json" }
+		{ "path": "./tsconfig.src.json" }
 	]
 }

packages/ui/CHANGELOG.md

@@ -12,6 +12,7 @@
 
 ### Enhancements
 
+-   Storybook: Add `synonyms` on component story meta so design system components are discoverable by common search terms (e.g. `form` finds `Input`) ([#78951](https://github.com/WordPress/gutenberg/pull/78951)).
 -   `Tooltip.Provider`: Widen the types to accept all props of the equivalent `Tooltip.Provider` from `@base-ui/react` (types-only change) ([#78642](https://github.com/WordPress/gutenberg/pull/78642)).
 
 ## 0.14.0 (2026-05-27)

packages/ui/CONTRIBUTING.md

@@ -91,6 +91,16 @@ const meta: Meta< typeof Button > = {
 };
 ```
 
+Add a `synonyms` array on the story meta so the component is discoverable in Storybook sidebar search (e.g. searching `form` finds `Input`):
+
+```ts
+const meta: Meta< typeof Input > = {
+	title: 'Design System/Components/Form/Primitives/Input',
+	synonyms: [ 'field', 'form', 'input', 'text', 'textbox' ],
+	component: Input,
+};
+```
+
 ## `render` Prop and Ref Forwarding
 
 All `@wordpress/ui` components support a `render` prop (via the `ComponentProps` utility type) that lets consumers swap the underlying HTML element. This section codifies the two canonical implementation patterns, the rules for handling `render`, and common anti-patterns to avoid.

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',
+	synonyms: [ 'confirm', 'dialog', 'modal', 'popup' ],
 	component: AlertDialog.Root,
 	subcomponents: {
 		'AlertDialog.Trigger': AlertDialog.Trigger,

packages/ui/src/badge/stories/choosing-intent.story.tsx

@@ -4,6 +4,7 @@ import { Stack } from '../../stack';
 
 const meta: Meta< typeof Badge > = {
 	title: 'Design System/Components/Badge/Choosing intent',
+	synonyms: [ 'chip', 'intent', 'label', 'status', 'tag' ],
 	component: Badge,
 	decorators: [
 		( Story ) => (

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',
+	synonyms: [ 'chip', 'label', 'status', 'tag' ],
 	component: Badge,
 	parameters: {
 		componentStatus: {

packages/ui/src/button/stories/index.story.tsx

@@ -5,6 +5,7 @@ import { Button } from '../index';
 
 const meta: Meta< typeof Button > = {
 	title: 'Design System/Components/Button',
+	synonyms: [ 'action', 'cta', 'submit' ],
 	component: Button,
 	subcomponents: {
 		'Button.Icon': Button.Icon,

packages/ui/src/card/stories/index.story.tsx

@@ -27,6 +27,7 @@ function Text( { children }: { children: React.ReactNode } ) {
 const meta: Meta< typeof Card.Root > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/Card',
+	synonyms: [ 'container', 'panel', 'surface' ],
 	component: Card.Root,
 	subcomponents: {
 		'Card.Header': Card.Header,

packages/ui/src/collapsible-card/stories/index.story.tsx

@@ -28,6 +28,7 @@ function Text( { children }: { children: React.ReactNode } ) {
 const meta: Meta< typeof CollapsibleCard.Root > = {
 	tags: [ 'manifest' ],
 	title: 'Design System/Components/CollapsibleCard',
+	synonyms: [ 'accordion', 'card', 'expand' ],
 	component: CollapsibleCard.Root,
 	subcomponents: {
 		'CollapsibleCard.Header': CollapsibleCard.Header,

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',
+	synonyms: [ 'accordion', 'disclosure', 'expand' ],
 	component: Collapsible.Root,
 	subcomponents: {
 		'Collapsible.Trigger': Collapsible.Trigger,

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',
+	synonyms: [ 'modal', 'overlay', 'popup' ],
 	component: Dialog.Root,
 	subcomponents: {
 		'Dialog.Trigger': Dialog.Trigger,

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',
+	synonyms: [ 'modal', 'overlay', 'panel', 'sheet' ],
 	component: Drawer.Root,
 	subcomponents: {
 		'Drawer.Trigger': Drawer.Trigger,

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',
+	synonyms: [ 'blank', 'no results', 'placeholder' ],
 	component: EmptyState.Root,
 	subcomponents: {
 		'EmptyState.Visual': EmptyState.Visual,

packages/ui/src/form/input-control/stories/index.story.tsx

@@ -16,6 +16,7 @@ import {
 
 const meta: Meta< typeof InputControl > = {
 	title: 'Design System/Components/Form/InputControl',
+	synonyms: [ 'field', 'form', 'input', 'label', 'text' ],
 	component: InputControl,
 	argTypes: {
 		defaultValue: { control: false },

packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx

@@ -10,6 +10,7 @@ import { COMMANDS, URLS, USERS, type FixtureItem } from './fixtures';
 
 const meta: Meta< typeof Autocomplete.Root > = {
 	title: 'Design System/Components/Form/Primitives/Autocomplete',
+	synonyms: [ 'combobox', 'field', 'form', 'search', 'typeahead' ],
 	component: Autocomplete.Root,
 	subcomponents: {
 		'Autocomplete.Portal': Autocomplete.Portal,

packages/ui/src/form/primitives/combobox/stories/index.story.tsx

@@ -5,6 +5,14 @@ import { ITEMS, type FixtureItem } from './fixtures';
 
 const meta: Meta< typeof Combobox.Root > = {
 	title: 'Design System/Components/Form/Primitives/Combobox',
+	synonyms: [
+		'autocomplete',
+		'dropdown',
+		'field',
+		'form',
+		'search',
+		'select',
+	],
 	component: Combobox.Root,
 	subcomponents: {
 		'Combobox.Trigger': Combobox.Trigger,

packages/ui/src/form/primitives/field/stories/index.story.tsx

@@ -5,6 +5,7 @@ import { DETAILS_EXAMPLE } from '../../../stories/shared';
 
 const meta: Meta< typeof Field.Root > = {
 	title: 'Design System/Components/Form/Primitives/Field',
+	synonyms: [ 'field', 'form', 'label' ],
 	component: Field.Root,
 	subcomponents: {
 		'Field.Item': Field.Item,

packages/ui/src/form/primitives/fieldset/stories/index.story.tsx

@@ -4,6 +4,7 @@ import { DETAILS_EXAMPLE } from '../../../stories/shared';
 
 const meta: Meta< typeof Fieldset.Root > = {
 	title: 'Design System/Components/Form/Primitives/Fieldset',
+	synonyms: [ 'field', 'form', 'group' ],
 	component: Fieldset.Root,
 	subcomponents: {
 		'Fieldset.Legend': Fieldset.Legend,

packages/ui/src/form/primitives/input-layout/stories/index.story.tsx

@@ -5,6 +5,7 @@ import { IconButton } from '../../../../icon-button';
 
 const meta: Meta< typeof InputLayout > = {
 	title: 'Design System/Components/Form/Primitives/InputLayout',
+	synonyms: [ 'affix', 'field', 'form', 'prefix', 'suffix' ],
 	component: InputLayout,
 	subcomponents: {
 		'InputLayout.Slot': InputLayout.Slot,

packages/ui/src/form/primitives/input/stories/index.story.tsx

@@ -5,6 +5,7 @@ import { WithSuffixControl } from '../../input-layout/stories/index.story';
 
 const meta: Meta< typeof Input > = {
 	title: 'Design System/Components/Form/Primitives/Input',
+	synonyms: [ 'field', 'form', 'input', 'text', 'textbox', 'text field' ],
 	component: Input,
 	argTypes: {
 		defaultValue: { control: false },

packages/ui/src/form/primitives/select/stories/index.story.tsx

@@ -3,6 +3,7 @@ import * as Select from '../';
 
 const meta: Meta< typeof Select.Root > = {
 	title: 'Design System/Components/Form/Primitives/Select',
+	synonyms: [ 'dropdown', 'field', 'form', 'picker', 'select' ],
 	component: Select.Root,
 	subcomponents: {
 		'Select.Trigger': Select.Trigger,

packages/ui/src/form/primitives/textarea/stories/index.story.tsx

@@ -3,6 +3,7 @@ import { Textarea } from '../index';
 
 const meta: Meta< typeof Textarea > = {
 	title: 'Design System/Components/Form/Primitives/Textarea',
+	synonyms: [ 'field', 'form', 'multiline', 'text', 'textarea' ],
 	component: Textarea,
 	parameters: {
 		componentStatus: {

packages/ui/src/form/select-control/stories/index.story.tsx

@@ -7,6 +7,7 @@ import {
 
 const meta: Meta< typeof SelectControl > = {
 	title: 'Design System/Components/Form/SelectControl',
+	synonyms: [ 'dropdown', 'field', 'form', 'label', 'select' ],
 	component: SelectControl,
 	subcomponents: {
 		'SelectControl.Item': SelectControl.Item,

packages/ui/src/icon-button/stories/index.story.tsx

@@ -15,6 +15,7 @@ import * as Tooltip from '../../tooltip';
 
 const meta: Meta< typeof IconButton > = {
 	title: 'Design System/Components/IconButton',
+	synonyms: [ 'action', 'button', 'icon' ],
 	component: IconButton,
 	argTypes: {
 		'aria-pressed': {

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',
+	synonyms: [ 'glyph', 'symbol', 'svg' ],
 	component: Icon,
 	tags: [ 'manifest' ],
 	decorators: [

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',
+	synonyms: [ 'anchor', 'hyperlink', 'navigation' ],
 	component: Link,
 	tags: [ 'manifest' ],
 	parameters: {

packages/ui/src/notice/stories/index.story.tsx

@@ -3,6 +3,7 @@ import * as Notice from '../index';
 
 const meta: Meta< typeof Notice.Root > = {
 	title: 'Design System/Components/Notice',
+	synonyms: [ 'alert', 'banner', 'message', 'notification' ],
 	component: Notice.Root,
 	subcomponents: {
 		'Notice.Title': Notice.Title,

packages/ui/src/popover/stories/index.story.tsx

@@ -9,6 +9,7 @@ import { GenericIframe, useMeasure } from './utils';
 
 const meta: Meta< typeof Popover.Root > = {
 	title: 'Design System/Components/Popover',
+	synonyms: [ 'dropdown', 'floating', 'overlay', 'popup' ],
 	component: Popover.Root,
 	subcomponents: {
 		'Popover.Trigger': Popover.Trigger,

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',
+	synonyms: [ 'flex', 'layout', 'spacing' ],
 	component: Stack,
 	parameters: {
 		componentStatus: {

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',
+	synonyms: [ 'navigation', 'switcher', 'tab' ],
 	component: Tabs.Root,
 	tags: [ 'manifest' ],
 	subcomponents: {

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',
+	synonyms: [ 'label', 'paragraph', 'typography' ],
 	component: Text,
 	parameters: {
 		componentStatus: {

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',
+	synonyms: [ 'help', 'hint', 'popup' ],
 	component: Tooltip.Root,
 	subcomponents: {
 		'Tooltip.Provider': Tooltip.Provider,

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',
+	synonyms: [ 'guidelines', 'help', 'hint' ],
 	parameters: {
 		controls: { disable: true },
 		componentStatus: {

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',
+	synonyms: [ 'a11y', 'accessibility', 'hidden', 'screen reader' ],
 	component: VisuallyHidden,
 	parameters: {
 		componentStatus: {

packages/ui/storybook.d.ts

@@ -0,0 +1,10 @@
+export {};
+
+declare module 'storybook/internal/csf' {
+	interface ComponentAnnotations {
+		/**
+		 * Additional terms that match this component in Storybook sidebar search.
+		 */
+		synonyms?: string[];
+	}
+}

packages/ui/tsconfig.json

@@ -21,6 +21,6 @@
 		{ "path": "../style-runtime" },
 		{ "path": "../theme" }
 	],
-	"files": [ "global.d.ts" ],
+	"files": [ "global.d.ts", "storybook.d.ts" ],
 	"exclude": []
 }

storybook/README.md

@@ -7,3 +7,5 @@ The Gutenberg project uses Storybook to view and work with the UI components dev
 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.
+
+`@wordpress/ui` story files can declare `synonyms` on their CSF meta. The dev/build scripts collect those terms and patch Storybook's manager so sidebar search matches them.

storybook/package.json

@@ -43,7 +43,7 @@
 		"access": "public"
 	},
 	"scripts": {
-		"storybook:build": "NODE_OPTIONS=--max-old-space-size=8192 storybook build -c . -o ./build",
-		"storybook:dev": "storybook dev -c . -p 50240"
+		"storybook:build": "NODE_OPTIONS=--max-old-space-size=8192 storybook build -c . -o ./build && node ./scripts/patch-manager-search.mjs ./build",
+		"storybook:dev": "node ./scripts/patch-manager-search.mjs && storybook dev -c . -p 50240"
 	}
 }