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

package/src/confirm-dialog/test/index.js

@@ -3,6 +3,7 @@
  */
 import {
 	render,
+	screen,
 	fireEvent,
 	waitForElementToBeRemoved,
 } from '@testing-library/react';
@@ -34,6 +35,33 @@ describe( 'Confirm', () => {
 					expect( el ).toBeInTheDocument();
 				} );
 			} );
+			it( 'should render correctly with custom button labels', () => {
+				const cancelButtonText = 'No thanks';
+				const confirmButtonText = 'Yes please!';
+				render(
+					<ConfirmDialog
+						onConfirm={ noop }
+						onCancel={ noop }
+						cancelButtonText={ cancelButtonText }
+						confirmButtonText={ confirmButtonText }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const dialog = screen.getByRole( 'dialog' );
+				const elementsTexts = [ confirmButtonText, cancelButtonText ];
+
+				expect( dialog ).toBeInTheDocument();
+				expect(
+					screen.getByText( 'Are you sure?' )
+				).toBeInTheDocument();
+
+				elementsTexts.forEach( ( txt ) => {
+					const el = screen.getByRole( 'button', { name: txt } );
+					expect( el ).toBeInTheDocument();
+				} );
+			} );
 		} );
 
 		describe( 'When uncontrolled', () => {

package/src/confirm-dialog/types.ts

@@ -10,6 +10,8 @@ export type DialogInputEvent =
 type BaseProps = {
 	children: ReactNode;
 	onConfirm: ( event: DialogInputEvent ) => void;
+	confirmButtonText?: string;
+	cancelButtonText?: string;
 };
 
 type ControlledProps = BaseProps & {

package/src/date-time/style.scss

@@ -237,6 +237,10 @@
 	}
 }
 
+.components-datetime__time-field-integer-field {
+	font-family: inherit;
+}
+
 .components-datetime__time-field-hours-input,
 .components-datetime__time-field-minutes-input,
 .components-datetime__time-field-day-input {

package/src/date-time/time.js

@@ -36,12 +36,19 @@ function from12hTo24h( hours, isPm ) {
  * <UpdateOnBlurAsIntegerField>
  * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
  *
- * @param {Object}        props          Component props.
- * @param {string}        props.as       Render the component as specific element tag, defaults to "input".
- * @param {number|string} props.value    The default value of the component which will be parsed to integer.
- * @param {Function}      props.onUpdate Call back when blurred and validated.
+ * @param {Object}        props             Component props.
+ * @param {string}        props.as          Render the component as specific element tag, defaults to "input".
+ * @param {number|string} props.value       The default value of the component which will be parsed to integer.
+ * @param {Function}      props.onUpdate    Call back when blurred and validated.
+ * @param {string}        [props.className]
  */
-function UpdateOnBlurAsIntegerField( { as, value, onUpdate, ...props } ) {
+function UpdateOnBlurAsIntegerField( {
+	as,
+	value,
+	onUpdate,
+	className,
+	...props
+} ) {
 	function handleBlur( event ) {
 		const { target } = event;
 
@@ -70,6 +77,10 @@ function UpdateOnBlurAsIntegerField( { as, value, onUpdate, ...props } ) {
 		key: value,
 		defaultValue: value,
 		onBlur: handleBlur,
+		className: classnames(
+			'components-datetime__time-field-integer-field',
+			className
+		),
 		...props,
 	} );
 }

package/src/dimension-control/test/index.test.js

@@ -132,7 +132,7 @@ describe( 'DimensionControl', () => {
 				.at( 0 )
 				.simulate( 'change', {
 					target: {
-						value: '', // this happens when you select the "default" <option />
+						value: '', // This happens when you select the "default" <option />
 					},
 				} );
 

package/src/disabled/test/index.js

@@ -65,7 +65,7 @@ describe( 'Disabled', () => {
 		</form>
 	);
 
-	// this is needed because TestUtils does not accept a stateless component.
+	// This is needed because TestUtils does not accept a stateless component.
 	class DisabledComponent extends Component {
 		render() {
 			const { children, isDisabled } = this.props;

package/src/divider/component.tsx

@@ -16,7 +16,7 @@ import {
 import { DividerView } from './styles';
 import type { Props } from './types';
 
-function Divider(
+function UnconnectedDivider(
 	props: WordPressComponentProps< Props, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -53,6 +53,6 @@ function Divider(
  * }
  * ```
  */
-const ConnectedDivider = contextConnect( Divider, 'Divider' );
+export const Divider = contextConnect( UnconnectedDivider, 'Divider' );
 
-export default ConnectedDivider;
+export default Divider;

package/src/divider/stories/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../../text';
+import { Divider } from '..';
+
+const meta: ComponentMeta< typeof Divider > = {
+	component: Divider,
+	title: 'Components (Experimental)/Divider',
+	argTypes: {
+		margin: {
+			control: { type: 'number' },
+		},
+		marginStart: {
+			control: { type: 'number' },
+		},
+		marginEnd: {
+			control: { type: 'number' },
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const HorizontalTemplate: ComponentStory< typeof Divider > = ( args ) => (
+	<div>
+		<Text>Some text before the divider</Text>
+		<Divider { ...args } />
+		<Text>Some text after the divider</Text>
+	</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( {} );
+Horizontal.args = {
+	margin: 2,
+};
+
+export const Vertical: ComponentStory< typeof Divider > = VerticalTemplate.bind(
+	{}
+);
+Vertical.args = {
+	...Horizontal.args,
+	orientation: 'vertical',
+};

package/src/divider/types.ts

@@ -24,4 +24,6 @@ export interface OwnProps {
 	marginEnd?: SpaceInput;
 }
 
-export interface Props extends Omit< SeparatorProps, 'children' >, OwnProps {}
+export interface Props
+	extends Omit< SeparatorProps, 'children' | 'unstable_system' >,
+		OwnProps {}

package/src/draggable/index.js

@@ -143,7 +143,7 @@ export default function Draggable( {
 			y = elementTopOffset - clonePadding;
 			cloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;
 
-			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze
+			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
 			Array.from(
 				clone.querySelectorAll( 'iframe' )
 			).forEach( ( child ) => child.parentNode.removeChild( child ) );
@@ -162,7 +162,7 @@ export default function Draggable( {
 		 * @param {import('react').DragEvent<Element>} e
 		 */
 		function over( e ) {
-			//Skip doing any work if mouse has not moved.
+			// Skip doing any work if mouse has not moved.
 			if ( cursorLeft === e.clientX && cursorTop === e.clientY ) {
 				return;
 			}
@@ -199,7 +199,7 @@ export default function Draggable( {
 		}
 
 		cleanup.current = () => {
-			// Remove drag clone
+			// Remove drag clone.
 			if ( cloneWrapper && cloneWrapper.parentNode ) {
 				cloneWrapper.parentNode.removeChild( cloneWrapper );
 			}

package/src/draggable/stories/index.js

@@ -30,7 +30,7 @@ const Box = ( props ) => {
 const DraggalbeExample = () => {
 	const [ isDragging, setDragging ] = useState( false );
 
-	// Allow for the use of ID in the example
+	// Allow for the use of ID in the example.
 	/* eslint-disable no-restricted-syntax */
 	return (
 		<div>

package/src/flyout/flyout/README.md

@@ -9,7 +9,7 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components';
+import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (

package/src/flyout/test/index.js

@@ -44,7 +44,7 @@ describe( 'props', () => {
 
 		const flyouts = screen.getAllByRole( 'dialog' );
 		const trigger = screen.getByText( invisibleFlyoutTriggerContent );
-		// assert only the base flyout rendered
+		// Assert only the base flyout rendered.
 		expect( flyouts ).toHaveLength( 1 );
 		expect( flyouts[ 0 ].id ).toBe( baseFlyoutId );
 		expect( trigger ).not.toBeUndefined();

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

@@ -27,7 +27,7 @@ import { isVideoType } from './utils';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
-const FOCAL_POINT_UNITS = [ { default: '50', label: '%', value: '%' } ];
+const FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];
 
 function FocalPointPicker( props ) {
 	const { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;
@@ -53,7 +53,7 @@ function FocalPointPicker( props ) {
 		} );
 	}, [] );
 
-	// Animated coordinates for drag handle
+	// Animated coordinates for drag handle.
 	const pan = useRef( new Animated.ValueXY() ).current;
 
 	/**
@@ -69,7 +69,7 @@ function FocalPointPicker( props ) {
 		}
 	}, [ focalPoint, containerSize ] );
 
-	// Pan responder to manage drag handle interactivity
+	// Pan responder to manage drag handle interactivity.
 	const panResponder = useMemo(
 		() =>
 			PanResponder.create( {
@@ -88,17 +88,17 @@ function FocalPointPicker( props ) {
 					} = event.nativeEvent;
 					locationPageOffsetX = pageX - x;
 					locationPageOffsetY = pageY - y;
-					pan.setValue( { x, y } ); // Set cursor to tap location
-					pan.extractOffset(); // Set offset to current value
+					pan.setValue( { x, y } ); // Set cursor to tap location.
+					pan.extractOffset(); // Set offset to current value.
 				},
-				// Move cursor to match delta drag
+				// Move cursor to match delta drag.
 				onPanResponderMove: Animated.event(
 					[ null, { dx: pan.x, dy: pan.y } ],
 					{ useNativeDriver: false }
 				),
 				onPanResponderRelease: ( event ) => {
 					shouldEnableBottomSheetScroll( true );
-					pan.flattenOffset(); // Flatten offset into value
+					pan.flattenOffset(); // Flatten offset into value.
 					const { pageX, pageY } = event.nativeEvent;
 					// Ideally, x and y below are merely locationX and locationY from the
 					// nativeEvent. However, we are required to compute these relative

package/src/focal-point-picker/tooltip/index.native.js

@@ -79,7 +79,7 @@ function Label( { align, text, xOffset, yOffset } ) {
 		} ).start();
 	};
 
-	// Transforms rely upon onLayout to enable custom offsets additions
+	// Transforms rely upon onLayout to enable custom offsets additions.
 	let tooltipTransforms;
 	if ( dimensions ) {
 		tooltipTransforms = [

package/src/font-size-picker/README.md

@@ -100,8 +100,7 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 
 ### withReset
 
-If `true`, a reset button will be displayed alongside the predefined and custom
-font size fields.
+If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
 
 -   Type: `Boolean`
 -   Required: no

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

@@ -231,7 +231,7 @@ function FontSizePicker(
 											);
 										}
 									} }
-									units={ hasUnits ? units : false }
+									units={ hasUnits ? units : [] }
 								/>
 							</FlexItem>
 							{ withReset && (

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { number, object, boolean } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,14 +11,30 @@ import FontSizePicker from '../';
 export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
+	argTypes: {
+		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
+		fallbackFontSize: {
+			description:
+				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
+		},
+		withReset: {
+			description:
+				'If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.',
+			control: { type: 'boolean' },
+			table: {
+				type: 'boolean',
+				defaultValue: { summary: true },
+			},
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
 const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue || 16 );
-
+	const [ fontSize, setFontSize ] = useState( initialValue );
 	return (
 		<FontSizePicker
 			{ ...props }
@@ -33,57 +44,25 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
 	);
 };
 
-export const _default = () => {
-	const fontSizes = object( 'Font Sizes', [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	] );
-	return <FontSizePickerWithState fontSizes={ fontSizes } />;
-};
-
-export const withSlider = () => {
-	const fontSizes = object( 'Font Sizes', [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	] );
-	const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 );
+const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
 	return (
-		<FontSizePickerWithState
-			fontSizes={ fontSizes }
-			fallbackFontSize={ fallbackFontSize }
-			withSlider
-		/>
+		<>
+			<h2>Fewer font sizes</h2>
+			<FontSizePickerWithState
+				{ ...props }
+				fontSizes={ fontSizes.slice( 0, 4 ) }
+			/>
+
+			<h2>More font sizes</h2>
+			<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
+		</>
 	);
 };
 
-export const withoutCustomSizes = () => {
-	const fontSizes = object( 'Font Sizes', [
+export const Default = FontSizePickerWithState.bind( {} );
+Default.args = {
+	disableCustomFontSizes: false,
+	fontSizes: [
 		{
 			name: 'Small',
 			slug: 'small',
@@ -99,17 +78,36 @@ export const withoutCustomSizes = () => {
 			slug: 'big',
 			size: 26,
 		},
-	] );
-	return (
-		<FontSizePickerWithState
-			fontSizes={ fontSizes }
-			disableCustomFontSizes
-		/>
-	);
+	],
+	initialValue: 16,
+	withSlider: false,
+};
+
+export const WithSlider = FontSizePickerWithState.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	fallbackFontSize: 16,
+	initialValue: undefined,
+	withSlider: true,
 };
 
-export const differentControlBySize = () => {
-	const options = [
+/**
+ * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
+ * only be able to pick one of the predefined sizes passed in `fontSizes`.
+ */
+export const WithCustomSizesDisabled = FontSizePickerWithState.bind( {} );
+WithCustomSizesDisabled.args = {
+	...Default.args,
+	disableCustomFontSizes: true,
+};
+
+/**
+ * When there are more than 5 font size options, the UI is no longer a toggle group.
+ */
+export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
+WithMoreFontSizes.args = {
+	...Default.args,
+	fontSizes: [
 		{
 			name: 'Tiny',
 			slug: 'tiny',
@@ -140,29 +138,36 @@ export const differentControlBySize = () => {
 			slug: 'huge',
 			size: 36,
 		},
-	];
-	const optionsWithUnits = options.map( ( option ) => ( {
+	],
+	initialValue: 8,
+};
+
+/**
+ * When units like `px` are specified explicitly, it will be shown as a label hint.
+ */
+export const WithUnits = TwoFontSizePickersWithState.bind( {} );
+WithUnits.args = {
+	...WithMoreFontSizes.args,
+	fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
 		...option,
 		size: `${ option.size }px`,
-	} ) );
-	const showMoreFontSizes = boolean( 'Add more font sizes', false );
-	const addUnitsToSizes = boolean( 'Add units to font sizes', false );
-	const _options = addUnitsToSizes ? optionsWithUnits : options;
-	const fontSizes = _options.slice(
-		0,
-		showMoreFontSizes ? _options.length : 4
-	);
-	return (
-		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
-	);
+	} ) ),
+	initialValue: '8px',
 };
 
-export const withComplexCSSValues = () => {
-	const options = [
+/**
+ * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
+ * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
+ */
+export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
+WithComplexCSSValues.args = {
+	...Default.args,
+	fontSizes: [
 		{
 			name: 'Small',
 			slug: 'small',
-			size: '0.65rem',
+			// Adding just one complex css value is enough
+			size: 'clamp(1.75rem, 3vw, 2.25rem)',
 		},
 		{
 			name: 'Medium',
@@ -189,32 +194,6 @@ export const withComplexCSSValues = () => {
 			slug: 'huge',
 			size: '2.8rem',
 		},
-	];
-	const showMoreFontSizes = boolean( 'Add more font sizes', false );
-	const addComplexCssValues = boolean(
-		'Add some complex css values(calc, var, etc..)',
-		true
-	);
-
-	const _options = options.map( ( option, index ) => {
-		const _option = { ...option };
-		// Adding just one complex css value is enough (first element);
-		if ( addComplexCssValues && ! index ) {
-			_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
-		}
-		return _option;
-	} );
-
-	const fontSizes = _options.slice(
-		0,
-		showMoreFontSizes ? _options.length : 5
-	);
-	return (
-		<div style={ { maxWidth: '248px' } }>
-			<FontSizePickerWithState
-				fontSizes={ fontSizes }
-				initialValue={ '1.125rem' }
-			/>
-		</div>
-	);
+	],
+	initialValue: '1.125rem',
 };

package/src/form-token-field/index.js

@@ -191,7 +191,7 @@ class FormTokenField extends Component {
 	onKeyPress( event ) {
 		let preventDefault = false;
 		switch ( event.charCode ) {
-			case 44: // comma
+			case 44: // Comma.
 				preventDefault = this.handleCommaKey();
 				break;
 			default:
@@ -294,7 +294,7 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: true,
 		} ) );
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleDownArrowKey() {
@@ -311,7 +311,7 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: true,
 		} ) );
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleEscapeKey( event ) {
@@ -321,7 +321,7 @@ class FormTokenField extends Component {
 			selectedSuggestionIndex: -1,
 			selectedSuggestionScroll: false,
 		} );
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleCommaKey() {
@@ -329,7 +329,7 @@ class FormTokenField extends Component {
 			this.addNewToken( this.state.incompleteTokenValue );
 		}
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	moveInputToIndex( index ) {
@@ -366,7 +366,7 @@ class FormTokenField extends Component {
 
 		if ( index < this.props.value.length ) {
 			this.deleteToken( this.props.value[ index ] );
-			// update input offset since it's the offset from the last token
+			// Update input offset since it's the offset from the last token.
 			this.moveInputToIndex( index );
 		}
 	}

package/src/form-token-field/style.scss

@@ -22,6 +22,7 @@
 	input[type="text"].components-form-token-field__input {
 		display: inline-block;
 		flex: 1;
+		font-family: inherit;
 		font-size: 16px;
 		width: 100%;
 		max-width: 100%;

package/src/form-token-field/suggestions-list.js

@@ -14,7 +14,7 @@ import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
 const emptyList = Object.freeze( [] );
 
 const handleMouseDown = ( e ) => {
-	// By preventing default here, we will not lose focus of <input> when clicking a suggestion
+	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
 };
 
@@ -34,7 +34,7 @@ function SuggestionsList( {
 	const listRef = useRefEffect(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
-			// when already expanded
+			// when already expanded.
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&