@wordpress/components 25.6.1 → 26.0.1-next.5a1d1283.0

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

@@ -13,9 +13,9 @@ import MenuItemsChoice from '../../menu-items-choice';
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
-const meta: ComponentMeta< typeof MenuGroup > = {
+const meta: Meta< typeof MenuGroup > = {
 	title: 'Components/MenuGroup',
 	component: MenuGroup,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof MenuGroup > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
+const Template: StoryFn< typeof MenuGroup > = ( args ) => {
 	return (
 		<MenuGroup { ...args }>
 			<MenuItem>Menu Item 1</MenuItem>
@@ -37,9 +37,9 @@ const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof MenuGroup > = Template.bind( {} );
+export const Default: StoryFn< typeof MenuGroup > = Template.bind( {} );
 
-const MultiGroupsTemplate: ComponentStory< typeof MenuGroup > = ( args ) => {
+const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 	const [ mode, setMode ] = useState( 'visual' );
 	const choices = [
 		{

package/src/menu-item/README.md

@@ -70,7 +70,7 @@ Determines where to display the provided `icon`.
 -   Type: `boolean`
 -   Required: No
 
-Whether or not the menu item is currently selected.
+Whether or not the menu item is currently selected. `isSelected` is only taken into account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 
 ### `shortcut`
 

package/src/menu-item/index.tsx

@@ -18,7 +18,7 @@ import Icon from '../icon';
 import type { WordPressComponentProps } from '../ui/context';
 import type { MenuItemProps } from './types';
 
-export function MenuItem(
+function UnforwardedMenuItem(
 	props: WordPressComponentProps< MenuItemProps, 'button', false >,
 	ref: ForwardedRef< HTMLButtonElement >
 ) {
@@ -97,6 +97,7 @@ export function MenuItem(
  * 		<MenuItem
  * 			icon={ isActive ? 'yes' : 'no' }
  * 			isSelected={ isActive }
+ * 			role="menuitemcheckbox"
  * 			onClick={ () => setIsActive( ( state ) => ! state ) }
  * 		>
  * 			Toggle
@@ -105,4 +106,6 @@ export function MenuItem(
  * };
  * ```
  */
-export default forwardRef( MenuItem );
+export const MenuItem = forwardRef( UnforwardedMenuItem );
+
+export default MenuItem;

package/src/menu-item/stories/index.story.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { link, more, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '../../menu-group';
+import MenuItem from '..';
+import Shortcut from '../../shortcut';
+
+const meta: Meta< typeof MenuItem > = {
+	component: MenuItem,
+	title: 'Components/MenuItem',
+	argTypes: {
+		children: { control: { type: null } },
+		icon: {
+			control: { type: 'select' },
+			options: [ 'check', 'link', 'more' ],
+			mapping: {
+				check,
+				link,
+				more,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof MenuItem > = ( props ) => {
+	return (
+		<MenuGroup>
+			<MenuItem { ...props }>Menu Item 1</MenuItem>
+		</MenuGroup>
+	);
+};
+
+export const Default: StoryFn< typeof MenuItem > = Template.bind( {} );
+
+/**
+ * When the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`, the
+ * `isSelected` prop should be used so screen readers can tell which item is currently selected.
+ */
+export const IsSelected = Template.bind( {} );
+IsSelected.args = {
+	...Default.args,
+	isSelected: true,
+	role: 'menuitemcheckbox',
+};
+
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	icon: link,
+	iconPosition: 'left',
+};
+
+export const WithInfo = Template.bind( {} );
+WithInfo.args = {
+	...Default.args,
+	info: 'Menu Item description',
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <Shortcut shortcut="Ctrl+M"></Shortcut>,
+};

package/src/menu-item/types.ts

@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { ButtonAsButtonProps } from '../button/types';
 
-export type MenuItemProps = ButtonAsButtonProps & {
+export type MenuItemProps = Pick< ButtonAsButtonProps, 'isDestructive' > & {
 	/**
 	 * A CSS `class` to give to the container element.
 	 */
@@ -33,7 +33,8 @@ export type MenuItemProps = ButtonAsButtonProps & {
 	 */
 	iconPosition?: ButtonAsButtonProps[ 'iconPosition' ];
 	/**
-	 * Whether or not the menu item is currently selected.
+	 * Whether or not the menu item is currently selected, `isSelected` is only taken into
+	 * account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 	 */
 	isSelected?: boolean;
 	/**

package/src/menu-items-choice/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 MenuItemsChoice from '..';
 import MenuGroup from '../../menu-group';
 
-const meta: ComponentMeta< typeof MenuItemsChoice > = {
+const meta: Meta< typeof MenuItemsChoice > = {
 	component: MenuItemsChoice,
 	title: 'Components/MenuItemsChoice',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof MenuItemsChoice > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof MenuItemsChoice > = ( {
+const Template: StoryFn< typeof MenuItemsChoice > = ( {
 	onHover,
 	onSelect,
 	choices,
@@ -53,9 +53,7 @@ const Template: ComponentStory< typeof MenuItemsChoice > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof MenuItemsChoice > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof MenuItemsChoice > = Template.bind( {} );
 
 Default.args = {
 	choices: [

package/src/mobile/link-settings/link-settings-navigation.native.js

@@ -23,7 +23,7 @@ function LinkSettingsNavigation( props ) {
 			isVisible={ props.isVisible }
 			onClose={ props.onClose }
 			onDismiss={ props.onDismiss }
-			testID={ props.testID }
+			testID="link-settings-navigation"
 			hideHeader
 			hasNavigation
 		>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
 
-const meta: ComponentMeta< typeof Modal > = {
+const meta: Meta< typeof Modal > = {
 	component: Modal,
 	title: 'Components/Modal',
 	argTypes: {
@@ -46,10 +46,7 @@ const meta: ComponentMeta< typeof Modal > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Modal > = ( {
-	onRequestClose,
-	...args
-} ) => {
+const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
@@ -91,7 +88,7 @@ const Template: ComponentStory< typeof Modal > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof Modal > = Template.bind( {} );
+export const Default: StoryFn< typeof Modal > = Template.bind( {} );
 Default.args = {
 	title: 'Title',
 };
@@ -114,9 +111,7 @@ const LikeButton = () => {
 	);
 };
 
-export const WithHeaderActions: ComponentStory< typeof Modal > = Template.bind(
-	{}
-);
+export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
 	headerActions: <LikeButton />,

package/src/navigable-container/stories/navigable-menu.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 { NavigableMenu } from '..';
 
-const meta: ComponentMeta< typeof NavigableMenu > = {
+const meta: Meta< typeof NavigableMenu > = {
 	title: 'Components/NavigableMenu',
 	component: NavigableMenu,
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof NavigableMenu > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof NavigableMenu > = ( args ) => {
+export const Default: StoryFn< typeof NavigableMenu > = ( args ) => {
 	return (
 		<>
 			<button>Before navigable menu</button>

package/src/navigable-container/stories/tabbable-container.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 { TabbableContainer } from '..';
 
-const meta: ComponentMeta< typeof TabbableContainer > = {
+const meta: Meta< typeof TabbableContainer > = {
 	title: 'Components/TabbableContainer',
 	component: TabbableContainer,
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof TabbableContainer > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof TabbableContainer > = ( args ) => {
+export const Default: StoryFn< typeof TabbableContainer > = ( args ) => {
 	return (
 		<>
 			<button>Before tabbable container</button>

package/src/navigation/index.tsx

@@ -28,7 +28,6 @@ const noop = () => {};
 /**
  * Render a navigation list with optional groupings and hierarchy.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalNavigation as Navigation,

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

@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Navigation } from '..';
+import { NavigationBackButton } from '../back-button';
+import { NavigationGroup } from '../group';
+import { NavigationItem } from '../item';
+import { NavigationMenu } from '../menu';
 import { DefaultStory } from './utils/default';
 import { GroupStory } from './utils/group';
 import { ControlledStateStory } from './utils/controlled-state';
@@ -15,9 +19,19 @@ import { MoreExamplesStory } from './utils/more-examples';
 import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
-const meta: ComponentMeta< typeof Navigation > = {
+const meta: Meta< typeof Navigation > = {
 	title: 'Components (Experimental)/Navigation',
 	component: Navigation,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationBackButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationMenu,
+	},
 	argTypes: {
 		activeItem: { control: { type: null } },
 		activeMenu: { control: { type: null } },

package/src/navigation/stories/utils/controlled-state.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const ControlledStateStory: ComponentStory< typeof Navigation > = ( {
+export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/default.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const DefaultStory: ComponentStory< typeof Navigation > = ( {
+export const DefaultStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/group.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 import { NavigationGroup } from '../../group';
 
-export const GroupStory: ComponentStory< typeof Navigation > = ( {
+export const GroupStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/hide-if-empty.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const HideIfEmptyStory: ComponentStory< typeof Navigation > = ( {
+export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/more-examples.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import { NavigationGroup } from '../../group';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const MoreExamplesStory: ComponentStory< typeof Navigation > = ( {
+export const MoreExamplesStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/search.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -29,7 +29,7 @@ const searchItems = [
 	{ item: 'waldo', title: 'Waldo' },
 ];
 
-export const SearchStory: ComponentStory< typeof Navigation > = ( {
+export const SearchStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigator/navigator-provider/component.tsx

@@ -268,7 +268,6 @@ function UnconnectedNavigatorProvider(
  * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
  * `useNavigator` hook).
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalNavigatorProvider as NavigatorProvider,

package/src/navigator/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
@@ -19,8 +19,10 @@ import {
 	useNavigator,
 } from '..';
 
-const meta: ComponentMeta< typeof NavigatorProvider > = {
+const meta: Meta< typeof NavigatorProvider > = {
 	component: NavigatorProvider,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
 	title: 'Components (Experimental)/Navigator',
 	argTypes: {
 		as: { control: { type: null } },
@@ -34,7 +36,7 @@ const meta: ComponentMeta< typeof NavigatorProvider > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof NavigatorProvider > = ( {
+const Template: StoryFn< typeof NavigatorProvider > = ( {
 	style,
 	...props
 } ) => (
@@ -178,8 +180,7 @@ const Template: ComponentStory< typeof NavigatorProvider > = ( {
 	</NavigatorProvider>
 );
 
-export const Default: ComponentStory< typeof NavigatorProvider > =
-	Template.bind( {} );
+export const Default: StoryFn< typeof NavigatorProvider > = Template.bind( {} );
 Default.args = {
 	initialPath: '/',
 };
@@ -233,7 +234,7 @@ function ProductDetails() {
 	);
 }
 
-const NestedNavigatorTemplate: ComponentStory< typeof NavigatorProvider > = ( {
+const NestedNavigatorTemplate: StoryFn< typeof NavigatorProvider > = ( {
 	style,
 	...props
 } ) => (
@@ -292,7 +293,7 @@ const NestedNavigatorTemplate: ComponentStory< typeof NavigatorProvider > = ( {
 	</NavigatorProvider>
 );
 
-export const NestedNavigator: ComponentStory< typeof NavigatorProvider > =
+export const NestedNavigator: StoryFn< typeof NavigatorProvider > =
 	NestedNavigatorTemplate.bind( {} );
 NestedNavigator.args = {
 	initialPath: '/child2/grandchild',
@@ -316,9 +317,7 @@ const NavigatorButtonWithSkipFocus = ( {
 	);
 };
 
-export const SkipFocus: ComponentStory< typeof NavigatorProvider > = (
-	args
-) => {
+export const SkipFocus: StoryFn< typeof NavigatorProvider > = ( args ) => {
 	return <NavigatorProvider { ...args } />;
 };
 SkipFocus.args = {

package/src/notice/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
@@ -16,9 +16,11 @@ import Button from '../../button';
 import NoticeList from '../list';
 import type { NoticeListProps } from '../types';
 
-const meta: ComponentMeta< typeof Notice > = {
+const meta: Meta< typeof Notice > = {
 	title: 'Components/Notice',
 	component: Notice,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { NoticeList },
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
@@ -27,7 +29,7 @@ const meta: ComponentMeta< typeof Notice > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Notice > = ( props ) => {
+const Template: StoryFn< typeof Notice > = ( props ) => {
 	return <Notice { ...props } />;
 };
 
@@ -81,9 +83,7 @@ WithActions.args = {
 	],
 };
 
-export const NoticeListSubcomponent: ComponentStory<
-	typeof NoticeList
-> = () => {
+export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	const exampleNotices = [
 		{
 			id: 'second-notice',

package/src/number-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 NumberControl from '..';
 
-const meta: ComponentMeta< typeof NumberControl > = {
+const meta: Meta< typeof NumberControl > = {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
 	argTypes: {
@@ -32,7 +32,7 @@ const meta: ComponentMeta< typeof NumberControl > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof NumberControl > = ( {
+const Template: StoryFn< typeof NumberControl > = ( {
 	onChange,
 	...props
 } ) => {

package/src/palette-edit/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
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import PaletteEdit from '..';
 import type { Color, Gradient } from '../types';
 
-const meta: ComponentMeta< typeof PaletteEdit > = {
+const meta: Meta< typeof PaletteEdit > = {
 	title: 'Components/PaletteEdit',
 	component: PaletteEdit,
 	parameters: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof PaletteEdit > = {
 };
 export default meta;
 
-const Template: Story< typeof PaletteEdit > = ( args ) => {
+const Template: StoryFn< typeof PaletteEdit > = ( args ) => {
 	const { colors, gradients, onChange, ...props } = args;
 	const [ value, setValue ] = useState( gradients || colors );
 

package/src/palette-edit/styles.js

@@ -42,7 +42,6 @@ export const NameInputControl = styled( InputControl )`
 
 export const PaletteItem = styled( View )`
 	padding: 3px 0 3px ${ space( 3 ) };
-	height: calc( 40px - ${ CONFIG.borderWidth } );
 	border: 1px solid ${ CONFIG.surfaceBorderColor };
 	border-bottom-color: transparent;
 	&:first-of-type {