refactor: scope action-list and selected-list

.github/workflows/test-on-pr-branch.yml

@@ -2,7 +2,7 @@ name: Test on PR branch
 on: pull_request
 
 jobs:
-  test-on-pr-branch:
+  unit:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout
@@ -19,5 +19,37 @@ jobs:
       - name: Install playwright browsers
         run: npx playwright install --with-deps
 
-      - name: Run tests
-        run: npm run test
+      - name: Run unit tests
+        run: npm run-script test:unit
+  visual:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run visual test
+        run: npm run-script test:visual
+
+      - name: Update screenshots
+        if: failure()
+        run: npm run test:update
+
+      - name: Upload failed screenshots as artifacts
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: failed_screenshots
+          path: |
+            screenshots/*/failed/
+            screenshots/*/baseline/

.storybook/server.mjs

@@ -1,8 +1,12 @@
 import { storybookPlugin } from '@web/dev-server-storybook';
 import baseConfig from '../web-dev-server.config.mjs';
+import { polyfill } from '@web/dev-server-polyfill';
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   ...baseConfig,
   open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+  plugins: [storybookPlugin(
+    polyfill({
+      scopedCustomElementRegistry: true,
+    }),{ type: 'web-components' }), ...baseConfig.plugins],
 });

README.md

@@ -21,6 +21,20 @@ This element was meant to be used only for plugins in this organization. If it s
 | ---------------- | ------------- | ------- |
 | `FilterListBase` | /base-list.js |         |
 
+#### Static Fields
+
+| Name             | Privacy | Type     | Default                                                                                                                                                                                                                      | Description | Inherited From |
+| ---------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |
+| `scopedElements` |         | `object` | `{
+    'md-outlined-text-field': MdOutlinedTextField,
+    'md-icon': MdIcon,
+    'md-list': MdList,
+    'md-list-item': MdListItem,
+    'md-divider': MdDivider,
+    'md-menu': MdMenu,
+    'md-menu-item': MdMenuItem,
+  }` |             |                |
+
 #### Fields
 
 | Name           | Privacy | Type           | Default    | Description                                                               | Inherited From |
@@ -72,6 +86,12 @@ This element was meant to be used only for plugins in this organization. If it s
 | ------------ | ------ | ------- |
 | `LitElement` |        | lit     |
 
+#### Mixins
+
+| Name                  | Module | Package                                 |
+| --------------------- | ------ | --------------------------------------- |
+| `ScopedElementsMixin` |        | @open-wc/scoped-elements/lit-element.js |
+
 #### Fields
 
 | Name           | Privacy | Type      | Default    | Description                                                               | Inherited From |
@@ -115,6 +135,18 @@ This element was meant to be used only for plugins in this organization. If it s
 | ---------------- | ------------- | ------- |
 | `FilterListBase` | /base-list.js |         |
 
+#### Static Fields
+
+| Name             | Privacy | Type     | Default                                                                                                                                                                 | Description | Inherited From |
+| ---------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |
+| `scopedElements` |         | `object` | `{
+    'md-outlined-text-field': MdOutlinedTextField,
+    'md-icon': MdIcon,
+    'md-list': MdList,
+    'md-list-item': MdListItem,
+    'md-checkbox': MdCheckbox,
+  }` |             |                |
+
 #### Fields
 
 | Name               | Privacy | Type           | Default    | Description                                                               | Inherited From |

action-list.test.ts

@@ -8,7 +8,7 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import './action-list.js';
 import type { ActionItem, ActionList } from './action-list.js';
 
-const factor = window.process && process.env.CI ? 5 : 3;
+const factor = window.process && process.env.CI ? 6 : 3;
 function timeout(ms: number) {
   return new Promise(res => {
     setTimeout(res, ms * factor);

action-list.ts

@@ -1,16 +1,15 @@
-import { css, html, LitElement, TemplateResult } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { css, html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import '@material/web/divider/divider';
-import '@material/web/icon/icon';
-import '@material/web/list/list';
-import '@material/web/list/list-item';
-import '@material/web/menu/menu';
-import '@material/web/menu/menu-item';
-import '@material/web/textfield/outlined-text-field';
-import { Icon } from '@material/web/icon/internal/icon.js';
-import type { Menu } from '@material/web/menu/menu.js';
+import { MdMenu, Menu } from '@scopedelement/material-web/menu/MdMenu.js';
+import { Icon } from '@scopedelement/material-web/icon/internal/icon.js';
+import { MdDivider } from '@scopedelement/material-web/divider/MdDevider.js';
+import { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';
+import { MdList } from '@scopedelement/material-web/list/MdList.js';
+import { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';
+import { MdMenuItem } from '@scopedelement/material-web/menu/MdMenuItem.js';
+import { MdOutlinedTextField } from '@scopedelement/material-web/textfield/MdOutlinedTextField.js';
 
 import { FilterListBase } from './base-list.js';
 
@@ -50,6 +49,16 @@ function term(item: ActionItem): string {
 @customElement('action-list')
 /** TextField designed to be used for SCL element */
 export class ActionList extends FilterListBase {
+  static scopedElements = {
+    'md-outlined-text-field': MdOutlinedTextField,
+    'md-icon': MdIcon,
+    'md-list': MdList,
+    'md-list-item': MdListItem,
+    'md-divider': MdDivider,
+    'md-menu': MdMenu,
+    'md-menu-item': MdMenuItem,
+  };
+
   /** ListItems and potential */
   @property({ type: Array })
   items: ActionItem[] = [];

base-list.ts

@@ -2,8 +2,9 @@
 import { html, LitElement, TemplateResult } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
-import '@material/web/textfield/outlined-text-field';
-import { TextField } from '@material/web/textfield/internal/text-field';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+
+import { TextField } from '@scopedelement/material-web/textfield/internal/text-field';
 
 function searchRegex(filter?: string): RegExp {
   if (!filter) return /.*/i;
@@ -35,7 +36,7 @@ function debounce(callback: any, delay = 100) {
 }
 
 // Base class for all filterable list components
-export class FilterListBase extends LitElement {
+export class FilterListBase extends ScopedElementsMixin(LitElement) {
   /** Whether list items can be filtered on `headline` and `supportingText` */
   @property({ type: Boolean })
   filterable = false;