@wordpress/components 19.6.1-next.a55ed9455a.0 → 19.7.0

package/src/color-palette/test/index.js

@@ -92,7 +92,7 @@ describe( 'ColorPalette', () => {
 			const isOpen = true;
 			const onToggle = jest.fn();
 
-			const renderedToggleButton = shallow(
+			const renderedToggleButton = mount(
 				dropdown.props().renderToggle( { isOpen, onToggle } )
 			);
 

package/src/custom-select-control/index.js

@@ -56,6 +56,8 @@ const stateReducer = (
 	}
 };
 export default function CustomSelectControl( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next36pxDefaultSize = false,
 	className,
 	hideLabelFromVision,
 	label,
@@ -141,8 +143,11 @@ export default function CustomSelectControl( {
 					// This is needed because some speech recognition software don't support `aria-labelledby`.
 					'aria-label': label,
 					'aria-labelledby': undefined,
-					className: 'components-custom-select-control__button',
-					isSmall: true,
+					className: classnames(
+						'components-custom-select-control__button',
+						{ 'is-next-36px-default-size': __next36pxDefaultSize }
+					),
+					isSmall: ! __next36pxDefaultSize,
 					describedBy: getDescribedBy(),
 				} ) }
 			>
@@ -169,6 +174,7 @@ export default function CustomSelectControl( {
 										'is-highlighted':
 											index === highlightedIndex,
 										'has-hint': !! item.__experimentalHint,
+										'is-next-36px-default-size': __next36pxDefaultSize,
 									}
 								),
 								style: item.style,

package/src/custom-select-control/stories/index.js

@@ -6,81 +6,84 @@ import CustomSelectControl from '../';
 export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
-};
-
-const defaultOptions = [
-	{
-		key: 'small',
-		name: 'Small',
-		style: { fontSize: '50%' },
-	},
-	{
-		key: 'normal',
-		name: 'Normal',
-		style: { fontSize: '100%' },
-		className: 'can-apply-custom-class-to-option',
-	},
-	{
-		key: 'large',
-		name: 'Large',
-		style: { fontSize: '200%' },
-	},
-	{
-		key: 'huge',
-		name: 'Huge',
-		style: { fontSize: '300%' },
-	},
-];
-export const _default = () => (
-	<CustomSelectControl label="Font size" options={ defaultOptions } />
-);
-
-const longLabelOptions = [
-	{
-		key: 'reallylonglabel1',
-		name: 'Really long labels are good for stress testing',
-	},
-	{
-		key: 'reallylonglabel2',
-		name: 'But they can take a long time to type.',
-	},
-	{
-		key: 'reallylonglabel3',
-		name:
-			'That really is ok though because you should stress test your UIs.',
+	argTypes: {
+		__next36pxDefaultSize: {
+			control: { type: 'boolean' },
+		},
 	},
-];
+};
 
-export const longLabels = () => (
-	<CustomSelectControl
-		label="Testing long labels"
-		options={ longLabelOptions }
-	/>
-);
+export const Default = CustomSelectControl.bind( {} );
+Default.args = {
+	label: 'Label',
+	options: [
+		{
+			key: 'small',
+			name: 'Small',
+			style: { fontSize: '50%' },
+		},
+		{
+			key: 'normal',
+			name: 'Normal',
+			style: { fontSize: '100%' },
+			className: 'can-apply-custom-class-to-option',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			style: { fontSize: '200%' },
+		},
+		{
+			key: 'huge',
+			name: 'Huge',
+			style: { fontSize: '300%' },
+		},
+	],
+};
 
-const withHintsOptions = [
-	{
-		key: 'thumbnail',
-		name: 'Thumbnail',
-		__experimentalHint: '150x150',
-	},
-	{
-		key: 'medium',
-		name: 'Medium',
-		__experimentalHint: '250x250',
-	},
-	{
-		key: 'large',
-		name: 'Large',
-		__experimentalHint: '1024x1024',
-	},
-	{
-		key: 'full',
-		name: 'Full Size',
-		__experimentalHint: '1600x1600',
-	},
-];
+export const WithLongLabels = CustomSelectControl.bind( {} );
+WithLongLabels.args = {
+	...Default.args,
+	options: [
+		{
+			key: 'reallylonglabel1',
+			name: 'Really long labels are good for stress testing',
+		},
+		{
+			key: 'reallylonglabel2',
+			name: 'But they can take a long time to type.',
+		},
+		{
+			key: 'reallylonglabel3',
+			name:
+				'That really is ok though because you should stress test your UIs.',
+		},
+	],
+};
 
-export const hints = () => (
-	<CustomSelectControl label="Testing hints" options={ withHintsOptions } />
-);
+export const WithHints = CustomSelectControl.bind( {} );
+WithHints.args = {
+	...Default.args,
+	options: [
+		{
+			key: 'thumbnail',
+			name: 'Thumbnail',
+			__experimentalHint: '150x150',
+		},
+		{
+			key: 'medium',
+			name: 'Medium',
+			__experimentalHint: '250x250',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			__experimentalHint: '1024x1024',
+		},
+		{
+			key: 'full',
+			name: 'Full Size',
+			__experimentalHint: '1600x1600',
+		},
+	],
+};

package/src/custom-select-control/style.scss

@@ -10,15 +10,26 @@
 .components-custom-select-control__button {
 	border: 1px solid $gray-700;
 	border-radius: $radius-block-ui;
-	min-height: 30px;
 	min-width: 130px;
 	position: relative;
 	text-align: left;
 
+	&:not(.is-next-36px-default-size) {
+		min-height: 30px;
+	}
+
 	// For all button sizes allow sufficient space for the
 	// dropdown "arrow" icon to display.
 	&.components-custom-select-control__button {
-		padding-right: $icon-size;
+		// TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron
+		// (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431)
+		padding-left: $grid-unit-20;
+		padding-right: $icon-size + $grid-unit-10;
+
+		&:not(.is-next-36px-default-size) {
+			padding-left: $grid-unit-10;
+			padding-right: $icon-size;
+		}
 	}
 
 	&:focus:not(:disabled) {
@@ -61,10 +72,14 @@
 	display: grid;
 	grid-template-columns: auto auto;
 	list-style-type: none;
-	padding: $grid-unit-10;
+	padding: $grid-unit-10 $grid-unit-20;
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
+	&:not(.is-next-36px-default-size) {
+		padding: $grid-unit-10;
+	}
+
 	&.has-hint {
 		grid-template-columns: auto auto 30px;
 	}

package/src/divider/stories/index.tsx

@@ -8,6 +8,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  */
 import { Text } from '../../text';
 import { Divider } from '..';
+import { Flex } from '../../flex';
 
 const meta: ComponentMeta< typeof Divider > = {
 	component: Divider,
@@ -30,7 +31,7 @@ const meta: ComponentMeta< typeof Divider > = {
 };
 export default meta;
 
-const HorizontalTemplate: ComponentStory< typeof Divider > = ( args ) => (
+const Template: ComponentStory< typeof Divider > = ( args ) => (
 	<div>
 		<Text>Some text before the divider</Text>
 		<Divider { ...args } />
@@ -38,33 +39,35 @@ const HorizontalTemplate: ComponentStory< typeof Divider > = ( args ) => (
 	</div>
 );
 
-const VerticalTemplate: ComponentStory< typeof Divider > = ( args ) => {
-	const styles = {
-		display: 'flex',
-		alignItems: 'stretch',
-		justifyContent: 'start',
-	};
-
-	return (
-		<div style={ styles }>
-			<Text>Some text before the divider</Text>
-			<Divider { ...args } />
-			<Text>Some text after the divider</Text>
-		</div>
-	);
-};
-
-export const Horizontal: ComponentStory<
-	typeof Divider
-> = HorizontalTemplate.bind( {} );
+export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
 Horizontal.args = {
 	margin: 2,
 };
 
-export const Vertical: ComponentStory< typeof Divider > = VerticalTemplate.bind(
-	{}
-);
+export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );
 Vertical.args = {
 	...Horizontal.args,
 	orientation: 'vertical',
 };
+
+// Inside a `flex` container, the divider will need to be `stretch` aligned in order to be visible.
+export const InFlexContainer: ComponentStory< typeof Divider > = ( args ) => {
+	return (
+		<Flex align="stretch">
+			<Text>
+				Some text before the divider Some text before the divider Some
+				text before the divider Some text before the divider Some text
+				before the divider Some text before the divider Some text before
+				the divider
+			</Text>
+			<Divider { ...args } />
+			<Text>
+				Some text after the divider Some text after the divider Some
+				text after the divider
+			</Text>
+		</Flex>
+	);
+};
+InFlexContainer.args = {
+	...Vertical.args,
+};

package/src/divider/styles.ts

@@ -45,6 +45,14 @@ const renderMargin = ( {
 		} )()
 	);
 
+const renderDisplay = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) => {
+	return orientation === 'vertical'
+		? css( { display: 'inline' } )
+		: undefined;
+};
+
 const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
 }: Props ) => {
@@ -67,6 +75,7 @@ export const DividerView = styled.hr< Props >`
 	border: 0;
 	margin: 0;
 
+	${ renderDisplay }
 	${ renderBorder }
 	${ renderSize }
 	${ renderMargin }

package/src/divider/types.ts

@@ -22,8 +22,18 @@ export interface OwnProps {
 	 * Adjusts the inline-end margin.
 	 */
 	marginEnd?: SpaceInput;
+	/**
+	 * Divider's orientation. When using inside a flex container, you may need to make sure the divider is `stretch` aligned
+	 * in order for it to be visible.
+	 *
+	 * @default 'horizontal'
+	 */
+	orientation?: SeparatorProps[ 'orientation' ];
 }
 
 export interface Props
-	extends Omit< SeparatorProps, 'children' | 'unstable_system' >,
+	extends Omit<
+			SeparatorProps,
+			'children' | 'unstable_system' | 'orientation'
+		>,
 		OwnProps {}

package/src/focal-point-picker/controls.js

@@ -42,13 +42,13 @@ export default function FocalPointPickerControls( {
 		<ControlWrapper className="focal-point-picker__controls">
 			<UnitControl
 				label={ __( 'Left' ) }
-				value={ valueX }
+				value={ [ valueX, '%' ].join( '' ) }
 				onChange={ ( next ) => handleChange( next, 'x' ) }
 				dragDirection="e"
 			/>
 			<UnitControl
 				label={ __( 'Top' ) }
-				value={ valueY }
+				value={ [ valueY, '%' ].join( '' ) }
 				onChange={ ( next ) => handleChange( next, 'y' ) }
 				dragDirection="s"
 			/>
@@ -63,7 +63,6 @@ function UnitControl( props ) {
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }
 			min={ TEXTCONTROL_MIN }
-			unit="%"
 			units={ [ { value: '%', label: '%' } ] }
 			{ ...props }
 		/>

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

@@ -203,7 +203,6 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children ).toHaveLength( 2 );
 				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
 			} );
 			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
@@ -223,7 +222,6 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children ).toHaveLength( 2 );
 				expect( element.children[ 0 ].textContent ).toBe( '3' );
 			} );
 		} );

package/src/form-file-upload/README.md

@@ -57,6 +57,24 @@ Callback function passed directly to the `input` file element.
 -   Type: `Function`
 -   Required: Yes
 
+### onClick
+
+Callback function passed directly to the `input` file element.
+
+This can be useful when you want to force a `change` event to fire when the user chooses the same file again. To do this, set the target value to an empty string in the `onClick` function.
+
+```jsx
+<FormFileUpload
+	onClick={ ( event ) => ( event.target.value = '' ) }
+	onChange={ onChange }
+>
+	Upload
+</FormFileUpload>
+```
+
+-   Type: `Function`
+-   Required: No
+
 ### render
 
 Optional callback function used to render the UI. If passed the component does not render any UI and calls this function to render it.

package/src/form-file-upload/index.js

@@ -13,6 +13,7 @@ function FormFileUpload( {
 	children,
 	multiple = false,
 	onChange,
+	onClick,
 	render,
 	...props
 } ) {
@@ -38,6 +39,8 @@ function FormFileUpload( {
 				style={ { display: 'none' } }
 				accept={ accept }
 				onChange={ onChange }
+				onClick={ onClick }
+				data-testid="form-file-upload-input"
 			/>
 		</div>
 	);

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

@@ -1,30 +1,92 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import { noop } from 'lodash';
+import { render as RTLrender, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import FormFileUpload from '../';
 
+/**
+ * Browser dependencies
+ */
+const { File } = window;
+
+function render( jsx ) {
+	return {
+		user: userEvent.setup( {
+			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
+			delay: null,
+		} ),
+		...RTLrender( jsx ),
+	};
+}
+
+// @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( {
+		value: 'C:\\fakepath\\hello.png',
+	} ),
+} );
+
 describe( 'FormFileUpload', () => {
 	it( 'should show an Icon Button and a hidden input', () => {
-		const wrapper = shallow(
+		render( <FormFileUpload>My Upload Button</FormFileUpload> );
+
+		const button = screen.getByText( 'My Upload Button' );
+		const input = screen.getByTestId( 'form-file-upload-input' );
+		expect( button ).toBeInTheDocument();
+		expect( input.style.display ).toBe( 'none' );
+	} );
+
+	it( 'should not fire a change event after selecting the same file', async () => {
+		const onChange = jest.fn();
+
+		const { user } = render(
+			<FormFileUpload onChange={ onChange }>
+				My Upload Button
+			</FormFileUpload>
+		);
+
+		const file = new File( [ 'hello' ], 'hello.png', {
+			type: 'image/png',
+		} );
+
+		const input = screen.getByTestId( 'form-file-upload-input' );
+
+		await user.upload( input, file );
+
+		await user.upload( input, file );
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( fakePath );
+	} );
+
+	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
+		const onChange = jest.fn();
+
+		const { user } = render(
 			<FormFileUpload
-				instanceId={ 1 }
-				blocks={ [] }
-				recentlyUsedBlocks={ [] }
-				debouncedSpeak={ noop }
+				onClick={ jest.fn( ( e ) => ( e.target.value = '' ) ) }
+				onChange={ onChange }
 			>
 				My Upload Button
 			</FormFileUpload>
 		);
 
-		const button = wrapper.find( 'ForwardRef(Button)' );
-		const input = wrapper.find( 'input' );
-		expect( button.prop( 'children' ) ).toBe( 'My Upload Button' );
-		expect( input.prop( 'style' ).display ).toBe( 'none' );
+		const file = new File( [ 'hello' ], 'hello.png', {
+			type: 'image/png',
+		} );
+
+		const input = screen.getByTestId( 'form-file-upload-input' );
+		await user.upload( input, file );
+
+		expect( onChange ).toHaveBeenNthCalledWith( 1, fakePath );
+
+		await user.upload( input, file );
+
+		expect( onChange ).toHaveBeenNthCalledWith( 2, fakePath );
 	} );
 } );

package/src/input-control/input-field.tsx

@@ -17,7 +17,6 @@ import type {
  * WordPress dependencies
  */
 import { forwardRef, useRef } from '@wordpress/element';
-import { UP, DOWN, ENTER, ESCAPE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -68,7 +67,6 @@ function InputField(
 		pressEnter,
 		pressUp,
 		reset,
-		update,
 	} = useInputControlStateReducer( stateReducer, {
 		isDragEnabled,
 		value: valueProp,
@@ -92,10 +90,12 @@ function InputField(
 			return;
 		}
 		if ( ! isFocused && ! wasDirtyOnBlur.current ) {
-			update( valueProp, _event as SyntheticEvent );
+			commit( valueProp, _event as SyntheticEvent );
 		} else if ( ! isDirty ) {
 			onChange( value, {
-				event: _event as ChangeEvent< HTMLInputElement >,
+				event: _event as
+					| ChangeEvent< HTMLInputElement >
+					| PointerEvent< HTMLInputElement >,
 			} );
 			wasDirtyOnBlur.current = false;
 		}
@@ -109,7 +109,7 @@ function InputField(
 		 * If isPressEnterToChange is set, this commits the value to
 		 * the onChange callback.
 		 */
-		if ( isPressEnterToChange && isDirty ) {
+		if ( isDirty || ! event.target.validity.valid ) {
 			wasDirtyOnBlur.current = true;
 			handleOnCommit( event );
 		}
@@ -137,19 +137,19 @@ function InputField(
 	};
 
 	const handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
-		const { keyCode } = event;
+		const { key } = event;
 		onKeyDown( event );
 
-		switch ( keyCode ) {
-			case UP:
+		switch ( key ) {
+			case 'ArrowUp':
 				pressUp( event );
 				break;
 
-			case DOWN:
+			case 'ArrowDown':
 				pressDown( event );
 				break;
 
-			case ENTER:
+			case 'Enter':
 				pressEnter( event );
 
 				if ( isPressEnterToChange ) {
@@ -158,7 +158,7 @@ function InputField(
 				}
 				break;
 
-			case ESCAPE:
+			case 'Escape':
 				if ( isPressEnterToChange && isDirty ) {
 					event.preventDefault();
 					reset( valueProp, event );
@@ -169,7 +169,18 @@ function InputField(
 
 	const dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(
 		( dragProps ) => {
-			const { distance, dragging, event } = dragProps;
+			const { distance, dragging, event, target } = dragProps;
+
+			// The `target` prop always references the `input` element while, by
+			// default, the `dragProps.event.target` property would reference the real
+			// event target (i.e. any DOM element that the pointer is hovering while
+			// dragging). Ensuring that the `target` is always the `input` element
+			// allows consumers of `InputControl` (or any higher-level control) to
+			// check the input's validity by accessing `event.target.validity.valid`.
+			dragProps.event = {
+				...dragProps.event,
+				target,
+			};
 
 			if ( ! distance ) return;
 			event.stopPropagation();

package/src/input-control/reducer/actions.ts

@@ -18,7 +18,6 @@ export const PRESS_DOWN = 'PRESS_DOWN';
 export const PRESS_ENTER = 'PRESS_ENTER';
 export const PRESS_UP = 'PRESS_UP';
 export const RESET = 'RESET';
-export const UPDATE = 'UPDATE';
 
 interface EventPayload {
 	event?: SyntheticEvent;
@@ -42,14 +41,9 @@ export type DragStartAction = Action< typeof DRAG_START, DragProps >;
 export type DragEndAction = Action< typeof DRAG_END, DragProps >;
 export type DragAction = Action< typeof DRAG, DragProps >;
 export type ResetAction = Action< typeof RESET, Partial< ValuePayload > >;
-export type UpdateAction = Action< typeof UPDATE, ValuePayload >;
 export type InvalidateAction = Action< typeof INVALIDATE, { error: unknown } >;
 
-export type ChangeEventAction =
-	| ChangeAction
-	| ResetAction
-	| CommitAction
-	| UpdateAction;
+export type ChangeEventAction = ChangeAction | ResetAction | CommitAction;
 
 export type DragEventAction = DragStartAction | DragEndAction | DragAction;