@wordpress/components 25.6.0 → 25.7.0

package/src/animate/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,19 +9,21 @@ import type { ComponentMeta, Story } from '@storybook/react';
 import { Animate } from '..';
 import Notice from '../../notice';
 
-const meta: ComponentMeta< typeof Animate > = {
+const meta: Meta< typeof Animate > = {
 	title: 'Components/Animate',
 	component: Animate,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: Story< typeof Animate > = ( props ) => <Animate { ...props } />;
+const Template: StoryFn< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
 
-export const Default: Story< typeof Animate > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
@@ -30,7 +32,7 @@ Default.args = {
 	),
 };
 
-export const AppearTopLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopLeft = Template.bind( {} );
 AppearTopLeft.args = {
 	type: 'appear',
 	options: { origin: 'top left' },
@@ -40,7 +42,7 @@ AppearTopLeft.args = {
 		</Notice>
 	),
 };
-export const AppearTopRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopRight = Template.bind( {} );
 AppearTopRight.args = {
 	type: 'appear',
 	options: { origin: 'top right' },
@@ -50,7 +52,7 @@ AppearTopRight.args = {
 		</Notice>
 	),
 };
-export const AppearBottomLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomLeft = Template.bind( {} );
 AppearBottomLeft.args = {
 	type: 'appear',
 	options: { origin: 'bottom left' },
@@ -60,7 +62,7 @@ AppearBottomLeft.args = {
 		</Notice>
 	),
 };
-export const AppearBottomRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomRight = Template.bind( {} );
 AppearBottomRight.args = {
 	type: 'appear',
 	options: { origin: 'bottom right' },
@@ -71,7 +73,7 @@ AppearBottomRight.args = {
 	),
 };
 
-export const Loading: Story< typeof Animate > = Template.bind( {} );
+export const Loading = Template.bind( {} );
 Loading.args = {
 	type: 'loading',
 	children: ( { className } ) => (
@@ -81,7 +83,7 @@ Loading.args = {
 	),
 };
 
-export const SlideIn: Story< typeof Animate > = Template.bind( {} );
+export const SlideIn = Template.bind( {} );
 SlideIn.args = {
 	type: 'slide-in',
 	options: { origin: 'left' },

package/src/base-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof BaseControl > = {
+const meta: Meta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	argTypes: {
@@ -19,14 +19,12 @@ const meta: ComponentMeta< typeof BaseControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+const BaseControlWithTextarea: StoryFn< typeof BaseControl > = ( props ) => {
 	const { baseControlProps, controlProps } = useBaseControlProps( props );
 
 	return (
@@ -36,7 +34,7 @@ const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
 	);
 };
 
-export const Default: ComponentStory< typeof BaseControl > =
+export const Default: StoryFn< typeof BaseControl > =
 	BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -56,9 +54,7 @@ WithHelpText.args = {
  * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
  * otherwise use if the `label` prop was passed.
  */
-export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
 	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 

package/src/border-box-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import Popover from '../../popover';
 import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof BorderBoxControl > = {
+const meta: Meta< typeof BorderBoxControl > = {
 	title: 'Components (Experimental)/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
@@ -26,7 +24,7 @@ const meta: ComponentMeta< typeof BorderBoxControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -41,7 +39,7 @@ const colors = [
 	{ name: 'Yellow 40', color: '#bd8600' },
 ];
 
-const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
+const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
 	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
@@ -53,7 +51,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	};
 
 	return (
-		<SlotFillProvider>
+		<>
 			<BorderBoxControl
 				{ ...otherProps }
 				onChange={ onChangeMerged }
@@ -78,9 +76,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 			>
 				Reset
 			</Button>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		</>
 	);
 };
 export const Default = Template.bind( {} );

package/src/border-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { BorderControl } from '..';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
 import type { Border } from '../types';
 
-const meta: ComponentMeta< typeof BorderControl > = {
+const meta: Meta< typeof BorderControl > = {
 	title: 'Components (Experimental)/BorderControl',
 	component: BorderControl,
 	argTypes: {
@@ -29,7 +27,7 @@ const meta: ComponentMeta< typeof BorderControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -70,7 +68,7 @@ const multipleOriginColors = [
 	},
 ];
 
-const Template: ComponentStory< typeof BorderControl > = ( {
+const Template: StoryFn< typeof BorderControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -83,15 +81,11 @@ const Template: ComponentStory< typeof BorderControl > = ( {
 	};
 
 	return (
-		<SlotFillProvider>
-			<BorderControl
-				onChange={ onChangeMerged }
-				value={ border }
-				{ ...props }
-			/>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<BorderControl
+			onChange={ onChangeMerged }
+			value={ border }
+			{ ...props }
+		/>
 	);
 };
 

package/src/button/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-export const VariantStates: Story< typeof Button > = (
+export const VariantStates: StoryFn< typeof Button > = (
 	props: ButtonAsButtonProps
 ) => {
 	const variants: ( typeof props.variant )[] = [
@@ -57,7 +57,7 @@ Icon.args = {
 	icon: wordpress,
 };
 
-export const Dashicons: Story< typeof Button > = ( props ) => {
+export const Dashicons: StoryFn< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>
 			<Button { ...props } />

package/src/button/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -39,57 +39,57 @@ const meta: Meta< typeof Button > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: Story< typeof Button > = ( props ) => {
+const Template: StoryFn< typeof Button > = ( props ) => {
 	return <Button { ...props }></Button>;
 };
 
-export const Default: Story< typeof Button > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: 'Code is poetry',
 };
 
-export const Primary: Story< typeof Button > = Template.bind( {} );
+export const Primary = Template.bind( {} );
 Primary.args = {
 	...Default.args,
 	variant: 'primary',
 };
 
-export const Secondary: Story< typeof Button > = Template.bind( {} );
+export const Secondary = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
-export const Tertiary: Story< typeof Button > = Template.bind( {} );
+export const Tertiary = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
-export const Link: Story< typeof Button > = Template.bind( {} );
+export const Link = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
-export const IsDestructive: Story< typeof Button > = Template.bind( {} );
+export const IsDestructive = Template.bind( {} );
 IsDestructive.args = {
 	...Default.args,
 	isDestructive: true,
 };
 
-export const Icon: Story< typeof Button > = Template.bind( {} );
+export const Icon = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',
 	icon: 'wordpress',
 };
 
-export const GroupedIcons: Story< typeof Button > = () => {
+export const GroupedIcons = () => {
 	const GroupContainer = ( { children }: { children: ReactNode } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);

package/src/button-group/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import ButtonGroup from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof ButtonGroup > = {
+const meta: Meta< typeof ButtonGroup > = {
 	title: 'Components/ButtonGroup',
 	component: ButtonGroup,
 	argTypes: {
@@ -17,12 +17,12 @@ const meta: ComponentMeta< typeof ButtonGroup > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
+const Template: StoryFn< typeof ButtonGroup > = ( args ) => {
 	const style = { margin: '0 4px' };
 	return (
 		<ButtonGroup { ...args }>
@@ -36,6 +36,4 @@ const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ButtonGroup > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ButtonGroup > = Template.bind( {} );

package/src/card/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -18,8 +18,10 @@ import { Text } from '../../text';
 import { Heading } from '../../heading';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof Card > = {
+const meta: Meta< typeof Card > = {
 	component: Card,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	title: 'Components/Card',
 	argTypes: {
 		as: {
@@ -33,15 +35,13 @@ const meta: ComponentMeta< typeof Card > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( args ) => (
-	<Card { ...args } />
-);
+const Template: StoryFn< typeof Card > = ( args ) => <Card { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {

package/src/checkbox-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CheckboxControl from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof CheckboxControl > = {
+const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
 	title: 'Components/CheckboxControl',
 	argTypes: {
@@ -31,12 +31,12 @@ const meta: ComponentMeta< typeof CheckboxControl > = {
 			expanded: true,
 			exclude: [ 'heading' ],
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
+const DefaultTemplate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -54,14 +54,15 @@ const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof CheckboxControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Is author',
 	help: 'Is the user an author or not?',
 };
 
-export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
+export const Indeterminate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/circular-option-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -9,16 +9,28 @@ import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { default as CircularOptionPicker } from '..';
+import {
+	ButtonAction,
+	default as CircularOptionPicker,
+	DropdownLinkAction,
+} from '..';
 
 const CircularOptionPickerStoryContext = createContext< {
 	currentColor?: string;
 	setCurrentColor?: ( v: string | undefined ) => void;
 } >( {} );
 
-const meta: ComponentMeta< typeof CircularOptionPicker > = {
+const meta: Meta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.Option': Option,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.ButtonAction': ButtonAction,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
+	},
 	argTypes: {
 		actions: { control: { type: null } },
 		options: { control: { type: null } },
@@ -27,7 +39,10 @@ const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open', excludeDecorators: true } },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
 	},
 	decorators: [
 		// Share current color state between main component, `actions` and `options`
@@ -92,7 +107,7 @@ const DefaultActions = () => {
 	);
 };
 
-const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => (
+const Template: StoryFn< typeof CircularOptionPicker > = ( props ) => (
 	<CircularOptionPicker { ...props } />
 );
 

package/src/color-indicator/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ColorIndicator from '..';
 
-const meta: ComponentMeta< typeof ColorIndicator > = {
+const meta: Meta< typeof ColorIndicator > = {
 	component: ColorIndicator,
 	title: 'Components/ColorIndicator',
 	argTypes: {
@@ -20,18 +20,16 @@ const meta: ComponentMeta< typeof ColorIndicator > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
+const Template: StoryFn< typeof ColorIndicator > = ( { ...args } ) => (
 	<ColorIndicator { ...args } />
 );
 
-export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ColorIndicator > = Template.bind( {} );
 Default.args = {
 	colorValue: '#0073aa',
 };

package/src/color-palette/stories/index.story.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,10 +13,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorPalette from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof ColorPalette > = {
+const meta: Meta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
@@ -26,30 +24,23 @@ const meta: ComponentMeta< typeof ColorPalette > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorPalette > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof ColorPalette > = ( { onChange, ...args } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (
-		<SlotFillProvider>
-			<ColorPalette
-				{ ...args }
-				value={ color }
-				onChange={ ( newColor ) => {
-					setColor( newColor );
-					onChange?.( newColor );
-				} }
-			/>
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<ColorPalette
+			{ ...args }
+			value={ color }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
 	);
 };
 
@@ -84,7 +75,7 @@ MultipleOrigins.args = {
 	],
 };
 
-export const CSSVariables: ComponentStory< typeof ColorPalette > = ( args ) => {
+export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
 			style={