@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/palette-edit/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -49,6 +48,7 @@ import {
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
@@ -74,8 +74,8 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 }
 
 /**
- * Returns a temporary name for a palette item in the format "Color + id".
- * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * Returns a name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs.
  * It expects slugs to be in the format: slugPrefix + color- + number.
  * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
  *
@@ -88,10 +88,10 @@ export function getNameForPosition(
 	elements: PaletteElement[],
 	slugPrefix: string
 ) {
-	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const nameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
 	const position = elements.reduce( ( previousValue, currentValue ) => {
 		if ( typeof currentValue?.slug === 'string' ) {
-			const matches = currentValue?.slug.match( temporaryNameRegex );
+			const matches = currentValue?.slug.match( nameRegex );
 			if ( matches ) {
 				const id = parseInt( matches[ 1 ], 10 );
 				if ( id >= previousValue ) {
@@ -103,7 +103,7 @@ export function getNameForPosition(
 	}, 1 );
 
 	return sprintf(
-		/* translators: %s: is a temporary id for a custom color */
+		/* translators: %s: is an id for a custom color */
 		__( 'Color %s' ),
 		position
 	);
@@ -121,6 +121,10 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 			() => ( {
 				shift: true,
 				offset: 20,
+				// Disabling resize as it would otherwise cause the popover to show
+				// scrollbars while dragging the color picker's handle close to the
+				// popover edge.
+				resize: false,
 				placement: 'left-start',
 				...receivedPopoverProps,
 				className: classnames(
@@ -148,7 +152,6 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 			{ isGradient && (
 				<div className="components-palette-edit__popover-gradient-picker">
 					<CustomGradientPicker
-						__nextHasNoMargin
 						__experimentalIsRenderedInSidebar
 						value={ element.gradient }
 						onChange={ ( newGradient ) => {
@@ -194,23 +197,22 @@ function Option< T extends Color | Gradient >( {
 	return (
 		<PaletteItem
 			className={ isEditing ? 'is-selected' : undefined }
-			as="div"
+			as={ isEditing ? 'div' : 'button' }
 			onClick={ onStartEditing }
+			aria-label={
+				isEditing
+					? undefined
+					: sprintf(
+							// translators: %s is a color or gradient name, e.g. "Red".
+							__( 'Edit: %s' ),
+							element.name.trim().length ? element.name : value
+					  )
+			}
 			ref={ setPopoverAnchor }
-			{ ...( isEditing
-				? { ...focusOutsideProps }
-				: {
-						style: {
-							cursor: 'pointer',
-						},
-				  } ) }
+			{ ...( isEditing ? { ...focusOutsideProps } : {} ) }
 		>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<IndicatorStyled
-						style={ { background: value, color: 'transparent' } }
-					/>
-				</FlexItem>
+				<IndicatorStyled colorValue={ value } />
 				<FlexItem>
 					{ isEditing && ! canOnlyChangeValues ? (
 						<NameInput
@@ -231,13 +233,18 @@ function Option< T extends Color | Gradient >( {
 							}
 						/>
 					) : (
-						<NameContainer>{ element.name }</NameContainer>
+						<NameContainer>
+							{ element.name.trim().length
+								? element.name
+								: /* Fall back to non-breaking space to maintain height */
+								  '\u00A0' }
+						</NameContainer>
 					) }
 				</FlexItem>
 				{ isEditing && ! canOnlyChangeValues && (
 					<FlexItem>
 						<RemoveButton
-							isSmall
+							size="small"
 							icon={ lineSolid }
 							label={ __( 'Remove color' ) }
 							onClick={ onRemove }
@@ -257,18 +264,6 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-function isTemporaryElement(
-	slugPrefix: string,
-	{ slug, color, gradient }: Color | Gradient
-) {
-	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
-	return (
-		regex.test( slug ) &&
-		( ( !! color && color === DEFAULT_COLOR ) ||
-			( !! gradient && gradient === DEFAULT_GRADIENT ) )
-	);
-}
-
 function PaletteEditListView< T extends Color | Gradient >( {
 	elements,
 	onChange,
@@ -284,23 +279,6 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	useEffect( () => {
 		elementsReference.current = elements;
 	}, [ elements ] );
-	useEffect( () => {
-		return () => {
-			if (
-				elementsReference.current?.some( ( element ) =>
-					isTemporaryElement( slugPrefix, element )
-				)
-			) {
-				const newElements = elementsReference.current.filter(
-					( element ) => ! isTemporaryElement( slugPrefix, element )
-				);
-				onChange( newElements.length ? newElements : undefined );
-			}
-		};
-		// Disable reason: adding the missing dependency here would cause breaking changes that will require
-		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );
 
@@ -436,7 +414,7 @@ export function PaletteEdit( {
 				<PaletteActionsContainer>
 					{ hasElements && isEditing && (
 						<DoneButton
-							isSmall
+							size="small"
 							onClick={ () => {
 								setIsEditing( false );
 								setEditingElement( null );
@@ -447,7 +425,7 @@ export function PaletteEdit( {
 					) }
 					{ ! canOnlyChangeValues && (
 						<Button
-							isSmall
+							size="small"
 							isPressed={ isAdding }
 							icon={ plus }
 							label={
@@ -456,7 +434,7 @@ export function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const tempOptionName = getNameForPosition(
+								const optionName = getNameForPosition(
 									elements,
 									slugPrefix
 								);
@@ -466,10 +444,10 @@ export function PaletteEdit( {
 										...gradients,
 										{
 											gradient: DEFAULT_GRADIENT,
-											name: tempOptionName,
+											name: optionName,
 											slug:
 												slugPrefix +
-												kebabCase( tempOptionName ),
+												kebabCase( optionName ),
 										},
 									] );
 								} else {
@@ -477,10 +455,10 @@ export function PaletteEdit( {
 										...colors,
 										{
 											color: DEFAULT_COLOR,
-											name: tempOptionName,
+											name: optionName,
 											slug:
 												slugPrefix +
-												kebabCase( tempOptionName ),
+												kebabCase( optionName ),
 										},
 									] );
 								}
@@ -611,7 +589,6 @@ export function PaletteEdit( {
 					{ ! isEditing &&
 						( isGradient ? (
 							<GradientPicker
-								__nextHasNoMargin
 								gradients={ gradients }
 								onChange={ onSelectPaletteItem }
 								clearable={ false }

package/src/palette-edit/stories/index.story.tsx

@@ -56,6 +56,7 @@ Default.args = {
 	colors: [
 		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
 		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+		{ color: '#fb326b', name: 'Tertiary', slug: 'tertiary' },
 	],
 	paletteLabel: 'Colors',
 	emptyMessage: 'Colors are empty',

package/src/palette-edit/style.scss

@@ -1,6 +1,6 @@
 .components-palette-edit__popover-gradient-picker {
-	width: 280px;
-	padding: 8px;
+	width: 260px;
+	padding: $grid-unit-10;
 }
 .components-dropdown-menu__menu {
 	.components-palette-edit__menu-button {

package/src/palette-edit/{styles.js → styles.ts}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
@@ -9,8 +10,8 @@ import styled from '@emotion/styled';
 import Button from '../button';
 import { Heading } from '../heading';
 import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
-import { COLORS, CONFIG } from '../utils';
+import { space } from '../utils/space';
+import { COLORS, CONFIG, font } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
 import {
@@ -18,12 +19,14 @@ import {
 	Input,
 	BackdropUI as InputBackdropUI,
 } from '../input-control/styles/input-control-styles';
-import CircularOptionPicker from '../circular-option-picker';
+import ColorIndicator from '../color-indicator';
 
-export const IndicatorStyled = styled( CircularOptionPicker.Option )`
-	width: ${ space( 6 ) };
-	height: ${ space( 6 ) };
-	pointer-events: none;
+export const IndicatorStyled = styled( ColorIndicator )`
+	&& {
+		flex-shrink: 0;
+		width: ${ space( 6 ) };
+		height: ${ space( 6 ) };
+	}
 `;
 
 export const NameInputControl = styled( InputControl )`
@@ -40,19 +43,63 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
+const buttonStyleReset = ( {
+	as,
+}: {
+	as: React.ComponentProps< typeof View >[ 'as' ];
+} ) => {
+	if ( as === 'button' ) {
+		return css`
+			display: flex;
+			align-items: center;
+			width: 100%;
+			appearance: none;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			padding: 0;
+			cursor: pointer;
+
+			&:hover {
+				color: ${ COLORS.theme.accent };
+			}
+		`;
+	}
+	return null;
+};
+
 export const PaletteItem = styled( View )`
-	padding: 3px 0 3px ${ space( 3 ) };
+	${ buttonStyleReset }
+
+	padding-block: 3px;
+	padding-inline-start: ${ space( 3 ) };
 	border: 1px solid ${ CONFIG.surfaceBorderColor };
 	border-bottom-color: transparent;
-	&:first-of-type {
-		border-top-left-radius: ${ CONFIG.controlBorderRadius };
-		border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	font-size: ${ font( 'default.fontSize' ) };
+
+	&:focus-visible {
+		border-color: transparent;
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			${ COLORS.theme.accent };
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+
+	border-top-left-radius: ${ CONFIG.controlBorderRadius };
+	border-top-right-radius: ${ CONFIG.controlBorderRadius };
+
+	& + & {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 	}
-	&:last-of-type {
+
+	&:last-child {
 		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
 		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
 		border-bottom-color: ${ CONFIG.surfaceBorderColor };
 	}
+
 	&.is-selected + & {
 		border-top-color: transparent;
 	}
@@ -67,9 +114,6 @@ export const NameContainer = styled.div`
 	margin-right: ${ space( 2 ) };
 	white-space: nowrap;
 	overflow: hidden;
-	${ PaletteItem }:hover & {
-		color: ${ COLORS.theme.accent };
-	}
 `;
 
 export const PaletteHeading = styled( Heading )`