@wordpress/components 23.2.0 → 23.3.0

package/src/dropdown-menu/stories/index.js

@@ -1,52 +1,121 @@
-/**
- * External dependencies
- */
-import { text, boolean } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
 import DropdownMenu from '../';
+import { MenuGroup, MenuItem } from '../../';
 
 /**
  * WordPress dependencies
  */
-import { menu, arrowUp, arrowDown } from '@wordpress/icons';
+import {
+	menu,
+	arrowUp,
+	arrowDown,
+	chevronDown,
+	more,
+	trash,
+} from '@wordpress/icons';
 
 export default {
 	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
+	argTypes: {
+		className: { control: { type: 'text' } },
+		children: { control: { type: null } },
+		disableOpenOnArrowDown: { control: { type: 'boolean' } },
+		icon: {
+			options: [ 'menu', 'chevronDown', 'more' ],
+			mapping: { menu, chevronDown, more },
+			control: { type: 'select' },
+		},
+		menuProps: {
+			control: { type: 'object' },
+		},
+		noIcons: { control: { type: 'boolean' } },
+		popoverProps: {
+			control: { type: 'object' },
+		},
+		text: { control: { type: 'text' } },
+		toggleProps: {
+			control: { type: 'object' },
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const label = text( 'Label', 'Select a direction.' );
-	const firstMenuItemLabel = text( 'First Menu Item Label', 'Up' );
-	const secondMenuItemLabel = text( 'First Menu Item Label', 'Down' );
-	const toggleButtonTootip = boolean(
-		'Show tooltip on a toggle button',
-		true
-	);
+const Template = ( props ) => (
+	<div style={ { height: 150 } }>
+		<DropdownMenu { ...props } />
+	</div>
+);
 
-	const controls = [
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Select a direction.',
+	icon: menu,
+	controls: [
 		{
-			title: firstMenuItemLabel,
+			title: 'First Menu Item Label',
 			icon: arrowUp,
+			// eslint-disable-next-line no-console
+			onClick: () => console.log( 'up!' ),
 		},
 		{
-			title: secondMenuItemLabel,
+			title: 'Second Menu Item Label',
 			icon: arrowDown,
+			// eslint-disable-next-line no-console
+			onClick: () => console.log( 'down!' ),
 		},
-	];
+	],
+};
 
-	return (
-		<DropdownMenu
-			icon={ menu }
-			label={ label }
-			controls={ controls }
-			toggleProps={ { showTooltip: toggleButtonTootip } }
-		/>
-	);
+export const WithChildren = Template.bind( {} );
+// Adding custom source because Storybook is not able to show the contents of
+// the `children` prop correctly in the code snippet.
+WithChildren.parameters = {
+	docs: {
+		source: {
+			code: `<DropdownMenu label="Select a direction." icon={ more }>
+  <MenuGroup>
+    <MenuItem icon={ arrowUp } onClick={ onClose }>
+      Move Up
+    </MenuItem>
+    <MenuItem icon={ arrowDown } onClick={ onClose }>
+      Move Down
+    </MenuItem>
+  </MenuGroup>
+  <MenuGroup>
+    <MenuItem icon={ trash } onClick={ onClose }>
+      Remove
+    </MenuItem>
+  </MenuGroup>
+</DropdownMenu>`,
+			language: 'jsx',
+			type: 'auto',
+		},
+	},
+};
+WithChildren.args = {
+	label: 'Select a direction.',
+	icon: more,
+	children: ( { onClose } ) => (
+		<>
+			<MenuGroup>
+				<MenuItem icon={ arrowUp } onClick={ onClose }>
+					Move Up
+				</MenuItem>
+				<MenuItem icon={ arrowDown } onClick={ onClose }>
+					Move Down
+				</MenuItem>
+			</MenuGroup>
+			<MenuGroup>
+				<MenuItem icon={ trash } onClick={ onClose }>
+					Remove
+				</MenuItem>
+			</MenuGroup>
+		</>
+	),
 };

package/src/dropdown-menu/test/index.js

@@ -15,8 +15,6 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
-jest.useFakeTimers();
-
 describe( 'DropdownMenu', () => {
 	it( 'should not render when neither controls nor children are assigned', () => {
 		render( <DropdownMenu /> );
@@ -33,9 +31,7 @@ describe( 'DropdownMenu', () => {
 	} );
 
 	it( 'should open menu when pressing arrow down on the toggle and the controls prop is used to define menu items', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const controls = [
 			{
@@ -82,9 +78,7 @@ describe( 'DropdownMenu', () => {
 	} );
 
 	it( 'should open menu when pressing arrow down on the toggle and the children prop is used to define menu items', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<DropdownMenu

package/src/external-link/test/index.tsx

@@ -9,12 +9,7 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
-jest.useFakeTimers();
-
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 describe( 'ExternalLink', () => {
 	test( 'should call function passed in onClick handler when clicking the link', async () => {

package/src/focal-point-picker/test/index.js

@@ -9,14 +9,10 @@ import userEvent from '@testing-library/user-event';
  */
 import Picker from '..';
 
-jest.useFakeTimers();
-
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
 		it( 'clicking the draggable area should focus it', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const mockOnChange = jest.fn();
 
@@ -89,9 +85,7 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'resolvePoint handling', () => {
 		it( 'should allow value altering', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const spyChange = jest.fn();
 			const spy = jest.fn();
@@ -131,9 +125,7 @@ describe( 'FocalPointPicker', () => {
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const spyChange = jest.fn();
 			render(

package/src/font-size-picker/test/index.tsx

@@ -10,8 +10,6 @@ import userEvent from '@testing-library/user-event';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
-jest.useFakeTimers();
-
 describe( 'FontSizePicker', () => {
 	test.each( [
 		// Use units when initial value uses units.
@@ -21,9 +19,7 @@ describe( 'FontSizePicker', () => {
 	] )(
 		'should call onChange( $expectedValue ) after user types 80 when value is $value',
 		async ( { value, expectedValue } ) => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -48,9 +44,7 @@ describe( 'FontSizePicker', () => {
 	] )(
 		'should call onChange( $expectedValue ) after user types 80 when first font size is $firstFontSize',
 		async ( { firstFontSize, expectedValue } ) => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -104,9 +98,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a select control', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			render(
 				<FontSizePicker
 					__nextHasNoMarginBottom
@@ -162,9 +154,7 @@ describe( 'FontSizePicker', () => {
 		] )(
 			'calls onChange( $expectedArguments ) when $option is selected',
 			async ( { option, value, expectedArguments } ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
@@ -224,9 +214,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a select control', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			render(
 				<FontSizePicker
 					__nextHasNoMarginBottom
@@ -323,9 +311,7 @@ describe( 'FontSizePicker', () => {
 		] )(
 			'calls onChange( $expectedValue ) when $option is selected',
 			async ( { option, value, expectedArguments } ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
@@ -421,9 +407,7 @@ describe( 'FontSizePicker', () => {
 		);
 
 		it( 'calls onChange when a font size is selected', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -523,9 +507,7 @@ describe( 'FontSizePicker', () => {
 		] )(
 			'calls onChange( $expectedArguments ) when $radio is selected',
 			async ( { radio, expectedArguments } ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
@@ -580,9 +562,7 @@ describe( 'FontSizePicker', () => {
 
 	function commonSelectTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when Custom is selected', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -615,9 +595,7 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'allows custom values by default', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -648,9 +626,7 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'does not display a slider by default', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			render(
 				<FontSizePicker
 					__nextHasNoMarginBottom
@@ -666,9 +642,7 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'allows a slider to be used when withSlider is set', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -690,9 +664,7 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'allows reset by default', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
@@ -711,9 +683,7 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'does not allow reset when withReset is false', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			render(
 				<FontSizePicker
 					__nextHasNoMarginBottom

package/src/form-file-upload/test/index.tsx

@@ -14,8 +14,6 @@ import FormFileUpload from '..';
  */
 const { File } = window;
 
-jest.useFakeTimers();
-
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {
@@ -24,15 +22,6 @@ const fakePath = expect.objectContaining( {
 } );
 
 describe( 'FormFileUpload', () => {
-	beforeEach( () => {
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	it( 'should show an Icon Button and a hidden input', () => {
 		render(
 			<FormFileUpload onChange={ () => {} }>
@@ -47,9 +36,7 @@ describe( 'FormFileUpload', () => {
 	} );
 
 	it( 'should not fire a change event after selecting the same file', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChange = jest.fn();
 
@@ -74,9 +61,7 @@ describe( 'FormFileUpload', () => {
 	} );
 
 	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChange = jest.fn();
 

package/src/form-toggle/test/index.tsx

@@ -15,8 +15,6 @@ import { useState } from '@wordpress/element';
 import FormToggle, { noop } from '..';
 import type { FormToggleProps } from '../types';
 
-jest.useFakeTimers();
-
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {
@@ -81,9 +79,7 @@ describe( 'FormToggle', () => {
 
 	describe( 'Value', () => {
 		it( 'should flip the checked property when clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChange = jest.fn();
 			render( <ControlledFormToggle onChange={ onChange } /> );