@wordpress/components 25.6.1 → 25.8.0

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/navigation/use-navigation-tree-nodes.tsx

@@ -4,7 +4,7 @@
 import { useState } from '@wordpress/element';
 
 export function useNavigationTreeNodes<
-	TNode extends { children?: React.ReactNode; [ key: string ]: unknown }
+	TNode extends { children?: React.ReactNode; [ key: string ]: unknown },
 >() {
 	const [ nodes, setNodes ] = useState<
 		Record< string, Omit< TNode, 'children' > >

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/index.tsx

@@ -16,8 +16,8 @@ import { close } from '@wordpress/icons';
  */
 import Button from '../button';
 import type { NoticeAction, NoticeProps } from './types';
-import type { SyntheticEvent } from 'react';
 import type { DeprecatedButtonProps } from '../button/types';
+import { VisuallyHidden } from '../visually-hidden';
 
 const noop = () => {};
 
@@ -45,10 +45,23 @@ function getDefaultPoliteness( status: NoticeProps[ 'status' ] ) {
 		case 'warning':
 		case 'info':
 			return 'polite';
+		// The default will also catch the 'error' status.
+		default:
+			return 'assertive';
+	}
+}
 
+function getStatusLabel( status: NoticeProps[ 'status' ] ) {
+	switch ( status ) {
+		case 'warning':
+			return __( 'Warning notice' );
+		case 'info':
+			return __( 'Information notice' );
 		case 'error':
+			return __( 'Error notice' );
+		// The default will also catch the 'success' status.
 		default:
-			return 'assertive';
+			return __( 'Notice' );
 	}
 }
 
@@ -93,14 +106,14 @@ function Notice( {
 		children = <RawHTML>{ children }</RawHTML>;
 	}
 
-	const onDismissNotice = ( event: SyntheticEvent ) => {
-		event?.preventDefault?.();
+	const onDismissNotice = () => {
 		onDismiss();
 		onRemove();
 	};
 
 	return (
 		<div className={ classes }>
+			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
 			<div className="components-notice__content">
 				{ children }
 				<div className="components-notice__actions">
@@ -154,9 +167,8 @@ function Notice( {
 				<Button
 					className="components-notice__dismiss"
 					icon={ close }
-					label={ __( 'Dismiss this notice' ) }
+					label={ __( 'Close' ) }
 					onClick={ onDismissNotice }
-					showTooltip={ false }
 				/>
 			) }
 		</div>

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/notice/style.scss

@@ -9,7 +9,6 @@
 	align-items: center;
 
 	&.is-dismissible {
-		padding-right: 36px;
 		position: relative;
 	}
 

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -5,6 +5,14 @@ exports[`Notice should match snapshot 1`] = `
   <div
     class="components-notice is-success is-dismissible"
   >
+    <div
+      class="components-visually-hidden emotion-0 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="VisuallyHidden"
+      style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+    >
+      Notice
+    </div>
     <div
       class="components-notice__content"
     >
@@ -33,7 +41,7 @@ exports[`Notice should match snapshot 1`] = `
       </div>
     </div>
     <button
-      aria-label="Dismiss this notice"
+      aria-label="Close"
       class="components-button components-notice__dismiss has-icon"
       type="button"
     >

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

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

package/src/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';
 
 /**
  * Internal dependencies
@@ -16,9 +16,11 @@ import InputControl from '../../input-control';
  */
 import { wordpress } from '@wordpress/icons';
 
-const meta: ComponentMeta< typeof Panel > = {
+const meta: Meta< typeof Panel > = {
 	title: 'Components/Panel',
 	component: Panel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { PanelRow, PanelBody },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -29,11 +31,9 @@ const meta: ComponentMeta< typeof Panel > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Panel > = ( props ) => (
-	<Panel { ...props } />
-);
+const Template: StoryFn< typeof Panel > = ( props ) => <Panel { ...props } />;
 
-export const Default: ComponentStory< typeof Panel > = Template.bind( {} );
+export const Default: StoryFn< typeof Panel > = Template.bind( {} );
 Default.args = {
 	header: 'My panel',
 	children: (
@@ -68,7 +68,7 @@ Default.args = {
  * `PanelRow` is a generic container for rows within a `PanelBody`.
  * It is a flex container with a top margin for spacing.
  */
-export const _PanelRow: ComponentStory< typeof Panel > = Template.bind( {} );
+export const _PanelRow: StoryFn< typeof Panel > = Template.bind( {} );
 _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
@@ -85,9 +85,7 @@ _PanelRow.args = {
 	),
 };
 
-export const DisabledSection: ComponentStory< typeof Panel > = Template.bind(
-	{}
-);
+export const DisabledSection: StoryFn< typeof Panel > = Template.bind( {} );
 DisabledSection.args = {
 	...Default.args,
 	children: (
@@ -99,7 +97,7 @@ DisabledSection.args = {
 	),
 };
 
-export const WithIcon: ComponentStory< typeof Panel > = Template.bind( {} );
+export const WithIcon: StoryFn< typeof Panel > = Template.bind( {} );
 WithIcon.args = {
 	...Default.args,
 	children: (

package/src/placeholder/index.tsx

@@ -75,6 +75,7 @@ export function Placeholder(
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
+
 	return (
 		<div { ...additionalProps } className={ classes }>
 			{ withIllustration ? PlaceholderIllustration : null }

package/src/placeholder/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
@@ -17,7 +17,7 @@ import TextControl from '../../text-control';
 
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
-const meta: ComponentMeta< typeof Placeholder > = {
+const meta: Meta< typeof Placeholder > = {
 	component: Placeholder,
 	title: 'Components/Placeholder',
 	argTypes: {
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof Placeholder > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Placeholder > = ( args ) => {
+const Template: StoryFn< typeof Placeholder > = ( args ) => {
 	const [ value, setValue ] = useState( '' );
 
 	return (
@@ -55,9 +55,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Placeholder > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof Placeholder > = Template.bind( {} );
 Default.args = {
 	icon: 'wordpress',
 	label: 'My Placeholder Label',

package/src/placeholder/style.scss

@@ -3,7 +3,6 @@
 	box-sizing: border-box;
 	position: relative;
 	padding: 1em;
-	min-height: 200px;
 	width: 100%;
 	text-align: left;
 	margin: 0;
@@ -17,7 +16,7 @@
 	@supports (position: sticky) {
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
+		justify-content: top;
 		align-items: flex-start;
 	}
 
@@ -180,7 +179,6 @@
 	color: inherit;
 	display: flex;
 	box-shadow: none;
-	min-width: 100px;
 
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
@@ -225,7 +223,7 @@
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
 	@include placeholder-style();
-	overflow: hidden;
+	overflow: auto;
 }
 
 // Position the spinner.

package/src/popover/README.md

@@ -6,7 +6,7 @@ The behavior of the popover when it exceeds the viewport's edges can be controll
 
 ## Usage
 
-Render a Popover within the parent to which it should anchor.
+Render a Popover adjacent to its container.
 
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
@@ -60,7 +60,7 @@ const MyPopover = () => {
 };
 ```
 
-If you want Popover elements to render to a specific location on the page to allow style cascade to take effect, you must render a `Popover.Slot` further up the element tree:
+By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
 
 ```jsx
 import { render } from '@wordpress/element';