fix(color-area): providing x and y attributes renders color handle co…

…rrectly (#4240)

* fix(color-area): providing x and y attributes renders color handle correctly

* fix(color-area): minor fix

packages/color-area/src/ColorArea.ts

@@ -79,8 +79,9 @@ export class ColorArea extends SpectrumElement {
  v: this.y,
  }),
  applyColorToState: ({ s, v }) => {
- this.x = s;
- this.y = v;
+ this._x = s;
+ this._y = v;
+ this.requestUpdate();
  },
  });
 
@@ -128,6 +129,7 @@ export class ColorArea extends SpectrumElement {
  this._x = x;
  }
  this.requestUpdate('x', oldValue);
+ this.colorController.applyColorFromState();
  }
 
  private _x = 1;
@@ -150,6 +152,7 @@ export class ColorArea extends SpectrumElement {
  this._y = y;
  }
  this.requestUpdate('y', oldValue);
+ this.colorController.applyColorFromState();
  }
 
  private _y = 1;

packages/color-area/test/color-area.test.ts

@@ -150,6 +150,38 @@ describe('ColorArea', () => {
  'something custom Color Picker'
  );
  });
+ it('updates color when x value changes', async () => {
+ const el = await fixture<ColorArea>(
+ html`
+ <sp-color-area></sp-color-area>
+ `
+ );
+
+ await el.updateComplete;
+
+ const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;
+
+ expect(handle.color).to.equal('hsl(0, 100%, 50%)');
+ el.x = 0.3;
+ await el.updateComplete;
+ expect(handle.color).to.equal('hsl(0, 100%, 85%)');
+ });
+ it('updates color when y value changes', async () => {
+ const el = await fixture<ColorArea>(
+ html`
+ <sp-color-area></sp-color-area>
+ `
+ );
+
+ await el.updateComplete;
+
+ const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;
+
+ expect(handle.color).to.equal('hsl(0, 100%, 50%)');
+ el.y = 0.7;
+ await el.updateComplete;
+ expect(handle.color).to.equal('hsl(0, 100%, 35%)');
+ });
  it('accepts `hue` values', async () => {
  const el = await fixture<ColorArea>(
  html`