Releases · patternfly/patternfly-elements

19 Aug 14:16

9364e16

Major Changes

1ca3515: Custom Elements Manifest: Removed support for non-standard inline {@default value} JSDoc tags. Use standard syntax instead

Before:
```
/**
 * @cssprop --foo {@default bar} Foo
 */
```
After:
```
/**
 * @cssprop [--foo=bar] Foo
 */
```

c9bd577: Custom Elements Manifest: added custom-elements-manifest.js, which exports the function getAllManifests

import { getAllManifests } from "@patternfly/pfe-tools/custom-elements-manifest/custom-elements-manifest/.js";

for (const manifest of getAllManifests()) {
  const packageName = manifest.packageJson?.name ?? "package";
  console.log(
    `Available Elements in ${packageName}`,
    ...manifest.getTagNames()
  );
}

Minor Changes

c9bd577: a11ySnapshot: Added chai assertions for various accessibility-tree scenarios

Examples:

describe("<pf-accordion>", function () {
  beforeEach(() =>
    fixture(html`
      <pf-accordion>
        <pf-accordion-header id="header1">header-1</pf-accordion-header>
        <pf-accordion-panel>panel-1</pf-accordion-panel>
      </pf-accordion>
    `)
  );
  describe("clicking the first heading", function () {
    beforeEach(clickFirstHeading);
    it("expands the first panel", async function () {
      expect(await a11ySnapshot()).to.axContainName("panel-1");
    });
    it("focuses the first panel", async function () {
      expect(await a11ySnapshot()).to.have.axTreeFocusOn(
        document.getElementById("header1")
      );
    });
    it("shows the collapse all button", async function () {
      expect(await a11ySnapshot()).to.axContainRole("button");
    });
  });
});

c9bd577: Added querySnapshot accessibility testing helper

describe("then clicking the toggle", function () {
  beforeEach(async function () {
    await clickElementAtCenter(toggle);
  });
  it("expands the disclosure panel", async function () {
    const snapshot = await a11ySnapshot();
    const expanded = querySnapshot(snapshot, { expanded: true });
    expect(expanded).to.be.ok;
  });
});

c9bd577: TypeScript: Add static version transformer. This adds a runtime-only
static version field to custom element classes.

import "@patternfly/elements/pf-button/pf-button.js";
const PFE_VERSION = await customElements
  .whenDefined("pf-button")
  .then((PfButton) => PfButton.version);

Patch Changes

c9bd577: updated dependencies
9d68f3d: Dev Server: load lightdom shim files
9d68f3d: Dev Server: reload on typescript file changes
f3f68c9: Windows compatibility for various tools packages
c9bd577: Dev Server: use last modified time for the dev server cache
c9bd577: Test Runner Config: import the production version of Lit for tests, reducing
console chatter during test runs

Assets 2

19 Aug 14:15

github-actions

@patternfly/[email protected]

9364e16

@patternfly/[email protected]

Major Changes

c9bd577: RovingTabindexController, ListboxController: constructor options were changed.
In particular, the initItems(items: Item[]) and setActiveItem(item: Item) methods
were removed and replaced with the getItems: () => Item[] constructor option, and
the atFocusedItemIndex accessor.

Before:

#tabindex = new RovingTabindexController(this);

firstUpdated() {
  this.#tabindex.initItems(this.items);
}

updated(changed: PropertyValues<this>) {
  if (changed.has('activeItem')) {
    this.#tabindex.setActiveItem(this.activeItem);
  }
}

After:

#tabindex = RovingTabindexController.of(this, {
  getItems: () => this.items,
});

updated(changed: PropertyValues<this>) {
  if (changed.has('activeItem')) {
    this.#tabindex.atFocusedItemIndex = this.items.indexOf(this.activeItem);
  }
}

For further migration guidance, please see the sources in @patternfly/pfe-core,
especially:

ATFocusController.ts,
RovingTabindexController.ts, and
ListboxController.ts.

c9bd577: Removed global pfeLog feature
c9bd577: Removed window.PfeConfig global config object
c9bd577: Removed global auto-reveal feature
c9bd577: Decorators: Added @observes. Use it to add property change callback by
decorating them with the name of the property to observe
```
@customElement("custom-button")
class CustomButton extends LitElement {
  #internals = this.attachInternals();

  @property({ type: Boolean }) disabled = false;

  @observes("disabled")
  protected disabledChanged() {
    this.#internals.ariaDisabled = this.disabled
      ? "true"
      : this.ariaDisabled ?? "false";
  }
}
```
Breaking change: This commit makes some changes to the internal APIs of the
pre-existing @observed observer, most notably it changes the constructor
signature of the PropertyObserverController and associated functions. Most
users should not have to make any changes, but if you directly import and use
those functions, check the commit log to see how to update your call sites.
c9bd577: Removed global trackPerformance feature

Minor Changes

c9bd577: ✨ Added ActiveDescendantController

This controller implements the WAI-ARIA activedescendant pattern
for keyboard and screen-reader accessibility.

#activedescendant = ActivedescendantController.of(this, {
  getItems: () => this.options,
  getItemsContainer: () => this.#listbox,
  getOrientation: () => "vertical",
  getActiveDescendantContainer: () => this.#input,
  getControlsElements: () => [this.#input, this.#button].filter((x) => !!x),
  setItemActive: (item, active) => void (item.active = active),
});

c9bd577: ✨ Added ComboboxController

This controller implements the WAI-ARIA combobox pattern for both
select-only and inline autocomplete comboboxes.

#combobox = ComboboxController.of(this, {
  multi: this.multi,
  getItems: () => this.options,
  getFallbackLabel: () => this.accessibleLabel,
  getListboxElement: () => this._listbox ?? null,
  getToggleButton: () => this._toggleButton ?? null,
  getComboboxInput: () => this._toggleInput ?? null,
  isExpanded: () => this.expanded,
  requestShowListbox: () => void (this.expanded ||= true),
  requestHideListbox: () => void (this.expanded &&= false),
  setItemHidden: (item, hidden) => void (item.hidden = hidden),
  isItem: (item) => item instanceof PfOption,
  setItemActive: (item, active) => (item.active = active),
  setItemSelected: (item, selected) => (item.selected = selected),
});

6d9045e: InternalsController: added static isSafari boolean flag

c9bd577: Decorators: Added @listen. Use it to attach element event listeners to
class methods.

@customElement("custom-input")
class CustomInput extends LitElement {
  @property({ type: Boolean }) dirty = false;
  @listen("keyup", { once: true })
  protected onKeyup() {
    this.dirty = true;
  }
}

Patch Changes

c9bd577: updated dependencies
c9bd577: InternalsController: corrected the types for aria IDL list attributes
c9bd577: Context: makeContextRoot no longer crashes SSR processes

Assets 2

19 Aug 14:16

github-actions

@patternfly/[email protected]

9364e16

@patternfly/[email protected]

Major Changes

c9bd577: Require @typescript-eslint ^8.0.0

Patch Changes

c9bd577: updated dependencies

Assets 2

19 Aug 14:15

github-actions

@patternfly/[email protected]

9364e16

@patternfly/[email protected]

Major Changes

c9bd577: <pf-icon>: removed the getIconUrl static method, and replaced it with the
resolve static method

The steps for overriding icon loading behaviour have changed. Before, you had to
return a string from the getIconUrl method, or the second argument to
addIconSet. Now, both of those functions must return a Node, or any lit-html
renderable value, or a Promise thereof.

Before:

PfIcon.addIconSet('local', (set, icon) =>
  new URL(`/assets/icons/${set}-${icon}.js`));

// or
PfIcon.getIconUrl = (set, icon) =>
  new URL(`/assets/icons/${set}-${icon}.js`))

After:

PfIcon.addIconSet('local', (set, icon) =>
  import(`/assets/icons/${set}-${icon}.js`))
    .then(mod => mod.default);

// or
PfIcon.resolve = (set, icon) =>
  import(`/assets/icons/${set}-${icon}.js`))
    .then(mod => mod.default);

c9bd577: <pf-icon>: removed the defaultIconSet static field.

c9bd577: <pf-accordion>: Removed BaseAccordion* classes, as well as static isPanel, isHeader, and isAccordion methods. Removed the optional parentAccordion parameter to PfAccordion#expand(index). Renamed accordion event classes by adding the Pf prefix:

Before:

import { AccordionHeaderChangeEvent } from "@patternfly/elements/pf-accordion/pf-accordion.js";

addEventListener("change", function (event) {
  if (event instanceof AccordionHeaderChangeEvent) {
    // ...
  }
});

After:

import { PfAccordionHeaderChangeEvent } from "@patternfly/elements/pf-accordion/pf-accordion.js";

addEventListener("change", function (event) {
  if (event instanceof PfAccordionHeaderChangeEvent) {
    // ...
  }
});

c9bd577: <pf-icon>: removed svg files, use @patternfly/icons instead

c9bd577: <pf-label>: when clicking close button, close event is fired.
Now, if that event is not cancelled, the label will remove itself from the document.

To restore previous behaviour:

import { LabelCloseEvent } from "@patternfly/elements/pf-label/pf-label.js";
label.addEventListener("close", function (event) {
  if (event instanceof LabelCloseEvent) {
    event.preventDefault();
    return false;
  }
});

c9bd577: <pf-clipboard-copy>: Removed BaseClipboardCopy class.
Reimplement (recommended) or extend PfClipboardCopy.
Renames AvatarLoadEvent to PfAvatarLoadEvent and moves it to pf-avatar.js.

Before:

import { ClipboardCopyCopiedEvent } from "@patternfly/elements/pf-clipboard-copy/BaseClipboardCopy.js";

addEventListener("copy", function (event) {
  if (event instanceof ClipboardCopyCopiedEvent) {
    // ...
  }
});

After:

import { PfClipboardCopyCopiedEvent } from "@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js";

addEventListener("copy", function (event) {
  if (event instanceof PfClipboardCopyCopiedEvent) {
    // ...
  }
});

c9bd577: <pf-icon>: Removed BaseIcon class. Reimplement (recommended) or extend PfIcon.
c9bd577: <pf-label>: Removed BaseLabel class. Reimplement (recommended) or extend PfLabel.
c9bd577: <pf-switch>: Removed BaseSwitch class. Reimplement (recommended) or extend PfSwitch.

c9bd577: <pf-avatar>: Removed BaseAvatar class. Reimplement (recommended) or extend PfAvatar.
Renames AvatarLoadEvent to PfAvatarLoadEvent and moves it to pf-avatar.js.

Before:

import { AvatarLoadEvent } from "@patternfly/elements/pf-avatar/BaseAvatar.js";

addEventListener("load", function (event) {
  if (event instanceof AvatarLoadEvent) {
    // ...
  }
});

After:

import { PfAvatarLoadEvent } from "@patternfly/elements/pf-avatar/pf-avatar.js";

addEventListener("load", function (event) {
  if (event instanceof PfAvatarLoadEvent) {
    // ...
  }
});

c9bd577: <pf-badge>: Removed BaseBadge class. Reimplement (recommended) or extend PfBadge.
c9bd577: <pf-button>: Removed BaseButton class. Reimplement (recommended) or extend PfButton.
c9bd577: <pf-code-block>: Removed BaseCodeBlock class. Reimplement (recommended) or extend PfCodeBlock.
c9bd577: <pf-spinner>: Removed BaseSpinner class. Reimplement (recommended) or extend PfSpinner.
c9bd577: <pf-tabs>: Remove BaseTabs. Use TabsAriaController, etc. to reimplement
your elements which extend it, or extend from PfTabs instead.
c9bd577: <pf-tile>: Removed BaseTile class. Reimplement (recommended) or extend PfTile.
c9bd577: <pf-tooltip>: Removed BaseTooltip class. Reimplement (recommended) or extend PfTooltip.
c9bd577: <pf-card>: Removes BaseCard base class. If your project extends BaseCard, we recommend extending LitElement instead and re-implementing card's properties. Alternately, extend from PfCard.

Minor Changes

c9bd577: <pf-card>: added title slot, for when the title is not inline with any slotted header actions

c9bd577: ✨ Added <pf-select variant="typeahead">

A typeahead select is an inline-autocomplete combobox.

<label for="state">State</label>
<pf-select id="state" variant="typeahead" placeholder="Select a state">
  <pf-option value="Alabama" description="The heart of Dixie"></pf-option>
  <pf-option
    value="Florida"
    description="The sunshine state"
    disabled
  ></pf-option>
  <pf-option value="New Jersey"></pf-option>
  <pf-option value="New York"></pf-option>
  <pf-option value="New Mexico"></pf-option>
  <pf-option value="North Carolina"></pf-option>
</pf-select>

587d957: <pf-button>: Added href attribute to <pf-button variant="link">

Patch Changes

c9bd577: updated dependencies
3e9d785: <pf-select>: prevent bug when select is in a deeply nested in shadow root
4995067: <pf-back-to-top>: fix hover color
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [6d9045e]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
Updated dependencies [c9bd577]
- @patternfly/[email protected]