Feat: Implement use of popover container (Popover-api) (#674)

Co-authored-by: Niels Lyngsø <[email protected]>

Author: JesmoDev

.vscode/settings.json

@@ -5,6 +5,7 @@
     "deselectable",
     "noopener",
     "noreferrer",
+    "svgs",
     "Umbraco"
   ],
   "npm.enableRunFromFolder": true

package-lock.json

@@ -40,22 +40,6 @@ export class UUIButtonGroupElement extends LitElement {
           var(--uui-border-radius) 0;
       }
 
-      ::slotted(uui-popover) {
-        width: unset;
-        --uui-popover-toggle-slot-button-border-radius: 0;
-      }
-      ::slotted(uui-popover:not(:first-child)) {
-        --uui-popover-toggle-slot-button-merge-border-left: 1;
-      }
-      ::slotted(uui-popover:first-child) {
-        --uui-popover-toggle-slot-button-border-radius: var(--uui-border-radius)
-          0 0 var(--uui-border-radius);
-      }
-      ::slotted(uui-popover:last-child) {
-        --uui-popover-toggle-slot-button-border-radius: 0
-          var(--uui-border-radius) var(--uui-border-radius) 0;
-      }
-
       ::slotted(*:hover) {
         z-index: 1;
       }

packages/uui-button-group/lib/uui-button-group.element.ts

@@ -122,52 +122,3 @@ export const LooksAndColors = () => html`
     `
   )}
 `;
-
-// //* DO NOT DELETE START! they will work when dropdown component will come to this branch
-export const WithDropdown = () => {
-  const handleClick = (e: MouseEvent) => {
-    //@ts-ignore
-    e.target.parentNode.open = !e.target.parentNode.open;
-  };
-
-  return html`
-    <uui-button-group>
-      <uui-popover placement="bottom-start" id="settings-popover" margin="14">
-        <uui-button
-          slot="trigger"
-          look="outline"
-          label="Open dropdown"
-          id="myPopoverBtn"
-          @click=${handleClick}>
-          Open dropdown 1
-        </uui-button>
-        <div slot="popover">My Content appearing inside popover box.</div>
-      </uui-popover>
-      <uui-button label="Button 1" look="outline"></uui-button>
-      <uui-button label="Button 2" look="outline"></uui-button>
-      <uui-popover placement="bottom-start" id="settings-popover" margin="14">
-        <uui-button
-          slot="trigger"
-          look="outline"
-          label="Open dropdown"
-          id="myPopoverBtn"
-          @click=${handleClick}>
-          Open dropdown 2
-        </uui-button>
-        <div slot="popover">My Content appearing inside popover box.</div>
-      </uui-popover>
-      <uui-button label="Button 4" look="outline"></uui-button>
-      <uui-popover placement="bottom-start" id="settings-popover" margin="14">
-        <uui-button
-          slot="trigger"
-          look="outline"
-          label="Open dropdown"
-          id="myPopoverBtn"
-          @click=${handleClick}>
-          Open dropdown 3
-        </uui-button>
-        <div slot="popover">My Content appearing inside popover box.</div>
-      </uui-popover>
-    </uui-button-group>
-  `;
-};

packages/uui-button-group/lib/uui-button-group.story.ts

@@ -13,26 +13,24 @@ import { clamp, demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
+import type {
   UUIColorAreaElement,
   UUIColorAreaEvent,
 } from '@umbraco-ui/uui-color-area/lib';
 
-import {
+import type {
   UUIColorSliderElement,
   UUIColorSliderEvent,
 } from '@umbraco-ui/uui-color-slider/lib';
 
-import {
+import type {
   UUIColorSwatchesElement,
   UUIColorSwatchesEvent,
 } from '@umbraco-ui/uui-color-swatches/lib';
 
-import { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib';
+import type { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib';
 
-import { UUIPopoverElement } from '@umbraco-ui/uui-popover/lib';
-
-import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+import type { UUIInputElement } from '@umbraco-ui/uui-input/lib';
 import { UUIColorPickerChangeEvent } from './UUIColorPickerEvent';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 
@@ -189,11 +187,11 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     demandCustomElement(this, 'uui-input');
     demandCustomElement(this, 'uui-button');
     demandCustomElement(this, 'uui-button-group');
-    demandCustomElement(this, 'uui-popover');
     demandCustomElement(this, 'uui-color-swatches');
     demandCustomElement(this, 'uui-color-swatch');
     demandCustomElement(this, 'uui-color-area');
     demandCustomElement(this, 'uui-color-slider');
+    demandCustomElement(this, 'uui-popover-container');
   }
 
   /** Returns the current value as a string in the specified format. */
@@ -346,26 +344,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     });
   }
 
-  openColorPicker(event: Event) {
-    event.stopImmediatePropagation();
-
-    const target = event.target as HTMLElement;
-    const popover = target.parentElement as UUIPopoverElement;
-
-    popover.open = !popover?.open;
-
-    target.setAttribute('aria-expanded', popover.open.toString());
-  }
-
-  closeColorPicker(event: Event) {
-    const target = event.target as UUIPopoverElement;
-    const trigger = target.querySelector('button[part=trigger]');
-
-    if (trigger) {
-      trigger.setAttribute('aria-expanded', 'false');
-    }
-  }
-
   handleEyeDropper() {
     if (!hasEyeDropper) {
       return;
@@ -520,13 +498,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   }
 
   private _renderPreviewButton() {
-    return html`<uui-popover
-      placement="bottom-start"
-      @close=${this.closeColorPicker}>
-      <button
+    return html` <button
         type="button"
         part="trigger"
-        slot="trigger"
         aria-label="${this.label || 'Open Color picker'}"
         class=${classMap({
           'color-picker__trigger': true,
@@ -542,11 +516,12 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
           }%, ${this.alpha / 100})`,
         })}
         ?disabled=${this.disabled}
-        @click=${this.openColorPicker}
         aria-haspopup="true"
-        aria-expanded="false"></button>
-      <div slot="popover">${this._renderColorPicker()}</div>
-    </uui-popover>`;
+        aria-expanded="false"
+        popovertarget="color-picker-popover"></button>
+      <uui-popover-container id="color-picker-popover">
+        ${this._renderColorPicker()}
+      </uui-popover-container>`;
   }
 
   render() {
@@ -564,6 +539,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         display: block;
         width: var(--uui-color-picker-width, 280px);
       }
+      uui-popover-container {
+        width: inherit;
+      }
       .color-picker {
         width: 100%;
         background-color: #fff;
@@ -681,12 +659,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         height: 36px;
       }
 
-      uui-popover {
-        display: block;
-        width: 100%;
-        margin: 5px 0;
-      }
-
       uui-input {
         /*  lower the font size to avoid overflow with hlsa format */
         font-size: 0.85rem;

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

@@ -1,12 +1,12 @@
-import '@umbraco-ui/uui-color-swatches/lib';
-import '@umbraco-ui/uui-color-swatch/lib';
-import '@umbraco-ui/uui-color-slider/lib';
-import '@umbraco-ui/uui-color-area/lib';
-import '@umbraco-ui/uui-input/lib';
-import '@umbraco-ui/uui-button/lib';
 import '@umbraco-ui/uui-button-group/lib';
+import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-color-area/lib';
+import '@umbraco-ui/uui-color-slider/lib';
+import '@umbraco-ui/uui-color-swatch/lib';
+import '@umbraco-ui/uui-color-swatches/lib';
 import '@umbraco-ui/uui-icon/lib';
-import '@umbraco-ui/uui-popover/lib';
+import '@umbraco-ui/uui-input/lib';
+import '@umbraco-ui/uui-popover-container/lib';
 
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { withActions } from '@storybook/addon-actions/decorator';

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

@@ -31,6 +31,7 @@
   ],
   "dependencies": {
     "@umbraco-ui/uui-base": "1.6.0-rc.1",
+    "@umbraco-ui/uui-popover-container": "1.6.0-rc.1",
     "colord": "^2.9.3"
   },
   "scripts": {

packages/uui-color-picker/package.json

@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-popover-container"
     }
   ]
 }