Trying out deduplicating by default in

WordPress · Oct 15, 2024 · d2fac65 · d2fac65
1 parent c1d606f
commit d2fac65
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
@@ -58,13 +58,14 @@ import type {
 
 const DEFAULT_COLOR = '#000';
 
-function NameInput( { value, onChange, label }: NameInputProps ) {
+function NameInput( { value, onChange, label, className }: NameInputProps ) {
 	return (
 		<NameInputControl
 			label={ label }
 			hideLabelFromVision
 			value={ value }
 			onChange={ onChange }
+			className={ className }
 		/>
 	);
 }
@@ -196,6 +197,7 @@ function Option< T extends PaletteElement >( {
 	popoverProps: receivedPopoverProps,
 	slugPrefix,
 	isGradient,
+	isDuplicate,
 }: OptionProps< T > ) {
 	const value = isGradient ? element.gradient : element.color;
 	const [ isEditingColor, setIsEditingColor ] = useState( false );
@@ -231,6 +233,10 @@ function Option< T extends PaletteElement >( {
 				<FlexItem>
 					{ ! canOnlyChangeValues ? (
 						<NameInput
+							className={ clsx(
+								'components-palette-edit__name-input',
+								{ 'is-duplicate': isDuplicate }
+							) }
 							label={
 								isGradient
 									? __( 'Gradient name' )
@@ -306,7 +312,13 @@ function PaletteEditListView< T extends PaletteElement >( {
 			onChange( deduplicateElementSlugs( updatedElements ) ),
 		100
 	);
-
+	const isDuplicate = useCallback(
+		( optionElement: PaletteElement ) =>
+			elements.filter(
+				( element ) => element.slug === optionElement.slug
+			).length > 1,
+		[ elements ]
+	);
 	return (
 		<VStack spacing={ 3 }>
 			<ItemGroup isRounded>
@@ -316,6 +328,7 @@ function PaletteEditListView< T extends PaletteElement >( {
 						canOnlyChangeValues={ canOnlyChangeValues }
 						key={ index }
 						element={ element }
+						isDuplicate={ isDuplicate( element ) }
 						onChange={ ( newElement ) => {
 							debounceOnChange(
 								elements.map(
@@ -631,16 +644,22 @@ export function PaletteEdit( {
 								disableCustomColors
 							/>
 						) ) }
-					{ ! isEditing && duplicateSlugs?.length > 0 && (
-						<p>
-							One of more of your colors have the same name. To
-							ensure your styles do not conflict, make sure they
-							have unique names.{ ' ' }
-							<button onClick={ () => setIsEditing( true ) }>
-								{ __( 'Edit colors now' ) }
-							</button>
-						</p>
-					) }
+					{ ! canOnlyChangeValues &&
+						! isEditing &&
+						duplicateSlugs?.length > 0 && (
+							<div className="components-palette-edit__warning">
+								Some items in this palette have identical names.
+								To prevent styles conflicts, give each item a
+								unique name.
+								<Button
+									className="components-palette-edit__edit_palette_button"
+									variant="link"
+									onClick={ () => setIsEditing( true ) }
+								>
+									{ __( 'Edit this palette.' ) }
+								</Button>
+							</div>
+						) }
 				</PaletteEditContents>
 			) }
 			{ ! hasElements && emptyMessage && (

diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss
@@ -7,3 +7,15 @@
 		width: 100%;
 	}
 }
+.components-palette-edit__warning {
+	margin: $grid-unit-20 0 $grid-unit-10 0;
+	padding: $grid-unit-10 $grid-unit-15;
+	border-left: 4px solid $alert-yellow;
+	background-color: lighten($alert-yellow, 35%);
+	.components-palette-edit__edit_palette_button {
+		margin-left: $grid-unit-05;
+	}
+}
+.components-palette-edit__name-input.is-duplicate {
+	border: 1px solid $alert-red;
+}
diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts
@@ -109,6 +109,7 @@ export type NameInputProps = {
 	label: string;
 	onChange: ( nextName?: PaletteElement[ 'name' ] ) => void;
 	value: PaletteElement[ 'name' ];
+	className?: string;
 };
 
 export type OptionProps< T extends Color | Gradient > = {
@@ -120,6 +121,7 @@ export type OptionProps< T extends Color | Gradient > = {
 	onRemove: MouseEventHandler< HTMLButtonElement >;
 	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 	slugPrefix: string;
+	isDuplicate: boolean;
 };
 
 export type PaletteEditListViewProps< T extends Color | Gradient > = {