Bugfix: Eye Dropper: Show Palette / Swatches

- Adds a `showPalette` property to the input.
- Allows for the `swatches` to be undefined, so that it can fallback on UUI default swatches.
- Removes the hard-coded swatches from the property-editor.
- Updates Storybook story.

src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts

@@ -1,4 +1,4 @@
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
@@ -19,22 +19,42 @@ export class UmbInputEyeDropperElement extends UUIFormControlMixin(UmbLitElement
 	@property({ type: Boolean })
 	opacity = false;
 
-	@property({ type: Array })
-	swatches: string[] = [];
+	@property({ type: Boolean })
+	showPalette = false;
 
-	//TODO if empty swatches, the color picker still shows the area where they are supposed to be rendered.
-	// BTW in the old backoffice "palette" seemed to be true/false setting, but here its an array.
+	@property({ type: Array })
+	swatches?: string[];
+
+	// HACK: Since `uui-color-picker` doesn't have an option to hide the swatches, we had to get creative.
+	// Based on UUI v1.8.0-rc3, the value of `swatches` must be a falsey value to hide them.
+	// https://github.com/umbraco/Umbraco.UI/blob/v1.8.0-rc.3/packages/uui-color-picker/lib/uui-color-picker.element.ts#L517
+	// However, the object-type for `swatches` is a `string[]` (non-nullable).
+	// https://github.com/umbraco/Umbraco.UI/blob/v1.8.0-rc.3/packages/uui-color-picker/lib/uui-color-picker.element.ts#L157
+	// To do this, we must omit the `.swatches` attribute, otherwise the default swatches can't be used.
+	// So, we've use a `when()` render both configurations. [LK]
 
 	render() {
-		return html`
-			<uui-color-picker
-				label="Eye dropper"
-				.opacity=${this.opacity}
-				.swatches=${this.swatches}
-				.value=${this.value as string}
-				@change=${this.#onChange}>
-			</uui-color-picker>
-		`;
+		const swatches = this.showPalette ? this.swatches : undefined;
+		return when(
+			this.showPalette && !swatches,
+			() => html`
+				<uui-color-picker
+					label="Eye dropper"
+					.opacity=${this.opacity}
+					.value=${this.value as string}
+					@change=${this.#onChange}>
+				</uui-color-picker>
+			`,
+			() => html`
+				<uui-color-picker
+					label="Eye dropper"
+					.opacity=${this.opacity}
+					.swatches=${swatches!}
+					.value=${this.value as string}
+					@change=${this.#onChange}>
+				</uui-color-picker>
+			`,
+		);
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.stories.ts

@@ -22,6 +22,13 @@ export const WithOpacity: Story = {
 
 export const WithSwatches: Story = {
 	args: {
+		showPalette: true,
 		swatches: ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff'],
 	},
 };
+
+export const ShowPalette: Story = {
+	args: {
+		showPalette: true,
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/property-editors/eye-dropper/property-editor-ui-eye-dropper.element.ts

@@ -10,43 +10,20 @@ import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external
  */
 @customElement('umb-property-editor-ui-eye-dropper')
 export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	#defaultOpacity = false;
-
 	@property()
 	value = '';
 
 	@state()
-	private _opacity = this.#defaultOpacity;
+	private _opacity = false;
 
 	@state()
-	private _swatches: string[] = [];
+	private _showPalette = false;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this._opacity = config?.getValueByAlias('showAlpha') ?? this.#defaultOpacity;
+		if (!config) return;
 
-		const showPalette = config?.getValueByAlias('showPalette') ?? false;
-
-		if (showPalette) {
-			// TODO: This is a temporary solution until we have a proper way to get the palette from the config. [LK]
-			this._swatches = [
-				'#d0021b',
-				'#f5a623',
-				'#f8e71c',
-				'#8b572a',
-				'#7ed321',
-				'#417505',
-				'#bd10e0',
-				'#9013fe',
-				'#4a90e2',
-				'#50e3c2',
-				'#b8e986',
-				'#000',
-				'#444',
-				'#888',
-				'#ccc',
-				'#fff',
-			];
-		}
+		this._opacity = config.getValueByAlias('showAlpha') ?? false;
+		this._showPalette = config.getValueByAlias('showPalette') ?? false;
 	}
 
 	#onChange(event: UUIColorPickerChangeEvent) {
@@ -58,7 +35,7 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
 		return html`
 			<umb-input-eye-dropper
 				.opacity=${this._opacity}
-				.swatches=${this._swatches}
+				.showPalette=${this._showPalette}
 				value=${this.value}
 				@change=${this.#onChange}></umb-input-eye-dropper>
 		`;