@wordpress/components 25.6.0 → 25.7.0

package/src/tab-panel/test/index.tsx

@@ -13,8 +13,6 @@ import { wordpress, category, media } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const TABS = [
 	{
@@ -107,17 +105,10 @@ describe.each( [
 			];
 
 			render(
-				// In order for the tooltip to display properly, there needs to be
-				// `Popover.Slot` in which the `Popover` renders outside of the
-				// `TabPanel` component, otherwise the tooltip renders inline.
-				<SlotFillProvider>
-					<Component
-						tabs={ TABS_WITH_ICON }
-						children={ panelRenderFunction }
-					/>
-					{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-					<Popover.Slot />
-				</SlotFillProvider>
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+				/>
 			);
 
 			const allTabs = screen.getAllByRole( 'tab' );
@@ -152,18 +143,11 @@ describe.each( [
 			];
 
 			render(
-				// In order for the tooltip to display properly, there needs to be
-				// `Popover.Slot` in which the `Popover` renders outside of the
-				// `TabPanel` component, otherwise the tooltip renders inline.
-				<SlotFillProvider>
-					<Component
-						tabs={ TABS_WITH_ICON }
-						children={ panelRenderFunction }
-						onSelect={ mockOnSelect }
-					/>
-					{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-					<Popover.Slot />
-				</SlotFillProvider>
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+					onSelect={ mockOnSelect }
+				/>
 			);
 
 			expect( await getSelectedTab() ).not.toHaveTextContent( 'Alpha' );

package/src/text/test/index.tsx

@@ -104,7 +104,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: 'orange',
+			color: 'rgb(255, 165, 0)',
 		} );
 	} );
 

package/src/text-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
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TextControl from '..';
 
-const meta: ComponentMeta< typeof TextControl > = {
+const meta: Meta< typeof TextControl > = {
 	component: TextControl,
 	title: 'Components/TextControl',
 	argTypes: {
@@ -26,12 +26,12 @@ const meta: ComponentMeta< typeof TextControl > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
+const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -49,11 +49,12 @@ const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TextControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {};
 
-export const WithLabelAndHelpText: ComponentStory< typeof TextControl > =
+export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
 	DefaultTemplate.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,

package/src/text-highlight/stories/index.story.tsx

@@ -1,32 +1,30 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import TextHighlight from '..';
 
-const meta: ComponentMeta< typeof TextHighlight > = {
+const meta: Meta< typeof TextHighlight > = {
 	component: TextHighlight,
 	title: 'Components/TextHighlight',
 	parameters: {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof TextHighlight > = ( args ) => {
+const Template: StoryFn< typeof TextHighlight > = ( args ) => {
 	return <TextHighlight { ...args } />;
 };
 
-export const Default: ComponentStory< typeof TextHighlight > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof TextHighlight > = Template.bind( {} );
 Default.args = {
 	text: 'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.',
 	highlight: 'Gutenberg',

package/src/textarea-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
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TextareaControl from '..';
 
-const meta: ComponentMeta< typeof TextareaControl > = {
+const meta: Meta< typeof TextareaControl > = {
 	component: TextareaControl,
 	title: 'Components/TextareaControl',
 	argTypes: {
@@ -26,12 +26,12 @@ const meta: ComponentMeta< typeof TextareaControl > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof TextareaControl > = ( {
+const Template: StoryFn< typeof TextareaControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -49,9 +49,7 @@ const Template: ComponentStory< typeof TextareaControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TextareaControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
 Default.args = {
 	label: 'Text',
 	help: 'Enter some text',

package/src/theme/index.tsx

@@ -18,7 +18,6 @@ import { useCx } from '../utils';
  * Multiple `Theme` components can be nested in order to override specific theme variables.
  *
  *
- * @example
  * ```jsx
  * const Example = () => {
  *   return (

package/src/theme/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
@@ -11,7 +11,7 @@ import Button from '../../button';
 import { generateThemeVariables, checkContrasts } from '../color-algorithms';
 import { HStack } from '../../h-stack';
 
-const meta: ComponentMeta< typeof Theme > = {
+const meta: Meta< typeof Theme > = {
 	component: Theme,
 	title: 'Components (Experimental)/Theme',
 	argTypes: {
@@ -20,12 +20,12 @@ const meta: ComponentMeta< typeof Theme > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof Theme > = ( args ) => (
+const Template: StoryFn< typeof Theme > = ( args ) => (
 	<Theme { ...args }>
 		<Button variant="primary">Hello</Button>
 	</Theme>
@@ -34,7 +34,7 @@ const Template: ComponentStory< typeof Theme > = ( args ) => (
 export const Default = Template.bind( {} );
 Default.args = {};
 
-export const Nested: ComponentStory< typeof Theme > = ( args ) => (
+export const Nested: StoryFn< typeof Theme > = ( args ) => (
 	<Theme accent="tomato">
 		<Button variant="primary">Outer theme (hardcoded)</Button>
 
@@ -52,7 +52,7 @@ Nested.args = {
 /**
  * The rest of the required colors are generated based on the given accent and background colors.
  */
-export const ColorScheme: ComponentStory< typeof Theme > = ( {
+export const ColorScheme: StoryFn< typeof Theme > = ( {
 	accent,
 	background,
 } ) => {
@@ -110,5 +110,5 @@ ColorScheme.argTypes = {
 	children: { table: { disable: true } },
 };
 ColorScheme.parameters = {
-	docs: { source: { state: 'closed' } },
+	docs: { canvas: { sourceState: 'hidden' } },
 };

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

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

package/src/toggle-group-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
@@ -23,8 +23,10 @@ import type {
 	ToggleGroupControlProps,
 } from '../types';
 
-const meta: ComponentMeta< typeof ToggleGroupControl > = {
+const meta: Meta< typeof ToggleGroupControl > = {
 	component: ToggleGroupControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
 	title: 'Components (Experimental)/ToggleGroupControl',
 	argTypes: {
 		help: { control: { type: 'text' } },
@@ -33,12 +35,12 @@ const meta: ComponentMeta< typeof ToggleGroupControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof ToggleGroupControl > = ( {
+const Template: StoryFn< typeof ToggleGroupControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -72,8 +74,9 @@ const mapPropsToOptionIconComponent = ( {
 	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
 );
 
-export const Default: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const Default: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 Default.args = {
 	children: [
 		{ value: 'left', label: 'Left' },
@@ -90,8 +93,9 @@ Default.args = {
  * The `aria-label` will be used in the tooltip if provided. Otherwise, the
  * `label` will be used.
  */
-export const WithTooltip: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const WithTooltip: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 WithTooltip.args = {
 	...Default.args,
 	children: [
@@ -114,8 +118,9 @@ WithTooltip.args = {
  * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
  * on each option for accessibility, which will be shown in a tooltip.
  */
-export const WithIcons: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const WithIcons: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 WithIcons.args = {
 	...Default.args,
 	children: [
@@ -128,8 +133,9 @@ WithIcons.args = {
 /**
  * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
  */
-export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const Deselectable: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 Deselectable.args = {
 	...WithIcons.args,
 	isDeselectable: true,

package/src/toolbar/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
@@ -37,15 +37,25 @@ import {
 } from '..';
 import DropdownMenu from '../../dropdown-menu';
 
-const meta: ComponentMeta< typeof Toolbar > = {
+const meta: Meta< typeof Toolbar > = {
 	title: 'Components/Toolbar',
 	component: Toolbar,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarDropdownMenu,
+	},
 	argTypes: {
 		children: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 
@@ -59,7 +69,7 @@ function InlineImageIcon() {
 	);
 }
 
-const Template: ComponentStory< typeof Toolbar > = ( props ) => (
+const Template: StoryFn< typeof Toolbar > = ( props ) => (
 	<div style={ { height: 280 } }>
 		<Toolbar { ...props } />
 	</div>

package/src/tools-panel/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 styled from '@emotion/styled';
 
 /**
@@ -25,9 +25,11 @@ import Panel from '../../panel';
 import UnitControl from '../../unit-control';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof ToolsPanel > = {
+const meta: Meta< typeof ToolsPanel > = {
 	title: 'Components (Experimental)/ToolsPanel',
 	component: ToolsPanel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToolsPanelItem },
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },
@@ -39,12 +41,12 @@ const meta: ComponentMeta< typeof ToolsPanel > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-export const Default: ComponentStory< typeof ToolsPanel > = ( {
+export const Default: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	...props
 } ) => {
@@ -136,7 +138,7 @@ Default.args = {
 	label: 'Tools Panel (default example)',
 };
 
-export const WithNonToolsPanelItems: ComponentStory< typeof ToolsPanel > = ( {
+export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	...props
 } ) => {
@@ -191,9 +193,10 @@ WithNonToolsPanelItems.args = {
 	label: 'ToolsPanel (with non-menu items)',
 };
 
-export const WithOptionalItemsPlusIcon: ComponentStory<
-	typeof ToolsPanel
-> = ( { resetAll: resetAllProp, ...props } ) => {
+export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	...props
+} ) => {
 	const [
 		isFirstToolsPanelItemShownByDefault,
 		setIsFirstToolsPanelItemShownByDefault,
@@ -294,7 +297,7 @@ WithOptionalItemsPlusIcon.args = {
 
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 
-export const WithSlotFillItems: ComponentStory< typeof ToolsPanel > = ( {
+export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	panelId,
 	...props
@@ -392,9 +395,11 @@ WithSlotFillItems.args = {
 	panelId: 'unique-tools-panel-id',
 };
 
-export const WithConditionalDefaultControl: ComponentStory<
-	typeof ToolsPanel
-> = ( { resetAll: resetAllProp, panelId, ...props } ) => {
+export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	panelId,
+	...props
+} ) => {
 	const [ attributes, setAttributes ] = useState< {
 		height?: string;
 		scale?: React.ReactText;
@@ -488,7 +493,7 @@ WithConditionalDefaultControl.args = {
 	panelId: 'unique-tools-panel-id',
 };
 
-export const WithConditionallyRenderedControl: ComponentStory<
+export const WithConditionallyRenderedControl: StoryFn<
 	typeof ToolsPanel
 > = ( { resetAll: resetAllProp, panelId, ...props } ) => {
 	const [ attributes, setAttributes ] = useState< {

package/src/tools-panel/tools-panel/component.tsx

@@ -48,7 +48,6 @@ const UnconnectedToolsPanel = (
  * by a header. The header includes a dropdown menu which is automatically
  * generated from the panel's inner `ToolsPanelItems`.
  *
- * @example
  * ```jsx
  * import { __ } from '@wordpress/i18n';
  * import {

package/src/tools-panel/tools-panel-header/component.tsx

@@ -214,6 +214,9 @@ const ToolsPanelHeader = (
 							<MenuGroup>
 								<MenuItem
 									aria-disabled={ ! canResetAll }
+									// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
+									// we should rename it and explicitly allow it as an official API. All the other Button variants
+									// don't make sense in a MenuItem context, and should be disallowed.
 									variant={ 'tertiary' }
 									onClick={ () => {
 										if ( canResetAll ) {

package/src/tooltip/stories/index.story.js

@@ -24,7 +24,7 @@ export default {
 		text: { control: 'text' },
 	},
 	parameters: {
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

package/src/tree-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';
 
 /**
  * WordPress dependencies
@@ -15,9 +15,11 @@ import TreeGrid, { TreeGridRow, TreeGridCell } from '..';
 import { Button } from '../../button';
 import InputControl from '../../input-control';
 
-const meta: ComponentMeta< typeof TreeGrid > = {
+const meta: Meta< typeof TreeGrid > = {
 	title: 'Components (Experimental)/TreeGrid',
 	component: TreeGrid,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -133,7 +135,7 @@ const Rows = ( {
 	);
 };
 
-const Template: ComponentStory< typeof TreeGrid > = ( args ) => (
+const Template: StoryFn< typeof TreeGrid > = ( args ) => (
 	<TreeGrid { ...args } />
 );
 

package/src/tree-select/index.tsx

@@ -27,7 +27,6 @@ function getSelectOptions(
 /**
  * TreeSelect component is used to generate select input fields.
  *
- * @example
  * ```jsx
  * import { TreeSelect } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

package/src/tree-select/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 TreeSelect from '../';
 
-const meta: ComponentMeta< typeof TreeSelect > = {
+const meta: Meta< typeof TreeSelect > = {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
 	argTypes: {
@@ -27,13 +27,13 @@ const meta: ComponentMeta< typeof TreeSelect > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 
 export default meta;
 
-const TreeSelectWithState: ComponentStory< typeof TreeSelect > = ( props ) => {
+const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 	const [ selection, setSelection ] =
 		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();