@wordpress/components 25.6.0 → 25.7.0

package/src/external-link/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 ExternalLink from '..';
 
-const meta: ComponentMeta< typeof ExternalLink > = {
+const meta: Meta< typeof ExternalLink > = {
 	component: ExternalLink,
 	title: 'Components/ExternalLink',
 	argTypes: {
@@ -18,18 +18,16 @@ const meta: ComponentMeta< typeof ExternalLink > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof ExternalLink > = ( { ...args } ) => {
+const Template: StoryFn< typeof ExternalLink > = ( { ...args } ) => {
 	return <ExternalLink { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ExternalLink > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ExternalLink > = Template.bind( {} );
 Default.args = {
 	children: 'WordPress',
 	href: 'https://wordpress.org',

package/src/flex/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,9 +9,11 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Flex, FlexItem, FlexBlock } from '../';
 import { View } from '../../view';
 
-const meta: ComponentMeta< typeof Flex > = {
+const meta: Meta< typeof Flex > = {
 	component: Flex,
 	title: 'Components/Flex',
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { FlexBlock, FlexItem },
 	argTypes: {
 		align: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
@@ -29,7 +31,7 @@ const meta: ComponentMeta< typeof Flex > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -38,7 +40,7 @@ const GrayBox = ( { children }: { children: string } ) => (
 	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
 );
 
-export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
+export const Default: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>
@@ -55,9 +57,7 @@ export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
 };
 Default.args = {};
 
-export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
-	...args
-} ) => {
+export const ResponsiveDirection: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>

package/src/focal-point-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
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import FocalPointPicker from '..';
 
-const meta: ComponentMeta< typeof FocalPointPicker > = {
+const meta: Meta< typeof FocalPointPicker > = {
 	title: 'Components/FocalPointPicker',
 	component: FocalPointPicker,
 	argTypes: {
@@ -22,12 +22,12 @@ const meta: ComponentMeta< typeof FocalPointPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof FocalPointPicker > = ( {
+const Template: StoryFn< typeof FocalPointPicker > = ( {
 	onChange,
 	...props
 } ) => {

package/src/font-size-picker/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default {
 	component: FontSizePicker,
 };
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	...props
 } ) => {
@@ -32,7 +32,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	fontSizes: [

package/src/font-size-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
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-const meta: ComponentMeta< typeof FontSizePicker > = {
+const meta: Meta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
@@ -22,12 +22,12 @@ const meta: ComponentMeta< typeof FontSizePicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	onChange,
 	...props
@@ -45,7 +45,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
+const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 	fontSizes,
 	...props
 } ) => {
@@ -63,7 +63,7 @@ const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -90,7 +90,7 @@ Default.args = {
 	withSlider: false,
 };
 
-export const WithSlider: ComponentStory< typeof FontSizePicker > =
+export const WithSlider: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithSlider.args = {
 	...Default.args,
@@ -103,7 +103,7 @@ WithSlider.args = {
  * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
  * only be able to pick one of the predefined sizes passed in `fontSizes`.
  */
-export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
+export const WithCustomSizesDisabled: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithCustomSizesDisabled.args = {
 	...Default.args,
@@ -113,7 +113,7 @@ WithCustomSizesDisabled.args = {
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
+export const WithMoreFontSizes: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithMoreFontSizes.args = {
 	...Default.args,
@@ -155,7 +155,7 @@ WithMoreFontSizes.args = {
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits: ComponentStory< typeof FontSizePicker > =
+export const WithUnits: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithUnits.args = {
 	...WithMoreFontSizes.args,
@@ -170,7 +170,7 @@ WithUnits.args = {
  * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
  * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
  */
-export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
+export const WithComplexCSSValues: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithComplexCSSValues.args = {
 	...Default.args,

package/src/form-file-upload/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
@@ -13,7 +13,7 @@ import { upload as uploadIcon } from '@wordpress/icons';
  */
 import FormFileUpload from '..';
 
-const meta: ComponentMeta< typeof FormFileUpload > = {
+const meta: Meta< typeof FormFileUpload > = {
 	title: 'Components/FormFileUpload',
 	component: FormFileUpload,
 	argTypes: {
@@ -23,12 +23,12 @@ const meta: ComponentMeta< typeof FormFileUpload > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormFileUpload > = ( props ) => {
+const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
 	return <FormFileUpload { ...props } />;
 };
 

package/src/form-toggle/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
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { FormToggle } from '..';
 
-const meta: ComponentMeta< typeof FormToggle > = {
+const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,
 	title: 'Components/FormToggle',
 	argTypes: {
@@ -25,15 +25,12 @@ const meta: ComponentMeta< typeof FormToggle > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormToggle > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof FormToggle > = ( { onChange, ...args } ) => {
 	const [ isChecked, setChecked ] = useState( true );
 
 	return (
@@ -48,5 +45,5 @@ const Template: ComponentStory< typeof FormToggle > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+export const Default: StoryFn< typeof FormToggle > = Template.bind( {} );
 Default.args = {};

package/src/form-token-field/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';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
-const meta: ComponentMeta< typeof FormTokenField > = {
+const meta: Meta< typeof FormTokenField > = {
 	component: FormTokenField,
 	title: 'Components/FormTokenField',
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof FormTokenField > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -42,9 +42,7 @@ const continents = [
 	'Oceania',
 ];
 
-const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
-	...args
-} ) => {
+const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
 	const [ selectedContinents, setSelectedContinents ] = useState<
 		ComponentProps< typeof FormTokenField >[ 'value' ]
 	>( [] );
@@ -58,14 +56,15 @@ const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
 
-export const Async: ComponentStory< typeof FormTokenField > = ( {
+export const Async: StoryFn< typeof FormTokenField > = ( {
 	suggestions,
 	...args
 } ) => {
@@ -102,7 +101,7 @@ Async.args = {
 	suggestions: continents,
 };
 
-export const DropdownSelector: ComponentStory< typeof FormTokenField > =
+export const DropdownSelector: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 DropdownSelector.args = {
 	...Default.args,
@@ -115,7 +114,7 @@ DropdownSelector.args = {
  * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
  * and is subject to change.)
  */
-export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithCustomRenderItem.args = {
 	...Default.args,
@@ -129,7 +128,7 @@ WithCustomRenderItem.args = {
  * `true` will be tokenized. (This is still an experimental feature and is
  * subject to change.)
  */
-export const WithValidatedInput: ComponentStory< typeof FormTokenField > =
+export const WithValidatedInput: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithValidatedInput.args = {
 	...Default.args,

package/src/gradient-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
  */
@@ -12,12 +12,12 @@ import { useState } from '@wordpress/element';
  */
 import GradientPicker from '..';
 
-const meta: ComponentMeta< typeof GradientPicker > = {
+const meta: Meta< typeof GradientPicker > = {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 		actions: { argTypesRegex: '^on.*' },
 	},
 	argTypes: {
@@ -65,7 +65,7 @@ const GRADIENTS = [
 	},
 ];
 
-const Template: ComponentStory< typeof GradientPicker > = ( {
+const Template: StoryFn< typeof GradientPicker > = ( {
 	onChange,
 	...props
 } ) => {

package/src/grid/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 { View } from '../../view';
 import { Grid } from '..';
 
-const meta: ComponentMeta< typeof Grid > = {
+const meta: Meta< typeof Grid > = {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
 	argTypes: {
@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof Grid > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -51,7 +51,7 @@ const Item = ( props: { children: string } ) => (
 	/>
 );
 
-const Template: ComponentStory< typeof Grid > = ( props ) => (
+const Template: StoryFn< typeof Grid > = ( props ) => (
 	<Grid { ...props }>
 		<Item>One</Item>
 		<Item>Two</Item>
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Grid > = ( props ) => (
 	</Grid>
 );
 
-export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
+export const Default: StoryFn< typeof Grid > = Template.bind( {} );
 Default.args = {
 	alignment: 'bottom',
 	columns: 4,

package/src/guide/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 Button from '../../button';
 import Guide from '..';
 
-const meta: ComponentMeta< typeof Guide > = {
+const meta: Meta< typeof Guide > = {
 	title: 'Components/Guide',
 	component: Guide,
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Guide > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Guide > = ( { onFinish, ...props } ) => {
+const Template: StoryFn< typeof Guide > = ( { onFinish, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );

package/src/h-stack/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { HStack } from '../..';
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( props ) => {
+const Template: StoryFn< typeof HStack > = ( props ) => {
 	return (
 		<HStack
 			style={ { background: '#eee', minHeight: '3rem' } }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof HStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };

package/src/h-stack/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -40,7 +40,7 @@ const JUSTIFICATIONS = {
 	start: 'start',
 };
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 	argTypes: {
@@ -71,12 +71,12 @@ const meta: ComponentMeta< typeof HStack > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( args ) => (
+const Template: StoryFn< typeof HStack > = ( args ) => (
 	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
 		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
 			<View key={ text } style={ { background: '#b9f9ff' } }>
@@ -86,7 +86,7 @@ const Template: ComponentStory< typeof HStack > = ( args ) => (
 	</HStack>
 );
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: '3',
 };

package/src/heading/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 { Heading } from '..';
 
-const meta: ComponentMeta< typeof Heading > = {
+const meta: Meta< typeof Heading > = {
 	component: Heading,
 	title: 'Components (Experimental)/Heading',
 	argTypes: {
@@ -28,12 +28,12 @@ const meta: ComponentMeta< typeof Heading > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-export const Default: ComponentStory< typeof Heading > = ( props ) => (
+export const Default: StoryFn< typeof Heading > = ( props ) => (
 	<Heading { ...props } />
 );
 Default.args = {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,24 +15,24 @@ import { wordpress } from '@wordpress/icons';
 import Icon from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof Icon > = {
+const meta: Meta< typeof Icon > = {
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: Story< typeof Icon > = ( args ) => <Icon { ...args } />;
+const Template: StoryFn< typeof Icon > = ( args ) => <Icon { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: Story< typeof Icon > = ( args ) => {
+export const FillColor: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -84,7 +84,7 @@ WithAnSVG.args = {
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */
-export const WithADashicon: Story< typeof Icon > = ( args ) => {
+export const WithADashicon: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<VStack>
 			<Icon { ...args } />