@patternfly/pfe-tools@2.0.1

Patch Changes

• d50a651: Dev Server: update icon and theme colours
• 65079fb: Update typescript types

@patternfly/eslint-plugin-elements@2.0.0

Major Changes

• 65079fb: Provide ESLint flat config. Upgrade to ESLint 9.0 to use.

@patternfly/eslint-config-elements@3.0.0

Major Changes

• 65079fb: Provide ESLint flat config. Upgrade to ESLint 9.0 to use.

Patch Changes

• Updated dependencies [65079fb]
  • @patternfly/eslint-plugin-elements@2.0.0

@patternfly/elements@3.0.1

Patch Changes

• afac682: <pf-select>: fixed computed button label when the placeholder attribute is present
• 6aa674a: <pf-spinner>: improved screen-reader accessibility

netlify-plugin-github-actions@2.0.0

Major Changes

• e6ca914: Package is now "type": "module" aka ESM

@patternfly/pfe-tools@2.0.0

Major Changes

• de4cfa4: Remove DocsPage render functions

• de4cfa4: Dev server config no longer uses nodeResolution. Instead you must provide configuration for the import map plugin.

  import {
    pfeDevServerConfig,
    getPatternflyIconNodemodulesImports,
  } from "@patternfly/pfe-tools/dev-server/config.js";
  
  export default pfeDevServerConfig({
    importMapOptions: {
      providers: {
        "zero-md": "nodemodules",
        "@patternfly/icons": "nodemodules",
        "@patternfly/elements": "nodemodules",
        "@patternfly/pfe-tools": "nodemodules",
        "@patternfly/pfe-core": "nodemodules",
      },
      inputMap: {
        imports: {
          ...(await getPatternflyIconNodemodulesImports(import.meta.url)),
        },
      },
    },
  });

• de4cfa4: Remove react and vue test wrapper helpers. Use React wrapper components instead.

Minor Changes

• 502e931: React wrapper generator: add parameters to support different packages

Patch Changes

• e6ca914: Update dependencies
• fd1202d: typescript/css-imports: prevent shared css modules from being inlined to files; emit them instead.
• 22d7536: Update typescript version
• 50f462c: Update dependencies, including Lit version 3

@patternfly/pfe-core@3.0.0

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/eslint-config-elements@2.0.2

Patch Changes

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

@patternfly/elements@3.0.0

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/image@2x.jpg"
    src-sm="/path/to/image-768.jpg"
    src-sm-2x="/path/to/image-768@2x.jpg"
    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/pfe-core@3.0.0

@patternfly/pfe-tools@1.5.0

Minor Changes

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