@wordpress/components 19.4.1 → 19.7.0-next.e230fbab09.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/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 import { colord, extend, Colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
@@ -54,7 +54,7 @@ const options = [
 
 const ColorPicker = (
 	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		enableAlpha = false,

package/src/color-picker/hex-input.tsx

@@ -24,10 +24,13 @@ interface HexInputProps {
 }
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
-	const handleValidate = ( value: string ) => {
-		if ( ! colord( '#' + value ).isValid() ) {
-			throw new Error( 'Invalid hex color input' );
-		}
+	const handleChange = ( nextValue: string | undefined ) => {
+		if ( ! nextValue ) return;
+		const hexValue = nextValue.startsWith( '#' )
+			? nextValue
+			: '#' + nextValue;
+
+		onChange( colord( hexValue ) );
 	};
 
 	return (
@@ -43,11 +46,8 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				</Spacer>
 			}
 			value={ color.toHex().slice( 1 ).toUpperCase() }
-			onChange={ ( nextValue ) => {
-				onChange( colord( '#' + nextValue ) );
-			} }
-			onValidate={ handleValidate }
-			maxLength={ enableAlpha ? 8 : 6 }
+			onChange={ handleChange }
+			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
 		/>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref, KeyboardEvent } from 'react';
+import type { ForwardedRef, KeyboardEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -28,13 +28,15 @@ import { useCx } from '../utils/hooks/use-cx';
 
 function ConfirmDialog(
 	props: WordPressComponentProps< OwnProps, 'div', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		isOpen: isOpenProp,
 		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

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -16,9 +16,9 @@ import {
 import { DividerView } from './styles';
 import type { Props } from './types';
 
-function Divider(
+function UnconnectedDivider(
 	props: WordPressComponentProps< Props, 'hr', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );
 
@@ -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/elevation/component.js

@@ -7,7 +7,7 @@ import { useElevation } from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function Elevation( props, forwardedRef ) {
 	const elevationProps = useElevation( props );

package/src/flex/flex/component.js

@@ -8,7 +8,7 @@ import { View } from '../../view';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function Flex( props, forwardedRef ) {
 	const { children, isColumn, ...otherProps } = useFlex( props );

package/src/flex/flex-block/component.js

@@ -7,7 +7,7 @@ import { useFlexBlock } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                     forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
  */
 function FlexBlock( props, forwardedRef ) {
 	const flexBlockProps = useFlexBlock( props );

package/src/flex/flex-item/component.js

@@ -7,7 +7,7 @@ import { useFlexItem } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                    forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
  */
 function FlexItem( props, forwardedRef ) {
 	const flexItemProps = useFlexItem( props );

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 (