@wordpress/components 19.11.0 → 19.14.0

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxControl Basic rendering should render the indeterminate icon when in the indeterminate state 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -8,17 +8,31 @@
+        <span
+          class="components-checkbox-control__input-container"
+        >
+          <input
+            class="components-checkbox-control__input"
+-           id="inspector-checkbox-control-5"
++           id="inspector-checkbox-control-6"
+            type="checkbox"
+            value="1"
++         />
++         <svg
++           aria-hidden="true"
++           class="components-checkbox-control__indeterminate"
++           focusable="false"
++           height="24"
++           role="presentation"
++           viewBox="0 0 24 24"
++           width="24"
++           xmlns="http://www.w3.org/2000/svg"
++         >
++           <path
++             d="M7 11.5h10V13H7z"
+            />
++         </svg>
+        </span>
+        <label
+          class="components-checkbox-control__label"
+-         for="inspector-checkbox-control-5"
++         for="inspector-checkbox-control-6"
+        />
+      </div>
+    </div>
+  </div>
+`;

package/src/checkbox-control/test/index.tsx

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseCheckboxControl from '..';
+import type { CheckboxControlProps } from '../types';
+
+const noop = () => {};
+
+const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
+
+const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
+	return <BaseCheckboxControl onChange={ noop } { ...props } />;
+};
+
+const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
+	const [ isChecked, setChecked ] = useState( false );
+	return (
+		<BaseCheckboxControl
+			checked={ isChecked }
+			onChange={ ( value ) => {
+				setChecked( value );
+				onChange( value );
+			} }
+		/>
+	);
+};
+
+describe( 'CheckboxControl', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			render( <CheckboxControl /> );
+			expect( getInput() ).not.toBeNull();
+		} );
+
+		it( 'should render an unchecked `checkbox` by default', () => {
+			render( <CheckboxControl /> );
+			expect( getInput() ).toHaveProperty( 'checked', false );
+		} );
+
+		it( 'should render an checked `checkbox` when `checked={ true }`', () => {
+			render( <CheckboxControl checked /> );
+			expect( getInput() ).toHaveProperty( 'checked', true );
+		} );
+
+		it( 'should render label', () => {
+			render( <CheckboxControl label="Hello" /> );
+
+			const label = screen.getByText( 'Hello' );
+			expect( label ).toBeInTheDocument();
+		} );
+
+		it( 'should render a checkbox in an indeterminate state', () => {
+			render( <CheckboxControl indeterminate /> );
+			expect( getInput() ).toHaveProperty( 'indeterminate', true );
+		} );
+
+		it( 'should render the indeterminate icon when in the indeterminate state', () => {
+			const { container: containerDefault } = render(
+				<CheckboxControl />
+			);
+
+			const { container: containerIndeterminate } = render(
+				<CheckboxControl indeterminate />
+			);
+
+			// Expect the diff snapshot to be mostly about the indeterminate icon
+			expect( containerDefault ).toMatchDiffSnapshot(
+				containerIndeterminate
+			);
+		} );
+	} );
+
+	describe( 'Value', () => {
+		it( 'should flip the checked property when clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			let state = false;
+			const setState = jest.fn(
+				( nextState: boolean ) => ( state = nextState )
+			);
+
+			render( <ControlledCheckboxControl onChange={ setState } /> );
+
+			const input = getInput();
+
+			await user.click( input );
+			expect( input ).toHaveProperty( 'checked', true );
+			expect( state ).toBe( true );
+
+			await user.click( input );
+			expect( input ).toHaveProperty( 'checked', false );
+			expect( state ).toBe( false );
+
+			expect( setState ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+} );

package/src/color-indicator/README.md

@@ -1,6 +1,6 @@
 # ColorIndicator
 
-ColorIndicator is a React component that renders a specific color in a squared box. It's often used to summarize a collection of used colors in a child component.
+ColorIndicator is a React component that renders a specific color in a circle. It's often used to summarize a collection of used colors in a child component.
 
 ### Single component
 
@@ -22,16 +22,14 @@ const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
 
 The component accepts the following props:
 
-### colorValue
+### `className`: `string`
 
-The color of the indicator. Any value from the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
+Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
 
--   Type: `string`
--   Required: Yes
+-   Required: No
 
-### className
+### `colorValue`: `CSSProperties[ 'background' ]`
 
-Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
+The color of the indicator. Any value from the CSS [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
 
--   Type: `string`
--   Required: No
+-   Required: Yes

package/src/color-indicator/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { ColorIndicatorProps } from './types';
+
+function UnforwardedColorIndicator(
+	props: WordPressComponentProps< ColorIndicatorProps, 'span', false >,
+	forwardedRef: ForwardedRef< HTMLSpanElement >
+) {
+	const { className, colorValue, ...additionalProps } = props;
+
+	return (
+		<span
+			className={ classnames( 'component-color-indicator', className ) }
+			style={ { background: colorValue } }
+			ref={ forwardedRef }
+			{ ...additionalProps }
+		/>
+	);
+}
+
+/**
+ * ColorIndicator is a React component that renders a specific color in a
+ * circle. It's often used to summarize a collection of used colors in a child
+ * component.
+ *
+ * ```jsx
+ * import { ColorIndicator } from '@wordpress/components';
+ *
+ * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
+ * ```
+ */
+export const ColorIndicator = forwardRef( UnforwardedColorIndicator );
+
+export default ColorIndicator;

package/src/color-indicator/stories/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '..';
+
+const meta: ComponentMeta< typeof ColorIndicator > = {
+	component: ColorIndicator,
+	title: 'Components/ColorIndicator',
+	argTypes: {
+		colorValue: {
+			control: { type: 'color' },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
+	<ColorIndicator { ...args } />
+);
+
+export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
+	{}
+);
+Default.args = {
+	colorValue: '#0073aa',
+};

package/src/color-indicator/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator matches the snapshot 1`] = `
+<div>
+  <span
+    aria-label="sample label"
+    class="component-color-indicator"
+    style="background: rgb(255, 255, 255);"
+  />
+</div>
+`;

package/src/color-indicator/test/{index.js → index.tsx}

@@ -1,19 +1,19 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import ColorIndicator from '../';
+import ColorIndicator from '..';
 
 describe( 'ColorIndicator', () => {
 	it( 'matches the snapshot', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<ColorIndicator aria-label="sample label" colorValue="#fff" />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/color-indicator/types.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type ColorIndicatorProps = {
+	/**
+	 * The color of the indicator. Any value from the CSS `background` property
+	 * is supported.
+	 */
+	colorValue: CSSProperties[ 'background' ];
+};

package/src/color-palette/index.js

@@ -118,7 +118,11 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 			contentClassName="components-color-palette__custom-color-dropdown-content"
 			popoverProps={
 				isRenderedInSidebar
-					? { placement: 'left-start', offset: 20 }
+					? {
+							placement: 'left-start',
+							offset: 20,
+							__unstableShift: true,
+					  }
 					: undefined
 			}
 			{ ...props }
@@ -126,7 +130,7 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 	);
 }
 
-const extractColorNameFromCurrentValue = (
+export const extractColorNameFromCurrentValue = (
 	currentValue,
 	colors = [],
 	showMultiplePalettes = false
@@ -135,13 +139,20 @@ const extractColorNameFromCurrentValue = (
 		return '';
 	}
 
+	const currentValueIsCssVariable = /^var\(/.test( currentValue );
+	const normalizedCurrentValue = currentValueIsCssVariable
+		? currentValue
+		: colord( currentValue ).toHex();
+
 	// Normalize format of `colors` to simplify the following loop
 	const colorPalettes = showMultiplePalettes ? colors : [ { colors } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
-			if (
-				colord( currentValue ).toHex() === colord( colorValue ).toHex()
-			) {
+			const normalizedColorValue = currentValueIsCssVariable
+				? colorValue
+				: colord( colorValue ).toHex();
+
+			if ( normalizedCurrentValue === normalizedColorValue ) {
 				return colorName;
 			}
 		}

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

@@ -92,6 +92,9 @@ function ColorPalette( {
 				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
 			}
 		}
+		// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+		// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ currentSegment ] );
 
 	function isSelectedCustom() {

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

@@ -43,7 +43,10 @@ const meta = {
 export default meta;
 
 const Template = ( args ) => {
-	const [ color, setColor ] = useState( '#f00' );
+	const firstColor =
+		args.colors[ 0 ].color || args.colors[ 0 ].colors[ 0 ].color;
+	const [ color, setColor ] = useState( firstColor );
+
 	return (
 		<SlotFillProvider>
 			<ColorPalette { ...args } value={ color } onChange={ setColor } />
@@ -88,3 +91,24 @@ MultipleOrigins.args = {
 		},
 	],
 };
+
+export const CSSVariables = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	colors: [
+		{ name: 'Red', color: 'var(--red)' },
+		{ name: 'Yellow', color: 'var(--yellow)' },
+		{ name: 'Blue', color: 'var(--blue)' },
+	],
+};

package/src/color-palette/test/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { extractColorNameFromCurrentValue } from '../';
+
+describe( 'ColorPalette: Utils', () => {
+	describe( 'extractColorNameFromCurrentValue', () => {
+		test( 'should support hex values', () => {
+			const result = extractColorNameFromCurrentValue( '#00f', [
+				{ name: 'Red', color: '#f00' },
+				{ name: 'Blue', color: '#00f' },
+			] );
+			expect( result ).toBe( 'Blue' );
+		} );
+
+		test( 'should support CSS variables', () => {
+			const result = extractColorNameFromCurrentValue( 'var(--blue)', [
+				{ name: 'Red', color: 'var(--red)' },
+				{ name: 'Blue', color: 'var(--blue)' },
+			] );
+			expect( result ).toBe( 'Blue' );
+		} );
+	} );
+} );

package/src/color-picker/color-copy-button.tsx

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { copy } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { CopyButton } from './styles';
+import { Text } from '../text';
+import { Tooltip } from '../ui/tooltip';
+
+import type { ColorCopyButtonProps } from './types';
+
+export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
+	const { color, colorType } = props;
+	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+	const copyRef = useCopyToClipboard< HTMLDivElement >(
+		() => {
+			switch ( colorType ) {
+				case 'hsl': {
+					return color.toHslString();
+				}
+				case 'rgb': {
+					return color.toRgbString();
+				}
+				default:
+				case 'hex': {
+					return color.toHex();
+				}
+			}
+		},
+		() => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+			setCopiedColor( color.toHex() );
+			copyTimer.current = setTimeout( () => {
+				setCopiedColor( null );
+				copyTimer.current = undefined;
+			}, 3000 );
+		}
+	);
+	useEffect( () => {
+		// Clear copyTimer on component unmount.
+		return () => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+		};
+	}, [] );
+
+	return (
+		<Tooltip
+			content={
+				<Text color="white">
+					{ copiedColor === color.toHex()
+						? __( 'Copied!' )
+						: __( 'Copy' ) }
+				</Text>
+			}
+			placement="bottom"
+		>
+			<CopyButton
+				isSmall
+				ref={ copyRef }
+				icon={ copy }
+				showTooltip={ false }
+			/>
+		</Tooltip>
+	);
+};

package/src/color-picker/component.tsx

@@ -9,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -21,15 +20,14 @@ import {
 	contextConnect,
 	WordPressComponentProps,
 } from '../ui/context';
-import { HStack } from '../h-stack';
-import { Spacer } from '../spacer';
 import {
 	ColorfulWrapper,
 	SelectControl,
 	AuxiliaryColorArtefactWrapper,
-	DetailsControlButton,
+	AuxiliaryColorArtefactHStackHeader,
+	ColorInputWrapper,
 } from './styles';
-import { ColorDisplay } from './color-display';
+import { ColorCopyButton } from './color-copy-button';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
@@ -85,7 +83,6 @@ const ColorPicker = (
 		[ debouncedSetColor ]
 	);
 
-	const [ showInputs, setShowInputs ] = useState< boolean >( false );
 	const [ colorType, setColorType ] = useState< ColorType >(
 		copyFormat || 'hex'
 	);
@@ -98,45 +95,29 @@ const ColorPicker = (
 				enableAlpha={ enableAlpha }
 			/>
 			<AuxiliaryColorArtefactWrapper>
-				<HStack justify="space-between">
-					{ showInputs ? (
-						<SelectControl
-							options={ options }
-							value={ colorType }
-							onChange={ ( nextColorType ) =>
-								setColorType( nextColorType as ColorType )
-							}
-							label={ __( 'Color format' ) }
-							hideLabelFromVision
-						/>
-					) : (
-						<ColorDisplay
-							color={ safeColordColor }
-							colorType={ copyFormat || colorType }
-							enableAlpha={ enableAlpha }
-						/>
-					) }
-					<DetailsControlButton
-						isSmall
-						onClick={ () => setShowInputs( ! showInputs ) }
-						icon={ settings }
-						isPressed={ showInputs }
-						label={
-							showInputs
-								? __( 'Hide detailed inputs' )
-								: __( 'Show detailed inputs' )
+				<AuxiliaryColorArtefactHStackHeader justify="space-between">
+					<SelectControl
+						options={ options }
+						value={ colorType }
+						onChange={ ( nextColorType ) =>
+							setColorType( nextColorType as ColorType )
 						}
+						label={ __( 'Color format' ) }
+						hideLabelFromVision
 					/>
-				</HStack>
-				<Spacer margin={ 4 } />
-				{ showInputs && (
+					<ColorCopyButton
+						color={ safeColordColor }
+						colorType={ copyFormat || colorType }
+					/>
+				</AuxiliaryColorArtefactHStackHeader>
+				<ColorInputWrapper direction="column" gap={ 2 }>
 					<ColorInput
 						colorType={ colorType }
 						color={ safeColordColor }
 						onChange={ handleChange }
 						enableAlpha={ enableAlpha }
 					/>
-				) }
+				</ColorInputWrapper>
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>
 	);

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

@@ -16,6 +16,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
 import { COLORS } from '../utils/colors-values';
+import type { StateReducer } from '../input-control/reducer/state';
 
 interface HexInputProps {
 	color: Colord;
@@ -33,6 +34,20 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 		onChange( colord( hexValue ) );
 	};
 
+	const stateReducer: StateReducer = ( state, action ) => {
+		const nativeEvent = action.payload?.event?.nativeEvent as InputEvent;
+
+		if ( 'insertFromPaste' !== nativeEvent?.inputType ) {
+			return { ...state };
+		}
+
+		const value = state.value?.startsWith( '#' )
+			? state.value.slice( 1 ).toUpperCase()
+			: state.value?.toUpperCase();
+
+		return { ...state, value };
+	};
+
 	return (
 		<ColorHexInputControl
 			prefix={
@@ -50,6 +65,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			__unstableStateReducer={ stateReducer }
 		/>
 	);
 };

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

@@ -36,10 +36,13 @@ function ColorPicker( {
 	const didMount = useRef( false );
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-	const { h: initH, s: initS, v: initV } =
-		! isGradientColor && activeColor
-			? colord( activeColor ).toHsv()
-			: { h: 0, s: 50, v: 50 };
+	const {
+		h: initH,
+		s: initS,
+		v: initV,
+	} = ! isGradientColor && activeColor
+		? colord( activeColor ).toHsv()
+		: { h: 0, s: 50, v: 50 };
 	const [ hue, setHue ] = useState( initH );
 	const [ sat, setSaturation ] = useState( initS / 100 );
 	const [ val, setValue ] = useState( initV / 100 );

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

@@ -26,7 +26,7 @@ export const InputWithSlider = ( {
 	value,
 }: InputWithSliderProps ) => {
 	return (
-		<Spacer as={ HStack } spacing={ 4 }>
+		<HStack spacing={ 4 }>
 			<NumberControlWrapper
 				min={ min }
 				max={ max }
@@ -55,6 +55,6 @@ export const InputWithSlider = ( {
 				onChange={ onChange }
 				withInputField={ false }
 			/>
-		</Spacer>
+		</HStack>
 	);
 };