Merge pull request #589 from bjarnef/feature/color-picker-toggle

Toggle color picker popover clicking preview button

Author: loivsen

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

@@ -489,7 +489,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     event.stopImmediatePropagation();
 
     const target = event.target as HTMLElement;
-    const popover = target.nextElementSibling as UUIPopoverElement;
+    const popover = target.parentElement as UUIPopoverElement;
 
     popover.open = !popover?.open;
 
@@ -498,7 +498,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
 
   closeColorPicker(event: Event) {
     const target = event.target as UUIPopoverElement;
-    const trigger = target.previousElementSibling;
+    const trigger = target.querySelector("button[part=trigger]");
 
     if (trigger) {
       trigger.setAttribute('aria-expanded', 'false');
@@ -661,28 +661,29 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   }
 
   private _renderPreviewButton() {
-    return html`<button
-        type="button"
-        slot="trigger"
-        aria-label="${this.label || 'Open Color picker'}"
-        class=${classMap({
-          'color-picker__trigger': true,
-          'color-dropdown__trigger--disabled': this.disabled,
-          'color-dropdown__trigger--small': this.size === 'small',
-          'color-dropdown__trigger--medium': this.size === 'medium',
-          'color-dropdown__trigger--large': this.size === 'large',
-          'color-picker__transparent-bg': true,
-        })}
-        style=${styleMap({
-          '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${
-            this.lightness
-          }%, ${this.alpha / 100})`,
-        })}
-        ?disabled=${this.disabled}
-        @click=${this.openColorPicker}
-        aria-haspopup="true"
-        aria-expanded="false"></button>
-      <uui-popover placement="bottom-start" @close=${this.closeColorPicker}>
+      return html`<uui-popover placement="bottom-start" @close=${this.closeColorPicker}>
+        <button
+          type="button"
+          part="trigger"
+          slot="trigger"
+          aria-label="${this.label || 'Open Color picker'}"
+          class=${classMap({
+            'color-picker__trigger': true,
+            'color-dropdown__trigger--disabled': this.disabled,
+            'color-dropdown__trigger--small': this.size === 'small',
+            'color-dropdown__trigger--medium': this.size === 'medium',
+            'color-dropdown__trigger--large': this.size === 'large',
+            'color-picker__transparent-bg': true,
+          })}
+          style=${styleMap({
+            '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${
+              this.lightness
+            }%, ${this.alpha / 100})`,
+          })}
+          ?disabled=${this.disabled}
+          @click=${this.openColorPicker}
+          aria-haspopup="true"
+          aria-expanded="false"></button>
         <div slot="popover">${this._renderColorPicker()}</div>
       </uui-popover>`;
   }