fix: use hue normalized color in handle and allow focus

adobe · Apr 7, 2021 · f9e1fa2 · f9e1fa2
1 parent 8e0fd9c
commit f9e1fa2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/packages/color-area/stories/color-area.stories.ts b/packages/color-area/stories/color-area.stories.ts
@@ -41,22 +41,23 @@ export const joint = (): TemplateResult => {
             <sp-color-area
                 color="#7f3e3e"
                 @input=${({ target }: Event & { target: ColorArea }) => {
-                    const display = (target.nextElementSibling as HTMLElement)
-                        .nextElementSibling as HTMLElement;
+                    const next = target.nextElementSibling as ColorSlider;
+                    const display = next.nextElementSibling as HTMLElement;
                     display.textContent = target.color as string;
                     display.style.color = target.color as string;
+                    next.color = target.color;
                 }}
             ></sp-color-area>
             <sp-color-slider
+                color="#7f3e3e"
                 @input=${({
-                    target: { value, previousElementSibling },
+                    target: { color, previousElementSibling },
                 }: Event & {
                     target: ColorSlider & {
-                        value: number;
                         previousElementSibling: ColorArea;
                     };
                 }): void => {
-                    previousElementSibling.hue = value;
+                    previousElementSibling.color = color;
                 }}
             ></sp-color-slider>
             <div style="color: #7f3e3e">#7f3e3e</div>

diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
@@ -253,6 +253,9 @@ export class ColorSlider extends Focusable {
         this._previousColor = this._color.clone();
         this.boundingClientRect = this.getBoundingClientRect();
         (event.target as HTMLElement).setPointerCapture(event.pointerId);
+        if (event.pointerType === 'mouse') {
+            this.handleFocus();
+        }
     }
 
     private handlePointermove(event: PointerEvent): void {
@@ -284,6 +287,9 @@ export class ColorSlider extends Focusable {
         if (!applyDefault) {
             this._color = this._previousColor;
         }
+        if (event.pointerType === 'mouse') {
+            this.handleBlur();
+        }
     }
 
     /**
@@ -336,7 +342,7 @@ export class ColorSlider extends Focusable {
             </div>
             <sp-color-handle
                 class="handle"
-                color=${this._color.toHslString()}
+                color="hsl(${this._color.toHsl().h}, 100%, 50%)"
                 ?disabled=${this.disabled}
                 style="${this.vertical ? 'top' : 'left'}: ${this
                     .sliderHandlePosition}%"

diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
@@ -232,6 +232,9 @@ export class ColorWheel extends Focusable {
         this._previousColor = this._color.clone();
         this.boundingClientRect = this.getBoundingClientRect();
         (event.target as HTMLElement).setPointerCapture(event.pointerId);
+        if (event.pointerType === 'mouse') {
+            this.handleFocus();
+        }
     }
 
     private handlePointermove(event: PointerEvent): void {
@@ -261,6 +264,9 @@ export class ColorWheel extends Focusable {
         if (!applyDefault) {
             this._color = this._previousColor;
         }
+        if (event.pointerType === 'mouse') {
+            this.handleBlur();
+        }
     }
 
     /**
@@ -314,7 +320,7 @@ export class ColorWheel extends Focusable {
 
             <sp-color-handle
                 class="handle"
-                color=${this._color.toHslString()}
+                color="hsl(${this._color.toHsl().h}, 100%, 50%)"
                 ?disabled=${this.disabled}
                 style=${handleLocationStyles}
                 @manage=${streamingListener(