diff --git a/.changeset/chilly-plums-shake.md b/.changeset/chilly-plums-shake.md new file mode 100644 index 0000000000..1c29867c5d --- /dev/null +++ b/.changeset/chilly-plums-shake.md @@ -0,0 +1,6 @@ +--- +"@patternfly/eslint-config-elements": major +"@patternfly/eslint-plugin-elements": major +--- + +Provide ESLint flat config. Upgrade to ESLint 9.0 to use. diff --git a/.changeset/rude-kiwis-live.md b/.changeset/rude-kiwis-live.md new file mode 100644 index 0000000000..50e57b064b --- /dev/null +++ b/.changeset/rude-kiwis-live.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-tools": patch +--- +Update typescript types diff --git a/.commitlintrc.cjs b/.commitlintrc.cjs index f2941c00a2..6aaff34752 100644 --- a/.commitlintrc.cjs +++ b/.commitlintrc.cjs @@ -1,5 +1,5 @@ -const fs = require("fs"); -const path = require("path"); +const fs = require('fs'); +const path = require('path'); const normalizeWorkspace = x => fs.readdirSync(path.join(__dirname, x)).map(x => x.replace('pf-', '')); @@ -23,5 +23,5 @@ module.exports = { ...normalizeWorkspace('core'), ...normalizeWorkspace('tools'), ]], - } + }, }; diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 9963171661..0000000000 --- a/.eslintignore +++ /dev/null @@ -1,45 +0,0 @@ -!.eleventy.cjs - -*.css -*.d.ts -*.ico -*.jpeg -*.jpg -*.map -*.md -*.njk -*.patch -*.png -*.sh -*.spec.js -*.svg -*.toml -*.tsbuildinfo -*.txt -*.yml -*.yaml -*.woff* - -custom-elements.json -package-lock.json - -_site -docs/_data/todos.json -docs/demo.js -docs/pfe.min.js -docs/bundle.js -docs/core -docs/components -node_modules - -core/**/*.js -elements/**/*.js -tools/**/*.js - -!core/*/demo/*.js -!elements/*/demo/*.js -elements/*/demo/*.html - -tools/create-element/templates/**/* -node_modules -node_modules/**/* diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index aecb8a524f..0000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "@patternfly/eslint-config-elements", - "overrides": [ - { - "files": [ - "./tools/create-element/**/*" - ], - "rules": { - "no-console": "off" - } - } - ] -} diff --git a/.gitignore b/.gitignore index 96e5fa5df9..a0146b7ebc 100644 --- a/.gitignore +++ b/.gitignore @@ -70,6 +70,7 @@ tools/*/test/**/*.png !scripts/**/*.js !tools/eslint-plugin/index.js +!tools/eslint-config/**/*.js *.tgz custom-elements.json diff --git a/core/pfe-core/controllers/cascade-controller.ts b/core/pfe-core/controllers/cascade-controller.ts index 2f06b19ae7..c7a285c033 100644 --- a/core/pfe-core/controllers/cascade-controller.ts +++ b/core/pfe-core/controllers/cascade-controller.ts @@ -20,7 +20,7 @@ export class CascadeController implements ReactiveCon private logger: Logger; - static instances: WeakMap> = new WeakMap(); + static instances = new WeakMap>(); mo = new MutationObserver(this.parse); diff --git a/core/pfe-core/controllers/css-variable-controller.ts b/core/pfe-core/controllers/css-variable-controller.ts index bd2d9e54dd..4070f5a57e 100644 --- a/core/pfe-core/controllers/css-variable-controller.ts +++ b/core/pfe-core/controllers/css-variable-controller.ts @@ -15,5 +15,5 @@ export class CssVariableController implements ReactiveController { return this.style.getPropertyValue(this.parseProperty(name)).trim() || null; } - hostConnected?(): void + hostConnected?(): void; } diff --git a/core/pfe-core/controllers/floating-dom-controller.ts b/core/pfe-core/controllers/floating-dom-controller.ts index c7170024bd..be84b89fed 100644 --- a/core/pfe-core/controllers/floating-dom-controller.ts +++ b/core/pfe-core/controllers/floating-dom-controller.ts @@ -11,7 +11,7 @@ import { offset as offsetMiddleware, shift as shiftMiddleware, flip as flipMiddleware, - arrow as arrowMiddleware + arrow as arrowMiddleware, } from '@floating-ui/dom'; type Lazy = T | (() => T | null | undefined); @@ -110,7 +110,12 @@ export class FloatingDOMController implements ReactiveController { this.#cleanup?.(); } - async #update(placement: Placement = 'top', offset?: Offset, flip = true, fallbackPlacements?: Placement[]) { + async #update( + placement: Placement = 'top', + offset?: Offset, + flip = true, + fallbackPlacements?: Placement[], + ) { const { padding, shift } = this.#options; const invoker = this.#invoker; @@ -119,7 +124,12 @@ export class FloatingDOMController implements ReactiveController { if (!invoker || !content) { return; } - const { x, y, placement: _placement, middlewareData } = await computePosition(invoker, content, { + const { + x, + y, + placement: _placement, + middlewareData, + } = await computePosition(invoker, content, { strategy: 'absolute', placement, middleware: [ @@ -127,7 +137,7 @@ export class FloatingDOMController implements ReactiveController { shift && shiftMiddleware({ padding }), arrow && arrowMiddleware({ element: arrow, padding: arrow.offsetHeight / 2 }), flip && flipMiddleware({ padding, fallbackPlacements }), - ].filter(Boolean) + ].filter(Boolean), }); if (arrow) { diff --git a/core/pfe-core/controllers/internals-controller.ts b/core/pfe-core/controllers/internals-controller.ts index 80b81324e4..3ebdbd842a 100644 --- a/core/pfe-core/controllers/internals-controller.ts +++ b/core/pfe-core/controllers/internals-controller.ts @@ -4,6 +4,10 @@ function isARIAMixinProp(key: string): key is keyof ARIAMixin { return key === 'role' || key.startsWith('aria'); } +type FACE = HTMLElement & { + formDisabledCallback?(disabled: boolean): void; +}; + const protos = new WeakMap(); let constructingAllowed = false; @@ -38,7 +42,7 @@ function aria( // @ts-expect-error: shamone! this.attach()[key] = value; this.host.requestUpdate(); - } + }, }); protos.get(target).add(key); } @@ -63,14 +67,17 @@ export class InternalsController implements ReactiveController, ARIAMixin { declare readonly willValidate: ElementInternals['willValidate']; declare readonly validationMessage: ElementInternals['validationMessage']; - public static of(host: ReactiveControllerHost, options?: InternalsControllerOptions): InternalsController { + public static of( + host: ReactiveControllerHost, + options?: InternalsControllerOptions, + ): InternalsController { constructingAllowed = true; // implement the singleton pattern // using a public static constructor method is much easier to manage, // due to the quirks of our typescript config const instance: InternalsController = - InternalsController.instances.get(host) ?? - new InternalsController(host, options); + InternalsController.instances.get(host) + ?? new InternalsController(host, options); instance.initializeOptions(options); constructingAllowed = false; return instance; @@ -152,10 +159,10 @@ export class InternalsController implements ReactiveController, ARIAMixin { /** A best-attempt based on observed behaviour in FireFox 115 on fedora 38 */ get computedLabelText() { - return this.internals.ariaLabel || - Array.from(this.internals.labels as NodeListOf) - .reduce((acc, label) => - `${acc}${getLabelText(label)}`, ''); + return this.internals.ariaLabel + || Array.from(this.internals.labels as NodeListOf) + .reduce((acc, label) => + `${acc}${getLabelText(label)}`, ''); } private get element() { @@ -174,7 +181,9 @@ export class InternalsController implements ReactiveController, ARIAMixin { throw new Error('InternalsController must be constructed with `InternalsController.for()`'); } if (!this.element) { - throw new Error('InternalsController must be instantiated with an HTMLElement or a `getHTMLElement` function'); + throw new Error( + `InternalsController must be instantiated with an HTMLElement or a \`getHTMLElement\` function`, + ); } this.attach(); this.initializeOptions(options); @@ -190,8 +199,8 @@ export class InternalsController implements ReactiveController, ARIAMixin { // START polyfill-disabled // We need to polyfill :disabled // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88 - const orig = (this.element as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback; - (this.element as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback = disabled => { + const orig = (this.element as FACE).formDisabledCallback; + (this.element as FACE).formDisabledCallback = disabled => { this._formDisabled = disabled; orig?.call(this.host, disabled); // END polyfill-disabled @@ -223,7 +232,7 @@ export class InternalsController implements ReactiveController, ARIAMixin { } } - hostConnected?(): void + hostConnected?(): void; setFormValue(...args: Parameters) { return this.internals.setFormValue(...args); diff --git a/core/pfe-core/controllers/light-dom-controller.ts b/core/pfe-core/controllers/light-dom-controller.ts index a34c4d2e6c..3838180431 100644 --- a/core/pfe-core/controllers/light-dom-controller.ts +++ b/core/pfe-core/controllers/light-dom-controller.ts @@ -49,8 +49,8 @@ export class LightDOMController implements ReactiveController { */ hasLightDOM(): boolean { return !!( - this.host.children.length > 0 || - (this.host.textContent ?? '').trim().length > 0 + this.host.children.length > 0 + || (this.host.textContent ?? '').trim().length > 0 ); } } diff --git a/core/pfe-core/controllers/listbox-controller.ts b/core/pfe-core/controllers/listbox-controller.ts index 325679a2a2..3dc85192f1 100644 --- a/core/pfe-core/controllers/listbox-controller.ts +++ b/core/pfe-core/controllers/listbox-controller.ts @@ -1,6 +1,8 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit'; -export interface ListboxAccessibilityController extends ReactiveController { +export interface ListboxAccessibilityController< + Item extends HTMLElement +> extends ReactiveController { items: Item[]; activeItem?: Item; nextItem?: Item; @@ -55,10 +57,14 @@ export class ListboxController implements ReactiveCont throw new Error('ListboxController must be constructed with `ListboxController.of()`'); } if (!(host instanceof HTMLElement) && typeof _options.getHTMLElement !== 'function') { - throw new Error('ListboxController requires the host to be an HTMLElement, or for the initializer to include a `getHTMLElement()` function'); + throw new Error( + `ListboxController requires the host to be an HTMLElement, or for the initializer to include a \`getHTMLElement()\` function`, + ); } if (!_options.a11yController) { - throw new Error('ListboxController requires an additional keyboard accessibility controller. Provide either a RovingTabindexController or an ActiveDescendantController'); + throw new Error( + `ListboxController requires an additional keyboard accessibility controller. Provide either a RovingTabindexController or an ActiveDescendantController`, + ); } ListboxController.instances.set(host, this); this.host.addController(this); @@ -145,7 +151,9 @@ export class ListboxController implements ReactiveCont } #getEventOption(event: Event): Item | undefined { - return event.composedPath().find(node => this.#items.includes(node as Item)) as Item | undefined; + return event + .composedPath() + .find(node => this.#items.includes(node as Item)) as Item | undefined; } @@ -258,7 +266,8 @@ export class ListboxController implements ReactiveCont */ #optionsChanged(oldOptions: Item[]) { const setSize = this.#items.length; - if (setSize !== oldOptions.length || !oldOptions.every((element, index) => element === this.#items[index])) { + if (setSize !== oldOptions.length + || !oldOptions.every((element, index) => element === this.#items[index])) { this._options.a11yController.updateItems(this.options); } } @@ -269,7 +278,11 @@ export class ListboxController implements ReactiveCont #updateSingleselect() { if (!this._options.multi && !this.disabled) { this.#getEnabledOptions() - .forEach(option => this._options.requestSelect(option, option === this._options.a11yController.activeItem)); + .forEach(option => + this._options.requestSelect( + option, + option === this._options.a11yController.activeItem, + )); } } @@ -284,12 +297,16 @@ export class ListboxController implements ReactiveCont ) { if (referenceItem && this._options.multi && !this.disabled && currentItem) { // select all options between active descendant and target - const [start, end] = [this.options.indexOf(referenceItem), this.options.indexOf(currentItem)].sort(); + const [start, end] = [ + this.options.indexOf(referenceItem), + this.options.indexOf(currentItem), + ].sort(); const options = [...this.options].slice(start, end + 1); // by default CTRL+A will select all options // if all options are selected, CTRL+A will deselect all options - const allSelected = this.#getEnabledOptions(options).filter(option => !this._options.isSelected(option))?.length === 0; + const allSelected = this.#getEnabledOptions(options) + .filter(option => !this._options.isSelected(option))?.length === 0; // whether options will be selected (true) or deselected (false) const selected = ctrlA ? !allSelected : this._options.isSelected(referenceItem); diff --git a/core/pfe-core/controllers/logger.ts b/core/pfe-core/controllers/logger.ts index 3d658e35ef..ec3f313a96 100644 --- a/core/pfe-core/controllers/logger.ts +++ b/core/pfe-core/controllers/logger.ts @@ -3,7 +3,7 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit'; export class Logger implements ReactiveController { private static logDebug: boolean; - private static instances: WeakMap = new WeakMap(); + private static instances = new WeakMap(); private get prefix() { if (this.host instanceof HTMLElement) { @@ -37,7 +37,6 @@ export class Logger implements ReactiveController { /** * A logging wrapper which checks the debugLog boolean and prints to the console if true. - * * @example Logger.debug("Hello"); */ static debug(...msgs: unknown[]) { @@ -48,7 +47,6 @@ export class Logger implements ReactiveController { /** * A logging wrapper which checks the debugLog boolean and prints to the console if true. - * * @example Logger.info("Hello"); */ static info(...msgs: unknown[]) { @@ -59,8 +57,7 @@ export class Logger implements ReactiveController { /** * A logging wrapper which checks the debugLog boolean and prints to the console if true. - * - * @example Logger.log("Hello"); + * @example Logger.log("Hello"); */ static log(...msgs: unknown[]) { if (Logger.debugLog()) { @@ -70,7 +67,6 @@ export class Logger implements ReactiveController { /** * A console warning wrapper which formats your output with useful debugging information. - * * @example Logger.warn("Hello"); */ static warn(...msgs: unknown[]) { @@ -90,7 +86,6 @@ export class Logger implements ReactiveController { /** * Debug logging that outputs the tag name as a prefix automatically - * * @example this.logger.log("Hello"); */ debug(...msgs: unknown[]) { @@ -99,7 +94,6 @@ export class Logger implements ReactiveController { /** * Info logging that outputs the tag name as a prefix automatically - * * @example this.logger.log("Hello"); */ info(...msgs: unknown[]) { @@ -108,7 +102,6 @@ export class Logger implements ReactiveController { /** * Local logging that outputs the tag name as a prefix automatically - * * @example this.logger.log("Hello"); */ log(...msgs: unknown[]) { diff --git a/core/pfe-core/controllers/overflow-controller.ts b/core/pfe-core/controllers/overflow-controller.ts index 05da9d01a1..5d4b888497 100644 --- a/core/pfe-core/controllers/overflow-controller.ts +++ b/core/pfe-core/controllers/overflow-controller.ts @@ -83,14 +83,18 @@ export class OverflowController implements ReactiveController { const prevLeft = this.overflowLeft; const prevRight = this.overflowRight; - this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem); - this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem); + this.overflowLeft = !this.#hideOverflowButtons + && !isElementInView(this.#container, this.firstItem); + this.overflowRight = !this.#hideOverflowButtons + && !isElementInView(this.#container, this.lastItem); let scrollButtonsWidth = 0; if (this.overflowLeft || this.overflowRight) { - scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2; + scrollButtonsWidth = + (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) + * 2; } - this.showScrollButtons = !this.#hideOverflowButtons && - this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth); + this.showScrollButtons = !this.#hideOverflowButtons + && this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth); // only request update if there has been a change if ((prevLeft !== this.overflowLeft) || (prevRight !== this.overflowRight)) { diff --git a/core/pfe-core/controllers/property-observer-controller.ts b/core/pfe-core/controllers/property-observer-controller.ts index cc786f333d..0e5d0b6698 100644 --- a/core/pfe-core/controllers/property-observer-controller.ts +++ b/core/pfe-core/controllers/property-observer-controller.ts @@ -12,11 +12,11 @@ export type ChangeCallbackName = `_${string}Changed`; export type PropertyObserverHost = T & Record> & { [observedController]: PropertyObserverController; -} +}; /** This controller holds a cache of observed property values which were set before the element updated */ export class PropertyObserverController implements ReactiveController { - private static hosts: WeakMap = new WeakMap(); + private static hosts = new WeakMap(); private values = new Map(); diff --git a/core/pfe-core/controllers/roving-tabindex-controller.ts b/core/pfe-core/controllers/roving-tabindex-controller.ts index da3ee3e641..133cce7bab 100644 --- a/core/pfe-core/controllers/roving-tabindex-controller.ts +++ b/core/pfe-core/controllers/roving-tabindex-controller.ts @@ -2,9 +2,9 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit'; import type { RequireProps } from '../core.js'; const isFocusableElement = (el: Element): el is HTMLElement => - !!el && - !el.ariaHidden && - !el.hasAttribute('hidden'); + !!el + && !el.ariaHidden + && !el.hasAttribute('hidden'); export interface RovingTabindexControllerOptions { /** @deprecated use getHTMLElement */ @@ -21,7 +21,7 @@ export interface RovingTabindexControllerOptions { * [rti]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex */ export class RovingTabindexController< - Item extends HTMLElement = HTMLElement, + Item extends HTMLElement = HTMLElement > implements ReactiveController { private static hosts = new WeakMap(); @@ -58,7 +58,8 @@ export class RovingTabindexController< * index of active item in array of focusable items */ get #activeIndex(): number { - return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1; + return !!this.#focusableItems + && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1; } /** @@ -130,9 +131,9 @@ export class RovingTabindexController< options?: RovingTabindexControllerOptions, ) { this.#options = { - getHTMLElement: options?.getHTMLElement ?? - (options?.getElement as (() => HTMLElement | null)) ?? - (() => host instanceof HTMLElement ? host : null), + getHTMLElement: options?.getHTMLElement + ?? (options?.getElement as (() => HTMLElement | null)) + ?? (() => host instanceof HTMLElement ? host : null), getItems: options?.getItems, getItemContainer: options?.getItemContainer, }; @@ -180,12 +181,12 @@ export class RovingTabindexController< * handles keyboard navigation */ #onKeydown = (event: Event) => { - if (!(event instanceof KeyboardEvent) || - event.ctrlKey || - event.altKey || - event.metaKey || - !this.#focusableItems.length || - !event.composedPath().some(x => + if (!(event instanceof KeyboardEvent) + || event.ctrlKey + || event.altKey + || event.metaKey + || !this.#focusableItems.length + || !event.composedPath().some(x => this.#focusableItems.includes(x as Item))) { return; } @@ -196,8 +197,8 @@ export class RovingTabindexController< let shouldPreventDefault = false; const horizontalOnly = !item ? false - : item.tagName === 'SELECT' || - item.getAttribute('role') === 'spinbutton' || orientation === 'horizontal'; + : item.tagName === 'SELECT' + || item.getAttribute('role') === 'spinbutton' || orientation === 'horizontal'; const verticalOnly = orientation === 'vertical'; switch (event.key) { case 'ArrowLeft': @@ -266,7 +267,10 @@ export class RovingTabindexController< */ updateItems(items: Item[] = this.#options.getItems?.() ?? []) { this.#items = items; - const sequence = [...this.#items.slice(this.#itemIndex - 1), ...this.#items.slice(0, this.#itemIndex - 1)]; + const sequence = [ + ...this.#items.slice(this.#itemIndex - 1), + ...this.#items.slice(0, this.#itemIndex - 1), + ]; const first = sequence.find(item => this.#focusableItems.includes(item)); const [focusableItem] = this.#focusableItems; const activeItem = focusableItem ?? first ?? this.firstItem; @@ -283,7 +287,9 @@ export class RovingTabindexController< * @deprecated: use getItems and getItemContainer option functions */ initItems(items: Item[], itemsContainer?: Element) { - const element = itemsContainer ?? this.#options?.getItemContainer?.() ?? this.#options.getHTMLElement(); + const element = itemsContainer + ?? this.#options?.getItemContainer?.() + ?? this.#options.getHTMLElement(); if (element) { this.#initContainer(element); } diff --git a/core/pfe-core/controllers/scroll-spy-controller.ts b/core/pfe-core/controllers/scroll-spy-controller.ts index f95a1dd3bf..60c223d1ca 100644 --- a/core/pfe-core/controllers/scroll-spy-controller.ts +++ b/core/pfe-core/controllers/scroll-spy-controller.ts @@ -49,7 +49,7 @@ export class ScrollSpyController implements ReactiveController { get #linkChildren(): Element[] { return Array.from(this.host.querySelectorAll(this.#tagNames.join(','))) - .filter(this.#getHash); + .filter(this.#getHash); } get root() { @@ -106,11 +106,11 @@ export class ScrollSpyController implements ReactiveController { const { rootMargin, threshold, root } = this; this.#io = new IntersectionObserver(r => this.#onIo(r), { root, rootMargin, threshold }); this.#linkChildren - .map(x => this.#getHash(x)) - .filter((x): x is string => !!x) - .map(x => rootNode.getElementById(x.replace('#', ''))) - .filter((x): x is HTMLElement => !!x) - .forEach(target => this.#io?.observe(target)); + .map(x => this.#getHash(x)) + .filter((x): x is string => !!x) + .map(x => rootNode.getElementById(x.replace('#', ''))) + .filter((x): x is HTMLElement => !!x) + .forEach(target => this.#io?.observe(target)); } } diff --git a/core/pfe-core/controllers/slot-controller.ts b/core/pfe-core/controllers/slot-controller.ts index 2902adf2c3..c271797715 100644 --- a/core/pfe-core/controllers/slot-controller.ts +++ b/core/pfe-core/controllers/slot-controller.ts @@ -32,7 +32,9 @@ export interface SlotsConfig { deprecations?: Record; } -function isObjectConfigSpread(config: ([SlotsConfig] | (string | null)[])): config is [SlotsConfig] { +function isObjectConfigSpread( + config: ([SlotsConfig] | (string | null)[]), +): config is [SlotsConfig] { return config.length === 1 && typeof config[0] === 'object' && config[0] !== null; } @@ -110,17 +112,14 @@ export class SlotController implements ReactiveController { /** * Given a slot name or slot names, returns elements assigned to the requested slots as an array. * If no value is provided, it returns all children not assigned to a slot (without a slot attribute). - * * @example Get header-slotted elements * ```js * this.getSlotted('header') * ``` - * * @example Get header- and footer-slotted elements * ```js * this.getSlotted('header', 'footer') * ``` - * * @example Get default-slotted elements * ```js * this.getSlotted(); @@ -137,7 +136,6 @@ export class SlotController implements ReactiveController { /** * Returns a boolean statement of whether or not any of those slots exists in the light DOM. - * * @param names The slot names to check. * @example this.hasSlotted('header'); */ @@ -152,11 +150,10 @@ export class SlotController implements ReactiveController { /** * Whether or not all the requested slots are empty. - * * @param slots The slot name. If no value is provided, it returns the default slot. * @example this.isEmpty('header', 'footer'); * @example this.isEmpty(); - * @returns {Boolean} + * @returns */ isEmpty(...names: (string | null | undefined)[]): boolean { return !this.hasSlotted(...names); @@ -181,14 +178,17 @@ export class SlotController implements ReactiveController { this.host.requestUpdate(); }; - #getChildrenForSlot(name: string | typeof SlotController.default): T[] { + #getChildrenForSlot( + name: string | typeof SlotController.default, + ): T[] { const children = Array.from(this.host.children) as T[]; return children.filter(isSlot(name)); } #initSlot = (slotName: string | null) => { const name = slotName || SlotController.default; - const elements = this.#nodes.get(name)?.slot?.assignedElements?.() ?? this.#getChildrenForSlot(name); + const elements = this.#nodes.get(name)?.slot?.assignedElements?.() + ?? this.#getChildrenForSlot(name); const selector = slotName ? `slot[name="${slotName}"]` : 'slot:not([name])'; const slot = this.host.shadowRoot?.querySelector?.(selector) ?? null; const hasContent = !!elements.length; diff --git a/core/pfe-core/controllers/style-controller.ts b/core/pfe-core/controllers/style-controller.ts index a030784629..ef3ca52a46 100644 --- a/core/pfe-core/controllers/style-controller.ts +++ b/core/pfe-core/controllers/style-controller.ts @@ -1,8 +1,14 @@ -import type { ReactiveController, ReactiveElement, CSSResultGroup, CSSResultOrNative, CSSResult } from 'lit'; +import type { + ReactiveController, + ReactiveElement, + CSSResultGroup, + CSSResultOrNative, + CSSResult, +} from 'lit'; import { getCompatibleStyle, supportsAdoptingStyleSheets } from 'lit'; declare global { - interface ShadowRoot { + interface ShadowRoot { adoptedStyleSheets: CSSStyleSheet[]; } } @@ -28,7 +34,9 @@ export class StyleController implements ReactiveController { return; } - const styles = [this.styles].flatMap(x => getCompatibleStyle(x as CSSResultOrNative)).filter(x => !!x); + const styles = [this.styles] + .flatMap(x => getCompatibleStyle(x as CSSResultOrNative)) + .filter(x => !!x); if (supportsAdoptingStyleSheets) { this.host.renderRoot.adoptedStyleSheets = [ diff --git a/core/pfe-core/controllers/tabs-aria-controller.ts b/core/pfe-core/controllers/tabs-aria-controller.ts index c3a665b464..93bb25659e 100644 --- a/core/pfe-core/controllers/tabs-aria-controller.ts +++ b/core/pfe-core/controllers/tabs-aria-controller.ts @@ -13,7 +13,7 @@ export interface TabsAriaControllerOptions { export class TabsAriaController< Tab extends HTMLElement = HTMLElement, - Panel extends HTMLElement = HTMLElement, + Panel extends HTMLElement = HTMLElement > implements ReactiveController { #logger: Logger; @@ -55,7 +55,9 @@ export class TabsAriaController< } else { const element = options.getHTMLElement?.(); if (!element) { - throw new Error('TabsController must be instantiated with an HTMLElement or a `getHTMLElement()` option'); + throw new Error( + 'TabsController must be instantiated with an HTMLElement or a `getHTMLElement()` option', + ); } this.#element = element; } diff --git a/core/pfe-core/controllers/timestamp-controller.ts b/core/pfe-core/controllers/timestamp-controller.ts index 4a8158864d..51727d7d82 100644 --- a/core/pfe-core/controllers/timestamp-controller.ts +++ b/core/pfe-core/controllers/timestamp-controller.ts @@ -55,7 +55,8 @@ export class TimestampController implements ReactiveController { if (this.#options.relative) { return this.#getTimeRelative(); } else { - let { displaySuffix, locale } = this.#options; + let { displaySuffix } = this.#options; + const { locale } = this.#options; if (this.#options.utc) { displaySuffix ||= 'UTC'; } @@ -79,7 +80,7 @@ export class TimestampController implements ReactiveController { } } - hostConnected?(): void + hostConnected?(): void; /** * Based off of Github Relative Time @@ -88,7 +89,11 @@ export class TimestampController implements ReactiveController { #getTimeRelative() { const date = this.#date; const { locale } = this.#options; - const rtf = new Intl.RelativeTimeFormat(locale as string, { localeMatcher: 'best fit', numeric: 'auto', style: 'long' }); + const rtf = new Intl.RelativeTimeFormat(locale as string, { + localeMatcher: 'best fit', + numeric: 'auto', + style: 'long', + }); const ms: number = date.getTime() - Date.now(); const tense = ms > 0 ? 1 : -1; let qty = 0; diff --git a/core/pfe-core/core.ts b/core/pfe-core/core.ts index ec06a2ca3a..55519b5c93 100644 --- a/core/pfe-core/core.ts +++ b/core/pfe-core/core.ts @@ -12,7 +12,7 @@ export interface PfeConfig { export type RequireProps = T & { [P in Ps]-?: T[P]; -} +}; const noPref = Symbol(); @@ -33,7 +33,9 @@ export function trackPerformance(preference: boolean | typeof noPref = noPref) { return window.PfeConfig.trackPerformance; } -function makeConverter(f: (x: string, type?: unknown) => T): ComplexAttributeConverter { +function makeConverter( + f: (x: string, type?: unknown) => T, +): ComplexAttributeConverter { return { fromAttribute(value: string) { if (typeof value !== 'string') { @@ -71,7 +73,7 @@ export class ComposedEvent extends Event { super(type, { bubbles: true, composed: true, - ...init + ...init, }); } } @@ -89,7 +91,8 @@ const bodyNoAutoReveal = document.body.hasAttribute('no-auto-reveal'); /** Global patternfly elements config */ window.PfeConfig = Object.assign(window.PfeConfig ?? {}, { - trackPerformance: window.PfeConfig?.trackPerformance ?? getMeta('pf-track-performance') === 'true', + trackPerformance: window.PfeConfig?.trackPerformance + ?? getMeta('pf-track-performance') === 'true', // if the body tag has `no-auto-reveal` attribute, reveal immediately // if `` exists, and it's `content` is 'true', // then auto-reveal the body diff --git a/core/pfe-core/decorators/deprecation.ts b/core/pfe-core/decorators/deprecation.ts index 9a52652340..20c5ff7c27 100644 --- a/core/pfe-core/decorators/deprecation.ts +++ b/core/pfe-core/decorators/deprecation.ts @@ -5,7 +5,7 @@ import { Logger } from '../controllers/logger.js'; export type DeprecationDeclaration = PropertyDeclaration & { alias: string & K; attribute: string; -} +}; /** * Aliases the decorated field to an existing property, and logs a warning if it is used diff --git a/core/pfe-core/decorators/observed.ts b/core/pfe-core/decorators/observed.ts index edb5468b2b..48806b40ce 100644 --- a/core/pfe-core/decorators/observed.ts +++ b/core/pfe-core/decorators/observed.ts @@ -17,42 +17,39 @@ type TypedFieldDecorator = (proto: T, key: string | keyof T) => void ; * Works on any class field. When using on lit observed properties, * Make sure `@observed` is to the left (i.e. called after) the `@property` * or `@state` decorator. - * * @example observing a lit property * ```ts * @observed @property() foo = 'bar'; * * protected _fooChanged(oldValue?: string, newValue?: string) {} * ``` - * * @example using a custom callback * ```ts * @observed('_myCallback') size = 'lg'; * * _myCallback(_, size) {...} * ``` - * * @example using an arrow function * ```ts * @observed((oldVal, newVal) => console.log(`Size changed from ${oldVal} to ${newVal}`)) * ``` */ -export function observed(methodName: string): TypedFieldDecorator -export function observed(cb: ChangeCallback): TypedFieldDecorator -export function observed(proto: T, key: string): void +export function observed(methodName: string): TypedFieldDecorator; +export function observed(cb: ChangeCallback): TypedFieldDecorator; +export function observed(proto: T, key: string): void; export function observed(...as: any[]): void | TypedFieldDecorator { /** @observed('_myCustomChangeCallback') */ if (as.length === 1) { const [methodNameOrCallback] = as; return function(proto, key) { (proto.constructor as typeof ReactiveElement) - .addInitializer(x => new PropertyObserverController(x)); + .addInitializer(x => new PropertyObserverController(x)); observeProperty(proto, key as string & keyof T, methodNameOrCallback); }; } else { const [proto, key] = as; (proto.constructor as typeof ReactiveElement) - .addInitializer(x => new PropertyObserverController(x)); + .addInitializer(x => new PropertyObserverController(x)); observeProperty(proto, key); } } diff --git a/core/pfe-core/functions/isElementInView.ts b/core/pfe-core/functions/isElementInView.ts index c4cc9cc1a7..c18e277fe9 100644 --- a/core/pfe-core/functions/isElementInView.ts +++ b/core/pfe-core/functions/isElementInView.ts @@ -1,12 +1,10 @@ /** * This function returns whether or not an element is within the viewable area of a container. If partial is true, * then this function will return true even if only part of the element is in view. - * - * @param {HTMLElement} container The container to check if the element is in view of. - * @param {HTMLElement} element The element to check if it is view - * @param {boolean} partial true if partial view is allowed - * @param {boolean} strict true if strict mode is set, never consider the container width and element width - * + * @param container The container to check if the element is in view of. + * @param element The element to check if it is view + * @param partial true if partial view is allowed + * @param strict true if strict mode is set, never consider the container width and element width * @returns True if the component is in View. */ export function isElementInView( @@ -27,12 +25,12 @@ export function isElementInView( // Check if in view const isTotallyInView = - elementBoundsLeft >= containerBoundsLeft && - elementBoundsRight <= containerBoundsRight; + elementBoundsLeft >= containerBoundsLeft + && elementBoundsRight <= containerBoundsRight; const isPartiallyInView = - (partial || (!strict && containerBounds.width < elementBounds.width)) && - ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) || - (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight)); + (partial || (!strict && containerBounds.width < elementBounds.width)) + && ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) + || (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight)); // Return outcome return isTotallyInView || isPartiallyInView; diff --git a/docs/_data/importMap.cjs b/docs/_data/importMap.cjs index b87196ed73..6214503d9f 100644 --- a/docs/_data/importMap.cjs +++ b/docs/_data/importMap.cjs @@ -1,8 +1,13 @@ -const fs = require('fs'); -const path = require('path'); +const fs = require('node:fs'); +const path = require('node:path'); const { glob } = require('glob'); -const packageLock = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'package-lock.json'))); +const packageLock = JSON.parse(fs.readFileSync(path.join( + __dirname, + '..', + '..', + 'package-lock.json', +))); function readPackageVersion(module) { return packageLock.packages[`node_modules/${module}`].version; @@ -47,15 +52,15 @@ const LIT_DEPS = [ './html.js', './polyfill-support.js', './static-html.js', - ] + ], }, { target: `@lit-labs/ssr-client`, subpaths: [ '.', './lit-element-hydrate-support.js', - ] - } + ], + }, ]; const PWA_DEPS = [ @@ -63,9 +68,9 @@ const PWA_DEPS = [ target: `pwa-helpers@${PWA_HELPER_VERSION}`, subpaths: [ '.', - './router.js' - ] - } + './router.js', + ], + }, ]; module.exports = async function() { @@ -73,7 +78,7 @@ module.exports = async function() { const generator = new Generator({ defaultProvider: 'jspm.io', - env: ['production', 'browser', 'module'] + env: ['production', 'browser', 'module'], }); await generator.install([ @@ -86,7 +91,7 @@ module.exports = async function() { 'element-internals-polyfill', `fuse.js@${FUSE_VERSION}`, ...LIT_DEPS, - ...PWA_DEPS + ...PWA_DEPS, ]); const map = generator.getMap(); @@ -94,9 +99,11 @@ module.exports = async function() { map.imports['@patternfly/elements'] = '/pfe.min.js'; // add imports for imports under pfe-core - const pfeCoreImports = (await glob('./{functions,controllers,decorators}/*.ts', { cwd: path.join(__dirname, '../../core/pfe-core') })) - .filter(x => !x.endsWith('.d.ts')) - .map(x => x.replace('.ts', '.js')); + const pfeCoreImports = (await glob('./{functions,controllers,decorators}/*.ts', { + cwd: path.join(__dirname, '../../core/pfe-core'), + })) + .filter(x => !x.endsWith('.d.ts')) + .map(x => x.replace('.ts', '.js')); for (const file of pfeCoreImports) { map.imports[path.join('@patternfly/pfe-core', file)] = '/pfe.min.js'; } @@ -120,9 +127,11 @@ module.exports = async function() { // add imports for all icon files in /node_modules/@patternfly/icons/{far, fas, fab, patternfly}/ - const iconsImports = (await glob('./{far,fas,fab,patternfly}/*.js', { cwd: path.join(__dirname, '../../node_modules/@patternfly/icons') })) - .filter(x => !x.endsWith('.d.ts')) - .map(x => x); + const iconsImports = (await glob('./{far,fas,fab,patternfly}/*.js', { + cwd: path.join(__dirname, '../../node_modules/@patternfly/icons'), + })) + .filter(x => !x.endsWith('.d.ts')) + .map(x => x); for (const icon of iconsImports) { map.imports[`@patternfly/icons/${icon}`] = `/assets/@patternfly/icons/${icon}`; diff --git a/docs/_plugins/cem-render.cjs b/docs/_plugins/cem-render.cjs index 829f357b35..d2931c00ea 100644 --- a/docs/_plugins/cem-render.cjs +++ b/docs/_plugins/cem-render.cjs @@ -1,17 +1,17 @@ /** quick and dirty dedent, also provides in-editor syntax highlighting */ const html = (...args) => String.raw(...args) - .split('\n') - .map(x => x.replace(/^ {6}/, '')) - .join('\n'); + .split('\n') + .map(x => x.replace(/^ {6}/, '')) + .join('\n'); /** @typedef {import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage} DocsPage */ module.exports = function(eleventyConfig) { eleventyConfig.addPairedShortcode('renderCodeDocs', - function renderCodeDocs(content, kwargs = {}) { - const renderers = new Renderers(this, kwargs); - return renderers.renderAll(content); - } + function renderCodeDocs(content, kwargs = {}) { + const renderers = new Renderers(this, kwargs); + return renderers.renderAll(content); + } ); }; @@ -212,8 +212,13 @@ class Renderers { } /** Render a table of element CSS Custom Properties */ - renderCssCustomProperties(content, { header = 'CSS Custom Properties', level = 2, ...kwargs } = {}) { - const allCssProperties = this.manifest.getCssCustomProperties(this.packageTagName(kwargs)) ?? []; + renderCssCustomProperties(content, { + header = 'CSS Custom Properties', + level = 2, + ...kwargs + } = {}) { + const allCssProperties = + this.manifest.getCssCustomProperties(this.packageTagName(kwargs)) ?? []; const cssProperties = allCssProperties.filter(x => !x.deprecated); const deprecated = allCssProperties.filter(x => x.deprecated); return html` @@ -326,7 +331,11 @@ class Renderers { } /** Render the installation instructions for the element */ - renderInstallation(content, { header = 'Installation', level = 2, tagName = this.docsPage.tagName } = {}) { + renderInstallation(content, { + header = 'Installation', + level = 2, + tagName = this.docsPage.tagName, + } = {}) { return html`

Installation

diff --git a/docs/_plugins/create-import-map.cjs b/docs/_plugins/create-import-map.cjs index c235d7df5a..26b3d36e4c 100644 --- a/docs/_plugins/create-import-map.cjs +++ b/docs/_plugins/create-import-map.cjs @@ -4,12 +4,16 @@ module.exports = function(eleventyConfig) { const generator = new Generator({ defaultProvider: 'jspm.io', - env: ['production', 'browser', 'module'] + env: ['production', 'browser', 'module'], }); const pins = await generator.addMappings(content); - const html = await generator.htmlInject(content, { pins, esModuleShims: true, whitespace: true }); + const html = await generator.htmlInject(content, { + pins, + esModuleShims: true, + whitespace: true, + }); return html; }); diff --git a/docs/_plugins/pfe-assets.cjs b/docs/_plugins/pfe-assets.cjs index 7d4ec1e531..d920fdde4c 100644 --- a/docs/_plugins/pfe-assets.cjs +++ b/docs/_plugins/pfe-assets.cjs @@ -32,11 +32,11 @@ function getFilesToCopy(options) { // Copy all component and core files to _site if (hasElements) { Object.assign(files, Object.fromEntries(tagNames - .filter(x => !x.match(/node_modules|tsconfig|README\.md|(?:\.ts$)|(?:config\.js$)/)) - .map(dir => [ - `elements/${dir}`, - `components/${dir.replace(prefix, '')}`, - ]))); + .filter(x => !x.match(/node_modules|tsconfig|README\.md|(?:\.ts$)|(?:config\.js$)/)) + .map(dir => [ + `elements/${dir}`, + `components/${dir.replace(prefix, '')}`, + ]))); } if (hasCore) { @@ -49,13 +49,17 @@ function getFilesToCopy(options) { return files; } +const DEMO_PATHS_RE = + // eslint-disable-next-line @stylistic/max-len + /(?href|src)="\/(?elements|core)\/pf-(?.*)\/(?.*)\.(?[.\w]+)"/g; + /** * Replace paths in demo files from the dev SPA's format to 11ty's format * @this {EleventyTransformContext} */ function demoPaths(content) { if (this.outputPath.match(/(components|core|tools)\/.*\/demo\/index\.html$/)) { - return content.replace(/(?href|src)="\/(?elements|core)\/pf-(?.*)\/(?.*)\.(?[.\w]+)"/g, (...args) => { + return content.replace(DEMO_PATHS_RE, (...args) => { const [{ attr, workspace, unprefixed, filename, extension }] = args.reverse(); return `${attr}="/${workspace === 'elements' ? 'components' : workspace}/${unprefixed}/${filename}.${extension}"`; }); @@ -79,10 +83,10 @@ module.exports = { eleventyConfig.addPassthroughCopy('docs/demo.{js,map,ts}'); eleventyConfig.addPassthroughCopy('docs/main.mjs'); eleventyConfig.addPassthroughCopy({ - 'node_modules/@rhds/elements': '/assets/@rhds' + 'node_modules/@rhds/elements': '/assets/@rhds', }); eleventyConfig.addPassthroughCopy({ - 'node_modules/@patternfly/icons/': '/assets/@patternfly/icons/' + 'node_modules/@patternfly/icons/': '/assets/@patternfly/icons/', }); eleventyConfig.addPassthroughCopy('brand/**/*'); const filesToCopy = getFilesToCopy(options); diff --git a/docs/demo/web-dev-server.demo.config.js b/docs/demo/web-dev-server.demo.config.js index cafb6079cf..1db44583d0 100644 --- a/docs/demo/web-dev-server.demo.config.js +++ b/docs/demo/web-dev-server.demo.config.js @@ -5,6 +5,6 @@ export default { port: 8080, rootDir: '_site', plugins: [ - importMapsPlugin() + importMapsPlugin(), ], }; diff --git a/docs/zero-md.js b/docs/zero-md.js index b87f1411a7..9933a7220b 100644 --- a/docs/zero-md.js +++ b/docs/zero-md.js @@ -5,8 +5,8 @@ window.ZeroMdConfig = { 'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/autoloader/prism-autoloader.min.js', ], cssUrls: [ - 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-material-light.css' - ] + 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-material-light.css', + ], }; import 'https://jspm.dev/zero-md'; diff --git a/elements/pf-accordion/BaseAccordion.ts b/elements/pf-accordion/BaseAccordion.ts index 1acca2a59a..a79afd49a3 100644 --- a/elements/pf-accordion/BaseAccordion.ts +++ b/elements/pf-accordion/BaseAccordion.ts @@ -63,7 +63,7 @@ export abstract class BaseAccordion extends LitElement { */ @property({ attribute: 'expanded-index', - converter: NumberListConverter + converter: NumberListConverter, }) get expandedIndex() { return this.#expandedIndex; @@ -101,6 +101,7 @@ export abstract class BaseAccordion extends LitElement { #logger = new Logger(this); // actually is read in #init, by the `||=` operator + // eslint-disable-next-line no-unused-private-class-members #initialized = false; protected override async getUpdateComplete(): Promise { @@ -265,7 +266,7 @@ export abstract class BaseAccordion extends LitElement { * Accepts an optional parent accordion to search for headers and panels. */ public async expand(index: number, parentAccordion?: BaseAccordion) { - const allHeaders: Array = this.#allHeaders(parentAccordion); + const allHeaders: BaseAccordionHeader[] = this.#allHeaders(parentAccordion); const header = allHeaders[index]; if (!header) { diff --git a/elements/pf-accordion/BaseAccordionHeader.ts b/elements/pf-accordion/BaseAccordionHeader.ts index 368460061f..07e5e1f9dd 100644 --- a/elements/pf-accordion/BaseAccordionHeader.ts +++ b/elements/pf-accordion/BaseAccordionHeader.ts @@ -28,7 +28,10 @@ export class AccordionHeaderChangeEvent extends ComposedEvent { export abstract class BaseAccordionHeader extends LitElement { static readonly styles = [style]; - static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; @property({ type: Boolean, reflect: true }) expanded = false; @@ -104,7 +107,7 @@ export abstract class BaseAccordionHeader extends LitElement { return void this.#logger.warn('No header content provided'); } else if (this.firstElementChild) { const [heading, ...otherContent] = Array.from(this.children) - .filter((x): x is HTMLElement => !x.hasAttribute('slot') && isPorHeader(x)); + .filter((x): x is HTMLElement => !x.hasAttribute('slot') && isPorHeader(x)); // If there is no content inside the slot, return empty with a warning // else, if there is more than 1 element in the slot, capture the first h-tag diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts index 7918318867..b1de02153c 100644 --- a/elements/pf-accordion/pf-accordion.ts +++ b/elements/pf-accordion/pf-accordion.ts @@ -12,16 +12,11 @@ import style from './pf-accordion.css'; /** * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed. - * * @summary Toggle the visibility of sections of content - * * @fires {AccordionExpandEvent} expand - when a panel expands * @fires {AccordionCollapseEvent} collapse - when a panel collapses - * - * * @slot * Place the `pf-accordion-header` and `pf-accordion-panel` elements here. - * * @cssprop --pf-c-accordion--BackgroundColor {@default var(--pf-global--BackgroundColor--100, #fff)} * @cssprop --pf-c-accordion__toggle--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)} * @cssprop --pf-c-accordion__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)} @@ -126,7 +121,7 @@ export class PfAccordion extends BaseAccordion { return; } - const allHeaders: Array = this.headers; + const allHeaders: BaseAccordionHeader[] = this.headers; // Get all the headers and capture the item by index value if (this.single) { diff --git a/elements/pf-accordion/test/pf-accordion.spec.ts b/elements/pf-accordion/test/pf-accordion.spec.ts index 338d64df65..5bb00395e6 100644 --- a/elements/pf-accordion/test/pf-accordion.spec.ts +++ b/elements/pf-accordion/test/pf-accordion.spec.ts @@ -71,9 +71,9 @@ describe('', function() { it('simply instantiating', async function() { element = await createFixture(html``); expect(element, 'pf-accordion should be an instance of PfAccordion') - .to.be.an.instanceof(customElements.get('pf-accordion')) - .and - .to.be.an.instanceof(PfAccordion); + .to.be.an.instanceof(customElements.get('pf-accordion')) + .and + .to.be.an.instanceof(PfAccordion); }); describe('in typical usage', function() { @@ -257,21 +257,21 @@ describe('', function() { const newPanel = panels.at(-1); expect(newHeader?.hasAttribute('id'), 'header has an id').to.be.true; expect(newHeader?.getAttribute('aria-controls'), 'header has aria-controls') - .to.equal(newPanel?.getAttribute('id')); + .to.equal(newPanel?.getAttribute('id')); expect(newPanel?.getAttribute('role'), 'panel has role').to.equal('region'); expect(newPanel?.hasAttribute('id'), 'panel has id').to.be.true; expect(newPanel?.getAttribute('aria-labelledby'), 'panel has aria-labelledby') - .to.equal(newHeader?.getAttribute('id')); + .to.equal(newHeader?.getAttribute('id')); }); }); describe('', function() { it('should upgrade pf-accordion-header', function() { expect(header) - .to.be.an.instanceof(customElements.get('pf-accordion-header')) - .and - .to.be.an.instanceOf(PfAccordionHeader); + .to.be.an.instanceof(customElements.get('pf-accordion-header')) + .and + .to.be.an.instanceOf(PfAccordionHeader); }); it('must have an id', function() { @@ -286,9 +286,9 @@ describe('', function() { describe('', function() { it('should upgrade pf-accordion-panel', function() { expect(panel) - .to.be.an.instanceof(customElements.get('pf-accordion-panel')) - .and - .to.be.an.instanceOf(PfAccordionPanel); + .to.be.an.instanceof(customElements.get('pf-accordion-panel')) + .and + .to.be.an.instanceOf(PfAccordionPanel); }); it('must have an id', function() { @@ -996,7 +996,7 @@ describe('', function() { /* CONSOLE VALIDATION */ it('should warning in the console', function() { expect(Logger.warn) - .to.have.been.calledOnceWith(`[pf-accordion-header#bad-header-element]`, 'Header should contain at least 1 heading tag for correct semantics.'); + .to.have.been.calledOnceWith(`[pf-accordion-header#bad-header-element]`, 'Header should contain at least 1 heading tag for correct semantics.'); }); }); diff --git a/elements/pf-avatar/test/pf-avatar.spec.ts b/elements/pf-avatar/test/pf-avatar.spec.ts index 160b67b0e6..7d8fd5d81a 100644 --- a/elements/pf-avatar/test/pf-avatar.spec.ts +++ b/elements/pf-avatar/test/pf-avatar.spec.ts @@ -11,9 +11,9 @@ describe('', function() { it('should upgrade', async function() { const el = await createFixture(html``); expect(el, 'pf-badge should be an instance of PfAvatar') - .to.be.an.instanceOf(customElements.get('pf-avatar')) - .and - .to.be.an.instanceOf(PfAvatar); + .to.be.an.instanceOf(customElements.get('pf-avatar')) + .and + .to.be.an.instanceOf(PfAvatar); }); describe('without src attr', function() { diff --git a/elements/pf-back-to-top/test/pf-back-to-top.spec.ts b/elements/pf-back-to-top/test/pf-back-to-top.spec.ts index 751500f10b..00261e3aeb 100644 --- a/elements/pf-back-to-top/test/pf-back-to-top.spec.ts +++ b/elements/pf-back-to-top/test/pf-back-to-top.spec.ts @@ -25,9 +25,9 @@ describe('', function() { it('should upgrade', function() { const klass = customElements.get('pf-back-to-top'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfBackToTop); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfBackToTop); }); }); diff --git a/elements/pf-background-image/pf-background-image.ts b/elements/pf-background-image/pf-background-image.ts index ff12937d9e..b9aca2365d 100644 --- a/elements/pf-background-image/pf-background-image.ts +++ b/elements/pf-background-image/pf-background-image.ts @@ -11,9 +11,7 @@ import styles from './pf-background-image.css'; /** * A **background image** allows you to place an image in the background of your page or area of a page. * @summary Allows users to place an image in the background of your page or area of a page. - * * @slot filter - Overrides the default svg filter for the background image. - * * @cssprop {} --pf-c-background-image--BackgroundColor {@default `#151515`} * @cssprop --pf-c-background-image--BackgroundImage * @cssprop --pf-c-background-image--BackgroundImage-2x @@ -21,7 +19,6 @@ import styles from './pf-background-image.css'; * @cssprop --pf-c-background-image--BackgroundImage--sm-2x * @cssprop --pf-c-background-image--BackgroundImage--lg * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`} - * */ @customElement('pf-background-image') export class PfBackgroundImage extends LitElement { @@ -69,7 +66,7 @@ export class PfBackgroundImage extends LitElement { '--_background-image-2x': this.src2x, '--_background-image-sm': this.srcSm, '--_background-image-sm-2x': this.srcSm2x, - '--_background-image-lg': this.srcLg + '--_background-image-lg': this.srcLg, } as StyleInfo; Object.entries(cssProps).forEach(([key, value]) => { @@ -106,7 +103,7 @@ export class PfBackgroundImage extends LitElement { } #onSlotChange() { - const [svg] = this._svg as Array; + const [svg] = this._svg as SVGElement[]; if (svg) { this.#svg = svg; this.#updated = true; diff --git a/elements/pf-background-image/test/pf-background-image.spec.ts b/elements/pf-background-image/test/pf-background-image.spec.ts index 3fb0a58432..8d2f6e2b24 100644 --- a/elements/pf-background-image/test/pf-background-image.spec.ts +++ b/elements/pf-background-image/test/pf-background-image.spec.ts @@ -41,9 +41,9 @@ describe('', function() { element = await createFixture(html``); const klass = customElements.get('pf-background-image'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfBackgroundImage); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfBackgroundImage); }); describe('adjusting window size', function() { diff --git a/elements/pf-badge/test/pf-badge.spec.ts b/elements/pf-badge/test/pf-badge.spec.ts index d7d65656b5..e47dd514d9 100644 --- a/elements/pf-badge/test/pf-badge.spec.ts +++ b/elements/pf-badge/test/pf-badge.spec.ts @@ -20,10 +20,10 @@ describe('', function() { it('should upgrade', async function() { const el = await createFixture(element); expect(el, 'pf-badge should be an instance of PfBadge') - .to.be.an - .instanceOf(customElements.get('pf-badge')) - .and - .to.be.an.instanceof(PfBadge); + .to.be.an + .instanceOf(customElements.get('pf-badge')) + .and + .to.be.an.instanceof(PfBadge); }); it('should display text equivalent to the number attribute', async function() { diff --git a/elements/pf-banner/pf-banner.ts b/elements/pf-banner/pf-banner.ts index 65a20f3082..fa356d5a57 100644 --- a/elements/pf-banner/pf-banner.ts +++ b/elements/pf-banner/pf-banner.ts @@ -14,36 +14,27 @@ export type BannerVariant = ( | 'warning' | 'danger' | 'success' -) +); /** * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. * Banners are un-intrusive and non-dismissible. - * * @summary Allows users to display a stylized banner. - * * @cssprop {} --pf-c-banner--PaddingTop {@default `0.25rem`} * @cssprop {} --pf-c-banner--PaddingRight {@default `1rem`} * @cssprop {} --pf-c-banner--PaddingBottom {@default `0.25rem`} * @cssprop {} --pf-c-banner--PaddingLeft {@default `1rem`} - * * @cssprop {} --pf-c-banner--md--PaddingRight {@default `1.5rem`} * @cssprop {} --pf-c-banner--md--PaddingLeft {@default `1.5rem`} - * * @cssprop {} --pf-c-banner--FontSize {@default `0.875rem`} - * * @cssprop {} --pf-c-banner--BackgroundColor {@default `#4f5255`} * @cssprop {} --pf-c-banner--m-info--BackgroundColor {@default `#73bcf7`} * @cssprop {} --pf-c-banner--m-danger--BackgroundColor {@default `#c9190b`} * @cssprop {} --pf-c-banner--m-success--BackgroundColor {@default `#3e8635`} * @cssprop {} --pf-c-banner--m-warning--BackgroundColor {@default `#f0ab00`} - * * @cssprop --pf-c-banner--m-sticky--ZIndex {@default `300`} - * * @cssprop --pf-c-banner--m-sticky--BoxShadow {@default `0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)`} - * * @csspart container - The container of the banner - * * @slot icon * Contains the labels's icon, e.g. web-icon-alert-success. * @slot diff --git a/elements/pf-banner/test/pf-banner.spec.ts b/elements/pf-banner/test/pf-banner.spec.ts index f0b579691a..78fb74a32b 100644 --- a/elements/pf-banner/test/pf-banner.spec.ts +++ b/elements/pf-banner/test/pf-banner.spec.ts @@ -15,9 +15,9 @@ describe('', function() { `); const klass = customElements.get('pf-banner'); expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfBanner); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfBanner); }); describe('without variant attribute', function() { diff --git a/elements/pf-button/BaseButton.ts b/elements/pf-button/BaseButton.ts index 5abf10fa97..05907ec0d1 100644 --- a/elements/pf-button/BaseButton.ts +++ b/elements/pf-button/BaseButton.ts @@ -24,7 +24,10 @@ export abstract class BaseButton extends LitElement { static readonly formAssociated = true; - static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; /** Disables the button */ @property({ reflect: true, type: Boolean }) disabled = false; @@ -95,7 +98,6 @@ export abstract class BaseButton extends LitElement { /** * Fallback content for the icon slot. When the `icon` attribute is set, it * should render an icon corresponding to the value. - * * @example ```html * * ``` diff --git a/elements/pf-button/pf-button.ts b/elements/pf-button/pf-button.ts index 6150794bfb..7890013788 100644 --- a/elements/pf-button/pf-button.ts +++ b/elements/pf-button/pf-button.ts @@ -30,18 +30,14 @@ export type ButtonVariant = ( * process, or creating a new object. Buttons can also be used to take a user to a * new location, like another page inside of a web application, or an external site * such as help or documentation.. - * * @summary Allows users to perform an action when triggered - * * @cssprop {} --pf-c-button--FontSize {@default `1rem`} * @cssprop --pf-c-button--FontWeight {@default `400`} * @cssprop {} --pf-c-button--LineHeight {@default `1.5`} - * * @cssprop {} --pf-c-button--PaddingTop {@default `0.375rem`} * @cssprop {} --pf-c-button--PaddingLeft {@default `1rem`} * @cssprop {} --pf-c-button--PaddingBottom {@default `0.375rem`} * @cssprop {} --pf-c-button--PaddingRight {@default `1rem`} - * * @cssprop {|} --pf-c-button--BorderRadius {@default `3px`} * @cssprop {} --pf-c-button--after--BorderColor {@default `transparent`} * @cssprop {} --pf-c-button--after--BorderRadius {@default `3px`} @@ -49,7 +45,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--active--after--BorderWidth {@default `2px`} * @cssprop {} --pf-c-button--hover--after--BorderWidth {@default `2px`} * @cssprop {} --pf-c-button--focus--after--BorderWidth {@default `2px`} - * * @cssprop {} --pf-c-button--m-primary--Color {@default `#fff`} * @cssprop {} --pf-c-button--m-primary--BackgroundColor {@default `#06c`} * @cssprop {} --pf-c-button--m-primary--active--Color {@default `#fff`} @@ -58,7 +53,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-primary--focus--BackgroundColor {@default `#004080`} * @cssprop {} --pf-c-button--m-primary--hover--Color {@default `#fff`} * @cssprop {} --pf-c-button--m-primary--hover--BackgroundColor {@default `#004080`} - * * @cssprop {} --pf-c-button--m-secondary--Color {@default `#06c`} * @cssprop {} --pf-c-button--m-secondary--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-secondary--active--Color {@default `#06c`} @@ -70,7 +64,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-secondary--hover--Color {@default `#06c`} * @cssprop {} --pf-c-button--m-secondary--hover--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-secondary--hover--BorderColor {@default `#06c`} - * * @cssprop {} --pf-c-button--m-tertiary--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-tertiary--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-tertiary--active--Color {@default `#151515`} @@ -82,7 +75,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-tertiary--hover--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-tertiary--hover--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-tertiary--hover--BorderColor {@default `#151515`} - * * @cssprop {} --pf-c-button--m-danger--Color {@default `#fff`} * @cssprop {} --pf-c-button--m-danger--BackgroundColor {@default `#c9190b`} * @cssprop {} --pf-c-button--m-danger--active--Color {@default `#fff`} @@ -91,7 +83,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-danger--focus--BackgroundColor {@default `#a30000`} * @cssprop {} --pf-c-button--m-danger--hover--Color {@default `#fff`} * @cssprop {} --pf-c-button--m-danger--hover--BackgroundColor {@default `#a30000`} - * * @cssprop {} --pf-c-button--m-secondary--m-danger--Color {@default `#c9190b`} * @cssprop {} --pf-c-button--m-secondary--m-danger--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-secondary--m-danger--BorderColor {@default `#c9190b`} @@ -104,7 +95,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-secondary--m-danger--hover--Color {@default `#a30000`} * @cssprop {} --pf-c-button--m-secondary--m-danger--hover--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-secondary--m-danger--hover--BorderColor {@default `#c9190b`} - * * @cssprop {} --pf-c-button--m-control--disabled--BackgroundColor {@default `#f0f0f0`} * @cssprop {} --pf-c-button--m-control--BorderRadius {@default `0`} * @cssprop {} --pf-c-button--m-control--after--BorderWidth {@default `1px`} @@ -126,11 +116,9 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-control--hover--BackgroundColor {@default `#fff`} * @cssprop {} --pf-c-button--m-control--hover--BorderBottomColor {@default `#06c`} * @cssprop {} --pf-c-button--m-control--hover--after--BorderBottomWidth {@default `2px`} - * * @cssprop {} --pf-c-button--disabled--Color {@default `#6a6e73`} * @cssprop {} --pf-c-button--disabled--BackgroundColor {@default `#d2d2d2`} * @cssprop {} --pf-c-button--disabled--after--BorderColor {@default `transparent`} - * * @cssprop {} --pf-c-button--m-warning--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-warning--BackgroundColor {@default `#f0ab00`} * @cssprop {} --pf-c-button--m-warning--active--Color {@default `#151515`} @@ -139,7 +127,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-warning--focus--BackgroundColor {@default `#c58c00`} * @cssprop {} --pf-c-button--m-warning--hover--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-warning--hover--BackgroundColor {@default `#c58c00`} - * * @cssprop {} --pf-c-button--m-plain--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-plain--Color {@default `#6a6e73`} * @cssprop {} --pf-c-button--m-plain--hover--BackgroundColor {@default `transparent`} @@ -148,12 +135,9 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-plain--focus--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-plain--active--Color {@default `#151515`} - * * @cssprop {} --pf-c-button--m-plain--disabled--Color {@default `#d2d2d2`} * @cssprop {} --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`} - * * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`} - * */ @customElement('pf-button') export class PfButton extends LitElement { @@ -291,12 +275,20 @@ export class PfButton extends LitElement { case ' ': event.preventDefault(); event.stopPropagation(); - if (this.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))) { + if (this.dispatchEvent(new MouseEvent('click', { + bubbles: true, + cancelable: true, + view: window, + }))) { this.#onClick(); } break; case 'Enter': - if (this.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))) { + if (this.dispatchEvent(new MouseEvent('click', { + bubbles: true, + cancelable: true, + view: window, + }))) { this.#onClick(); } } diff --git a/elements/pf-button/test/pf-button.spec.ts b/elements/pf-button/test/pf-button.spec.ts index c6020fc54d..034d2129d7 100644 --- a/elements/pf-button/test/pf-button.spec.ts +++ b/elements/pf-button/test/pf-button.spec.ts @@ -21,9 +21,9 @@ describe('', function() { it('should upgrade', async function() { const el = await createFixture(html`Button`); expect(el, 'pf-button should be an instance of PfButton') - .to.be.an.instanceOf(customElements.get('pf-button')) - .and - .to.be.an.instanceOf(PfButton); + .to.be.an.instanceOf(customElements.get('pf-button')) + .and + .to.be.an.instanceOf(PfButton); }); describe('in a fieldset', function() { let element: PfButton; @@ -67,8 +67,8 @@ describe('', function() { beforeEach(press('Tab')); it('does focus the button', function() { expect(document.activeElement) - .to - .be.an.instanceof(PfButton); + .to + .be.an.instanceof(PfButton); }); describe('pressing Space', function() { @@ -98,9 +98,9 @@ describe('', function() { beforeEach(press('Tab')); it('does not focus the button', function() { expect(document.activeElement) - .to - .not - .be.an.instanceof(PfButton); + .to + .not + .be.an.instanceof(PfButton); }); }); // this was a regression spotted by @brianferry @@ -123,8 +123,8 @@ describe('', function() { beforeEach(press('Tab')); it('does focus the button', function() { expect(document.activeElement) - .to - .be.an.instanceof(PfButton); + .to + .be.an.instanceof(PfButton); }); }); }); diff --git a/elements/pf-card/test/pf-card.spec.ts b/elements/pf-card/test/pf-card.spec.ts index d241031fa3..1c21441732 100644 --- a/elements/pf-card/test/pf-card.spec.ts +++ b/elements/pf-card/test/pf-card.spec.ts @@ -1,4 +1,4 @@ -import { expect, html, aTimeout } from '@open-wc/testing'; +import { expect, html, aTimeout, nextFrame } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; import '@patternfly/pfe-tools/test/stub-logger.js'; @@ -11,9 +11,9 @@ describe('', function() { it('should upgrade', async function() { expect(await createFixture(html``)) - .to.be.an.instanceof(customElements.get('pf-card')) - .and - .to.be.an.instanceof(PfCard); + .to.be.an.instanceof(customElements.get('pf-card')) + .and + .to.be.an.instanceof(PfCard); }); describe('with header and footer content', function() { @@ -36,11 +36,13 @@ describe('', function() { describe('size', function() { describe('unset', function() { + beforeEach(() => element.updateComplete); + beforeEach(nextFrame); it('should have default sizing for card parts', function() { - const bodyFontSize = getComputedStyle(element.querySelector('p')!).getPropertyValue('font-size'); - const footerFontSize = getComputedStyle(element.querySelector('[slot=footer]')!).getPropertyValue('font-size'); - expect(bodyFontSize).to.equal('16px'); - expect(footerFontSize).to.equal('16px'); + const pStyles = getComputedStyle(element.querySelector('p')!); + const footStyles = getComputedStyle(element.querySelector('[slot=footer]')!); + expect(pStyles.getPropertyValue('font-size'), 'body font-size').to.equal('16px'); + expect(footStyles.getPropertyValue('font-size'), 'footer font-size').to.equal('16px'); }); }); @@ -61,10 +63,10 @@ describe('', function() { it('should have larger font sizes for body, footer, more padding for header', function() { const { height } = element.getBoundingClientRect(); expect(origHeight, 'height').to.be.lessThan(height); - const bodyFontSize = getComputedStyle(element.querySelector('p')!).getPropertyValue('font-size'); - const footerFontSize = getComputedStyle(element.querySelector('[slot=footer]')!).getPropertyValue('font-size'); - expect(bodyFontSize).to.equal('16px'); - expect(footerFontSize).to.equal('16px'); + const pStyles = getComputedStyle(element.querySelector('p')!); + const footStyles = getComputedStyle(element.querySelector('[slot=footer]')!); + expect(pStyles.getPropertyValue('font-size'), 'body font-size').to.equal('16px'); + expect(footStyles.getPropertyValue('font-size'), 'footer font-size').to.equal('16px'); }); }); }); diff --git a/elements/pf-chip/pf-chip-group.ts b/elements/pf-chip/pf-chip-group.ts index abc17c7aa1..17377b82cb 100644 --- a/elements/pf-chip/pf-chip-group.ts +++ b/elements/pf-chip/pf-chip-group.ts @@ -35,13 +35,10 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g; /** * A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip. - * * @fires expand - Fires when chip group is expanded to show all chips * @fires remove - Fires when chip group is closed/removed - * * @slot category-name * Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied - * * @slot * Should be elements. */ @@ -49,7 +46,10 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g; export class PfChipGroup extends LitElement { static readonly styles = [shared, styles]; - static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; /** * Accessible label for chip group that does not have a category name @@ -142,10 +142,10 @@ export class PfChipGroup extends LitElement { } override updated(changed: PropertyValues) { - if (changed.has('accessibleCloseLabel') || - changed.has('numChips') || - changed.has('closeable') || - changed.has('open')) { + if (changed.has('accessibleCloseLabel') + || changed.has('numChips') + || changed.has('closeable') + || changed.has('open')) { this.#handleChipsChanged(); } } @@ -187,8 +187,8 @@ export class PfChipGroup extends LitElement { this._overflowChip, this._button, ].filter((x): x is PfChip => !!x); - if (oldButtons.length !== this.#buttons.length || - !oldButtons.every((element, index) => element === this.#buttons[index])) { + if (oldButtons.length !== this.#buttons.length + || !oldButtons.every((element, index) => element === this.#buttons[index])) { this.#tabindex.updateItems(); } this.#updateOverflow(); diff --git a/elements/pf-chip/pf-chip.ts b/elements/pf-chip/pf-chip.ts index 9c979c8118..c171c6e591 100644 --- a/elements/pf-chip/pf-chip.ts +++ b/elements/pf-chip/pf-chip.ts @@ -15,20 +15,20 @@ export class PfChipRemoveEvent extends Event { /** * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects. - * * @fires {ChipRemoveEvent} remove - Fires when chip is removed * @fires {Event} click - when close button is clicked - * * @slot * chip text - * * @csspart text - container for chip text */ @customElement('pf-chip') export class PfChip extends LitElement { static readonly styles = [shared, styles]; - static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; /** * Accessible label for close button diff --git a/elements/pf-chip/test/pf-chip-group.spec.ts b/elements/pf-chip/test/pf-chip-group.spec.ts index c3f5de85bf..4c59672e15 100644 --- a/elements/pf-chip/test/pf-chip-group.spec.ts +++ b/elements/pf-chip/test/pf-chip-group.spec.ts @@ -23,9 +23,9 @@ describe('', async function() { element = await createFixture(html``); const klass = customElements.get('pf-chip-group'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfChipGroup); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfChipGroup); }); }); @@ -192,7 +192,7 @@ describe('', async function() { }); describe('keyboard navigating with arrow keys to third chip and pressing enter', function() { - beforeEach(() => element.focus()); + beforeEach(press('Tab')); beforeEach(press('ArrowRight')); beforeEach(press('ArrowRight')); beforeEach(press('Enter')); diff --git a/elements/pf-chip/test/pf-chip.spec.ts b/elements/pf-chip/test/pf-chip.spec.ts index 1976f44dad..7d39ae6dab 100644 --- a/elements/pf-chip/test/pf-chip.spec.ts +++ b/elements/pf-chip/test/pf-chip.spec.ts @@ -25,9 +25,9 @@ describe('', async function() { it('should upgrade', async function() { const klass = customElements.get('pf-chip'); expect(await createFixture(html``)) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfChip); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfChip); }); describe('simply instantiating', function() { diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts index d62525b97b..0bb919aee3 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts @@ -16,7 +16,6 @@ const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); /** * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard. - * * @slot - Place content to copy here, or use the `value` attribute * @slot actions - Place additional action buttons here */ @@ -24,7 +23,10 @@ const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); export class PfClipboardCopy extends BaseClipboardCopy { static readonly styles = [...BaseClipboardCopy.styles, styles]; - static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...BaseClipboardCopy.shadowRootOptions, + delegatesFocus: true, + }; @property({ attribute: 'click-tip' }) clickTip = 'Copied'; @@ -78,7 +80,7 @@ export class PfClipboardCopy extends BaseClipboardCopy { render() { const { expanded, expandable, inline, compact, code, block, readonly } = this; return html` -
+
0) { this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child => (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '') - .join('')); + .join('')); } } diff --git a/elements/pf-clipboard-copy/test/pf-clipboard-copy.spec.ts b/elements/pf-clipboard-copy/test/pf-clipboard-copy.spec.ts index bae6526b1b..94bbf01a86 100644 --- a/elements/pf-clipboard-copy/test/pf-clipboard-copy.spec.ts +++ b/elements/pf-clipboard-copy/test/pf-clipboard-copy.spec.ts @@ -30,9 +30,9 @@ describe('', function() { it('should upgrade', async function() { const klass = customElements.get('pf-clipboard-copy'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfClipboardCopy); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfClipboardCopy); }); describe('setting value attribute', function() { diff --git a/elements/pf-code-block/BaseCodeBlock.ts b/elements/pf-code-block/BaseCodeBlock.ts index f6d41dd757..e34af1dc6f 100644 --- a/elements/pf-code-block/BaseCodeBlock.ts +++ b/elements/pf-code-block/BaseCodeBlock.ts @@ -12,8 +12,8 @@ export abstract class BaseCodeBlock extends LitElement { protected get content() { const script = this.querySelector('script[type]'); if ( - script?.type !== 'text/javascript-sample' && - !!script?.type.match(/(j(ava)?|ecma|live)script/)) { + script?.type !== 'text/javascript-sample' + && !!script?.type.match(/(j(ava)?|ecma|live)script/)) { return ''; } else { return script?.textContent ?? ''; diff --git a/elements/pf-code-block/test/pf-code-block.spec.ts b/elements/pf-code-block/test/pf-code-block.spec.ts index bb67d51268..c51a4c952f 100644 --- a/elements/pf-code-block/test/pf-code-block.spec.ts +++ b/elements/pf-code-block/test/pf-code-block.spec.ts @@ -56,9 +56,9 @@ describe('', function() { const el = await createFixture (element); const klass = customElements.get('pf-code-block'); expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfCodeBlock); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfCodeBlock); }); it('should not show a "Show more" button by default', async function() { diff --git a/elements/pf-dropdown/pf-dropdown-group.ts b/elements/pf-dropdown/pf-dropdown-group.ts index 6687e262c5..bdfc2e9fff 100644 --- a/elements/pf-dropdown/pf-dropdown-group.ts +++ b/elements/pf-dropdown/pf-dropdown-group.ts @@ -13,7 +13,10 @@ import styles from './pf-dropdown-group.css'; export class PfDropdownGroup extends LitElement { static readonly styles = [styles]; - static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; /** * The label for the group of dropdown items. diff --git a/elements/pf-dropdown/pf-dropdown-item.ts b/elements/pf-dropdown/pf-dropdown-item.ts index 78cb547c1d..b86fb5ea25 100644 --- a/elements/pf-dropdown/pf-dropdown-item.ts +++ b/elements/pf-dropdown/pf-dropdown-item.ts @@ -25,7 +25,6 @@ export class DropdownItemChange extends Event { * Optional slot for item description * @slot - * Content for the dropdown item - * * @cssprop {} --pf-c-dropdown__menu-item--FontSize * Dropdown item font size * {@default `1rem`} @@ -58,7 +57,10 @@ export class DropdownItemChange extends Event { export class PfDropdownItem extends LitElement { static readonly styles = [styles]; - static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; /** * The value associated with the dropdown item. diff --git a/elements/pf-dropdown/pf-dropdown-menu.ts b/elements/pf-dropdown/pf-dropdown-menu.ts index 4edcbc5e2b..a492a34267 100644 --- a/elements/pf-dropdown/pf-dropdown-menu.ts +++ b/elements/pf-dropdown/pf-dropdown-menu.ts @@ -22,14 +22,16 @@ function isDisabledItemClick(event: MouseEvent) { /** * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a * process or navigate to a new location. - * * @slot - Must contain one or more `` or `` */ @customElement('pf-dropdown-menu') export class PfDropdownMenu extends LitElement { static readonly styles = [styles]; - static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; @consume({ context, subscribe: true }) @state() @@ -107,8 +109,8 @@ export class PfDropdownMenu extends LitElement { if (this.ctx?.disabled) { event.preventDefault(); event.stopPropagation(); - } else if (event.target instanceof PfDropdownItem && - event.target.menuItem !== this.#tabindex.activeItem) { + } else if (event.target instanceof PfDropdownItem + && event.target.menuItem !== this.#tabindex.activeItem) { this.#tabindex.setActiveItem(event.target.menuItem); } } @@ -122,26 +124,26 @@ export class PfDropdownMenu extends LitElement { if (this.ctx?.disabled || isDisabledItemClick(event)) { event.preventDefault(); event.stopPropagation(); - } else if (event.target instanceof PfDropdownItem && - event.target.menuItem !== this.#tabindex.activeItem) { + } else if (event.target instanceof PfDropdownItem + && event.target.menuItem !== this.#tabindex.activeItem) { this.#tabindex.setActiveItem(event.target.menuItem); } } #getSlottedItems(slot?: HTMLSlotElement | null): PfDropdownItem[] { return slot - ?.assignedElements() - .flatMap(element => { - if (element instanceof HTMLSlotElement) { - return this.#getSlottedItems(element); - } else if (element instanceof PfDropdownItem) { - return [element]; - } else if (element instanceof PfDropdownGroup) { - return Array.from(element.querySelectorAll('pf-dropdown-item')); - } else { - return []; - } - }) ?? []; + ?.assignedElements() + .flatMap(element => { + if (element instanceof HTMLSlotElement) { + return this.#getSlottedItems(element); + } else if (element instanceof PfDropdownItem) { + return [element]; + } else if (element instanceof PfDropdownGroup) { + return Array.from(element.querySelectorAll('pf-dropdown-item')); + } else { + return []; + } + }) ?? []; } } diff --git a/elements/pf-dropdown/pf-dropdown.ts b/elements/pf-dropdown/pf-dropdown.ts index a3cdc7385a..8afe6e98e1 100644 --- a/elements/pf-dropdown/pf-dropdown.ts +++ b/elements/pf-dropdown/pf-dropdown.ts @@ -31,13 +31,10 @@ export class PfDropdownSelectEvent extends Event { /** * A **dropdown** presents a menu of actions or links in a constrained space that * will trigger a process or navigate to a new location. - * * @slot - Must contain one or more `` or `` * @slot toggle - Custom toggle button * @slot menu - when using a custom toggle, you must slot a `` in alongside it - * * @csspart menu - The dropdown menu wrapper - * * @cssprop {} --pf-c-dropdown__menu--PaddingTop * Dropdown top padding * {@default `0.5rem`} @@ -53,7 +50,6 @@ export class PfDropdownSelectEvent extends Event { * @cssprop {} --pf-c-dropdown__menu--Top * Dropdown top * {@default `100% + 0.25rem`} - * * @fires {PfDropdownSelectEvent} select - when a user select dropdown value * @fires open - when the dropdown toggles open * @fires close - when the dropdown toggles closed @@ -62,7 +58,11 @@ export class PfDropdownSelectEvent extends Event { export class PfDropdown extends LitElement { static readonly styles = [styles]; - static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; + /** * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated. @@ -156,7 +156,8 @@ export class PfDropdown extends LitElement { } else if (!menu) { this.#logger.warn('no menu found'); return false; - } else if (![toggle, menu].map(x => this.shadowRoot?.contains(x)).every((p, _, a) => p === a[0])) { + } else if (![toggle, menu].map(x => this.shadowRoot?.contains(x)) + .every((p, _, a) => p === a[0])) { this.#logger.warn('toggle and menu must be located in the same root'); return false; } else { @@ -219,11 +220,11 @@ export class PfDropdown extends LitElement { if (this.expanded) { const root = this.getRootNode(); const [menu] = this._menuElements; - if (root instanceof ShadowRoot || - root instanceof Document && - event.relatedTarget instanceof PfDropdownItem && - menu instanceof PfDropdownMenu && - !menu.items.includes(event.relatedTarget) + if (root instanceof ShadowRoot + || root instanceof Document + && event.relatedTarget instanceof PfDropdownItem + && menu instanceof PfDropdownMenu + && !menu.items.includes(event.relatedTarget) ) { this.hide(); } diff --git a/elements/pf-dropdown/test/pf-dropdown.spec.ts b/elements/pf-dropdown/test/pf-dropdown.spec.ts index b6f6a37e86..39aac0b05e 100644 --- a/elements/pf-dropdown/test/pf-dropdown.spec.ts +++ b/elements/pf-dropdown/test/pf-dropdown.spec.ts @@ -25,9 +25,9 @@ describe('', function() { element = await createFixture(html``); const klass = customElements.get('pf-dropdown'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfDropdown); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfDropdown); }); }); @@ -48,7 +48,7 @@ describe('', function() { 'aria-allowed-attr', /** false positive: the menuitem is projected into a menu in another shadow root */ 'aria-required-parent', - ] + ], }); }); diff --git a/elements/pf-icon/BaseIcon.ts b/elements/pf-icon/BaseIcon.ts index f8539b95db..d0227ac6bc 100644 --- a/elements/pf-icon/BaseIcon.ts +++ b/elements/pf-icon/BaseIcon.ts @@ -25,7 +25,6 @@ class IconLoadError extends ErrorEvent { /** * Icon component lazy-loads icons and allows custom icon sets - * * @slot - Slotted content is used as a fallback in case the icon doesn't load * @fires load - Fired when an icon is loaded and rendered * @fires error - Fired when an icon fails to load @@ -127,18 +126,18 @@ export abstract class BaseIcon extends LitElement { } render() { - const content = this.content ?? ''; /* eslint-disable indent */ + const content = this.content ?? ''; return html` - `;/* eslint-enable indent */ + `; } protected async load() { - const { set, icon, } = this; + const { set, icon } = this; const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl; let spec = 'UNKNOWN ICON'; if (set && icon) { diff --git a/elements/pf-icon/test/pf-icon.spec.ts b/elements/pf-icon/test/pf-icon.spec.ts index 9ee4257ed3..601d71cadc 100644 --- a/elements/pf-icon/test/pf-icon.spec.ts +++ b/elements/pf-icon/test/pf-icon.spec.ts @@ -31,9 +31,9 @@ describe('', function() { it('should upgrade', function() { expect(element, 'pf-icon should be an instance of PfIcon') - .to.be.an.instanceOf(customElements.get('pf-icon')) - .and - .to.be.an.instanceOf(PfIcon); + .to.be.an.instanceOf(customElements.get('pf-icon')) + .and + .to.be.an.instanceOf(PfIcon); }); it('should warn if the 2nd argument to addIconSet is not a function', function() { diff --git a/elements/pf-jump-links/demo/scrollspy-with-subsections.html b/elements/pf-jump-links/demo/scrollspy-with-subsections.html index 5a500dd798..49b3e60f4f 100644 --- a/elements/pf-jump-links/demo/scrollspy-with-subsections.html +++ b/elements/pf-jump-links/demo/scrollspy-with-subsections.html @@ -152,7 +152,8 @@

Heading 5

const media = matchMedia('(max-width: 600px)'); function sumHeights(...elements) { - return elements.reduce((sum, el) => sum + el?.getBoundingClientRect?.().height ?? 0, 0); + return elements.reduce((sum, el) => + sum + (el?.getBoundingClientRect?.().height ?? 0), 0); } async function update() { diff --git a/elements/pf-jump-links/pf-jump-links-item.ts b/elements/pf-jump-links/pf-jump-links-item.ts index bbdb34838a..867612fb89 100644 --- a/elements/pf-jump-links/pf-jump-links-item.ts +++ b/elements/pf-jump-links/pf-jump-links-item.ts @@ -22,7 +22,10 @@ import { observed } from '@patternfly/pfe-core/decorators/observed.js'; export class PfJumpLinksItem extends LitElement { static readonly styles = [style]; - static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; /** Whether this item is active. */ @observed('activeChanged') diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts index 1c5694a599..83725a956f 100644 --- a/elements/pf-jump-links/pf-jump-links.ts +++ b/elements/pf-jump-links/pf-jump-links.ts @@ -13,10 +13,8 @@ import style from './pf-jump-links.css'; /** * **Jump links** allow users to navigate to sections within a page. - * * @fires toggle - when the `expanded` disclosure widget is toggled * @slot - Place pf-jump-links-items here - * * @cssprop --pf-c-jump-links__list--Display * @cssprop --pf-c-jump-links__list--FlexDirection * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links @@ -30,7 +28,6 @@ import style from './pf-jump-links.css'; * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth * @cssprop --pf-c-jump-links__toggle--MarginBottom--base - * * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget. * @cssprop --pf-c-jump-links__toggle--MarginBottom * @cssprop --pf-c-jump-links__toggle--MarginBottom--base @@ -40,15 +37,12 @@ import style from './pf-jump-links.css'; * @cssprop --pf-c-button--PaddingRight * @cssprop --pf-c-button--PaddingBottom * @cssprop --pf-c-button--PaddingLeft - * * @cssprop --pf-c-jump-links__toggle-icon--Rotate * @cssprop --pf-c-jump-links__toggle-icon--Transition * @cssprop --pf-c-jump-links__toggle-text--MarginLeft - * * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color - * * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom @@ -106,12 +100,12 @@ export class PfJumpLinks extends LitElement { this.#tabindex = new RovingTabindexController(this, { getItems: () => { const items = Array.from(this.#kids) - .flatMap(i => [ - ...i.shadowRoot?.querySelectorAll('a') ?? [], - ...i.querySelectorAll('a') ?? [], - ]); + .flatMap(i => [ + ...i.shadowRoot?.querySelectorAll('a') ?? [], + ...i.querySelectorAll('a') ?? [], + ]); return items; - } + }, }); const active = this.querySelector('pf-jump-links-item[active]'); if (active) { diff --git a/elements/pf-jump-links/test/pf-jump-links.spec.ts b/elements/pf-jump-links/test/pf-jump-links.spec.ts index d3704f14e6..dea84bd3fd 100644 --- a/elements/pf-jump-links/test/pf-jump-links.spec.ts +++ b/elements/pf-jump-links/test/pf-jump-links.spec.ts @@ -74,9 +74,9 @@ describe('', function() { it('should upgrade', async function() { expect(element) - .to.be.an.instanceof(customElements.get('pf-jump-links-item')) - .and - .to.be.an.instanceof(PfJumpLinksItem); + .to.be.an.instanceof(customElements.get('pf-jump-links-item')) + .and + .to.be.an.instanceof(PfJumpLinksItem); }); }); @@ -91,8 +91,8 @@ describe('', function() { it('should upgrade', async function() { expect(element) - .to.be.an.instanceof(customElements.get('pf-jump-links-list')) - .and - .to.be.an.instanceof(PfJumpLinksList); + .to.be.an.instanceof(customElements.get('pf-jump-links-list')) + .and + .to.be.an.instanceof(PfJumpLinksList); }); }); diff --git a/elements/pf-label/pf-label.ts b/elements/pf-label/pf-label.ts index fa5309f3ee..69675e5a76 100644 --- a/elements/pf-label/pf-label.ts +++ b/elements/pf-label/pf-label.ts @@ -25,87 +25,67 @@ export type LabelColor = ( | 'red' | 'grey' | 'gold' -) +); /** * The **label** component allows users to add specific element captions for user * clarity and convenience. - * * @summary Allows users to display meta data in a stylized form. - * * @fires close - when a removable label's close button is clicked - * * @cssprop {} --pf-c-label--FontSize {@default `0.875em`} - * * @cssprop {} --pf-c-label--PaddingTop {@default `0.25rem`} * @cssprop {} --pf-c-label--PaddingRight {@default `0.5rem`} * @cssprop {} --pf-c-label--PaddingBottom {@default `0.25rem`} * @cssprop {} --pf-c-label--PaddingLeft {@default `0.5rem`} - * * @cssprop {} --pf-c-label--Color {@default `#151515`} * @cssprop {} --pf-c-label--BackgroundColor {@default `#f5f5f5`} - * * @cssprop {} --pf-c-label--BorderRadius {@default `30em`} - * * @cssprop {} --pf-c-label__content--MaxWidth {@default `100%`} * @cssprop {} --pf-c-label__content--Color {@default `#151515`} * @cssprop {} --pf-c-label__content--before--BorderWidth {@default `1px`} * @cssprop {} --pf-c-label__content--before--BorderColor {@default `#d2d2d2`} - * * @cssprop {} --pf-c-label--m-outline__content--Color {@default `#151515`} * @cssprop {} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`} - * * @cssprop {} --pf-c-label--m-blue__content--Color {@default `#002952`} * @cssprop {} --pf-c-label--m-blue--BackgroundColor {@default `#e7f1fa`} * @cssprop {} --pf-c-label--m-blue__content--before--BorderColor {@default `#bee1f4`} * @cssprop {} --pf-c-label--m-outline--m-blue__content--Color {@default `#06c`} - * * @cssprop {} --pf-c-label--m-cyan__content--Color {@default `#3b1f00`} * @cssprop {} --pf-c-label--m-cyan--BackgroundColor {@default `#f2f9f9`} * @cssprop {} --pf-c-label--m-cyan__content--before--BorderColor {@default `#a2d9d9`} * @cssprop {} --pf-c-label--m-outline--m-cyan__content--Color {@default `#005f60`} - * * @cssprop {} --pf-c-label--m-green__content--Color {@default `#1e4f18`} * @cssprop {} --pf-c-label--m-green--BackgroundColor {@default `#f3faf2`} * @cssprop {} --pf-c-label--m-green__content--before--BorderColor {@default `#bde5b8`} * @cssprop {} --pf-c-label--m-outline--m-green__content--Color {@default `#3e8635`} - * * @cssprop {} --pf-c-label--m-orange__content--Color {@default `#003737`} * @cssprop {} --pf-c-label--m-orange--BackgroundColor {@default `#fff6ec`} * @cssprop {} --pf-c-label--m-orange__content--before--BorderColor {@default `#f4b678`} * @cssprop {} --pf-c-label--m-outline--m-orange__content--Color {@default `#8f4700`} - * * @cssprop {} --pf-c-label--m-purple__content--Color {@default `#1f0066`} * @cssprop {} --pf-c-label--m-purple--BackgroundColor {@default `#f2f0fc`} * @cssprop {} --pf-c-label--m-purple__content--before--BorderColor {@default `#cbc1ff`} * @cssprop {} --pf-c-label--m-outline--m-purple__content--Color {@default `#6753ac`} - * * @cssprop {} --pf-c-label--m-red__content--Color {@default `#7d1007`} * @cssprop {} --pf-c-label--m-red--BackgroundColor {@default `#faeae8`} * @cssprop {} --pf-c-label--m-red__content--before--BorderColor {@default `#c9190b`} * @cssprop {} --pf-c-label--m-outline--m-red__content--Color {@default `#c9190b`} - * * @cssprop {} --pf-c-label--m-gold__content--Color {@default `#3d2c00`} * @cssprop {} --pf-c-label--m-gold--BackgroundColor {@default `#fdf7e7`} * @cssprop {} --pf-c-label--m-gold__content--before--BorderColor {@default `#f9e0a2`} * @cssprop {} --pf-c-label--m-outline--m-gold__content--Color {@default `#795600`} - * @cssprop {} --pf-c-label--m-blue__icon--Color {@default `#06c`} * @cssprop {} --pf-c-label--m-cyan__icon--Color {@default `#009596`} * @cssprop {} --pf-c-label--m-green__icon--Color {@default `#3e8635`} * @cssprop {} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`} * @cssprop {} --pf-c-label--m-red__icon--Color {@default `#c9190b`} * @cssprop {} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`} - * * @csspart icon - container for the label icon * @csspart close-button - container for removable labels' close button - * * @slot icon * Contains the labels's icon, e.g. web-icon-alert-success. - * * @slot * Must contain the text for the label. - * * @cssprop {} --pf-c-label--m-compact--PaddingTop {@default `0`} * @cssprop {} --pf-c-label--m-compact--PaddingRight {@default `0.5rem`} * @cssprop {} --pf-c-label--m-compact--PaddingBottom {@default `0`} @@ -115,7 +95,10 @@ export type LabelColor = ( export class PfLabel extends BaseLabel { static readonly styles = [...BaseLabel.styles, styles]; - static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...BaseLabel.shadowRootOptions, + delegatesFocus: true, + }; /** * Changes the style of the label. diff --git a/elements/pf-label/test/pf-label.spec.ts b/elements/pf-label/test/pf-label.spec.ts index a21006dce7..17376667cc 100644 --- a/elements/pf-label/test/pf-label.spec.ts +++ b/elements/pf-label/test/pf-label.spec.ts @@ -53,9 +53,9 @@ describe('', function() { const el = await createFixture(example); const klass = customElements.get('pf-label'); expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfLabel); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfLabel); }); it('should display default variant', async function() { diff --git a/elements/pf-modal/pf-modal.ts b/elements/pf-modal/pf-modal.ts index e471eae5e0..866a9c95ef 100644 --- a/elements/pf-modal/pf-modal.ts +++ b/elements/pf-modal/pf-modal.ts @@ -37,16 +37,12 @@ export class ModalOpenEvent extends ComposedEvent { /** * A **modal** displays important information to a user without requiring them to navigate * to a new page. - * * @summary Displays information or helps a user focus on a task - * * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header. * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6). * @slot footer - Optional footer content. Good place to put action buttons. - * * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal. * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal. - * * @csspart overlay - The modal overlay which lies under the dialog and above the page body * @csspart dialog - The dialog element * @csspart content - The container for the dialog content @@ -54,7 +50,6 @@ export class ModalOpenEvent extends ComposedEvent { * @csspart description - The container for the optional dialog description in the header * @csspart close-button - The modal's close button * @csspart footer - Actions footer container - * * @cssprop {} --pf-c-modal-box--ZIndex {@default 500} * @cssprop {} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)} * @cssprop {} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)} @@ -72,7 +67,10 @@ export class ModalOpenEvent extends ComposedEvent { */ @customElement('pf-modal') export class PfModal extends LitElement implements HTMLDialogElement { - static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; static readonly styles = [style]; @@ -220,7 +218,8 @@ export class PfModal extends LitElement implements HTMLDialogElement { protected _triggerChanged() { if (this.trigger) { - this.#triggerElement = (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger); + this.#triggerElement = (this.getRootNode() as Document | ShadowRoot) + .getElementById(this.trigger); this.#triggerElement?.addEventListener('click', this.onTriggerClick); } } @@ -236,7 +235,7 @@ export class PfModal extends LitElement implements HTMLDialogElement { if (open) { const path = event.composedPath(); const { closeOnOutsideClick } = this.constructor as typeof PfModal; - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) { event.preventDefault(); this.cancel(); diff --git a/elements/pf-modal/test/pf-modal.spec.ts b/elements/pf-modal/test/pf-modal.spec.ts index aa09780917..c1115ca940 100644 --- a/elements/pf-modal/test/pf-modal.spec.ts +++ b/elements/pf-modal/test/pf-modal.spec.ts @@ -40,9 +40,9 @@ describe('', function() { it('should upgrade', async function() { const el = await createFixture(TEMPLATES.testElement); expect(el, 'pf-modal should be an instance of PfModal') - .to.be.an.instanceOf(customElements.get('pf-modal')) - .and - .to.be.an.instanceOf(PfModal); + .to.be.an.instanceOf(customElements.get('pf-modal')) + .and + .to.be.an.instanceOf(PfModal); }); // Example test. @@ -105,7 +105,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -114,7 +114,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -123,7 +123,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); }); @@ -138,7 +138,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -147,7 +147,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -156,7 +156,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); }); @@ -171,7 +171,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -180,7 +180,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -189,7 +189,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); }); @@ -204,7 +204,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -213,7 +213,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); @@ -222,7 +222,7 @@ describe('', function() { const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) - .to.equal('calc(100% - 32px)'); + .to.equal('calc(100% - 32px)'); }); }); }); diff --git a/elements/pf-panel/test/pf-panel.spec.ts b/elements/pf-panel/test/pf-panel.spec.ts index cb38b52d74..ea57ea708d 100644 --- a/elements/pf-panel/test/pf-panel.spec.ts +++ b/elements/pf-panel/test/pf-panel.spec.ts @@ -16,9 +16,9 @@ describe('', function() { it('should upgrade', function() { const klass = customElements.get('pf-panel'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfPanel); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfPanel); }); }); }); diff --git a/elements/pf-popover/pf-popover.ts b/elements/pf-popover/pf-popover.ts index 5415439cee..c739d4410b 100644 --- a/elements/pf-popover/pf-popover.ts +++ b/elements/pf-popover/pf-popover.ts @@ -46,9 +46,7 @@ export class PopoverShownEvent extends ComposedEvent { /** * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links. - * * @summary Toggle the visibility of helpful or contextual information. - * * @slot - * The default slot holds invoking element. * Typically this would be an icon, button, or other small sized element. @@ -62,7 +60,6 @@ export class PopoverShownEvent extends ComposedEvent { * This slot renders the content that will be displayed inside of the body of the popover. * @slot footer * This slot renders the content that will be displayed inside of the footer of the popover. - * * @csspart container - The component wrapper * @csspart content - The content wrapper * @csspart header - The header element; only visible if both an icon annd heading are provided. @@ -71,7 +68,6 @@ export class PopoverShownEvent extends ComposedEvent { * @csspart close-button - The close button * @csspart body - The container for the body content * @csspart footer - The container for the footer content - * * @cssprop {} --pf-c-popover__arrow--Height * Height of the arrow * {@default `1.5625rem`} @@ -259,7 +255,11 @@ export class PfPopover extends LitElement { /** * The heading level to use for the popover's header. The default is `h6`. */ - @property({ type: Number, reflect: true, attribute: 'heading-level' }) headingLevel?: HeadingLevel; + @property({ + type: Number, + reflect: true, + attribute: 'heading-level', + }) headingLevel?: HeadingLevel; /** * Indicates which icon set to use for the header's icon. @@ -286,7 +286,10 @@ export class PfPopover extends LitElement { /** * @deprecated do not use the color-palette attribute, which was added by mistake. use context-providing containers (e.g. rh-card) instead */ - @deprecation({ alias: 'accessible-close-label', attribute: 'close-label' }) closeButtonLabel?: string; + @deprecation({ + alias: 'accessible-close-label', + attribute: 'close-label', + }) closeButtonLabel?: string; /** * The text announced by the screen reader to indicate the popover's severity. @@ -349,7 +352,9 @@ export class PfPopover extends LitElement { ${headingContent} `; - const headerIcon = this.icon ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? ''; + const headerIcon = this.icon + ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) + ?? ''; return html`
', function() { it('should upgrade', async function() { const klass = customElements.get('pf-popover'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfPopover); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfPopover); }); it('should be accessible', expectA11yAxe); it('imperatively instantiates', function() { expect(document.createElement('pf-popover')) - .to.be.an.instanceof(PfPopover); + .to.be.an.instanceof(PfPopover); }); it('should not report anything to assistive technology', async function() { const snapshot = await a11ySnapshot(); @@ -248,7 +248,7 @@ describe('', function() { name: 'Toggle popover 2', role: 'button', }, - ] + ], }); }); }); diff --git a/elements/pf-progress-stepper/test/pf-progress-stepper.spec.ts b/elements/pf-progress-stepper/test/pf-progress-stepper.spec.ts index 729eb3675c..9fd315145b 100644 --- a/elements/pf-progress-stepper/test/pf-progress-stepper.spec.ts +++ b/elements/pf-progress-stepper/test/pf-progress-stepper.spec.ts @@ -14,8 +14,8 @@ describe('', function() { it('it should upgrade', async function() { const el = await createFixture(html``); expect(el) - .to.be.an.instanceOf(customElements.get('pf-progress-stepper')) - .and - .to.be.an.instanceOf(PfProgressStepper); + .to.be.an.instanceOf(customElements.get('pf-progress-stepper')) + .and + .to.be.an.instanceOf(PfProgressStepper); }); }); diff --git a/elements/pf-progress/pf-progress.ts b/elements/pf-progress/pf-progress.ts index a8dc28e021..93094bd5fb 100644 --- a/elements/pf-progress/pf-progress.ts +++ b/elements/pf-progress/pf-progress.ts @@ -11,90 +11,69 @@ import styles from './pf-progress.css'; const ICONS = new Map(Object.entries({ success: { icon: 'circle-check' }, danger: { icon: 'circle-xmark' }, - warning: { icon: 'triangle-exclamation' } + warning: { icon: 'triangle-exclamation' }, })); /** * A progress bar gives the user a visual representation of their completion status of an ongoing process or task. - * * @summary Display completion status of ongoing process or task. - * * @cssprop {} --pf-c-progress--GridGap * Gap between the sections of the progress bar. * {@default `1rem`} - * * @cssprop {} --pf-c-progress__bar--before--BackgroundColor * Color of the progress bar. * {@default `#06c`} - * * @cssprop {} --pf-c-progress__bar--Height * Height of the progress bar. * {@default `1rem`} - * * @cssprop {} --pf-c-progress__bar--BackgroundColor * Background color of the progress bar. * {@default `#ffffff`} - * * @cssprop {} --pf-c-progress__status-icon--Color * Color of the status icon. * {@default `#151515`} - * * @cssprop {} --pf-c-progress__status-icon--MarginLeft * Margin left of the status icon. * {@default `0.5rem`} - * * @cssprop {} --pf-c-progress__indicator--Height * Height of the progress bar indicator. * {@default `1rem`} - * * @cssprop {} --pf-c-progress__indicator--BackgroundColor * Background color of the progress bar indicator. * {@default `#ffffff`} - * * @cssprop {} --pf-c-progress--m-success__bar--BackgroundColor * Background color of the progress bar when variant is success. * {@default `#3e8635`} - * * @cssprop {} --pf-c-progress--m-warning__bar--BackgroundColor * Background color of the progress bar when variant is warning. * {@default `#f0ab00`} - * * @cssprop {} --pf-c-progress--m-danger__bar--BackgroundColor * Background color of the progress bar when variant is danger. * {@default `#c9190b`} - * * @cssprop {} --pf-c-progress--m-success__status-icon--Color * Color of the status icon when variant is success. * {@default `#3e8635`} - * * @cssprop {} --pf-c-progress--m-warning__status-icon--Color * Color of the status icon when variant is warning. * {@default `#f0ab00`} - * * @cssprop {} --pf-c-progress--m-danger__status-icon--Color * Color of the status icon when variant is danger. * {@default `#c9190b`} - * * @cssprop {} --pf-c-progress--m-success--m-inside__measure--Color * Color of the progress bar measure when variant is success and measure location is inside. * {@default `#ffffff`} - * * @cssprop {} --pf-c-progress--m-outside__measure--FontSize * Font size of the progress bar measure when measure location is outside. * {@default `0.875rem`} - * * @cssprop {} --pf-c-progress--m-sm__bar--Height * Height of the progress bar when the size is small. * {@default `0.5rem`} - * * @cssprop {} --pf-c-progress--m-sm__description--FontSize * Font size of the progress bar description when the size is small. * {@default `0.875rem`} - * * @cssprop {} --pf-c-progress--m-lg__bar--Height * Height of the progress bar when the size is large. * {@default `1.5rem`} - * */ @customElement('pf-progress') export class PfProgress extends LitElement { diff --git a/elements/pf-select/pf-option-group.ts b/elements/pf-select/pf-option-group.ts index b619178e20..c626bdf298 100644 --- a/elements/pf-select/pf-option-group.ts +++ b/elements/pf-select/pf-option-group.ts @@ -22,6 +22,8 @@ export class PfOptionGroup extends LitElement { /** whether group is disabled */ @property({ type: Boolean, reflect: true }) disabled = false; + // for the role + // eslint-disable-next-line no-unused-private-class-members #internals = InternalsController.of(this, { role: 'group' }); render() { diff --git a/elements/pf-select/pf-option.ts b/elements/pf-select/pf-option.ts index d3757c7de8..d616d24797 100644 --- a/elements/pf-select/pf-option.ts +++ b/elements/pf-select/pf-option.ts @@ -11,7 +11,6 @@ import styles from './pf-option.css'; /** * Option within a listbox - * * @slot - * option text * @slot icon @@ -116,9 +115,9 @@ export class PfOption extends LitElement { } willUpdate(changed: PropertyValues) { - if (changed.has('selected') && + if (changed.has('selected') // don't fire on initialization - !(changed.get('selected') === undefined) && this.selected === false) { + && !(changed.get('selected') === undefined) && this.selected === false) { this.#internals.ariaSelected = this.selected ? 'true' : 'false'; } if (changed.has('disabled')) { diff --git a/elements/pf-select/pf-select.ts b/elements/pf-select/pf-select.ts index 5cfa08554c..e8f52b75f8 100644 --- a/elements/pf-select/pf-select.ts +++ b/elements/pf-select/pf-select.ts @@ -12,7 +12,10 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { ListboxController } from '@patternfly/pfe-core/controllers/listbox-controller.js'; import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js'; import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js'; -import { FloatingDOMController, type Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js'; +import { + FloatingDOMController, + type Placement, +} from '@patternfly/pfe-core/controllers/floating-dom-controller.js'; import { PfOption } from './pf-option.js'; @@ -41,7 +44,6 @@ export class PfSelectChangeEvent extends Event { * A select component consists of a toggle control to open and close a menu of actions or links. * Selects differ from dropdowns in that they persist selection, * whereas dropdowns are typically used to present a list of actions or links. - * * @slot - insert `pf-option` and/or `pf-option-groups` here * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute. * @fires open - when the menu toggles open @@ -79,7 +81,9 @@ export class PfSelect extends LitElement { /** * Accessible label for chip group used to describe chips */ - @property({ attribute: 'accessible-current-selections-label' }) accessibleCurrentSelectionsLabel = 'Current selections'; + @property({ + attribute: 'accessible-current-selections-label', + }) accessibleCurrentSelectionsLabel = 'Current selections'; /** * multi listbox button text @@ -176,16 +180,16 @@ export class PfSelect extends LitElement { // return `${this.#listbox?.selectedOptions?.length ?? 0} ${this.itemsSelectedText}` case 'checkbox': return this.#listbox - ?.selectedOptions - ?.map?.(option => option.optionText || '') - ?.join(' ') - ?.trim() || - this.#computePlaceholderText() || - 'Options'; + ?.selectedOptions + ?.map?.(option => option.optionText || '') + ?.join(' ') + ?.trim() + || this.#computePlaceholderText() + || 'Options'; default: - return (this.selected ? this.value : '') || - this.#computePlaceholderText() || - 'Select a value'; + return (this.selected ? this.value : '') + || this.#computePlaceholderText() + || 'Select a value'; } } @@ -370,10 +374,10 @@ export class PfSelect extends LitElement { async #selectedChanged() { await this.updateComplete; this.value = [this.selected] - .flat() - .filter(x => !!x) - .map(x => x!.value) - .join(); + .flat() + .filter(x => !!x) + .map(x => x!.value) + .join(); this.dispatchEvent(new PfSelectChangeEvent()); switch (this.variant) { case 'single': @@ -396,9 +400,9 @@ export class PfSelect extends LitElement { case 'checkbox': if (this.expanded) { const root = this.getRootNode(); - if (root instanceof ShadowRoot || - root instanceof Document && - !this.options.includes(event.relatedTarget as PfOption) + if (root instanceof ShadowRoot + || root instanceof Document + && !this.options.includes(event.relatedTarget as PfOption) ) { this.hide(); } @@ -449,14 +453,14 @@ export class PfSelect extends LitElement { } #computePlaceholderText() { - return this.placeholder || - this.querySelector('[slot=placeholder]') - ?.assignedNodes() - ?.reduce((acc, node) => `${acc}${node.textContent}`, '')?.trim() || - this.#listbox?.options - ?.filter(x => x !== this.shadowRoot?.getElementById('placeholder')) - ?.at(0)?.value || - ''; + return this.placeholder + || this.querySelector('[slot=placeholder]') + ?.assignedNodes() + ?.reduce((acc, node) => `${acc}${node.textContent}`, '')?.trim() + || this.#listbox?.options + ?.filter(x => x !== this.shadowRoot?.getElementById('placeholder')) + ?.at(0)?.value + || ''; } /** diff --git a/elements/pf-select/test/pf-select.spec.ts b/elements/pf-select/test/pf-select.spec.ts index e5267ad302..f2f03adcef 100644 --- a/elements/pf-select/test/pf-select.spec.ts +++ b/elements/pf-select/test/pf-select.spec.ts @@ -45,9 +45,9 @@ describe('', function() { element = await createFixture(html``); const klass = customElements.get('pf-select'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfSelect); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfSelect); }); }); @@ -326,7 +326,7 @@ describe('', function() { it('should NOT use checkbox role for options', async function() { const snapshot = await a11ySnapshot(); expect(snapshot.children?.at(1)?.children?.filter(x => x.role === 'checkbox')?.length) - .to.equal(0); + .to.equal(0); }); }); @@ -596,7 +596,7 @@ describe('', function() { name: 'Options', focused: true, autocomplete: 'both', - haspopup: 'listbox' + haspopup: 'listbox', }); }); @@ -938,7 +938,7 @@ describe('', function() { it('removes all chips', async function() { const snapshot = await a11ySnapshot(); expect(snapshot.children?.find(x => x.role === 'button' && x.name === 'Close')) - .to.be.undefined; + .to.be.undefined; }); it('focuses the typeahead input', async function() { const snapshot = await a11ySnapshot(); diff --git a/elements/pf-spinner/test/pf-spinner.spec.ts b/elements/pf-spinner/test/pf-spinner.spec.ts index 24852c7f06..4d5c7a25c5 100644 --- a/elements/pf-spinner/test/pf-spinner.spec.ts +++ b/elements/pf-spinner/test/pf-spinner.spec.ts @@ -10,9 +10,9 @@ describe('', function() { it('should upgrade', async function() { const element = await createFixture(html`Loading...`); expect(element, 'pf-spinner should be an instance of PfeSpinner') - .to.be.an.instanceOf(customElements.get('pf-spinner')) - .and - .to.be.an.instanceOf(PfSpinner); + .to.be.an.instanceOf(customElements.get('pf-spinner')) + .and + .to.be.an.instanceOf(PfSpinner); }); it('should properly initialize the component', async function() { diff --git a/elements/pf-switch/BaseSwitch.ts b/elements/pf-switch/BaseSwitch.ts index 932fe5a550..39aa80faff 100644 --- a/elements/pf-switch/BaseSwitch.ts +++ b/elements/pf-switch/BaseSwitch.ts @@ -68,9 +68,9 @@ export abstract class BaseSwitch extends LitElement { if (explicitOriginalTarget) { let labels: HTMLLabelElement[]; if ( - originalTarget === event.target && - !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) && - labels.includes(this.closest('label') as HTMLLabelElement) + originalTarget === event.target + && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) + && labels.includes(this.closest('label') as HTMLLabelElement) ) { return; } diff --git a/elements/pf-switch/test/pf-switch.spec.ts b/elements/pf-switch/test/pf-switch.spec.ts index 992953f6f8..7331c07010 100644 --- a/elements/pf-switch/test/pf-switch.spec.ts +++ b/elements/pf-switch/test/pf-switch.spec.ts @@ -25,9 +25,9 @@ describe('', function() { it('should upgrade', async function() { const klass = customElements.get('pf-switch'); expect(element) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfSwitch); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfSwitch); }); it('has accessible role', function() { expect(snapshot.role).to.equal('switch'); diff --git a/elements/pf-table/pf-table.ts b/elements/pf-table/pf-table.ts index f0fb9eca6b..84be0cd5d1 100644 --- a/elements/pf-table/pf-table.ts +++ b/elements/pf-table/pf-table.ts @@ -25,10 +25,8 @@ const rowQuery = [ /** * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers. - * * @slot * The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements. - * * @cssprop {} --pf-c-table--BackgroundColor * Table background color * {@default `#fff`} @@ -695,8 +693,8 @@ export class PfTable extends LitElement { } #onRequestExpand(event: Event) { - if (event instanceof RequestExpandEvent && - !event.defaultPrevented) { + if (event instanceof RequestExpandEvent + && !event.defaultPrevented) { event.stopPropagation(); if (event.target instanceof PfTr) { event.target.expanded = !!event.target.expandable && !event.target.expanded; @@ -734,16 +732,16 @@ export class PfTable extends LitElement { if (children) { const columnIndexToSort = [...children].indexOf(header); Array - .from(this.rows, node => PfTable.getNodeContentForSort(columnIndexToSort, node)) - .sort((a, b) => PfTable.sortByContent(direction, a, b)) - .forEach(({ node }, index) => { - const target = this.rows[index]; - if (this.rows[index] !== node) { - const position: InsertPosition = + .from(this.rows, node => PfTable.getNodeContentForSort(columnIndexToSort, node)) + .sort((a, b) => PfTable.sortByContent(direction, a, b)) + .forEach(({ node }, index) => { + const target = this.rows[index]; + if (this.rows[index] !== node) { + const position: InsertPosition = direction === 'desc' ? 'afterend' : 'beforebegin'; - target.insertAdjacentElement(position, node); - } - }); + target.insertAdjacentElement(position, node); + } + }); } } diff --git a/elements/pf-table/pf-th.ts b/elements/pf-table/pf-th.ts index 92a1bf7890..c88dc1ef61 100644 --- a/elements/pf-table/pf-th.ts +++ b/elements/pf-table/pf-th.ts @@ -22,9 +22,9 @@ export class RequestSortEvent extends Event { } const paths = new Map(Object.entries({ - asc: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z', - desc: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z', - sort: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z', + asc: `M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z`, + desc: `M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z`, + sort: `M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z`, })); /** diff --git a/elements/pf-table/pf-tr.ts b/elements/pf-table/pf-tr.ts index 94a48df0f5..db1bbf708e 100644 --- a/elements/pf-table/pf-tr.ts +++ b/elements/pf-table/pf-tr.ts @@ -52,7 +52,7 @@ function BooleanEnumConverter(...allowedAttributes: string[]): ComplexAttributeC } else { return ''; } - } + }, }; } @@ -68,7 +68,7 @@ const StringOrBooleanConverter: ComplexAttributeConverter = { } else { return ''; } - } + }, }; /** @@ -86,7 +86,7 @@ export class PfTr extends LitElement { @property({ reflect: true, - converter: StringOrBooleanConverter + converter: StringOrBooleanConverter, }) expanded: boolean | string = false; override connectedCallback(): void { @@ -133,7 +133,7 @@ export class PfTr extends LitElement {
${!this.expanded ? '' : html` `}
- ` + `, ].filter(Boolean); } diff --git a/elements/pf-table/test/pf-table.spec.ts b/elements/pf-table/test/pf-table.spec.ts index be2dc15298..4452d99c35 100644 --- a/elements/pf-table/test/pf-table.spec.ts +++ b/elements/pf-table/test/pf-table.spec.ts @@ -11,8 +11,8 @@ describe('', function() { const el = await createFixture (element); const klass = customElements.get('pf-table'); expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfTable); + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfTable); }); }); diff --git a/elements/pf-tabs/BaseTab.ts b/elements/pf-tabs/BaseTab.ts index 091bd7121b..0c5976258c 100644 --- a/elements/pf-tabs/BaseTab.ts +++ b/elements/pf-tabs/BaseTab.ts @@ -24,10 +24,13 @@ export class TabExpandEvent extends ComposedEvent { export abstract class BaseTab extends LitElement { static readonly styles = [style]; - static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { + ...LitElement.shadowRootOptions, + delegatesFocus: true, + }; @queryAssignedElements({ slot: 'icon', flatten: true }) - private icons!: Array; + private icons!: HTMLElement[]; @query('button') private button!: HTMLButtonElement; diff --git a/elements/pf-tabs/BaseTabs.ts b/elements/pf-tabs/BaseTabs.ts index f9d4daa69b..daa48e5ca3 100644 --- a/elements/pf-tabs/BaseTabs.ts +++ b/elements/pf-tabs/BaseTabs.ts @@ -21,10 +21,8 @@ import styles from './BaseTabs.css'; /** * BaseTabs - * * @attr [label-scroll-left="Scroll left"] - accessible label for the tab panel's scroll left button. * @attr [label-scroll-right="Scroll right"] - accessible label for the tab panel's scroll right button. - * */ export abstract class BaseTabs extends LitElement { static readonly styles = [styles]; @@ -138,10 +136,10 @@ export abstract class BaseTabs extends LitElement { override willUpdate(): void { const { activeItem } = this.#tabindex; // If RTI has an activeItem, update the roving tabindex controller - if (!this.manual && - activeItem && - activeItem !== this.#activeTab && - activeItem.ariaDisabled !== 'true') { + if (!this.manual + && activeItem + && activeItem !== this.#activeTab + && activeItem.ariaDisabled !== 'true') { activeItem.active = true; } } @@ -181,12 +179,13 @@ export abstract class BaseTabs extends LitElement { if (event.target.name === 'tab') { this.#allTabs = this.tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab)); } else { - this.#allPanels = this.panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel)); + this.#allPanels = this.panels + .filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel)); } this.#tabindex.updateItems(); - if ((this.#allTabs.length === this.#allPanels.length) && - (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) { + if ((this.#allTabs.length === this.#allPanels.length) + && (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) { this.#updateAccessibility(); this.#firstLastClasses(); this.activeIndex = this.#allTabs.findIndex(tab => tab.active); @@ -206,9 +205,9 @@ export abstract class BaseTabs extends LitElement { } #onTabExpand = (event: Event): void => { - if (!(event instanceof TabExpandEvent) || - !this.#allTabs.length || - !this.#allPanels.length) { + if (!(event instanceof TabExpandEvent) + || !this.#allTabs.length + || !this.#allPanels.length) { return; } diff --git a/elements/pf-tabs/pf-tab.ts b/elements/pf-tabs/pf-tab.ts index a919feb1b1..3cc3ff9977 100644 --- a/elements/pf-tabs/pf-tab.ts +++ b/elements/pf-tabs/pf-tab.ts @@ -16,62 +16,46 @@ import styles from './pf-tab.css'; /** * Tab - * * @slot icon * Can contain an `` or `` * @slot * Tab title text - * * @csspart button - button element * @csspart icon - span container for the icon * @csspart text - span container for the title text - * * @cssprop {} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth {@default `1px`} * @cssprop {} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth {@default `1px`} - * * @cssprop {} --pf-c-tabs__link--BackgroundColor {@default `#f0f0f0`} * @cssprop {} --pf-c-tabs__link--disabled--BackgroundColor {@default `#d2d2d2`} - * * @cssprop {} --pf-c-tabs__link--before--BorderTopWidth {@default `1px`} * @cssprop {} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`} * @cssprop {} --pf-c-tabs__link--before--BorderLeftWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--before--BorderRightWidth {@default `1px`} - * * @cssprop {} --pf-c-tabs__link--disabled--before--BorderRightWidth {@default `1px`} - * * @cssprop {} --pf-c-tabs__link--after--Top {@default `auto`} * @cssprop {} --pf-c-tabs__link--after--Right {@default `0`} * @cssprop {} --pf-c-tabs__link--after--Bottom {@default `0`} * @cssprop {} --pf-c-tabs__link--before--Left {@default `0`} - * * @cssprop {} --pf-c-tabs__link--PaddingTop {@default `1rem`} * @cssprop {} --pf-c-tabs__link--PaddingBottom {@default `1rem`} - * * @cssprop {} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`} * @cssprop {} --pf-c-tabs__link--disabled--before--BorderLeftWidth {@default `1px`} - * * @cssprop {} --pf-c-tabs__link--before--BorderTopColor {@default `#d2d2d2`} * @cssprop {} --pf-c-tabs__link--before--BorderRightColor {@default `#d2d2d2`} * @cssprop {} --pf-c-tabs__link--before--BorderBottomColor {@default `#d2d2d2`} * @cssprop {} --pf-c-tabs__link--before--BorderLeftColor {@default `#d2d2d2`} - * * @cssprop {} --pf-c-tabs__link--FontSize {@default `1rem`} * @cssprop {} --pf-c-tabs__link--Color {@default `#6a6e73`} * @cssprop {} --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`} - * * @cssprop {} --pf-c-tabs__link--after--BorderColor {@default `#b8bbbe`} * @cssprop {} --pf-c-tabs__link--after--BorderTopWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--after--BorderRightWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--after--BorderBottomWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--after--BorderLeftWidth {@default `0`} - * * @cssprop {} --pf-c-tabs__item--m-current__link--Color {@default `#151515`} - * * @cssprop {} --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`} * @cssprop {} --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`} - * * @cssprop {} --pf-c-tabs__link--child--MarginRight {@default `1rem`} - * * @fires {TabExpandEvent} expand - when a tab expands */ @customElement('pf-tab') @@ -79,7 +63,7 @@ export class PfTab extends LitElement { static readonly styles = [styles]; @queryAssignedElements({ slot: 'icon', flatten: true }) - private icons!: Array; + private icons!: HTMLElement[]; @observed @property({ reflect: true, type: Boolean }) active = false; diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts index 6efdf992ff..0da24b0fbf 100644 --- a/elements/pf-tabs/pf-tabs.ts +++ b/elements/pf-tabs/pf-tabs.ts @@ -23,36 +23,27 @@ import styles from './pf-tabs.css'; /** * **Tabs** allow users to navigate between views within the same page or context. - * * @csspart container - outer container * @csspart tabs-container - tabs container * @csspart tabs - tablist * @csspart panels - panels - * * @slot tab - Must contain one or more `` * @slot - Must contain one or more `` - * * @cssprop {} --pf-c-tabs--Width {@default `auto`} * @cssprop {} --pf-c-tabs--inset {@default `0`} - * * @cssprop {} --pf-c-tabs--before--BorderColor {@default `#d2d2d2`} * @cssprop {} --pf-c-tabs--before--BorderTopWidth {@default `0`} * @cssprop {} --pf-c-tabs--before--BorderRightWidth {@default `0`} * @cssprop {} --pf-c-tabs--before--BorderBottomWidth {@default `1px`} * @cssprop {} --pf-c-tabs--before---BorderLeftWidth {@default `0`} - * * @cssprop {} --pf-c-tabs--m-vertical--MaxWidth {@default `15.625rem`} - * * @cssprop {} --pf-c-tabs--m-vertical__list--before--BorderColor {@default `#d2d2d2`} * @cssprop {} --pf-c-tabs--m-vertical__list--before--BorderTopWidth {@default `0`} * @cssprop {} --pf-c-tabs--m-vertical__list--before--BorderRightWidth {@default `0`} * @cssprop {} --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`} * @cssprop {} --pf-c-tabs--m-vertical__list--before--BorderLeftWidth {@default `1px`} - * * @cssprop {} --pf-c-tabs--m-vertical--m-box--inset {@default `2rem`} - * * @cssprop {} --pf-c-tabs__list--Display {@default `flex`} - * * @cssprop {} --pf-c-tabs__scroll-button--Width {@default `3rem`} * @cssprop {} --pf-c-tabs__scroll-button--Color {@default `#151515`} * @cssprop {} --pf-c-tabs__scroll-button--BackgroundColor {@default `#ffffff`} @@ -60,13 +51,11 @@ import styles from './pf-tabs.css'; * @cssprop {

Tile 4