feat(ui5-color-picker): add HSL color selection

packages/base/src/util/ColorConversion.ts

@@ -254,8 +254,8 @@ const RGBStringToRGBObject = (color: string): ColorRGB => {
 
 const HSLToRGB = (color: ColorHSL): ColorRGB => {
 	// Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html
-	let saturation = color.s * 100,
-		lightness = color.l * 100,
+	let saturation = color.s,
+		lightness = color.l,
 		red,
 		green,
 		blue;
@@ -276,7 +276,7 @@ const HSLToRGB = (color: ColorHSL): ColorRGB => {
 		lightness /= 100;
 	}
 
-	const hue = color.h,
+	const hue = ((color.h % 360) + 360) % 360,
 		d = saturation * (1 - Math.abs(2 * lightness - 1)),
 		m = 255 * (lightness - 0.5 * d),
 		x = d * (1 - Math.abs(((hue / 60) % 2) - 1)),
@@ -345,8 +345,8 @@ const HEXToRGB = (hex: string): ColorRGB => {
  * @param {Object} color Receives an object with the properties for each of the main colors(r, g, b)
  */
 const RGBtoHEX = (color: ColorRGB): string => {
-	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
-	let hexValue = "#";
+	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
+	let hexValue = "";
 
 	let divisionNumber = color.r / 16;
 	let remainder = color.r % 16;
@@ -374,30 +374,35 @@ const RGBToHSL = (color: ColorRGB): ColorHSL => {
 		min = Math.min(R, G, B),
 		delta = max - min;
 
-	let h = 0,
-		s;
+	let h = (max + min) / 2;
+	let s = (max + min) / 2;
+	let l = (max + min) / 2;
 
-	// Hue calculation
-	if (delta === 0) {
+	if (max === min) {
 		h = 0;
-	} else if (max === R) {
-		h = 60 * (((G - B) / delta) % 6);
-	} else if (max === G) {
-		h = 60 * (((B - R) / delta) + 2);
-	} else if (max === B) {
-		h = 60 * (((R - G) / delta) + 4);
-	}
-
-	// Lightness calculation
-	const l = (max + min) / 2;
-
-	// Saturation calculation
-	if (delta === 0) {
 		s = 0;
 	} else {
-		s = delta / (1 - Math.abs(2 * l - 1));
+		s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+
+		switch (max) {
+		case R:
+			h = (G - B) / delta + (G < B ? 6 : 0);
+			break;
+		case G:
+			h = (B - R) / delta + 2;
+			break;
+		case B:
+			h = (R - G) / delta + 4;
+			break;
+		}
+
+		h /= 6;
 	}
 
+	h = Math.round(h * 360);
+	s = Math.round(s * 100);
+	l = Math.round(l * 100);
+
 	return {
 		h,
 		s,

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

@@ -24,4 +24,102 @@ describe("Color Picker tests", () => {
 			.find("#alpha")
 			.should("not.exist");
 	});
+
+	it("should toggle display to RGB or HSL when button is selected", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#hue")
+			.should("have.attr", "value", "205");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#saturation")
+			.should("have.attr", "value", "65");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#light")
+			.should("have.attr", "value", "66");
+	});
+
+	it("should update value when hue is changed via the input field", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#hue", "130");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(112, 225, 131, 1)");
+	});
+
+	it("should update value when saturation is changed via the input field", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(112, 225, 131, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#saturation", "44");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(130, 206, 143, 1)");
+	});
+
+	it("should update value when light is changed via the input field", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(130, 206, 143, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#light", "30");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(43, 110, 54, 1)");
+	});
+
+	it("should show correct accessibility info for HSL inputs", () => {
+		cy.mount(html`<ui5-color-picker></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#hue")
+			.should("have.attr", "accessible-name", "Hue");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#saturation")
+			.should("have.attr", "accessible-name", "Saturation");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#light")
+			.should("have.attr", "accessible-name", "Light");
+	});
 });

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/ColorPicker.commands.js";
 import "./commands/ColorPalette.commands.js";
 
 type SimulationDevices = "phone"
@@ -51,6 +52,8 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPickerToggleColorMode(): Chainable<void>
+			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 		}
 	}

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

@@ -0,0 +1,24 @@
+Cypress.Commands.add("ui5ColorPickerToggleColorMode", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#toggle-picker-mode")
+		.realClick();
+});
+
+Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.realClick({ clickCount: 2 })
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		.realType(value)
+		.realPress("Enter");
+});