@wordpress/components 25.6.1 → 25.8.0

package/src/surface/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 { Surface } from '..';
 import { Text } from '../../text';
 
-const meta: ComponentMeta< typeof Surface > = {
+const meta: Meta< typeof Surface > = {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Surface > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Surface > = ( args ) => {
+const Template: StoryFn< typeof Surface > = ( args ) => {
 	return (
 		<Surface
 			{ ...args }
@@ -36,5 +36,5 @@ const Template: ComponentStory< typeof Surface > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Surface > = Template.bind( {} );
+export const Default: StoryFn< typeof Surface > = Template.bind( {} );
 Default.args = {};

package/src/tab-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';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,8 @@ import { link, more, wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof TabPanel > = {
+const meta: Meta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
@@ -26,7 +24,7 @@ const meta: ComponentMeta< typeof TabPanel > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TabPanel > = ( props ) => {
+const Template: StoryFn< typeof TabPanel > = ( props ) => {
 	return <TabPanel { ...props } />;
 };
 
@@ -65,14 +63,8 @@ DisabledTab.args = {
 	],
 };
 
-const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
-	return (
-		<SlotFillProvider>
-			<TabPanel { ...props } />
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
+const SlotFillTemplate: StoryFn< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
 };
 
 export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );

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

@@ -13,8 +13,7 @@ import { wordpress, category, media } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
+import cleanupTooltip from '../../tooltip/test/utils';
 
 const TABS = [
 	{
@@ -107,17 +106,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' );
@@ -137,6 +129,8 @@ describe.each( [
 
 				await user.unhover( allTabs[ i ] );
 			}
+
+			await cleanupTooltip( user );
 		} );
 
 		it( 'should display a tooltip when moving the selection via the keyboard on tabs provided with an icon', async () => {
@@ -152,18 +146,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' );
@@ -205,6 +192,8 @@ describe.each( [
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
+
+			await cleanupTooltip( user );
 		} );
 	} );
 

package/src/text/styles.js

@@ -34,7 +34,8 @@ export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
 		border-radius: 2px;
-		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
+		box-shadow:
+			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 	}
 `;

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: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof TextControl > = {
 };
 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,14 +1,14 @@
 /**
  * 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: {
@@ -20,13 +20,11 @@ const meta: ComponentMeta< typeof TextHighlight > = {
 };
 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: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof TextareaControl > = {
 };
 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/README.md

@@ -40,8 +40,8 @@ If you would like your custom component to be themeable as a child of the `Theme
 -  Grayscale:
    -  `--wp-components-color-gray-100`: Used for light gray backgrounds.
    -  `--wp-components-color-gray-200`: Used sparingly for light borders.
-	 -	`--wp-components-color-gray-300`: Used for most borders.
-	 -	`--wp-components-color-gray-400`
-	 -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
-	 -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
-	 -	`--wp-components-color-gray-800`
+   -	`--wp-components-color-gray-300`: Used for most borders.
+   -	`--wp-components-color-gray-400`
+   -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
+   -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
+   -	`--wp-components-color-gray-800`

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: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Theme > = {
 };
 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,
 } ) => {

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: {
@@ -23,11 +23,11 @@ const meta: ComponentMeta< typeof Tip > = {
 };
 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: {
@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof ToggleControl > = {
 };
 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' } },
@@ -38,7 +40,7 @@ const meta: ComponentMeta< typeof ToggleGroupControl > = {
 };
 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,