feat(ui5-color-palette): set selected color to inner color picker (#1…

…0276)

Until now, when a color is being selected in ui5-color-palette or ui5-color-palette-popover, and the inner ui5-color-picker is being opened via More Colors... button, the selected color was not shown in the picker nor in the color area or color sliders, nor as RGBA values.

This PR adds this feature and now when there is selected color in the color palette/color palette popover, and the color picker is activated, it displays the selected color and its RGBA values.

Fixes #8772

packages/base/src/util/ColorConversion.ts

@@ -196,6 +196,19 @@ const getRGBColor = (color: string): ColorRGB => {
 	return HEXToRGB(color);
 };
 
+const getAlpha = (color: string): number => {
+	let alpha = 1;
+
+	if (color.startsWith("rgba") || color.startsWith("hsla")) {
+		const parts = color.split(",");
+		if (parts.length === 4) {
+			alpha = parseFloat(parts[3].replace(")", "").trim());
+		}
+	}
+
+	return alpha;
+};
+
 /**
  * Return an object with the properties for each of the main colors(red, green, blue)
  * @param {String} color Receives a color in the following format: "rgba(0, 0, 0, 1)
@@ -394,6 +407,7 @@ const RGBToHSL = (color: ColorRGB): ColorHSL => {
 
 export {
 	getRGBColor,
+	getAlpha,
 	HSLToRGB,
 	HEXToRGB,
 	RGBToHSL,

packages/main/cypress/specs/ColorPalette.cy.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import "../../src/ColorPalette.js";
+import "../../src/ColorPaletteItem.js";
+import "../../src/features/ColorPaletteMoreColors.js";
+
+describe("Color Palette tests", () => {
+	it("internal color picker should have selected color set on open", () => {
+		cy.mount(html`<ui5-color-palette show-more-colors show-recent-colors>
+<ui5-color-palette-item id="named" value="red"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgba" value="rgba(0, 255, 0, 0.5)"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgb" value="rgb(0,0,255)"></ui5-color-palette-item>
+<ui5-color-palette-item id="hex" value="#C0FFEE"></ui5-color-palette-item>
+</ui5-color-palette>`);
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#named", {
+				r: "255",
+				g: "0",
+				b: "0",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgba", {
+				r: "0",
+				g: "255",
+				b: "0",
+				a: "0.5",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgb", {
+				r: "0",
+				g: "0",
+				b: "255",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#hex", {
+				r: "192",
+				g: "255",
+				b: "238",
+				a: "1",
+			});
+	});
+});

packages/main/cypress/support/commands.ts

@@ -38,6 +38,7 @@
 
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Menu.commands.js";
+import "./commands/ColorPalette.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -50,6 +51,7 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 		}
 	}
 }

packages/main/cypress/support/commands/ColorPalette.commands.ts

@@ -0,0 +1,62 @@
+Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true }, (subject, colorPaletteItem, values) => {
+	cy.get(subject)
+		.as("colorPalette");
+
+	cy.get("ui5-color-palette")
+		.shadow()
+		.find(".ui5-cp-more-colors")
+		.as("moreColors");
+
+	cy.get("@colorPalette")
+		.find(colorPaletteItem)
+		.realClick();
+
+	cy.get("@moreColors")
+		.realClick();
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-color-picker")
+		.as("colorPicker");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#red")
+		.as("redColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#green")
+		.as("greenColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#blue")
+		.as("blueColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#alpha")
+		.as("alpha");
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-dialog")
+		.find("ui5-button")
+		.as("okButton");
+
+	cy.get("@redColor")
+		.should("have.attr", "value", values.r);
+
+	cy.get("@greenColor")
+		.should("have.attr", "value", values.g);
+
+	cy.get("@blueColor")
+		.should("have.attr", "value", values.b);
+
+	cy.get("@alpha")
+		.should("have.attr", "value", values.a);
+
+	cy.get("@okButton")
+		.realClick();
+});

packages/main/src/ColorPalette.ts

@@ -497,6 +497,12 @@ class ColorPalette extends UI5Element {
 
 	_openMoreColorsDialog() {
 		const dialog = this._getDialog();
+		const colorPicker = this.getColorPicker();
+		const value = this._currentlySelected ? this._currentlySelected.value : undefined;
+
+		if (value) {
+			colorPicker.value = value;
+		}
 		dialog.open = true;
 	}
 

packages/main/src/ColorPicker.ts

@@ -11,6 +11,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import {
 	getRGBColor,
+	getAlpha,
 	HSLToRGB,
 	HEXToRGB,
 	RGBToHSL,
@@ -225,7 +226,8 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	onBeforeRendering() {
 		// we have the color & ._mainValue properties here
 		this._value = getRGBColor(this.value);
-		const tempColor = `rgba(${this._value.r},${this._value.g},${this._value.b},1)`;
+		this._alpha = getAlpha(this.value);
+		const tempColor = `rgba(${this._value.r},${this._value.g},${this._value.b},${this._alpha})`;
 		this._setHex();
 		this._setValues();
 		this.style.setProperty(getScopedVarName("--ui5_Color_Picker_Progress_Container_Color"), tempColor);