diff --git a/package.json b/package.json index 7ea8f7282b9..a1ed53caaa8 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,9 @@ "tools/*", "react/*" ], + "resolutions": { + "playwright": "1.52.0" + }, "devDependencies": { "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.5", @@ -102,7 +105,7 @@ "@lit/react": "^1.0.4", "@open-wc/dev-server-hmr": "^0.2.0", "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.44.0", + "@playwright/test": "^1.52.0", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.0.1", "@rollup/plugin-node-resolve": "^15.2.3", diff --git a/packages/action-bar/prefix-action-bar.ts b/packages/action-bar/prefix-action-bar.ts new file mode 100644 index 00000000000..4d3161cf3c3 --- /dev/null +++ b/packages/action-bar/prefix-action-bar.ts @@ -0,0 +1,20 @@ +/** + * Copyright 2025 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import { definePopover } from '@spectrum-web-components/popover/prefix-popover.js'; +import { ActionBar } from './src/ActionBar.js'; +import { definePrefixedElement } from '@spectrum-web-components/base/src/Base.js'; + +export function defineActionBar(prefix: string): void { + definePopover(prefix); + definePrefixedElement(ActionBar.tagName, prefix, ActionBar); +} diff --git a/packages/action-bar/sp-action-bar.ts b/packages/action-bar/sp-action-bar.ts index 11959b60ddf..e8e9444bbab 100644 --- a/packages/action-bar/sp-action-bar.ts +++ b/packages/action-bar/sp-action-bar.ts @@ -10,9 +10,13 @@ * governing permissions and limitations under the License. */ +import { Popover } from '@spectrum-web-components/popover/src/Popover.js'; import { ActionBar } from './src/ActionBar.js'; import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; +// register our dependency elements too +defineElement(Popover.tag, Popover); + defineElement('sp-action-bar', ActionBar); declare global { diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts index 16012c368ab..c13e38064ab 100644 --- a/packages/action-bar/src/ActionBar.ts +++ b/packages/action-bar/src/ActionBar.ts @@ -12,12 +12,12 @@ import { CSSResultArray, - html, - SpectrumElement, + staticHtml as html, + LitElement, + SpectrumMixin, TemplateResult, } from '@spectrum-web-components/base'; import { property } from '@spectrum-web-components/base/src/decorators.js'; -import '@spectrum-web-components/popover/sp-popover.js'; import '@spectrum-web-components/action-group/sp-action-group.js'; import '@spectrum-web-components/button/sp-close-button.js'; import '@spectrum-web-components/field-label/sp-field-label.js'; @@ -26,11 +26,15 @@ import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js'; export const actionBarVariants = ['sticky', 'fixed']; +import { Popover } from '@spectrum-web-components/popover/src/Popover.js'; + /** * @element sp-action-bar * @slot - Content to display with the Action Bar */ -export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) { +export class ActionBar extends FocusVisiblePolyfillMixin( + SpectrumMixin(LitElement, 'action-bar') +) { public static override get styles(): CSSResultArray { return [actionBarStyles]; } @@ -97,7 +101,7 @@ export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) { public override render(): TemplateResult { return html` - + <${Popover.tag} ?open=${this.open} id="popover"> - + `; } } diff --git a/packages/popover/prefix-popover.ts b/packages/popover/prefix-popover.ts new file mode 100644 index 00000000000..e95ebf06784 --- /dev/null +++ b/packages/popover/prefix-popover.ts @@ -0,0 +1,17 @@ +/** + * Copyright 2025 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ +import { Popover } from './src/Popover.js'; +import { definePrefixedElement } from '@spectrum-web-components/base/src/Base.js'; + +export function definePopover(prefix: string): void { + definePrefixedElement(Popover.tagName, prefix, Popover); +} diff --git a/packages/popover/sp-popover.ts b/packages/popover/sp-popover.ts index de78ceacb10..8c0a2b5c653 100644 --- a/packages/popover/sp-popover.ts +++ b/packages/popover/sp-popover.ts @@ -12,7 +12,8 @@ import { Popover } from './src/Popover.js'; import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; -defineElement('sp-popover', Popover); +// register our dependency elements too +defineElement(Popover.tag, Popover); declare global { interface HTMLElementTagNameMap { diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts index f9a1acff1b5..75a4117ede8 100644 --- a/packages/popover/src/Popover.ts +++ b/packages/popover/src/Popover.ts @@ -13,8 +13,9 @@ import { CSSResultArray, html, + LitElement, nothing, - SpectrumElement, + SpectrumMixin, TemplateResult, } from '@spectrum-web-components/base'; import { @@ -29,7 +30,7 @@ import popoverStyles from './popover.css.js'; * * @slot - content to display within the Popover */ -export class Popover extends SpectrumElement { +export class Popover extends SpectrumMixin(LitElement, 'popover') { public static override get styles(): CSSResultArray { return [popoverStyles]; } diff --git a/tools/base/src/Base.ts b/tools/base/src/Base.ts index f03543c9079..c7f991f83ee 100644 --- a/tools/base/src/Base.ts +++ b/tools/base/src/Base.ts @@ -12,15 +12,27 @@ import { LitElement, ReactiveElement } from 'lit'; import { version } from '@spectrum-web-components/base/src/version.js'; + +import { defineElement } from './define-element.js'; + type ThemeRoot = HTMLElement & { startManagingContentDirection: (el: HTMLElement) => void; stopManagingContentDirection: (el: HTMLElement) => void; }; -type Constructor> = { +export type Constructor> = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + new (...args: any[]): T; + prototype: T; +}; +export type PrefixedConstructor> = { // eslint-disable-next-line @typescript-eslint/no-explicit-any new (...args: any[]): T; prototype: T; + VERSION: string; + tagName: string; + prefix: string; + tag: string; }; export interface SpectrumInterface { @@ -58,8 +70,9 @@ const canManageContentDirection = (el: ContentDirectionManager): boolean => el.tagName === 'SP-THEME'; export function SpectrumMixin>( - constructor: T -): T & Constructor { + constructor: T, + tagName: string = 'base' +): T & PrefixedConstructor { class SpectrumMixinElement extends constructor { /** * @private @@ -79,6 +92,16 @@ export function SpectrumMixin>( return this.dir === 'ltr'; } + public static VERSION = version; + public static prefix = 'sp'; + public static tagName = tagName; + + public static get tag(): string { + // note static getters this is the constructor so this method + // gets the derived class prefix and tag + return `${this.prefix}-${this.tagName}`; + } + public hasVisibleFocusInTree(): boolean { const getAncestors = (root: Document = document): HTMLElement[] => { // eslint-disable-next-line @spectrum-web-components/document-active-element @@ -185,8 +208,32 @@ export function SpectrumMixin>( return SpectrumMixinElement; } -export class SpectrumElement extends SpectrumMixin(LitElement) { - static VERSION = version; +export class SpectrumElement extends SpectrumMixin(LitElement, 'base') { + public static override VERSION = version; +} + +export function PrefixedMixin>( + constructor: T, + tagName: string, + prefix: string = 'sp' +): T & PrefixedConstructor { + class PrefixedMixinElement extends constructor { + public static override prefix = prefix; + public static override tagName = tagName; + } + return PrefixedMixinElement; +} + +export function definePrefixedElement( + name: string, + prefix: string, + constructor: PrefixedConstructor +): void { + const PrefixedClass = PrefixedMixin(constructor, name, prefix); + defineElement( + PrefixedClass.tag, + PrefixedClass as unknown as CustomElementConstructor + ); } if (window.__swc.DEBUG) { diff --git a/tools/base/src/index.ts b/tools/base/src/index.ts index 7136a5691af..48b499074a0 100644 --- a/tools/base/src/index.ts +++ b/tools/base/src/index.ts @@ -13,3 +13,4 @@ export * from './Base.js'; export * from './sizedMixin.js'; export * from 'lit'; +export { html as staticHtml, literal } from 'lit/static-html.js'; diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js index 8f41f451196..2649920eda5 100644 --- a/web-test-runner.utils.js +++ b/web-test-runner.utils.js @@ -38,8 +38,6 @@ export const coverallsChromium = playwrightLauncher({ permissions: ['clipboard-read', 'clipboard-write'], }), launchOptions: { - executablePath: - '/home/runner/.cache/ms-playwright/chromium-1148/chrome-linux/chrome', headless: true, }, }); diff --git a/yarn.lock b/yarn.lock index 59c4610c083..cd1c84e31e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -215,7 +215,7 @@ __metadata: "@lit/react": "npm:^1.0.4" "@open-wc/dev-server-hmr": "npm:^0.2.0" "@open-wc/testing": "npm:^4.0.0" - "@playwright/test": "npm:^1.44.0" + "@playwright/test": "npm:^1.52.0" "@rollup/plugin-commonjs": "npm:^25.0.7" "@rollup/plugin-json": "npm:^6.0.1" "@rollup/plugin-node-resolve": "npm:^15.2.3" @@ -4162,14 +4162,14 @@ __metadata: languageName: node linkType: hard -"@playwright/test@npm:^1.44.0": - version: 1.51.1 - resolution: "@playwright/test@npm:1.51.1" +"@playwright/test@npm:^1.52.0": + version: 1.54.2 + resolution: "@playwright/test@npm:1.54.2" dependencies: - playwright: "npm:1.51.1" + playwright: "npm:1.54.2" bin: playwright: cli.js - checksum: 10c0/bdb98f3df58f60b5c62e6d5c79c30910404d1855afea0803af0efd6dc63f90c473dbf92ff7dc212f1459f1d32c85dc44a60f70c2e0ea604f975b953d59523234 + checksum: 10c0/a032d9714a91d6dc40405575ca65ec52f95b0ca95974cd0140e2c12b6c39fbe5311239b2d581b289acaa1e227dd871cf5c43a537f32457f6329723e4add6e6f1 languageName: node linkType: hard @@ -22184,51 +22184,27 @@ __metadata: languageName: node linkType: hard -"playwright-core@npm:1.44.0": - version: 1.44.0 - resolution: "playwright-core@npm:1.44.0" - bin: - playwright-core: cli.js - checksum: 10c0/e1220371a76cdf145f6aaefb2dd6c5194531d1c1e2b67712c56dbc1d589dffb66fd4fc0168be60cd2115aca40660aa13c572e14be47674c0542bc879705b9fb3 - languageName: node - linkType: hard - -"playwright-core@npm:1.51.1": - version: 1.51.1 - resolution: "playwright-core@npm:1.51.1" +"playwright-core@npm:1.52.0": + version: 1.52.0 + resolution: "playwright-core@npm:1.52.0" bin: playwright-core: cli.js - checksum: 10c0/4f004d9dea5ecbd76b84c858fa4880ed955600b6cda972a3e8093ea47e150ce20bf2ea806e73e740497d34f4b61b080c208339a661fc75ad04d8f00bedcc21e0 + checksum: 10c0/640945507e6ca2144e9f596b2a6ecac042c2fd3683ff99e6271e9a7b38f3602d415f282609d569456f66680aab8b3c5bb1b257d8fb63a7fc0ed648261110421f languageName: node linkType: hard -"playwright@npm:1.51.1": - version: 1.51.1 - resolution: "playwright@npm:1.51.1" - dependencies: - fsevents: "npm:2.3.2" - playwright-core: "npm:1.51.1" - dependenciesMeta: - fsevents: - optional: true - bin: - playwright: cli.js - checksum: 10c0/2aea553b8b1086ee419e72c9d4f4117686e6bdb5e09e0f47dfe563ce0f0bd79c4ee79dd9c8a0f023a2fb7803b81d4fdc552887410d16c036be07f21ab72b3f46 - languageName: node - linkType: hard - -"playwright@npm:^1.22.2": - version: 1.44.0 - resolution: "playwright@npm:1.44.0" +"playwright@npm:1.52.0": + version: 1.52.0 + resolution: "playwright@npm:1.52.0" dependencies: fsevents: "npm:2.3.2" - playwright-core: "npm:1.44.0" + playwright-core: "npm:1.52.0" dependenciesMeta: fsevents: optional: true bin: playwright: cli.js - checksum: 10c0/dcbee9022623dd9e219e9867983789262e80339f0c3601219930883e5a304ce75e1397715c0f378a2bab0a799cf88a73ea4b58fe595cfd9058bd7a82f5d8e3b6 + checksum: 10c0/2c6edf1e15e59bbaf77f3fa0fe0ac975793c17cff835d9c8b8bc6395a3b6f1c01898b3058ab37891b2e4d424bcc8f1b4844fe70d943e0143d239d7451408c579 languageName: node linkType: hard