fix: Don't update saturation based on parsed color (#536)

* Don't update saturation based on parsed color

* Workaround to update color area when hue slider change

* Fix typo

* Don't change opacity of gradient in opacity-slider as value change and value itself may contain alpha

* Make handle opacity based on alpha

* Clear console

* Clear console

* Clear console

* Add comment

* Remove output of hue value

* Update saturation

* Don't update saturation

* Remove commented line

* Remove unused parameter

* Run linter

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: bjarnef

packages/uui-color-area/lib/uui-color-area.element.ts

@@ -97,12 +97,16 @@ export class UUIColorAreaElement extends LitElement {
       const parsed = colord(newVal);
 
       if (parsed.isValid()) {
-        const { h, s, l } = parsed.toHsl();
+        const { h, l, a } = parsed.toHsl();
+
+        // Update hue from parsed color, but when color is black, value from hue slider may be different from zero.
+        if (h !== 0) {
+          this.hue = h;
+        }
 
-        this.hue = h;
-        this.saturation = s;
         this.lightness = l;
         this.brightness = this.getBrightness(l);
+        this.alpha = a * 100;
       }
     } catch (e) {
       // TODO: Should we log this?

packages/uui-color-picker/lib/uui-color-picker.element.ts

@@ -360,15 +360,24 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   }
 
   setColor(colorString: string | HslaColor) {
-    this._colord = new Colord(colorString);
+    const colord = new Colord(colorString);
 
-    const { h, l, s, a } = this._colord.toHsl();
+    const { h, s, l, a } = colord.toHsl();
 
     this.hue = h;
     this.saturation = s;
     this.lightness = l;
     this.alpha = this.opacity ? a * 100 : 100;
 
+    const hslaColor = colorString as HslaColor;
+
+    // Workaround as hue isn't correct after changing hue slider, but Colord parse hue value as zero when color is black.
+    if (hslaColor && hslaColor.h) {
+      this.hue = hslaColor.h;
+    }
+
+    this._colord = colord;
+
     this._syncValues();
 
     this.dispatchEvent(
@@ -384,6 +393,23 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     return this.uppercase ? string.toUpperCase() : string.toLowerCase();
   }
 
+  /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */
+  private getHexString(
+    hue: number,
+    saturation: number,
+    lightness: number,
+    alpha = 100
+  ) {
+    const color = colord(
+      `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+    );
+    if (!color.isValid()) {
+      return '';
+    }
+
+    return color.toHex();
+  }
+
   private _syncValues() {
     this.inputValue = this.getFormattedValue(this.format);
     this.value = this.inputValue;
@@ -400,6 +426,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         aria-disabled=${this.disabled ? 'true' : 'false'}>
         <uui-color-area
           .value="${this.value}"
+          .hue="${Math.round(this.hue)}"
           ?disabled=${this.disabled}
           @change=${this.handleGridChange}>
         </uui-color-area>
@@ -419,7 +446,11 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
                     class="opacity-slider"
                     .value=${Math.round(this.alpha)}
                     type="opacity"
-                    .color=${this.value}
+                    .color=${this.getHexString(
+                      this.hue,
+                      this.saturation,
+                      this.lightness
+                    )}
                     ?disabled=${this.disabled}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>

packages/uui-color-slider/lib/uui-color-slider.element.ts

@@ -217,7 +217,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
     this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));
   }
 
-  get ccsPropCurrentValue() {
+  get cssPropCurrentValue() {
     return this.value === 0
       ? this.vertical
         ? 100
@@ -257,7 +257,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
         <!-- <slot name="detail"> </slot> -->
         <span
           id="color-slider__handle"
-          style="--current-value: ${this.ccsPropCurrentValue}%;"
+          style="--current-value: ${this.cssPropCurrentValue}%;"
           tabindex=${ifDefined(this.disabled ? undefined : '0')}></span>
       </div>
       ${Math.round(this.value)}`;