@wordpress/components 19.6.1 → 19.8.0

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/README.md

@@ -74,3 +74,9 @@ const MyColorPalette = () => {
 	);
 } );
 ```
+
+If you're using this component outside the editor, you can
+[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
+for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
+`Popover.Slot` further up the element tree and within a
+`SlotFillProvider` overall.

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
  */
@@ -12,36 +7,84 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorPalette from '../';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
-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 (
+		<SlotFillProvider>
+			<ColorPalette { ...args } value={ color } onChange={ setColor } />
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
 };
 
-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;
+}