@patternfly/[email protected]

Major Changes

• 1d89f73: RovingTabindexController: deprecate the initItems method and add getItems and getItemContainer instead

  BEFORE:

  #tabindex = new RovingTabindexController(this);
  constructor() {
    super();
    this.#tabindex.initItems(this.#items);
  }

  AFTER:

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

• 3766961: @cascades: deprecated @cascades decorator and CascadeController. Use context instead.

  BEFORE: The element in charge of the context cascades data down to
  specifically named children.

  import { LitElement } from "lit";
  import { property } from "lit/decorators/property.js";
  import { cascades } from "@patternfly/pfe-core/decorators/cascades.js";
  
  class MyMood extends LitElement {
    @cascades("my-eyes", "my-mouth")
    @property()
    mood: "happy" | "sad" | "mad" | "glad";
  }

  AFTER: children subscribe to updates from the context provider.

  import { LitElement } from "lit";
  import { property } from "lit/decorators/property.js";
  import { provide } from "@lit/context";
  import { createContextWithRoot } from "@patternfly/pfe-core/functions/context.js";
  
  export type Mood = "happy" | "sad" | "mad" | "glad";
  
  export const moodContext = createContextWithRoot<Mood>(Symbol("mood"));
  
  class MyMood extends LitElement {
    @provide({ context: moodContext })
    @property()
    mood: Mood;
  }

  import { LitElement } from "lit";
  import { property } from "lit/decorators/property.js";
  import { consume } from "@lit/context";
  import { moodContext, type Mood } from "./my-mood.js";
  
  class MyEyes extends LitElement {
    @consume({ context: moodContext, subscribe: true })
    @state()
    private mood: Mood;
  }

• 0d92145: InternalsController: made the constructor private. Use InternalsController.of

  BEFORE:

  class PfJazzHands extends LitElement {
    #internals = new InternalsController(this);
  }

  AFTER:

  class PfJazzHands extends LitElement {
    #internals = InternalsController.of(this);
  }

• de4cfa4: Remove deprecatedCustomEvent

Minor Changes

• ac0c376: SlotController: Add isEmpty method to check if a slot is empty. If no slot name is provided it will check the default slot. (#2603)
  SlotController: hasSlotted method now returns default slot if no slot name is provided. (#2603)

• d4e5411: Context: added createContextWithRoot. Use this when creating contexts that
  are shared with child elements.

• c71bbe5: InternalsController: added computedLabelText read-only property

• c71bbe5: InternalsController: reflect all methods and properties from ElementInternals

• fa50164: Logger: loosen the type of allowed controller hosts

• fa50164: OverflowController: recalculate overflow when the window size changes and when tabs are dynamically created.

• 0d92145: RovingTabindexController: keyboard navigation includes first-character navigation.

• fa50164: TabsAriaController: Added TabsAriaController, used to manage the accesibility tree for tabs and panels.

  #tabs = new TabsAriaController(this, {
    isTab: (x: Node): x is PfTab => x instanceof PfTab,
    isPanel: (x: Node): x is PfTabPanel => x instanceof PfTabPanel,
  });

  Please review the Tabs 2.4 to 3.0 migration guide for more
  information.

Patch Changes

• 24d43bd: Logger: add Logger.info and Logger.debug
• e62244f: InternalsController: added missing ariaDescription defined by ARIAMixin
• 24d43bd: SlotController: move debug logs to Logger.debug
• 50f462c: Update dependencies, including Lit version 3

@patternfly/[email protected]

Patch Changes

• e6ca914: Update dependencies
• de4cfa4: Update ecmaVersion to 2022

@patternfly/[email protected]

Major Changes

• 16d0dd7: <pf-modal>: remove deprecated width attribute. use variant instead

• b9bb7e3: <pf-button>: improves accessibility of elements that use <pf-button> by giving the custom element itself the button role

• de4cfa4: Remove /elements/pf-icon/icons/**/*. Use @patternfly/icons instead.

• de4cfa4: <pf-accordion>: use patternfly design tokens. removes --accordion__bordered--Color

• 50f462c: Update dependencies, including Lit version 3

• 67eb59c: <pf-switch>: Reimplemented label API improving accessibility.

  <!-- BEFORE: -->
  <pf-switch id="checked" checked show-check-icon></pf-switch>
  <label for="checked" data-state="on">Message when on</label>
  <label for="checked" data-state="off">Message when off</label>
  <!-- AFTER: -->
  <pf-switch id="checked" checked show-check-icon></pf-switch>
  <label for="checked">
    <span data-state="on">Message when on</span>
    <span data-state="off" hidden>Message when off</span>
  </label>

Minor Changes

• fa50164: <pf-tabs>: improved overflow handling, added dynamic tab creation support

• 22d7536: ✨ Added <pf-back-to-top>

  <pf-back-to-top href="#top" scrollable-selector="main"
    >Back to Top</pf-back-to-top
  >

• 292d3e9: ✨ Added <pf-background-image>

  <pf-background-image
    src="/path/to/image.jpg"
    src-2x="/path/to/[email protected]"
    src-sm="/path/to/image-768.jpg"
    src-sm-2x="/path/to/[email protected]"
    src-lg="/path/to/image-992.jpg"
  ></pf-background-image>

• 0d92145: ✨ Added <pf-chip>

  A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

  <pf-chip-group>
    <pf-chip>Chip 1</pf-chip>
    <pf-chip>Chip 2</pf-chip>
    <pf-chip>Chip 3</pf-chip>
    <pf-chip>Chip 4</pf-chip>
  </pf-chip-group>

• 0d92145: ✨ Added <pf-dropdown>

  A dropdown presents a menu of actions or links in a constrained space that
  will trigger a process or navigate to a new location.

  <pf-dropdown>
    <pf-dropdown-item>item4</pf-dropdown-item>
    <hr />
    <pf-dropdown-group label="Group 1">
      <pf-dropdown-item>item1</pf-dropdown-item>
      <pf-dropdown-item>item2</pf-dropdown-item>
      <hr />
      <pf-dropdown-item>item3</pf-dropdown-item>
    </pf-dropdown-group>
    <pf-dropdown-group label="Group 2">
      <pf-dropdown-item>item1</pf-dropdown-item>
      <pf-dropdown-item>item2</pf-dropdown-item>
    </pf-dropdown-group>
  </pf-dropdown>

• 0d92145: ✨ Added <pf-select>

  A select list enables users to select one or more items from a list.

  <label for="color">Pick a color</label>
  <pf-select id="color" placeholder="Blue">
    <pf-option>Blue</pf-option>
    <pf-option>Green</pf-option>
    <pf-option>Magenta</pf-option>
    <pf-option>Orange</pf-option>
    <pf-option>Purple</pf-option>
    <pf-option>Pink</pf-option>
    <pf-option>Red</pf-option>
    <pf-option>Yellow</pf-option>
  </pf-select>

• c71bbe5: ✨ Added <pf-text-area>

  <form>
    <pf-text-area
      id="textarea"
      name="comments"
      placeholder="OpenShift enabled our team to..."
      resize="vertical"
      auto-resize
      required
    ></pf-text-area>
  </form>

• 2c019ac: <pf-text-input>: adds helper-text, error-text, and validate-on attributes. Forwards pattern attribute

  <pf-text-input
    id="validated"
    error-text="Enter a three digit integer"
    helper-text="How much wood could a woodchuck chuck?"
    validate-on="blur"
    pattern="\d{3}"
    required
  ></pf-text-input>
  <pf-button id="validate">Validate</pf-button>

• 45a1a27: <pf-text-input>: added placeholder attribute

Patch Changes

• 1bdc31a: <pf-accordion>: remove animations which are not present in PatternFly specs

• 8e52f62: <pf-dropdown>: ensure that dropdown menu contents are accessible to keyboard
  and screen-reader users even when the dropdown or its toggle is disabled.

• 02d7e71: <pf-text-area>: auto-resize attribute now works as expected

• 3d7ce5a: <pf-text-input>: pressing Enter will request to submit the form

• bdb2b39: <pf-tabs>: improved screen-reader accessibility

• 8e52f62: <pf-button>: show slotted icon when it is present

• 0d92145: <pf-popover>: deprecate closeButtonLabel property / close-label attribute in favor of accessibleCloseLabel property / accessible-close-label attribute

  Before:

  <pf-popover close-label="סגירה">...</pf-popover>

  After:

  <pf-popover accessible-close-label="סגירה">...</pf-popover>

• a958d52: <pf-chip-group>: ensures that overflow and close buttons are keyboard accessible via arrow keys

• 5371c5b: <pf-popover>: prevent appearance of an unwanted scrollbar in some cases where
  popover is positioned at the far edge of the viewport

• Updated dependencies [ac0c376]

• Updated dependencies [d4e5411]

• Updated dependencies [1d89f73]

• Updated dependencies [3766961]

• Updated dependencies [c71bbe5]

• Updated dependencies [c71bbe5]

• Updated dependencies [0d92145]

• Updated dependencies [24d43bd]

• Updated dependencies [fa50164]

• Updated dependencies [de4cfa4]

• Updated dependencies [fa50164]

• Updated dependencies [e62244f]

• Updated dependencies [0d92145]

• Updated dependencies [24d43bd]

• Updated dependencies [fa50164]

• Updated dependencies [50f462c]

  • @patternfly/[email protected]

@patternfly/[email protected]

Minor Changes

• 57b7dba: Test: add clickElementAtOffset utility function for tests
• dcdbce6: Test: add clickElementAtCenter utility function for tests

@patternfly/[email protected]

Minor Changes

• cf5abb5: ✨ Added <pf-banner>

  <pf-banner variant="info" icon="info" sticky>
    Important information.
  </pf-banner>

• 23bf9b2: ✨ Added <pf-table>

  <pf-table>
    <pf-thead>
      <pf-tr>
        <pf-th>Repositories</pf-th>
        <pf-th>Branches</pf-th>
        <pf-th>Pull requests</pf-th>
        <pf-th>Workspaces</pf-th>
        <pf-th>Last commit</pf-th>
      </pf-tr>
    </pf-thead>
    <pf-tr>
      <pf-th>one</pf-th>
      <pf-td>two</pf-td>
      <pf-td>three</pf-td>
      <pf-td>four</pf-td>
      <pf-td>five</pf-td>
    </pf-tr>
    <pf-tr>
      <pf-th>one - 2</pf-th>
      <pf-td></pf-td>
      <pf-td></pf-td>
      <pf-td>four - 2</pf-td>
      <pf-td>five - 2</pf-td>
    </pf-tr>
    <pf-tr>
      <pf-th>one - 3</pf-th>
      <pf-td>two - 3</pf-td>
      <pf-td>three - 3</pf-td>
      <pf-td>four - 3</pf-td>
      <pf-td>five - 3</pf-td>
    </pf-tr>
  </pf-table>

  This is an initial release, that implements a subset of the features of upstream
  PatternFly's table component. APIs can be expected to change.

• c072818: ✨ Added <pf-text-input>

  <label>
    Text Input
    <pf-text-input></pf-text-input>
  </label>

• dcdbce6: <pf-tooltip>: added no-flip and flip-behaviour attributes as in <pf-popover>

• dcdbce6: <pf-tooltip> added the trigger attribute to specify a tooltip-invoking
  element outside of the tooltip's children.

  <pf-button id="button">Button</pf-button>
  <pf-tooltip trigger="button" content="I'm a button!"></pf-tooltip>

• dcdbce6: ✨ Added <pf-progress>

  <pf-progress description="Default" value="33"></pf-progress>

• b9f86f8: <pf-tabs>: add isExpandEvent static method, to help prevent name conflicts

  import { PfTabs } from "@patternfly/elements/pf-tabs/pf-tabs.js";
  document.addEventListener("expand", function (event) {
    if (PfTabs.isExpandEvent(event)) {
      // a pf-tabs' tab has expanded
    }
  });

Patch Changes

• 69021bb: Restores support for Safari 16.3 (by compiling element sources to ECMAScript 2020)
• dd2d5b7: <pf-accordion>: fixed focus event triggering incorrect tabindex
• da84c10: <pf-accordion>: fixed issue with panels collapsing when a child checkbox was toggled.
• 343d597: <pf-card>: improved slotted content layout
• dcdbce6: <pf-tooltip>: marks BaseTooltip and it's stylesheet as deprecated.
  The files will remain in place until the next major version.
• 1723146: <pf-tabs>: corrected the name of the expand event in the custom elements manifest

@patternfly/[email protected]

Patch Changes

• 91850fb: fixed TypeScript typings for react wrappers

@patternfly/[email protected]

Patch Changes

• 1924229: Generate TypeScript typings for React wrapper components

@patternfly/[email protected]

Minor Changes

• f4a7ae7: React: adds @patternfly/pfe-tools/react/generate-wrappers.js

  Use this to generate React component wrappers for Lit custom elements,
  based on their custom-elements.json manifest.

  import { generateReactWrappers } from "@patternfly/pfe-tools/react/generate-wrappers.js";
  
  const inURL = new URL("../elements/custom-elements.json", import.meta.url);
  const outURL = new URL("../elements/react/", import.meta.url);
  
  await generateReactWrappers(inURL, outURL);

Patch Changes

• 699a812: 11ty: prevent duplicate IDs on code pages when multiple elements are documented

@patternfly/[email protected]

Patch Changes

• 5b16b3b: SlotController: ensure first render is correct when used in certain javascript frameworks

@patternfly/[email protected]

Minor Changes

• a81bcb1: Controllers: Added timestamp controller

Patch Changes

• 7055add: FloatingDOMController: fixed an incorrect typescript import