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

packages/base/src/util/ColorConversion.ts

@@ -241,8 +241,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;
@@ -263,7 +263,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)),
@@ -332,8 +332,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;
@@ -361,30 +361,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";
 
 type SimulationDevices = "phone"
 
@@ -50,6 +51,8 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPickerToggleColorMode(): Chainable<void>
+			ui5ColorPickerUpdateInput(name: string, value: 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");
+});

packages/main/src/ColorPicker.hbs

@@ -49,7 +49,7 @@
             <ui5-label>Hex</ui5-label>
             <ui5-input
                 class="ui5-color-picker-hex-input"
-                value="{{hex}}"
+                value="{{HEX}}"
                 @keydown="{{_onkeydown}}"
                 accessible-name="{{hexInputLabel}}"
                 @ui5-change="{{_handleHEXChange}}"
@@ -60,51 +60,49 @@
 
     {{#if _isDefaultPickerMode}}
         <div
-            class="ui5-color-picker-rgb-wrapper"
-            @ui5-change="{{_handleRGBInputsChange}}"
+            class="ui5-color-channel-inputs-wrapper"
+            @ui5-change="{{_handleColorInputChange}}"
         >
-            <div class="ui5-color-picker-rgb">
-                <ui5-input
-                    id="red"
-                    class="ui5-color-picker-rgb-input"
-                    disabled="{{inputsDisabled}}"
-                    accessible-name="{{redInputLabel}}"
-                    value="{{_value.r}}"
-                ></ui5-input>
-                <ui5-label>R</ui5-label>
-            </div>
-            <div class="ui5-color-picker-rgb">
-                <ui5-input
-                    id="green"
-                    class="ui5-color-picker-rgb-input"
-                    disabled="{{inputsDisabled}}"
-                    accessible-name="{{greenInputLabel}}"
-                    value="{{_value.g}}"
-                ></ui5-input>
-                <ui5-label>G</ui5-label>
-            </div>
-            <div class="ui5-color-picker-rgb">
-                <ui5-input
-                    id="blue"
-                    class="ui5-color-picker-rgb-input"
-                    disabled="{{inputsDisabled}}"
-                    accessible-name="{{blueInputLabel}}"
-                    value="{{_value.b}}"
-                ></ui5-input>
-                <ui5-label>B</ui5-label>
-            </div>
-            <div class="ui5-color-picker-rgb">
+            {{#each colorChannelInputs}}
+                <div class="ui5-color-channel">
+                    <ui5-input
+                        id="{{id}}"
+                        class="ui5-color-channel-input"
+                        disabled="{{disabled}}"
+                        accessible-name="{{accessibleName}}"
+                        value="{{value}}"
+                    ></ui5-input>
+                    <ui5-label>{{label}}</ui5-label>
+                </div>
+                <div class="ui5-color-channel-percentage-label">
+                    {{#if showPercentSymbol}}
+                        <ui5-label>%</ui5-label>
+                    {{/if}}
+                </div>
+            {{/each}}
+
+            <div class="ui5-color-channel">
                 <ui5-input
                     id="alpha"
                     disabled="{{inputsDisabled}}"
-                    class="ui5-color-picker-rgb-input"
+                    class="ui5-color-channel-input"
                     value="{{_alpha}}"
                     accessible-name="{{alphaInputLabel}}"
                     @ui5-input="{{_handleAlphaInput}}"
                     @ui5-change="{{_handleAlphaChange}}"
                 ></ui5-input>
                 <ui5-label>A</ui5-label>
             </div>
+            <div>
+                <ui5-button
+                    class="ui5-color-channel-toggle"
+                    id="toggle-picker-mode"
+                    icon="expand" 
+                    design="Transparent" 
+                    tooltip="{{toggleModeTooltip}}"
+                    @click="{{_togglePickerMode}}"
+                ></ui5-button>
+            </div>
         </div>
     {{/if}}
 </section>