Skip to content

@patternfly/elements@3.0.0
Compare
Choose a tag to compare
@github-actions github-actions released this 31 Mar 08:33
· 21 commits to main since this release
@patternfly/elements@3.0.0
7a7eafc

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
Assets 2