fix(ui5-color-picker): ensure RGB and HSL values are within limits (#11915)

Previously if an user was about to type a RGB or HSL value in the input fields, that were out of boundaries (from 0 to 255 for all RGB fields, 0 to 360 for Hue, 0 to 100(%) for Saturation and Light in HSL), the input fields became disabled, which led to bad UX.

With this change we now 'normalise' the values that are out of the bounds (mentioned above) to the closest one.

For RGB:

values above 255 –> e.g 275 are normalised to 255;
values below 0 –> e.g -20 are normalised to 0;
For HSL:

Hue:

values above 360 –> e.g 375 are normalised to 360;
values below 0 –> e.g -20 are normlised to 0;
Saturation and Light:

values above 100 –> e.g. 120 are normalised to 100;
values below 0 –> e.g. -20 are normalised

Author: hinzzx

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

@@ -221,6 +221,43 @@ describe("Color Picker general interaction tests", () => {
 			.should("have.value", "rgba(70, 64, 191, 0.5)");
 	});
 
+	it("should normalize RGB values above 255 to 255", () => {
+		cy.mount(<ColorPicker value="rgba(100, 100, 100, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		// Test red input normalization
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "300");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#red", "255");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(255, 100, 100, 1)");
+
+		// Test green input normalization
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#green", "400");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#green", "255");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(255, 255, 100, 1)");
+
+		// Test blue input normalization
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#blue", "500");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#blue", "255");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(255, 255, 255, 1)");
+	});
+
 	it("should update Saturation & Light inputs when selecting color from main color grid", () => {
 		cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
 

packages/main/src/ColorPicker.ts

@@ -358,33 +358,41 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	_handleColorInputChange(e: Event) {
 		const target = e.target as Input;
 		const targetValue = parseInt(target.value) || 0;
+		let normalizedValue = targetValue;
 
 		switch (target.id) {
 		case "red":
 			this._colorValue.R = targetValue;
+			normalizedValue = this._colorValue.R;
 			break;
 
 		case "green":
 			this._colorValue.G = targetValue;
+			normalizedValue = this._colorValue.G;
 			break;
 
 		case "blue":
 			this._colorValue.B = targetValue;
+			normalizedValue = this._colorValue.B;
 			break;
 
 		case "hue":
 			this._colorValue.H = targetValue;
+			normalizedValue = this._colorValue.H;
 			break;
 
 		case "saturation":
 			this._colorValue.S = targetValue;
+			normalizedValue = this._colorValue.S;
 			break;
 
 		case "light":
 			this._colorValue.L = targetValue;
+			normalizedValue = this._colorValue.L;
 			break;
 		}
 
+		target.value = String(normalizedValue);
 		const color = this._colorValue.toRGBString();
 		this._setValue(color);
 		this._updateColorGrid();

packages/main/src/colorpicker-utils/ColorValue.ts

@@ -94,33 +94,39 @@ class ColorValue {
 	}
 
 	set H(value: number) {
-		this.validateHValue(value);
-		this._updateHSL({ h: value, s: this.S, l: this.L });
+		const normalizedValue = this.normalizeHValue(value);
+		this._valid = true;
+		this._updateHSL({ h: normalizedValue, s: this.S, l: this.L });
 	}
 
 	set S(value: number) {
-		this.validateSLValue(value);
-		this._updateHSL({ h: this.H, s: value, l: this.L });
+		const normalizedValue = this.normalizeSLValue(value);
+		this._valid = true;
+		this._updateHSL({ h: this.H, s: normalizedValue, l: this.L });
 	}
 
 	set L(value: number) {
-		this.validateSLValue(value);
-		this._updateHSL({ h: this.H, s: this.S, l: value });
+		const normalizedValue = this.normalizeSLValue(value);
+		this._valid = true;
+		this._updateHSL({ h: this.H, s: this.S, l: normalizedValue });
 	}
 
 	set R(value: number) {
-		this.validateRGBValue(value);
-		this._updateRGB({ r: value, g: this.G, b: this.B });
+		const normalizedValue = this.normalizeRGBValue(value);
+		this._valid = true;
+		this._updateRGB({ r: normalizedValue, g: this.G, b: this.B });
 	}
 
 	set G(value: number) {
-		this.validateRGBValue(value);
-		this._updateRGB(this.RGB = { r: this.R, g: value, b: this.B });
+		const normalizedValue = this.normalizeRGBValue(value);
+		this._valid = true;
+		this._updateRGB({ r: this.R, g: normalizedValue, b: this.B });
 	}
 
 	set B(value: number) {
-		this.validateRGBValue(value);
-		this._updateRGB({ r: this.R, g: this.G, b: value });
+		const normalizedValue = this.normalizeRGBValue(value);
+		this._valid = true;
+		this._updateRGB({ r: this.R, g: this.G, b: normalizedValue });
 	}
 
 	set Alpha(value: number) {
@@ -135,6 +141,13 @@ class ColorValue {
 		this._valid = this._isValidRGBValue(value);
 	}
 
+	normalizeRGBValue(value: number): number {
+		if (this._isValidRGBValue(value)) {
+			return value;
+		}
+		return value < 0 ? 0 : 255;
+	}
+
 	validateRGBColor(color: ColorRGB) {
 		this._valid = this._isValidRGBValue(color.r) && this._isValidRGBValue(color.g) && this._isValidRGBValue(color.b);
 	}
@@ -147,10 +160,24 @@ class ColorValue {
 		this._valid = this._isValidHValue(value);
 	}
 
+	normalizeHValue(value: number): number {
+		if (this._isValidHValue(value)) {
+			return value;
+		}
+		return value < 0 ? 0 : 360;
+	}
+
 	validateSLValue(value: number) {
 		this._valid = this._isValidSLValue(value);
 	}
 
+	normalizeSLValue(value: number): number {
+		if (this._isValidSLValue(value)) {
+			return value;
+		}
+		return value < 0 ? 0 : 100;
+	}
+
 	validateHEX(value: string) {
 		const hexRegex = new RegExp("^[<0-9 abcdef]+$");
 		this._valid = value.length === 6 && hexRegex.test(value);