fix(ui5-color-picker): add tooltip to sliders (#10270)

Now both of the sliders have tootip showing the value selected.

fixes: #10203

packages/main/src/ColorPicker.hbs

@@ -18,10 +18,12 @@
             disabled="{{inputsDisabled}}"
             class="ui5-color-picker-hue-slider"
             min="0"
-            max="1530"
+            max="360"
+            step="1"
             value="{{_hue}}"
             accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
+            show-tooltip
         ></ui5-slider>
         {{#if _isDefaultPickerMode}}
             <ui5-slider
@@ -33,6 +35,7 @@
                 value="{{_alpha}}"
                 accessible-name="{{alphaSliderLabel}}"
                 @ui5-input="{{_handleAlphaInput}}"
+                show-tooltip
             ></ui5-slider>
         {{/if}}
     </div>

packages/main/src/ColorPicker.ts

@@ -368,41 +368,43 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	}
 
 	_setMainColor(hueValue: number) {
-		if (hueValue <= 255) {
+		const hueValueMod = hueValue * 4.251;
+
+		if (hueValueMod <= 255) {
 			this._mainValue = {
 				r: 255,
-				g: hueValue,
+				g: hueValueMod,
 				b: 0,
 			};
-		} else if (hueValue <= 510) {
+		} else if (hueValueMod <= 510) {
 			this._mainValue = {
-				r: 255 - (hueValue - 255),
+				r: 255 - (hueValueMod - 255),
 				g: 255,
 				b: 0,
 			};
-		} else if (hueValue <= 765) {
+		} else if (hueValueMod <= 765) {
 			this._mainValue = {
 				r: 0,
 				g: 255,
-				b: hueValue - 510,
+				b: hueValueMod - 510,
 			};
-		} else if (hueValue <= 1020) {
+		} else if (hueValueMod <= 1020) {
 			this._mainValue = {
 				r: 0,
-				g: 765 - (hueValue - 255),
+				g: 765 - (hueValueMod - 255),
 				b: 255,
 			};
-		} else if (hueValue <= 1275) {
+		} else if (hueValueMod <= 1275) {
 			this._mainValue = {
-				r: hueValue - 1020,
+				r: hueValueMod - 1020,
 				g: 0,
 				b: 255,
 			};
 		} else {
 			this._mainValue = {
 				r: 255,
 				g: 0,
-				b: 1275 - (hueValue - 255),
+				b: 1275 - (hueValueMod - 255),
 			};
 		}
 	}
@@ -438,7 +440,7 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 		// and HSL format, the color will be parsed to RGB
 		// 0 ≤ H < 360
 		// 4.251 because with 4.25 we get out of the colors range.
-		const h = this._hue / 4.251;
+		const h = this._hue;
 
 		// 0 ≤ S ≤ 1
 		const s = 1 - +(Math.round(parseFloat((y / 256) + "e+2")) + "e-2"); // eslint-disable-line
@@ -499,7 +501,7 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 			this._isHueValueChanged = false;
 			this._hue = this.selectedHue ? this.selectedHue : this._hue;
 		} else {
-			this._hue = Math.round(hslColours.h * 4.25);
+			this._hue = Math.round(hslColours.h);
 		}
 
 		this._setMainColor(this._hue);

packages/main/test/specs/ColorPicker.spec.js

@@ -63,7 +63,7 @@ describe("Color Picker general interaction", () => {
 
 		await hueSliderHandle.dragAndDrop({ x: 200, y: 0 });
 
-		assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(182, 61, 184, 0)", "Color properly changed");
+		assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(184, 61, 184, 0)", "Color properly changed");
 		assert.strictEqual(await stepInput.getAttribute("value"), "1", "Change event gets fired on hue slider change");
 	});
 
@@ -75,7 +75,7 @@ describe("Color Picker general interaction", () => {
 		await colorPicker.scrollIntoView();
 		await alphaSliderHandle.dragAndDrop({ x: 200, y: 0 });
 
-		assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(182, 61, 184, 0.83)", "Alpha value propely changed");
+		assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(184, 61, 184, 0.83)", "Alpha value propely changed");
 		assert.strictEqual(await stepInput.getAttribute("value"), "2", "Change event gets fired on alpha slider change");
 	});