@wordpress/components 23.1.0 → 23.3.0

package/src/number-control/test/index.tsx

@@ -15,8 +15,6 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
-jest.useFakeTimers();
-
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );
@@ -45,9 +43,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'onChange handling', () => {
 		it( 'should provide onChange callback with number value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const spy = jest.fn();
 
 			render(
@@ -62,9 +58,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should call onChange callback when value is clamped on blur', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
 			render(
@@ -107,9 +101,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should call onChange callback when value is not valid', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
 			render(
@@ -153,9 +145,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'Validation', () => {
 		it( 'should clamp value within range on ENTER keypress', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
 
@@ -173,9 +163,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should clamp value within range on blur', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
 
@@ -194,9 +182,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should parse non-numeric values to a number on ENTER keypress when required', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } required /> );
 
@@ -209,9 +195,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should parse non-numeric values to empty string on ENTER keypress when not required', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } required={ false } /> );
 
@@ -230,9 +214,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should not enforce numerical value for empty string when required is omitted', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } /> );
 
@@ -247,9 +229,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should enforce numerical value for empty string when required', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } required /> );
 
@@ -263,9 +243,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'Key UP interactions', () => {
 		it( 'should fire onKeyDown callback', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const spy = jest.fn();
 
@@ -279,9 +257,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by step on key UP press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -293,9 +269,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment from a negative value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ -5 } /> );
 
@@ -307,9 +281,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 866.5309 } step="any" /> );
 
@@ -321,9 +293,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by shiftStep on key UP + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 10 } /> );
 
@@ -335,9 +305,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 857.5309 } step="any" /> );
 
@@ -349,9 +317,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by custom shiftStep on key UP + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
 
@@ -363,9 +329,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment but be limited by max on shiftStep', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -383,9 +347,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should not increment by shiftStep if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -405,9 +367,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'Key DOWN interactions', () => {
 		it( 'should fire onKeyDown callback', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const spy = jest.fn();
 
 			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
@@ -420,9 +380,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by step on key DOWN press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -434,9 +392,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement from a negative value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ -5 } /> );
 
@@ -448,9 +404,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 868.5309 } step="any" /> );
 
@@ -462,9 +416,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by shiftStep on key DOWN + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -476,9 +428,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 877.5309 } step="any" /> );
 
@@ -490,9 +440,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by custom shiftStep on key DOWN + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
 
@@ -504,9 +452,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement but be limited by min on shiftStep', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -524,9 +470,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should not decrement by shiftStep if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -574,9 +518,7 @@ describe( 'NumberControl', () => {
 		] )(
 			'should spin %s to %s when props = %o',
 			async ( direction, expectedValue, props ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
 				render(
 					<NumberControl

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/panel/test/body.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { PanelBody } from '../body';
 
-jest.useFakeTimers();
-
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
@@ -117,9 +115,7 @@ describe( 'PanelBody', () => {
 		} );
 
 		it( 'should toggle when clicking header', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<PanelBody title="Panel" initialOpen={ false }>
@@ -146,9 +142,7 @@ describe( 'PanelBody', () => {
 		} );
 
 		it( 'should pass button props to panel title', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const mock = jest.fn();
 
 			render(

package/src/placeholder/stories/index.tsx

@@ -44,6 +44,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
 		<Placeholder { ...args }>
 			<div>
 				<TextControl
+					__nextHasNoMarginBottom
 					label="Sample Field"
 					placeholder="Enter something here"
 					value={ value }

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