feat(uui-popover-container): remove the Firefox popover polyfill (#858)

* feat: remove the Firefox polyfill as Firefox now natively supports the Popover API

* test: add test for `popover` attribute

* package json

* revert package lock

* update package lock

* update github action to install all playwright dependencies

---------

Co-authored-by: JesmoDev <26099018+JesmoDev@users.noreply.github.com>

.github/workflows/tests.yml

@@ -31,7 +31,8 @@ jobs:
           cache: 'npm'
       - run: npm install
       - run: npm run lint
-      - run: sudo npx playwright install-deps
+      - name: Install Playwright dependencies
+        run: npx playwright install --with-deps
       - run: npm run test
 
   build:

package.json

@@ -132,6 +132,9 @@
     "vite-tsconfig-paths": "4.3.2",
     "web-component-analyzer": "2.0.0"
   },
+  "overrides": {
+    "playwright": "^1.45.3"
+  },
   "workspaces": [
     "./packages/*"
   ],

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -2,7 +2,6 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { findAncestorByAttributeValue } from '@umbraco-ui/uui-base/lib/utils';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { polyfill } from './uui-popover-polyfill.js';
 
 export type PopoverContainerPlacement =
   | 'top'
@@ -72,10 +71,6 @@ export class UUIPopoverContainerElement extends LitElement {
   #scrollParents: Element[] = [];
 
   connectedCallback(): void {
-    //TODO: Remove this polyfill when firefox supports the new popover API
-    !Object.prototype.hasOwnProperty.call(HTMLElement, 'popover') &&
-      polyfill.bind(this)();
-
     if (!this.hasAttribute('popover')) {
       this.setAttribute('popover', '');
     }

packages/uui-popover-container/lib/uui-popover-container.test.ts

@@ -6,7 +6,9 @@ describe('UUIPopoverContainerElement', () => {
 
   beforeEach(async () => {
     element = await fixture(html`
-      <uui-popover-container></uui-popover-container>
+      <uui-popover-container id="my-popover">
+        Hello world
+      </uui-popover-container>
     `);
   });
 
@@ -17,4 +19,9 @@ describe('UUIPopoverContainerElement', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  it('gets the popover attribute', async () => {
+    await element.updateComplete;
+    expect(element).to.have.attribute('popover');
+  });
 });