@wordpress/components 19.6.1 → 19.8.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,15 +143,24 @@ 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(),
 				} ) }
 			>
 				{ itemToString( selectedItem ) }
 				<Icon
 					icon={ chevronDown }
-					className="components-custom-select-control__button-icon"
+					className={ classnames(
+						'components-custom-select-control__button-icon',
+						{
+							'is-next-36px-default-size': __next36pxDefaultSize,
+						}
+					) }
+					size={ 18 }
 				/>
 			</Button>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
@@ -169,6 +180,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) {
@@ -30,8 +41,12 @@
 		height: 100%;
 		padding: 0;
 		position: absolute;
-		right: 0;
+		right: $grid-unit-10;
 		top: 0;
+
+		&:not(.is-next-36px-default-size) {
+			right: $grid-unit-05;
+		}
 	}
 }
 
@@ -61,10 +76,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/disabled/README.md

@@ -33,19 +33,16 @@ const MyDisabled = () => {
 };
 ```
 
-A component can detect if it has been wrapped in a `<Disabled>` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Consumer`.
+A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Context`.
 
 ```jsx
-function CustomButton() {
+function CustomButton( props ) {
+	const isDisabled = useContext( Disabled.Context );
 	return (
-		<Disabled.Consumer>
-			{ ( isDisabled ) => (
-				<button
-					{ ...this.props }
-					style={ { opacity: isDisabled ? 0.5 : 1 } }
-				/>
-			) }
-		</Disabled.Consumer>
+		<button
+			{ ...props }
+			style={ { opacity: isDisabled ? 0.5 : 1 } }
+		/>
 	);
 }
 ```

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/flyout/test/__snapshots__/index.js.snap

@@ -3,11 +3,11 @@
 exports[`props should render correctly 1`] = `
 .emotion-1 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-1 .components-card-body {
@@ -26,13 +26,13 @@ exports[`props should render correctly 1`] = `
 }
 
 .emotion-5:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-5:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-7 {
@@ -172,7 +172,7 @@ Snapshot Diff:
           tabindex="-1"
         />
 +       <div
-+         class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
++         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
 +         data-wp-c16t="true"
 +         data-wp-component="CardBody"
 +       >

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/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/form-toggle/README.md

@@ -61,7 +61,7 @@ const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );
 
 	<FormToggle
-		checked={ checked }
+		checked={ isChecked }
 		onChange={ () => setChecked( ( state ) => ! state ) }
 	/>
 };

package/src/index.js

@@ -23,6 +23,13 @@ export {
 	useAutocompleteProps as __unstableUseAutocompleteProps,
 } from './autocomplete';
 export { default as BaseControl } from './base-control';
+export {
+	BorderBoxControl as __experimentalBorderBoxControl,
+	hasSplitBorders as __experimentalHasSplitBorders,
+	isDefinedBorder as __experimentalIsDefinedBorder,
+	isEmptyBorder as __experimentalIsEmptyBorder,
+} from './border-box-control';
+export { BorderControl as __experimentalBorderControl } from './border-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
@@ -139,6 +146,7 @@ export { default as ToggleControl } from './toggle-control';
 export {
 	ToggleGroupControl as __experimentalToggleGroupControl,
 	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
+	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
 } from './toggle-group-control';
 export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';