@wordpress/components 23.1.0 → 23.2.0

package/src/item-group/stories/index.tsx

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ItemGroup } from '../item-group/component';
+import { Item } from '../item/component';
+
+type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
+
+const meta: ComponentMeta< typeof ItemGroup > = {
+	component: ItemGroup,
+	title: 'Components (Experimental)/ItemGroup',
+	subcomponents: { Item },
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const mapPropsToItem = ( props: ItemProps, index: number ) => (
+	<Item { ...props } key={ index } />
+);
+
+const Template: ComponentStory< typeof ItemGroup > = ( props ) => (
+	<ItemGroup { ...props } />
+);
+
+export const Default: ComponentStory< typeof ItemGroup > = Template.bind( {} );
+Default.args = {
+	children: (
+		[
+			{
+				children: 'First item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'First item clicked' ),
+			},
+			{
+				children: 'Second item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Second item clicked' ),
+			},
+			{
+				children: 'Third item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Third item clicked' ),
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const NonClickableItems: ComponentStory< typeof ItemGroup > =
+	Template.bind( {} );
+NonClickableItems.args = {
+	children: (
+		[
+			{
+				children:
+					"This <Item /> is not click-able because it doesn't have an `onClick` prop",
+			},
+			{
+				children:
+					"This <Item /> is also not click-able because it doesn't have an `onClick` prop",
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const CustomItemSize: ComponentStory< typeof ItemGroup > = Template.bind(
+	{}
+);
+CustomItemSize.args = {
+	children: (
+		[
+			{
+				children:
+					'This <Item /> will inherit the size from <ItemGroup /> (try changing the size prop)',
+			},
+			{
+				children:
+					'This <Item /> has a hardcoded size="large", regardless of <ItemGroup />\'s size',
+				size: 'large',
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const WithBorder: ComponentStory< typeof ItemGroup > = Template.bind(
+	{}
+);
+WithBorder.args = {
+	...Default.args,
+	isBordered: true,
+	isSeparated: true,
+};

package/src/item-group/styles.ts

@@ -33,6 +33,7 @@ export const itemWrapper = css`
 `;
 
 export const item = css`
+	box-sizing: border-box;
 	width: 100%;
 	display: block;
 	margin: 0;

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+-       class="components-item css-cl593w-View-medium-item e19lxcc00"
++       class="components-item css-1yvqxd-View-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -75,6 +75,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 
 .emotion-3 {
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
@@ -124,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-cl593w-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -152,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-cl593w-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >

package/src/notice/stories/index.js

@@ -1,74 +1,46 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
 import Notice from '../';
 
+// TODO: Add a story involving NoticeList to help people understand
+// the difference between onDismiss/onRemove.
+
 export default {
 	title: 'Components/Notice',
 	component: Notice,
+	argTypes: {
+		isDismissible: { control: 'boolean' },
+		onDismiss: { control: { type: null } },
+		onRemove: { control: { type: null } },
+		politeness: {
+			control: 'radio',
+			options: [ 'assertive', 'polite' ],
+		},
+		spokenMessage: { control: 'text' },
+		status: {
+			control: 'radio',
+			options: [ 'warning', 'success', 'error', 'info' ],
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-
-	return (
-		<Notice status={ status } isDismissible={ isDismissible }>
-			<p>This is a notice.</p>
-		</Notice>
-	);
+const Template = ( props ) => {
+	return <Notice { ...props } />;
 };
 
-export const withCustomSpokenMessage = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-	const politeness = select(
-		'Politeness',
-		{
-			Assertive: 'assertive',
-			Polite: 'polite',
-		},
-		'assertive'
-	);
-	const spokenMessage = text(
-		'Spoken Message',
-		'This is a notice with a custom spoken message'
-	);
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'This is a notice.',
+};
 
-	return (
-		<Notice
-			status={ status }
-			isDismissible={ isDismissible }
-			politeness={ politeness }
-			spokenMessage={ spokenMessage }
-		>
-			<p>This is a notice.</p>
-		</Notice>
-	);
+export const WithCustomSpokenMessage = Template.bind( {} );
+WithCustomSpokenMessage.args = {
+	...Default.args,
+	politeness: 'assertive',
+	spokenMessage: 'This is a notice with a custom spoken message',
 };

package/src/panel/row.js

@@ -8,13 +8,13 @@ import classnames from 'classnames';
  */
 import { forwardRef } from '@wordpress/element';
 
-const PanelRow = forwardRef( ( { className, children }, ref ) => (
+const PanelRow = ( { className, children }, ref ) => (
 	<div
 		className={ classnames( 'components-panel__row', className ) }
 		ref={ ref }
 	>
 		{ children }
 	</div>
-) );
+);
 
-export default PanelRow;
+export default forwardRef( PanelRow );

package/src/panel/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
@@ -18,88 +13,75 @@ import { wordpress } from '@wordpress/icons';
 export default {
 	title: 'Components/Panel',
 	component: Panel,
+	subcomponents: { PanelRow, PanelBody },
+	argTypes: {
+		children: { control: { type: null } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const opened = boolean( 'Opened', true );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened }>
-				<PanelRow>{ rowText }</PanelRow>
+const Template = ( props ) => <Panel { ...props } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	header: 'My panel',
+	children: (
+		<>
+			<PanelBody title="First section">
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
+			</PanelBody>
+			<PanelBody title="Second section" initialOpen={ false }>
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
 			</PanelBody>
-		</Panel>
-	);
+		</>
+	),
 };
 
-export const multipleBodies = () => {
-	return (
-		<ScrollableContainer>
-			<Panel header="My Panel">
-				<PanelBody title="First Settings">
-					<PanelRow>
-						<Placeholder height={ 250 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Second Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 400 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Third Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 600 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Fourth Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody
-					title="Disabled Settings"
-					initialOpen={ false }
-					buttonProps={ { disabled: true } }
-				/>
-			</Panel>
-		</ScrollableContainer>
-	);
+export const DisabledSection = Template.bind( {} );
+DisabledSection.args = {
+	...Default.args,
+	children: (
+		<PanelBody
+			title="Disabled section"
+			initialOpen={ false }
+			buttonProps={ { disabled: true } }
+		/>
+	),
 };
 
-export const withIcon = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	const icon = boolean( 'Icon', true ) ? wordpress : undefined;
-	const opened = boolean( 'Opened', true );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened } icon={ icon }>
-				<PanelRow>{ rowText }</PanelRow>
-			</PanelBody>
-		</Panel>
-	);
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: (
+		<PanelBody title="Section title" icon={ wordpress }>
+			<PanelRow>
+				<div
+					style={ {
+						background: '#ddd',
+						height: 100,
+						width: '100%',
+					} }
+				/>
+			</PanelRow>
+		</PanelBody>
+	),
 };
-
-function ScrollableContainer( { children } ) {
-	return (
-		<div
-			style={ {
-				width: 300,
-				height: '100vh',
-				overflowY: 'auto',
-				margin: 'auto',
-				boxShadow: '0 0 0 1px #ddd inset',
-			} }
-		>
-			{ children }
-		</div>
-	);
-}
-
-function Placeholder( { height = 200 } ) {
-	return <div style={ { background: '#ddd', height, width: '100%' } } />;
-}

package/src/placeholder/style.scss

@@ -45,7 +45,7 @@
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: 1ch;
+		margin-right: $grid-unit-15;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.

package/src/query-controls/index.js

@@ -35,6 +35,7 @@ export default function QueryControls( {
 	return [
 		onOrderChange && onOrderByChange && (
 			<SelectControl
+				__nextHasNoMarginBottom
 				key="query-controls-order-select"
 				label={ __( 'Order by' ) }
 				value={ `${ orderBy }/${ order }` }

package/src/resizable-box/README.md

@@ -38,8 +38,8 @@ const Edit = ( props ) => {
 			} }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
-					height: parseInt( height + delta.height, 10 ),
-					width: parseInt( width + delta.width, 10 ),
+					height: height + delta.height,
+					width: width + delta.width,
 				} );
 				toggleSelection( true );
 			} }

package/src/resizable-box/index.tsx

@@ -88,14 +88,13 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	className: string;
 	children: ReactNode;
-	showHandle: boolean;
-	__experimentalShowTooltip: boolean;
-	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+	showHandle?: boolean;
+	__experimentalShowTooltip?: boolean;
+	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
 };
 
-function ResizableBox(
+function UnforwardedResizableBox(
 	{
 		className,
 		children,
@@ -124,4 +123,6 @@ function ResizableBox(
 	);
 }
 
-export default forwardRef( ResizableBox );
+export const ResizableBox = forwardRef( UnforwardedResizableBox );
+
+export default ResizableBox;

package/src/resizable-box/stories/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: ComponentMeta< typeof ResizableBox > = {
+	title: 'Components/ResizableBox',
+	component: ResizableBox,
+	argTypes: {
+		children: { control: { type: null } },
+		enable: { control: 'object' },
+		onResizeStop: { action: 'onResizeStop' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResizableBox > = ( {
+	onResizeStop,
+	...props
+} ) => {
+	const [ { height, width }, setAttributes ] = useState( {
+		height: 200,
+		width: 400,
+	} );
+
+	return (
+		<ResizableBox
+			{ ...props }
+			size={ {
+				height,
+				width,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop?.( event, direction, elt, delta );
+				setAttributes( {
+					height: height + delta.height,
+					width: width + delta.width,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<div
+			style={ {
+				background: '#eee',
+				display: 'flex',
+				height: '100%',
+				width: '100%',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			Resize
+		</div>
+	),
+};
+
+/**
+ * The `enable` prop can be used to disable resizing in specific directions.
+ */
+export const DisabledDirections = Template.bind( {} );
+DisabledDirections.args = {
+	...Default.args,
+	enable: {
+		top: false,
+		right: true,
+		bottom: true,
+		left: false,
+		topRight: false,
+		bottomRight: true,
+		bottomLeft: false,
+		topLeft: false,
+	},
+};

package/src/responsive-wrapper/README.md

@@ -1,5 +1,7 @@
 # ResponsiveWrapper
 
+A wrapper component that maintains its aspect ratio when resized.
+
 ## Usage
 
 ```jsx
@@ -14,3 +16,30 @@ const MyResponsiveWrapper = () => (
 	</ResponsiveWrapper>
 );
 ```
+
+## Props
+
+### `children`: `React.ReactElement`
+
+The element to wrap.
+
+-   Required: Yes
+
+### `isInline`: `boolean`
+
+If true, the wrapper will be `span` instead of `div`.
+
+-   Required: No
+-   Default: `false`
+
+### `naturalHeight`: `number`
+
+The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes
+
+### `naturalWidth`: `number`
+
+The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes

package/src/responsive-wrapper/{index.js → index.tsx}

@@ -9,12 +9,33 @@ import classnames from 'classnames';
 import { cloneElement, Children } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveWrapperProps } from './types';
+
+/**
+ * A wrapper component that maintains its aspect ratio when resized.
+ *
+ * ```jsx
+ * import { ResponsiveWrapper } from '@wordpress/components';
+ *
+ * const MyResponsiveWrapper = () => (
+ * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
+ * 		<img
+ * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+ * 			alt="WordPress"
+ * 		/>
+ * 	</ResponsiveWrapper>
+ * );
+ * ```
+ */
 function ResponsiveWrapper( {
 	naturalWidth,
 	naturalHeight,
 	children,
 	isInline = false,
-} ) {
+}: ResponsiveWrapperProps ) {
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
@@ -22,7 +43,7 @@ function ResponsiveWrapper( {
 	}
 	const imageStyle = {
 		paddingBottom:
-			naturalWidth < containerWidth
+			naturalWidth < ( containerWidth ?? 0 )
 				? naturalHeight
 				: ( naturalHeight / naturalWidth ) * 100 + '%',
 	};