@wordpress/components 19.7.0-next.e230fbab09.0 → 19.7.0

package/src/box-control/utils.js

@@ -61,24 +61,32 @@ function mode( arr ) {
  * Gets the 'all' input value and unit from values data.
  *
  * @param {Object} values         Box values.
+ * @param {Object} selectedUnits  Box units.
  * @param {Array}  availableSides Available box sides to evaluate.
  *
  * @return {string} A value + unit for the 'all' input.
  */
-export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
+export function getAllValue(
+	values = {},
+	selectedUnits,
+	availableSides = ALL_SIDES
+) {
 	const sides = normalizeSides( availableSides );
 	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
 		parseQuantityAndUnitFromRawValue( values[ side ] )
 	);
-	const allValues = parsedQuantitiesAndUnits.map(
+	const allParsedQuantities = parsedQuantitiesAndUnits.map(
 		( value ) => value[ 0 ] ?? ''
 	);
-	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
+	const allParsedUnits = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 1 ]
+	);
 
-	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
-		? allValues[ 0 ]
+	const commonQuantity = allParsedQuantities.every(
+		( v ) => v === allParsedQuantities[ 0 ]
+	)
+		? allParsedQuantities[ 0 ]
 		: '';
-	const unit = mode( allUnits );
 
 	/**
 	 * The isNumber check is important. On reset actions, the incoming value
@@ -89,9 +97,17 @@ 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 }` : undefined;
+	let commonUnit;
+	if ( isNumber( commonQuantity ) ) {
+		commonUnit = mode( allParsedUnits );
+	} else {
+		// Set meaningful unit selection if no commonQuantity and user has previously
+		// selected units without assigning values while controls were unlinked.
+		commonUnit =
+			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	}
 
-	return allValue;
+	return [ commonQuantity, commonUnit ].join( '' );
 }
 
 /**
@@ -113,13 +129,14 @@ export function getAllUnitFallback( selectedUnits ) {
 /**
  * Checks to determine if values are mixed.
  *
- * @param {Object} values Box values.
- * @param {Array}  sides  Available box sides to evaluate.
+ * @param {Object} values        Box values.
+ * @param {Object} selectedUnits Box units.
+ * @param {Array}  sides         Available box sides to evaluate.
  *
  * @return {boolean} Whether values are mixed.
  */
-export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
-	const allValue = getAllValue( values, sides );
+export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const isMixed = isNaN( parseFloat( allValue ) );
 
 	return isMixed;

package/src/checkbox-control/index.js

@@ -6,9 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+import { useInstanceId, useRefEffect } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
-import { Icon, check } from '@wordpress/icons';
+import { Icon, check, reset } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ export default function CheckboxControl( {
 	className,
 	heading,
 	checked,
+	indeterminate,
 	help,
 	onChange,
 	...props
@@ -31,6 +33,27 @@ export default function CheckboxControl( {
 		} );
 	}
 
+	const [ showCheckedIcon, setShowCheckedIcon ] = useState( false );
+	const [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(
+		false
+	);
+
+	// Run the following callback everytime the `ref` (and the additional
+	// dependencies) change.
+	const ref = useRefEffect(
+		( node ) => {
+			if ( ! node ) {
+				return;
+			}
+
+			// It cannot be set using an HTML attribute.
+			node.indeterminate = !! indeterminate;
+
+			setShowCheckedIcon( node.matches( ':checked' ) );
+			setShowIndeterminateIcon( node.matches( ':indeterminate' ) );
+		},
+		[ checked, indeterminate ]
+	);
 	const instanceId = useInstanceId( CheckboxControl );
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
@@ -44,6 +67,7 @@ export default function CheckboxControl( {
 		>
 			<span className="components-checkbox-control__input-container">
 				<input
+					ref={ ref }
 					id={ id }
 					className="components-checkbox-control__input"
 					type="checkbox"
@@ -53,7 +77,14 @@ export default function CheckboxControl( {
 					aria-describedby={ !! help ? id + '__help' : undefined }
 					{ ...props }
 				/>
-				{ checked ? (
+				{ showIndeterminateIcon ? (
+					<Icon
+						icon={ reset }
+						className="components-checkbox-control__indeterminate"
+						role="presentation"
+					/>
+				) : null }
+				{ showCheckedIcon ? (
 					<Icon
 						icon={ check }
 						className="components-checkbox-control__checked"

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

@@ -45,3 +45,47 @@ export const all = () => {
 
 	return <CheckboxControlWithState label={ label } help={ help } checked />;
 };
+
+export const Indeterminate = () => {
+	const [ fruits, setFruits ] = useState( { apple: false, orange: false } );
+
+	const isAllChecked = Object.values( fruits ).every( Boolean );
+	const isIndeterminate =
+		Object.values( fruits ).some( Boolean ) && ! isAllChecked;
+
+	return (
+		<>
+			<CheckboxControl
+				label="Select All"
+				checked={ isAllChecked }
+				indeterminate={ isIndeterminate }
+				onChange={ ( newValue ) =>
+					setFruits( {
+						apple: newValue,
+						orange: newValue,
+					} )
+				}
+			/>
+			<CheckboxControl
+				label="Apple"
+				checked={ fruits.apple }
+				onChange={ ( apple ) =>
+					setFruits( ( prevState ) => ( {
+						...prevState,
+						apple,
+					} ) )
+				}
+			/>
+			<CheckboxControl
+				label="Orange"
+				checked={ fruits.orange }
+				onChange={ ( orange ) =>
+					setFruits( ( prevState ) => ( {
+						...prevState,
+						orange,
+					} ) )
+				}
+			/>
+		</>
+	);
+};

package/src/checkbox-control/style.scss

@@ -33,7 +33,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 		outline: 2px solid transparent;
 	}
 
-	&:checked {
+	&:checked,
+	&:indeterminate {
 		background: var(--wp-admin-theme-color);
 		border-color: var(--wp-admin-theme-color);
 
@@ -62,7 +63,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	}
 }
 
-svg.components-checkbox-control__checked {
+svg.components-checkbox-control__checked,
+svg.components-checkbox-control__indeterminate {
 	fill: $white;
 	cursor: pointer;
 	position: absolute;

package/src/color-palette/index.js

@@ -21,6 +21,8 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
+import { Flex, FlexItem } from '../flex';
+import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -125,6 +127,31 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 	);
 }
 
+const extractColorNameFromCurrentValue = (
+	currentValue,
+	colors = [],
+	showMultiplePalettes = false
+) => {
+	if ( ! currentValue ) {
+		return '';
+	}
+
+	// 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()
+			) {
+				return colorName;
+			}
+		}
+	}
+
+	// translators: shown when the user has picked a custom color (i.e not in the palette of colors).
+	return __( 'Custom' );
+};
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -137,10 +164,9 @@ export default function ColorPalette( {
 	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
-	const Component =
-		__experimentalHasMultipleOrigins && colors?.length
-			? MultiplePalettes
-			: SinglePalette;
+	const showMultiplePalettes =
+		__experimentalHasMultipleOrigins && colors?.length;
+	const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
 
 	const renderCustomColorPicker = () => (
 		<ColorPicker
@@ -157,6 +183,30 @@ export default function ColorPalette( {
 
 	const colordColor = colord( value );
 
+	const valueWithoutLeadingHash = value?.startsWith( '#' )
+		? value.substring( 1 )
+		: value ?? '';
+	const buttonLabelName = useMemo(
+		() =>
+			extractColorNameFromCurrentValue(
+				value,
+				colors,
+				showMultiplePalettes
+			),
+		[ value, colors, showMultiplePalettes ]
+	);
+
+	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+		? sprintf(
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				__(
+					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+				),
+				buttonLabelName,
+				valueWithoutLeadingHash
+		  )
+		: __( 'Custom color picker.' );
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
@@ -165,12 +215,15 @@ export default function ColorPalette( {
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<button
+						<Flex
+							as={ 'button' }
+							justify="space-between"
+							align="flex-start"
 							className="components-color-palette__custom-color"
 							aria-expanded={ isOpen }
 							aria-haspopup="true"
 							onClick={ onToggle }
-							aria-label={ __( 'Custom color picker' ) }
+							aria-label={ customColorAccessibleLabel }
 							style={ {
 								background: value,
 								color:
@@ -180,8 +233,20 @@ export default function ColorPalette( {
 										: '#000',
 							} }
 						>
-							{ value }
-						</button>
+							<FlexItem
+								isBlock
+								as={ Truncate }
+								className="components-color-palette__custom-color-name"
+							>
+								{ buttonLabelName }
+							</FlexItem>
+							<FlexItem
+								as="span"
+								className="components-color-palette__custom-color-value"
+							>
+								{ valueWithoutLeadingHash }
+							</FlexItem>
+						</Flex>
 					) }
 				/>
 			) }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { object } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -13,35 +8,76 @@ import { useState } from '@wordpress/element';
  */
 import ColorPalette from '../';
 
-export default {
+const meta = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
+	argTypes: {
+		__experimentalHasMultipleOrigins: {
+			control: {
+				type: null,
+			},
+		},
+		__experimentalIsRenderedInSidebar: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		clearable: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		disableCustomColors: {
+			control: {
+				type: 'boolean',
+			},
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const ColorPaletteWithState = ( props ) => {
-	const [ color, setColor ] = useState( '#F00' );
-	return <ColorPalette { ...props } value={ color } onChange={ setColor } />;
+const Template = ( args ) => {
+	const [ color, setColor ] = useState( '#f00' );
+	return <ColorPalette { ...args } value={ color } onChange={ setColor } />;
 };
 
-export const _default = () => {
-	const colors = [
-		{ name: 'red', color: '#f00' },
-		{ name: 'white', color: '#fff' },
-		{ name: 'blue', color: '#00f' },
-	];
-
-	return <ColorPaletteWithState colors={ colors } />;
+export const Default = Template.bind( {} );
+Default.args = {
+	colors: [
+		{ name: 'Red', color: '#f00' },
+		{ name: 'White', color: '#fff' },
+		{ name: 'Blue', color: '#00f' },
+	],
 };
 
-export const withKnobs = () => {
-	const colors = [
-		object( 'Red', { name: 'red', color: '#f00' } ),
-		object( 'White', { name: 'white', color: '#fff' } ),
-		object( 'Blue', { name: 'blue', color: '#00f' } ),
-	];
-
-	return <ColorPaletteWithState colors={ colors } />;
+/**
+ * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
+ * the `colors` prop is expected to be an array of color palettes, rather
+ * than an array of color objects.
+ */
+export const MultipleOrigins = Template.bind( {} );
+MultipleOrigins.args = {
+	__experimentalHasMultipleOrigins: true,
+	colors: [
+		{
+			name: 'Primary colors',
+			colors: [
+				{ name: 'Red', color: '#f00' },
+				{ name: 'Yellow', color: '#ff0' },
+				{ name: 'Blue', color: '#00f' },
+			],
+		},
+		{
+			name: 'Primary colors',
+			colors: [
+				{ name: 'Orange', color: '#f60' },
+				{ name: 'Green', color: '#0f0' },
+				{ name: 'Purple', color: '#60f' },
+			],
+		},
+	],
 };

package/src/color-palette/style.scss

@@ -2,11 +2,10 @@
 	position: relative;
 	border: none;
 	background: none;
-	display: block;
 	border-radius: $radius-block-ui;
-	height: $grid-unit-60;
+	height: $grid-unit-80;
+	padding: $grid-unit-15;
 	font-family: inherit;
-	text-align: right;
 	width: 100%;
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
@@ -55,3 +54,12 @@
 		}
 	}
 }
+
+.components-color-palette__custom-color-name {
+	text-align: left;
+}
+
+.components-color-palette__custom-color-value {
+	margin-left: $grid-unit-20;
+	text-transform: uppercase;
+}