fix: ensure color wheel in not opinionated about saturation and light…

…ness
adobe · Apr 7, 2021 · 8e0fd9c · 8e0fd9c
1 parent 4c7a124
commit 8e0fd9c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts
@@ -211,9 +211,11 @@ describe('ColorSlider', () => {
         expect(el.sliderHandlePosition).to.equal(0);
     });
     it('accepts pointer events', async () => {
+        const color = new TinyColor({ h: '0', s: '20%', l: '70%' });
         const el = await fixture<ColorSlider>(
             html`
                 <sp-color-slider
+                    .color=${color}
                     style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;"
                 ></sp-color-slider>
             `
@@ -231,6 +233,8 @@ describe('ColorSlider', () => {
         };
 
         expect(el.sliderHandlePosition).to.equal(0);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         handle.dispatchEvent(
             new PointerEvent('pointerdown', {
@@ -246,6 +250,8 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
         expect(el.sliderHandlePosition).to.equal(0);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         const root = el.shadowRoot ? el.shadowRoot : el;
         const gradient = root.querySelector('.gradient') as HTMLElement;
@@ -263,6 +269,8 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
         expect(el.sliderHandlePosition).to.equal(0);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         gradient.dispatchEvent(
             new PointerEvent('pointerdown', {
@@ -278,6 +286,8 @@ describe('ColorSlider', () => {
         await elementUpdated(el);
 
         expect(el.sliderHandlePosition).to.equal(47.91666666666667);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         handle.dispatchEvent(
             new PointerEvent('pointermove', {
@@ -303,6 +313,8 @@ describe('ColorSlider', () => {
         await elementUpdated(el);
 
         expect(el.sliderHandlePosition).to.equal(53.125);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
     });
     it('accepts pointer events while [vertical]', async () => {
         const el = await fixture<ColorSlider>(

diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
@@ -196,6 +196,7 @@ export class ColorWheel extends Focusable {
                 break;
         }
         this.value = (360 + this.value + delta) % 360;
+        this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
     }
 
     private handleKeyup(event: KeyboardEvent): void {
@@ -235,7 +236,7 @@ export class ColorWheel extends Focusable {
 
     private handlePointermove(event: PointerEvent): void {
         this.value = this.calculateHandlePosition(event);
-        this._color = new TinyColor({ h: this.value, s: '100%', l: '50%' });
+        this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
 
         this.dispatchEvent(
             new Event('input', {

diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts
@@ -209,9 +209,11 @@ describe('ColorWheel', () => {
         expect(el.value).to.equal(0);
     });
     it('accepts pointer events', async () => {
+        const color = new TinyColor({ h: '0', s: '20%', l: '70%' });
         const el = await fixture<ColorWheel>(
             html`
                 <sp-color-wheel
+                    .color=${color}
                     style="--spectrum-global-dimension-size-125: 10px;"
                 ></sp-color-wheel>
             `
@@ -229,6 +231,8 @@ describe('ColorWheel', () => {
         };
 
         expect(el.value).to.equal(0);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         handle.dispatchEvent(
             new PointerEvent('pointerdown', {
@@ -245,6 +249,8 @@ describe('ColorWheel', () => {
         await elementUpdated(el);
 
         expect(el.value).to.equal(0);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         const root = el.shadowRoot ? el.shadowRoot : el;
         const gradient = root.querySelector('[name="gradient"]') as HTMLElement;
@@ -263,6 +269,8 @@ describe('ColorWheel', () => {
         await elementUpdated(el);
 
         expect(el.value).to.equal(0);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         gradient.dispatchEvent(
             new PointerEvent('pointerdown', {
@@ -278,6 +286,8 @@ describe('ColorWheel', () => {
         await elementUpdated(el);
 
         expect(el.value).to.equal(263.74596725608353);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
 
         handle.dispatchEvent(
             new PointerEvent('pointermove', {
@@ -303,6 +313,8 @@ describe('ColorWheel', () => {
         await elementUpdated(el);
 
         expect(el.value).to.equal(96.34019174590992);
+        expect((el.color as HSLA).s).to.be.within(0.19, 0.21);
+        expect((el.color as HSLA).l).to.be.within(0.69, 0.71);
     });
     const colorFormats: {
         name: string;