@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/color-indicator/style.scss

@@ -1,11 +1,8 @@
 .component-color-indicator {
-	width: 25px;
-	height: 16px;
-	margin-left: 0.8rem;
-	border: 1px solid #dadada;
+	width: $grid-unit-50 * 0.5;
+	height: $grid-unit-50 * 0.5;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	border-radius: 50%;
 	display: inline-block;
-
-	& + & {
-		margin-left: 0.5rem;
-	}
+	padding: 0;
 }

package/src/color-palette/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

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

@@ -219,6 +219,7 @@ function ColorPalette( {
 			onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
 			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
 			ref={ scrollViewRef }
+			testID="color-palette"
 		>
 			{ shouldShowCustomIndicator && (
 				<View
@@ -266,6 +267,7 @@ function ColorPalette( {
 								selected: isSelected( color ),
 							} }
 							accessibilityHint={ color }
+							testID={ color }
 						>
 							<Animated.View
 								style={ {

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

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

@@ -173,6 +173,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       data-wp-component="VStack"
       isColumn={true}
     >
+      <Noop />
       <div
         className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
         data-wp-c16t={true}
@@ -390,7 +391,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                           fill="#000"
                           focusable={false}
                           height={24}
-                          role="img"
                           viewBox="0 0 24 24"
                           width={24}
                           xmlns="http://www.w3.org/2000/svg"

package/src/color-picker/README.md

@@ -5,7 +5,7 @@
 ## Usage
 
 ```jsx
-import { ColorPicker } from '@wordpress/components/ui';
+import { ColorPicker } from '@wordpress/components';
 
 function Example() {
 	const [color, setColor] = useState();

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,7 @@ import { Flex, FlexItem } from '../flex';
 import { Tooltip } from '../ui/tooltip';
 import type { ColorType } from './types';
 import { space } from '../ui/utils/space';
+import { COLORS } from '../utils/colors-values';
 
 interface ColorDisplayProps {
 	color: Colord;
@@ -41,7 +42,7 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
 		{ values.map( ( [ value, abbreviation ] ) => {
 			return (
 				<FlexItem key={ abbreviation } isBlock display="flex">
-					<Text color="blue">{ abbreviation }</Text>
+					<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>
 					<Text>{ value }</Text>
 				</FlexItem>
 			);
@@ -84,7 +85,7 @@ const HexDisplay = ( { color }: DisplayProps ) => {
 	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
 	return (
 		<FlexItem>
-			<Text color="blue">#</Text>
+			<Text color={ COLORS.ui.theme }>#</Text>
 			<Text>{ colorWithoutHash }</Text>
 		</FlexItem>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * Internal dependencies

package/src/color-picker/component.tsx

@@ -1,15 +1,14 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import { Ref, useCallback } from 'react';
+import type { Ref } from 'react';
 import { colord, extend, Colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { useCallback, useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -74,7 +73,7 @@ const ColorPicker = (
 	} );
 
 	const safeColordColor = useMemo( () => {
-		return colord( color );
+		return colord( color || '' );
 	}, [ color ] );
 
 	const debouncedSetColor = useDebounce( setColor );

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

@@ -15,6 +15,7 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
+import { COLORS } from '../utils/colors-values';
 
 interface HexInputProps {
 	color: Colord;
@@ -35,7 +36,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				<Spacer
 					as={ Text }
 					marginLeft={ space( 3.5 ) }
-					color="blue"
+					color={ COLORS.ui.theme }
 					lineHeight={ 1 }
 				>
 					#

package/src/color-picker/input-with-slider.tsx

@@ -6,6 +6,7 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
+import { COLORS } from '../utils/colors-values';
 
 interface InputWithSliderProps {
 	min: number;
@@ -37,7 +38,7 @@ export const InputWithSlider = ( {
 					<Spacer
 						as={ Text }
 						paddingLeft={ space( 3.5 ) }
-						color="blue"
+						color={ COLORS.ui.theme }
 						lineHeight={ 1 }
 					>
 						{ abbreviation }

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

@@ -20,7 +20,7 @@ export default {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/color-picker/use-deprecated-props.ts

@@ -10,7 +10,6 @@ import {
 	RgbColor,
 	RgbaColor,
 } from 'colord';
-// eslint-disable-next-line no-restricted-imports
 import type { ComponentProps } from 'react';
 import memoize from 'memize';
 
@@ -84,6 +83,8 @@ function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
 	if ( props.color.hex ) {
 		return props.color.hex;
 	}
+
+	return undefined;
 }
 
 const transformColorStringToLegacyColor = memoize(

package/src/combobox-control/README.md

@@ -21,7 +21,7 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
  * WordPress dependencies
  */
 import { ComboboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 const options = [
 	{
@@ -51,7 +51,7 @@ function MyComboboxControl() {
 			value={ fontSize }
 			onChange={ setFontSize }
 			options={ filteredOptions }
-			onInputChange={ ( inputValue ) =>
+			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
 					options.filter( ( option ) =>
 						option.label

package/src/combobox-control/stories/index.js

@@ -266,7 +266,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl() {
+function CountryCodeComboboxControl( { allowReset } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -276,9 +276,13 @@ function CountryCodeComboboxControl() {
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
+				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = () => <CountryCodeComboboxControl />;
+export const _default = CountryCodeComboboxControl.bind( {} );
+_default.args = {
+	allowReset: false,
+};

package/src/combobox-control/style.scss

@@ -40,7 +40,7 @@ input.components-combobox-control__input[type="text"] {
 
 .components-combobox-control__reset.components-button {
 	display: flex;
-	height: $grid-unit-30;
-	min-width: $grid-unit-30;
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
 	padding: 0;
 }

package/src/confirm-dialog/README.md

@@ -0,0 +1,128 @@
+# `ConfirmDialog`
+
+<div class="callout callout-alert">
+This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md] and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+
+The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
+
+## Usage
+
+`ConfirmDialog` has two main implicit modes: controlled and uncontrolled.
+
+### 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.
+
+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';
+
+function Example() {
+  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.
+
+
+```jsx
+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>
+  );
+}
+```
+
+### Unsupported: Multiple instances
+
+Multiple `ConfirmDialog's is an edge case that's currently not officially supported by this component. At the moment, new instances will end up closing the last instance due to the way the `Modal` is implemented.
+
+## Custom Types
+
+```ts
+type DialogInputEvent =
+	| KeyboardEvent< HTMLDivElement >
+	| MouseEvent< HTMLButtonElement >
+```
+
+## Props
+
+### `title`: `string`
+
+- 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
+
+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>
+</ConfirmDialog>
+```
+
+### `isOpen`: `boolean`
+
+- 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
+
+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
+
+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.

package/src/confirm-dialog/component.tsx

@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import type { Ref, KeyboardEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Modal from '../modal';
+import type { OwnProps, DialogInputEvent } from './types';
+import {
+	useContextSystem,
+	contextConnect,
+	WordPressComponentProps,
+} from '../ui/context';
+import { Flex } from '../flex';
+import Button from '../button';
+import { Text } from '../text';
+import { VStack } from '../v-stack';
+import * as styles from './styles';
+import { useCx } from '../utils/hooks/use-cx';
+
+function ConfirmDialog(
+	props: WordPressComponentProps< OwnProps, 'div', false >,
+	forwardedRef: Ref< any >
+) {
+	const {
+		isOpen: isOpenProp,
+		onConfirm,
+		onCancel,
+		children,
+		...otherProps
+	} = useContextSystem( props, 'ConfirmDialog' );
+
+	const cx = useCx();
+	const wrapperClassName = cx( styles.wrapper );
+
+	const [ isOpen, setIsOpen ] = useState< boolean >();
+	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
+
+	useEffect( () => {
+		// We only allow the dialog to close itself if `isOpenProp` is *not* set.
+		// If `isOpenProp` is set, then it (probably) means it's controlled by a
+		// parent component. In that case, `shouldSelfClose` might do more harm than
+		// good, so we disable it.
+		const isIsOpenSet = typeof isOpenProp !== 'undefined';
+		setIsOpen( isIsOpenSet ? isOpenProp : true );
+		setShouldSelfClose( ! isIsOpenSet );
+	}, [ isOpenProp ] );
+
+	const handleEvent = useCallback(
+		( callback?: ( event: DialogInputEvent ) => void ) => (
+			event: DialogInputEvent
+		) => {
+			callback?.( event );
+			if ( shouldSelfClose ) {
+				setIsOpen( false );
+			}
+		},
+		[ shouldSelfClose, setIsOpen ]
+	);
+
+	const handleEnter = useCallback(
+		( event: KeyboardEvent< HTMLDivElement > ) => {
+			if ( event.key === 'Enter' ) {
+				handleEvent( onConfirm )( event );
+			}
+		},
+		[ handleEvent, onConfirm ]
+	);
+
+	const cancelLabel = __( 'Cancel' );
+	const confirmLabel = __( 'OK' );
+
+	return (
+		<>
+			{ isOpen && (
+				<Modal
+					onRequestClose={ handleEvent( onCancel ) }
+					onKeyDown={ handleEnter }
+					closeButtonLabel={ cancelLabel }
+					isDismissible={ true }
+					ref={ forwardedRef }
+					overlayClassName={ wrapperClassName }
+					__experimentalHideHeader
+					{ ...otherProps }
+				>
+					<VStack spacing={ 8 }>
+						<Text>{ children }</Text>
+						<Flex direction="row" justify="flex-end">
+							<Button
+								variant="tertiary"
+								onClick={ handleEvent( onCancel ) }
+							>
+								{ cancelLabel }
+							</Button>
+							<Button
+								variant="primary"
+								onClick={ handleEvent( onConfirm ) }
+							>
+								{ confirmLabel }
+							</Button>
+						</Flex>
+					</VStack>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+export default contextConnect( ConfirmDialog, 'ConfirmDialog' );

package/src/confirm-dialog/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import ConfirmDialog from './component';
+
+export { ConfirmDialog };

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

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { Heading } from '../../heading';
+import { ConfirmDialog } from '..';
+
+export default {
+	component: ConfirmDialog,
+	title: 'Components (Experimental)/ConfirmDialog',
+	parameters: {
+		knobs: { disable: false },
+	},
+};
+
+const daText = () =>
+	text( 'message', 'Would you like to privately publish the post now?' );
+
+// Simplest usage: just declare the component with the required `onConfirm` prop.
+export const _default = () => {
+	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
+
+	return (
+		<>
+			<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
+				{ daText() }
+			</ConfirmDialog>
+			<Heading level={ 1 }>{ confirmVal }</Heading>
+		</>
+	);
+};
+
+export const WithJSXMessage = () => {
+	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
+
+	return (
+		<>
+			<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
+				<Heading level={ 2 }>{ daText() }</Heading>
+			</ConfirmDialog>
+			<Heading level={ 1 }>{ confirmVal }</Heading>
+		</>
+	);
+};
+
+export const VeeeryLongMessage = () => {
+	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
+
+	return (
+		<>
+			<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
+				{ daText().repeat( 20 ) }
+			</ConfirmDialog>
+			<Heading level={ 1 }>{ confirmVal }</Heading>
+		</>
+	);
+};
+
+export const UncontrolledAndWithExplicitOnCancel = () => {
+	const [ confirmVal, setConfirmVal ] = useState(
+		"Hasn't confirmed or cancelled yet"
+	);
+
+	return (
+		<>
+			<ConfirmDialog
+				onConfirm={ () => setConfirmVal( 'Confirmed!' ) }
+				onCancel={ () => setConfirmVal( 'Cancelled' ) }
+			>
+				{ daText() }
+			</ConfirmDialog>
+			<Heading level={ 1 }>{ confirmVal }</Heading>
+		</>
+	);
+};
+
+// Controlled `ConfirmDialog`s require both `onConfirm` *and* `onCancel to be passed
+// It's expected that the user will then use it to hide the dialog, too (see the
+// `setIsOpen` calls below).
+export const Controlled = () => {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const [ confirmVal, setConfirmVal ] = useState(
+		"Hasn't confirmed or cancelled yet"
+	);
+
+	const handleConfirm = () => {
+		setConfirmVal( 'Confirmed!' );
+		setIsOpen( false );
+	};
+
+	const handleCancel = () => {
+		setConfirmVal( 'Cancelled' );
+		setIsOpen( false );
+	};
+
+	return (
+		<>
+			<ConfirmDialog
+				isOpen={ isOpen }
+				onConfirm={ handleConfirm }
+				onCancel={ handleCancel }
+			>
+				{ daText() }
+			</ConfirmDialog>
+
+			<Heading level={ 1 }>{ confirmVal }</Heading>
+
+			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
+				Open ConfirmDialog
+			</Button>
+		</>
+	);
+};

package/src/confirm-dialog/styles.ts

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * The z-index for ConfirmDialog is being set here instead of in
+ * packages/base-styles/_z-index.scss, because this component uses
+ * emotion instead of sass.
+ *
+ * ConfirmDialog needs this higher z-index to ensure it renders on top of
+ * any parent Popover component.
+ */
+export const wrapper = css`
+	&& {
+		z-index: 1000001;
+	}
+`;