@wordpress/components 19.5.0 → 19.6.0

package/src/base-field/hook.js

@@ -31,7 +31,7 @@ export function useBaseField( props ) {
 		hasError = false,
 		isInline = false,
 		isSubtle = false,
-		// extract these because useFlex doesn't accept it
+		// Extract these because useFlex doesn't accept it.
 		defaultValue,
 		disabled,
 		...flexProps

package/src/box-control/icon.js

@@ -34,7 +34,7 @@ export default function BoxControlIcon( {
 	const bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );
 	const left = hasSide( 'left' ) || hasSide( 'horizontal' );
 
-	// Simulates SVG Icon scaling
+	// Simulates SVG Icon scaling.
 	const scale = size / BASE_ICON_SIZE;
 
 	return (

package/src/box-control/index.js

@@ -27,7 +27,7 @@ import {
 	Header,
 	HeaderControlWrapper,
 } from './styles/box-control-styles';
-import { parseUnit } from '../unit-control/utils';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
 	DEFAULT_VISUALIZER_VALUES,
@@ -79,10 +79,10 @@ export default function BoxControl( {
 	// only values from being saved while maintaining preexisting unit selection
 	// behaviour. Filtering CSS only values prevents invalid style values.
 	const [ selectedUnits, setSelectedUnits ] = useState( {
-		top: parseUnit( valuesProp?.top )[ 1 ],
-		right: parseUnit( valuesProp?.right )[ 1 ],
-		bottom: parseUnit( valuesProp?.bottom )[ 1 ],
-		left: parseUnit( valuesProp?.left )[ 1 ],
+		top: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],
+		right: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],
+		bottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],
+		left: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],
 	} );
 
 	const id = useUniqueId( idProp );

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

@@ -99,7 +99,7 @@ describe( 'BoxControl', () => {
 							if ( next.top ) {
 								setState( next );
 							} else {
-								// This reverts it to being uncontrolled
+								// This reverts it to being uncontrolled.
 								setState( undefined );
 							}
 						} }
@@ -124,6 +124,26 @@ describe( 'BoxControl', () => {
 			expect( input.value ).toBe( '' );
 			expect( unitSelect.value ).toBe( 'px' );
 		} );
+
+		it( 'should persist cleared value when focus changes', () => {
+			render( <BoxControl /> );
+			const input = screen.getByLabelText( 'Box Control', {
+				selector: 'input',
+			} );
+			const unitSelect = screen.getByLabelText( 'Select unit' );
+
+			input.focus();
+			fireEvent.change( input, { target: { value: '100%' } } );
+			fireEvent.keyDown( input, { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '100' );
+			expect( unitSelect.value ).toBe( '%' );
+
+			fireEvent.change( input, { target: { value: '' } } );
+			fireEvent.blur( input );
+
+			expect( input.value ).toBe( '' );
+		} );
 	} );
 
 	describe( 'Unlinked Sides', () => {
@@ -195,15 +215,15 @@ describe( 'BoxControl', () => {
 
 	describe( 'Unit selections', () => {
 		it( 'should update unlinked controls unit selection based on all input control', () => {
-			// Render control
+			// Render control.
 			render( <BoxControl /> );
 
-			// Make unit selection on all input control
+			// Make unit selection on all input control.
 			const allUnitSelect = screen.getByLabelText( 'Select unit' );
 			allUnitSelect.focus();
 			fireEvent.change( allUnitSelect, { target: { value: 'em' } } );
 
-			// Unlink the controls
+			// Unlink the controls.
 			const unlink = screen.getByLabelText( /Unlink Sides/ );
 			fireEvent.click( unlink );
 
@@ -213,15 +233,15 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should use individual side attribute unit when available', () => {
-			// Render control
+			// Render control.
 			const { rerender } = render( <BoxControl /> );
 
-			// Make unit selection on all input control
+			// Make unit selection on all input control.
 			const allUnitSelect = screen.getByLabelText( 'Select unit' );
 			allUnitSelect.focus();
 			fireEvent.change( allUnitSelect, { target: { value: 'vw' } } );
 
-			// Unlink the controls
+			// Unlink the controls.
 			const unlink = screen.getByLabelText( /Unlink Sides/ );
 			fireEvent.click( unlink );
 

package/src/box-control/utils.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { parseUnit } from '../unit-control/utils';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 
 export const LABELS = {
 	all: __( 'All' ),
@@ -25,10 +25,10 @@ export const LABELS = {
 };
 
 export const DEFAULT_VALUES = {
-	top: null,
-	right: null,
-	bottom: null,
-	left: null,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
 };
 
 export const DEFAULT_VISUALIZER_VALUES = {
@@ -67,9 +67,13 @@ function mode( arr ) {
  */
 export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	const sides = normalizeSides( availableSides );
-	const parsedValues = sides.map( ( side ) => parseUnit( values[ side ] ) );
-	const allValues = parsedValues.map( ( value ) => value[ 0 ] );
-	const allUnits = parsedValues.map( ( value ) => value[ 1 ] );
+	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
+		parseQuantityAndUnitFromRawValue( values[ side ] )
+	);
+	const allValues = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 0 ] ?? ''
+	);
+	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
 
 	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
 		? allValues[ 0 ]
@@ -85,7 +89,7 @@ export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	 * isNumber() is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
-	const allValue = isNumber( value ) ? `${ value }${ unit }` : null;
+	const allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;
 
 	return allValue;
 }

package/src/button/index.js

@@ -133,16 +133,16 @@ export function Button( props, ref ) {
 	// Should show the tooltip if...
 	const shouldShowTooltip =
 		! trulyDisabled &&
-		// an explicit tooltip is passed or...
+		// An explicit tooltip is passed or...
 		( ( showTooltip && label ) ||
-			// there's a shortcut or...
+			// There's a shortcut or...
 			shortcut ||
-			// there's a label and...
+			// There's a label and...
 			( !! label &&
-				// the children are empty and...
+				// The children are empty and...
 				( ! children ||
 					( isArray( children ) && ! children.length ) ) &&
-				// the tooltip is not explicitly disabled.
+				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
 	const descriptionId = describedBy ? instanceId : null;

package/src/button/index.native.js

@@ -55,7 +55,7 @@ const styles = StyleSheet.create( {
 		backgroundColor: '#2e4453',
 	},
 	subscriptInactive: {
-		color: '#7b9ab1', // $toolbar-button
+		color: '#7b9ab1', // $toolbar-button.
 		fontWeight: 'bold',
 		fontSize: 13,
 		alignSelf: 'flex-end',
@@ -63,7 +63,7 @@ const styles = StyleSheet.create( {
 		marginBottom,
 	},
 	subscriptInactiveDark: {
-		color: '#a7aaad', // $gray_20
+		color: '#a7aaad', // $gray_20.
 	},
 	subscriptActive: {
 		color: 'white',
@@ -144,16 +144,16 @@ export function Button( props ) {
 	// Should show the tooltip if...
 	const shouldShowTooltip =
 		! isDisabled &&
-		// an explicit tooltip is passed or...
+		// An explicit tooltip is passed or...
 		( ( showTooltip && label ) ||
-			// there's a shortcut or...
+			// There's a shortcut or...
 			shortcut ||
-			// there's a label and...
+			// There's a label and...
 			( !! label &&
-				// the children are empty and...
+				// The children are empty and...
 				( ! children ||
 					( isArray( children ) && ! children.length ) ) &&
-				// the tooltip is not explicitly disabled.
+				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
 	const newIcon = icon

package/src/button/style.scss

@@ -1,6 +1,7 @@
 .components-button {
 	display: inline-flex;
 	text-decoration: none;
+	font-family: inherit;
 	font-weight: normal;
 	font-size: $default-font-size;
 	margin: 0;

package/src/color-palette/style.scss

@@ -5,6 +5,7 @@
 	display: block;
 	border-radius: $radius-block-ui;
 	height: $grid-unit-60;
+	font-family: inherit;
 	text-align: right;
 	width: 100%;
 	background-image:

package/src/color-picker/color-display.tsx

@@ -139,7 +139,7 @@ export const ColorDisplay = ( {
 		}
 	);
 	useEffect( () => {
-		// clear copyTimer on component unmount.
+		// Clear copyTimer on component unmount.
 		return () => {
 			if ( copyTimer.current ) {
 				clearTimeout( copyTimer.current );

package/src/color-picker/styles.ts

@@ -50,7 +50,7 @@ const inputHeightStyle = `
 	height: 40px;
 }`;
 
-// Make the Hue circle picker not go out of the bar
+// Make the Hue circle picker not go out of the bar.
 const interactiveHueStyles = `
 .react-colorful__interactive {
 	width: calc( 100% - ${ space( 2 ) } );

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

@@ -131,7 +131,7 @@ describe( 'ColorPicker', () => {
 			h: 125,
 			s: 0.2,
 			l: 0.5,
-			// add alpha to prove it's ignored
+			// Add alpha to prove it's ignored.
 			a: 0.5,
 		};
 

package/src/combobox-control/index.js

@@ -181,7 +181,7 @@ function ComboboxControl( {
 		}
 	}, [ matchingSuggestions, selectedSuggestion ] );
 
-	// Announcements
+	// Announcements.
 	useEffect( () => {
 		const hasMatchingSuggestions = matchingSuggestions.length > 0;
 		if ( isExpanded ) {

package/src/combobox-control/style.scss

@@ -6,6 +6,7 @@ input.components-combobox-control__input[type="text"] {
 	width: 100%;
 	border: none;
 	box-shadow: none;
+	font-family: inherit;
 	font-size: 16px;
 	padding: 2px;
 	margin: 0;

package/src/confirm-dialog/README.md

@@ -15,61 +15,58 @@ The dialog is confirmed by clicking the _confirm_ button or by pressing the `Ent
 ### Uncontrolled mode
 
 Allows the component to be used standalone, just by declaring it as part of another React's component render method:
-  * It will be automatically open (displayed) upon mounting;
-  * It will be automatically closed when when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
-  * `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
+
+-   It will be automatically open (displayed) upon mounting;
+-   It will be automatically closed when when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
+-   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
 
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
 
 ```jsx
-import {
-  __experimentalConfirmDialog as ConfirmDialog
-} from '@wordpress/components';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 
 function Example() {
-  return (
-    <ConfirmDialog onConfirm={ () => console.debug(' Confirmed! ') }>
-      Are you sure? <strong>This action cannot be undone!</strong>
-    </ConfirmDialog>
-  );
+	return (
+		<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>
+			Are you sure? <strong>This action cannot be undone!</strong>
+		</ConfirmDialog>
+	);
 }
 ```
 
 ### Controlled mode
 
 Let the parent component control when the dialog is open/closed. It's activated when a boolean value is passed to `isOpen`:
-  * It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;
-  * Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;
-  * You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
 
+-   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;
+-   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;
+-   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
 
 ```jsx
-import {
-  __experimentalConfirmDialog as ConfirmDialog
-} from '@wordpress/components';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 
 function Example() {
-  const [ isOpen, setIsOpen ] = useState( true );
-
-  const handleConfirm = () => {
-    console.debug( 'Confirmed!' );
-    setIsOpen( false );
-  }
-
-  const handleCancel = () => {
-    console.debug( 'Cancelled!' );
-    setIsOpen( false );
-  }
-
-  return (
-    <ConfirmDialog
-      isOpen={ isOpen }
-      onConfirm={ handleConfirm }
-      onCancel={ handleCancel }
-    >
-      Are you sure? <strong>This action cannot be undone!</strong>
-    </ConfirmDialog>
-  );
+	const [ isOpen, setIsOpen ] = useState( true );
+
+	const handleConfirm = () => {
+		console.debug( 'Confirmed!' );
+		setIsOpen( false );
+	};
+
+	const handleCancel = () => {
+		console.debug( 'Cancelled!' );
+		setIsOpen( false );
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			onConfirm={ handleConfirm }
+			onCancel={ handleCancel }
+		>
+			Are you sure? <strong>This action cannot be undone!</strong>
+		</ConfirmDialog>
+	);
 }
 ```
 
@@ -82,47 +79,61 @@ Multiple `ConfirmDialog's is an edge case that's currently not officially suppor
 ```ts
 type DialogInputEvent =
 	| KeyboardEvent< HTMLDivElement >
-	| MouseEvent< HTMLButtonElement >
+	| MouseEvent< HTMLButtonElement >;
 ```
 
 ## Props
 
 ### `title`: `string`
 
-- Required: No
+-   Required: No
 
 An optional `title` for the dialog. Setting a title will render it in a title bar at the top of the dialog, making it a bit taller. The bar will also include an `x` close button at the top-right corner.
 
 ### `children`: `React.ReactNode`
 
-- Required: Yes
+-   Required: Yes
 
 The actual message for the dialog. It's passed as children and any valid `ReactNode` is accepted:
 
 ```jsx
 <ConfirmDialog>
- Are you sure? <strong>This action cannot be undone!</strong>
+	Are you sure? <strong>This action cannot be undone!</strong>
 </ConfirmDialog>
 ```
 
 ### `isOpen`: `boolean`
 
-- Required: No
+-   Required: No
 
 Defines if the dialog is open (displayed) or closed (not rendered/displayed). It also implicitly toggles the controlled mode if set or the uncontrolled mode if it's not set.
 
 ### `onConfirm`: `( event: DialogInputEvent ) => void`
 
-- Required: Yes
+-   Required: Yes
 
 The callback that's called when the user confirms. A confirmation can happen when the `OK` button is clicked or when `Enter` is pressed.
 
 ### `onCancel`: `( event: DialogInputEvent ) => void`
 
-- Required: Only if `isOpen` is not set
+-   Required: Only if `isOpen` is not set
 
 The callback that's called when the user cancels. A cancellation can happen when the `Cancel` button is clicked, when the `ESC` key is pressed, or when a click outside of the dialog focus is detected (i.e. in the overlay).
 
 It's not required if `isOpen` is not set (uncontrolled mode), as the component will take care of closing itself, but you can still pass a callback if something must be done upon cancelling (the component will still close itself in this case).
 
 If `isOpen` is set (controlled mode), then it's required, and you need to set the state that defines `isOpen` to `false` as part of this callback if you want the dialog to close when the user cancels.
+
+### `confirmButtonText`: `string`
+
+-   Required: No
+-   Default: "OK"
+
+The optional custom text to display as the confirmation button's label
+
+### `cancelButtonText`: `string`
+
+-   Required: No
+-   Default: "Cancel"
+
+The optional custom text to display as the cancelation button's label

package/src/confirm-dialog/component.tsx

@@ -35,6 +35,8 @@ function ConfirmDialog(
 		onConfirm,
 		onCancel,
 		children,
+		confirmButtonText,
+		cancelButtonText,
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
@@ -75,8 +77,8 @@ function ConfirmDialog(
 		[ handleEvent, onConfirm ]
 	);
 
-	const cancelLabel = __( 'Cancel' );
-	const confirmLabel = __( 'OK' );
+	const cancelLabel = cancelButtonText ?? __( 'Cancel' );
+	const confirmLabel = confirmButtonText ?? __( 'OK' );
 
 	return (
 		<>

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

@@ -25,6 +25,8 @@ export default {
 
 const daText = () =>
 	text( 'message', 'Would you like to privately publish the post now?' );
+const daCancelText = () => text( 'cancel button', 'No thanks' );
+const daConfirmText = () => text( 'confirm button', 'Yes please!' );
 
 // Simplest usage: just declare the component with the required `onConfirm` prop.
 export const _default = () => {
@@ -40,6 +42,23 @@ export const _default = () => {
 	);
 };
 
+export const WithCustomButtonLabels = () => {
+	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
+
+	return (
+		<>
+			<ConfirmDialog
+				onConfirm={ () => setConfirmVal( 'Confirmed!' ) }
+				cancelButtonText={ daCancelText() }
+				confirmButtonText={ daConfirmText() }
+			>
+				{ daText() }
+			</ConfirmDialog>
+			<Heading level={ 1 }>{ confirmVal }</Heading>
+		</>
+	);
+};
+
 export const WithJSXMessage = () => {
 	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
 

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;