Release @patternfly/elements@2.0.0 · patternfly/patternfly-elements

Major Changes

2a3048c: PatternFly Elements 2.0 is a major rewrite of the project.
It brings PFE in-line with PatternFly React in terms of design specs
and modernizes the codebase with Lit and TypeScript. It adds a
versatile set of tools for managing and building elements, and focuses more on
cutting-edge web technologies like form-associated custom elements and
CSS shadow parts.

Breaking Changes
- 🔥 Migrated elements to Lit: initial render made asynchronous.
  If your code assumes that shadow DOM is ready once the element is constructed,
  ensure you first await element.updateComplete
- ♻️ Reimplemented elements in line with PFv4 design specs
- 🍱 Combined all elements into a single package: @patternfly/elements
- 🥨 Renamed all element prefixes from pfe- to pf-.
```

<pfe-button>Cancel</pfe-button>

<pf-button>Ok</pf-button>
```
- ❌ Removed @patternfly/pfe-styles package
- ❌ Removed @patternfly/pfe-sass package
- ❌ Removed <pfe-autocomplete>, pending rewrite to <pf-search-input> (#2115).
- ❌ Removed <pfe-collapse>
- ❌ Removed <pfe-dropdown>, pending rewrite to <pf-dropdown> (#2049).
- ❌ Removed <pfe-health-index>
- ❌ Removed <pfe-icon-panel>
- ❌ Removed <pfe-markdown>
- ❌ Removed <pfe-number>
- ❌ Removed <pfe-page-status>
- ❌ Removed <pfe-primary-detail>
- ❌ Removed <pfe-select>, pending rewrite to <pf-select> (#2145).
- ❌ Removed <pfe-toast>

2e35045: ✨ Added <pf-accordion> and removed <pfe-accordion>. Accordion now closely
follows PatternFly design specs.

<pf-accordion>
  <pf-accordion-header expanded>
    <h3>Getting Started</h3>
  </pf-accordion-header>
  <pf-accordion-panel>
    <p>
      Read our <a href="/get-started/">Getting started</a> page to learn how
      to install and use PatternFly Elements.
    </p>
  </pf-accordion-panel>
  <pf-accordion-header>
    <h3>HTML APIs</h3>
  </pf-accordion-header>
  <pf-accordion-panel>
    <p>
      For more information on how to use each PatternFly element, read the
      <a href="/components/">component docs</a>.
    </p>
  </pf-accordion-panel>
</pf-accordion>

Breaking Changes

❌ Removed pfe-accordion:change, pfe-accordion:expand, and pfe-accordion:collapse event. Use change, expand and collapse instead
❌ Removed color, disclosure, context attributes
❌ Removed history attribute and router
❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.

There are more changes than these, including breaking changes. See the docs for more info.

7fc7486: ✨ Added <pf-avatar> and removed <pfe-avatar>. Avatar now closely follows
PatternFly design specs.
- ✨ Added border and alt attributes
```
<pf-avatar alt="shadowman" border="dark"></pf-avatar>
<pf-avatar
  alt="Michael Clayton"
  src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"
></pf-avatar>
```
Breaking Changes
- ❌ Removed name, pattern, and shape attributes
- ❌ Removed pfe-avatar:connected event. Use await pfeAvatar.updateComplete instead
- ❌ Removed pfe-avatar:options-shown, pfe-avatar:option-cleared, pfe-avatar:search-event, and pfe-avatar:option-selected events.
- ❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See ones. See ones. See ones. See ones. See ones. See ones. See ones. See PFv4 docs.
There are more changes than these, including breaking changes. See the
docs for more info.
4019290: ✨ Added <pf-badge> and removed <pfe-badge>. Badge now closely follows
PatternFly design specs.
```
<pf-badge number="7">7</pf-badge>
<pf-badge threshold="10" number="7" state="unread">7</pf-badge>
```
Breaking Changes
- 💱 Changed the value of state attribute to read or unread
- ❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.
There are more changes than these, including breaking changes. See the docs for more info.
fc37c57: ✨ Added <pf-button> and removed <pfe-button>. Button now closely follows
the PatternFly design specs.
```
<pf-button disabled>Cancel</pf-button>
<pf-button>Submit</pf-button>
<pf-button type="reset">Reset</pf-button>
```
<pf-button> is a form-associated custom element, and may require the
element-internals polyfill
- ✨ Added icon CSS part
- ✨ Added warning, link, and control variants
- ✨ Added icon and loading attributes
- ✨ Added plain, block, warning and loading attributes
Breaking Changes:
- ❌ Removed danger variant in favour of a new danger attribute.
- ❌ Removed pfe-button:click event - use click instead
- ❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.
There are more changes than these, including breaking changes. See the docs for more info.
04954ab: ✨ Added <pf-card> and removed <pfe-card>. Card now closely follows the
PatternFly design specs.
```
<pf-card>
  <h2 slot="header">Card header</h2>
  <p>This is the pf-card body.</p>
  <a href="#" slot="footer">Footer link</a>
</pf-card>
```
- ✨ Added header, body, and footer CSS parts
- ✨ Added rounded, full-height, and plain attributes
Breaking Changes
- ❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See
  PFv4 docs.
- ❌ Removed pfe-card--header and pfe-card--footer slots. Use header and
  footer instead
- ❌ Removed imgSrc and border attributes.
- 💱 Changed size attribute values
```

<pfe-card size="small"></pfe-card>

<pf-card size="compact"></pf-card>
<pf-card size="large"></pf-card>
```
There are more changes than these, including breaking changes. See the docs for more info.
f7ae83f: ✨ Added <pf-clipboard-copy> and removed <pfe-clipboard>. Clipboard copy now
closely follows the PatternFly design spec.
```
<pf-clipboard-copy>Content to copy</pf-clipboard-copy>
```
Breaking Changes
- ❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See
  PFv4 docs.
- role="button" and tabindex=0 attributes must no longer be applied to
  <pf-clipboard-copy>, make sure all instances on your page are updated
```
- <pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
+ <pf-clipboard-copy>Copy this</pf-clipboard-copy>
```
There are more changes than these, including breaking changes. See the docs for more info.

e64908c: ✨ Added <pf-code-block> and removed <pfe-codeblock>. Code block now closely
follows the PatternFly design spec.

<pf-code-block>
  <script type="application/openshift">
    apiVersion: helm.openshift.io/v1beta1/
    kind: HelmChartRepository
    metadata:
    name: azure-sample-repo0oooo00ooo
    spec:
    connectionConfig:
    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
  </script>
</pf-code-block>

Breaking Changes

❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See
PFv4 docs.

There are more changes than these, including breaking changes. See the docs for more info.

4cd6097: ✨ Added <pf-icon> and removed <pf-icon>. Icon now closely follows the
PatternFly design spec.

Icon now ships with the entire free Font Awesome collection as well as the
patternfly icon set.
```
<pf-icon icon="award" aria-label="Awards"></pf-icon>
```
Breaking Changes
- 💱 icon names are no longer prefixed by their set. use the set attribute
  instead.
```

<pfe-icon icon="patternfly-ansible"></pfe-icon>

<pf-icon set="patternfly" icon="ansible"></pf-icon>
```
There are more changes than this, including breaking changes. Read the
docs for more info.

915d163: ✨ Added <pf-jump-links> and removed <pfe-jump-links>. Jump Links now
closely follows the PatternFly design spec.

<pf-jump-links
  vertical
  expandable
  expanded
  label="Jump to section"
  scrollable-element="post-container"
>
  <pf-jump-links-item id="1" href="#heading-1">Heading 1</pf-jump-links-item>
  <pf-jump-links-item id="2" href="#heading-2">Heading 2</pf-jump-links-item>
  <pf-jump-links-item id="3" href="#heading-3">Heading 3</pf-jump-links-item>
  <pf-jump-links-item id="4" href="#heading-4">Heading 4</pf-jump-links-item>
  <pf-jump-links-item id="5" href="#heading-5">Heading 5</pf-jump-links-item>
</pf-jump-links>

Breaking Changes:

❌ Removed pfe-jump-links-panel:active-navItem and pfe-jump-links-nav:stuck events
❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.

There are more changes than these, including breaking changes. See the docs for more info.

3721d37: ✨ Added <pf-modal> and removed <pfe-modal>. Modal now closely follows the
PatternFly design spec.
```
<pf-modal>
  <h2 slot="header">Modal with a header</h2>
  <p>Modals can contain arbitrary content</p>
  <a slot="footer" href="#bar">Learn more</a>
</pf-modal>
```
- ✨ Added overlay, dialog, content, description, header, footer,
  and close-button CSS parts
- ✨ Added position="top" attribute
- ✨ Added description slot
HTMLDialogElement Interface

<pf-modal> now implements the HTMLDialogElement interface. As such, a number
of element APIs have changed:
- 💱 Renamed the private isOpen property to open and make it public, and
  make it reflect to the open attribute
- 💱 Renamed the open() method to show()
- ✨ Added showModal() as an alias of show()
- ✨ Added a cancel event, distinguishing between close and cancel events
- ✨ Added a returnValue property, which can be set by passing a string to
  close(returnValue)
Breaking Changes
- ❌ Removed pfe-modal:open event. Use open
- ❌ Removed pfe-modal:close event. Use close
- ❌ Removed width attribute in favour of variant
- Passing an event to open() and toggle() no longer assigns the trigger element. use setTrigger(triggerElement) instead, or set the trigger attribute to the id of a trigger element in the same root as the modal.
- ❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.
- ❌ Removed the trigger slot. Use the trigger attribute instead, or the setTrigger, toggle, or showModal methods.
```
- <pfe-modal>
+ <pf-modal trigger="trigger-modal">
-   <pfe-button slot="trigger"><button>Open Modal</button></pfe-button>
    <p>Modals can have content</p>
- </pfe-modal>
+ </pf-modal>
+ <p>Arbitrary content can intervene between modals and their triggers.</p>
+ <pf-button id="trigger-modal">Open Modal</pfe-button>
```
There are more changes than this, including breaking changes. See docs
for more info

d4a99f6: ✨ Added <pf-panel> and removed <pfe-band>.

<pf-panel>
  <h3 slot="header">Header content</h3>
  <p>Main content</p>
  <p slot="footer">Footer content</p>
</pf-panel>

This change is breaking. See the docs for more info.

2e35045: ✨ Added <pf-progress-stepper> and removed <pfe-progress-steps>. Progress
stepper now closely follows PatternFly design spec.

<pf-progress-stepper>
  <pf-progress-step variant="success">Completed</pf-progress-step>
  <pf-progress-step variant="warning">Issue</pf-progress-step>
  <pf-progress-step variant="danger">Failure</pf-progress-step>
  <pf-progress-step current variant="info">Running</pf-progress-step>
  <pf-progress-step>Last</pf-progress-step>
</pf-progress-stepper>

Breaking Changes:

❌ Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.

There are more changes than these, including breaking changes. See the docs for more info.

d4a99f6: ✨ Added <pf-spinner> and removed <pfe-progress-indicator>. Spinner now
closely follows PatternFly design spec.

<!-- BEFORE -->
<pfe-progress-indicator indeterminate>Loading...</pfe-progress-indicator>
<!-- AFTER -->
<pfe-spinner>Loading...</pfe-spinner>

See docs for more info

11ca3a0: ✨ Added <pf-switch>, a control that toggles the state of a setting between on
and off.
```
<form>
  <pf-switch id="color-scheme-toggle"></pf-switch>
  <label for="color-scheme-toggle" data-state="on">Dark Mode</label>
  <label for="color-scheme-toggle" data-state="off" hidden>Light Mode</label>
</form>
```
Switches provide a more explicit, visible representation on a setting than checkboxes.

<pf-switch> is a form-associated custom element, and may require the
element-internals polyfill

Read the docs for more info.
2a3048c: ✨ Added <pf-tabs> and removed <pfe-tabs>. Tabs now closely follows
PatternFly design spec.
```
<pf-tabs>
  <pf-tab id="users" slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">Containers</pf-tab>
  <pf-tab-panel>Containers <a href="#">Focusable element</a></pf-tab-panel>
  <pf-tab slot="tab">Database</pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
</pf-tabs>
```
- ✨ Added container, tabs-container, tabs and panels CSS parts
- ✨ Added button, icon and text CSS parts to <pf-tab>
- ✨ Added container CSS part to <pf-tab-panel>
Breaking Changes:
- Removed --pfe-* CSS custom properties in favour of --pf-* ones. See PFv4 docs.
There are more changes than these, including breaking changes. See the docs for more info.

d4a99f6: ✨ Added <pf-tile>.

<pf-tile selected stacked="lg">
  <h3 slot="title">Selected</h3>
  <pf-icon slot="icon" icon="plus"></pf-icon>
  <p>
    Selected tiles use colour, borders, & position to indicate their state
  </p>
</pf-tile>

Minor Changes

3c5d906: ✨ Added <pf-label>.
```
<p>Some Text <pf-label color="red">Your label text here</pf-label></p>
```
<pf-label> is an inline-block element component that provides a distinct
visual style for metadata in a UI. Commonly used as visual representations for
tags, labels can include an optional icon and are available in a solid and
outline style variant.

See the docs for more info.

cd55e46: ✨ Added <pf-tooltip>

<pf-tooltip content="Use the content attribute or slot">Tooltip</pf-tooltip>

Patch Changes

1af2749: <pf-tabs>: improved accessibility
- added manual boolean attribute which enables manual tab activation option.
67c3c35: improved performance when loading individual elements
484fa68: Fixed . module export
20d0bf9: Added element entrypoints to package.json
5d3315f: Prepared release candidate
8a1ba2b: <pf-icon>: add icons to package exports
530ef71: <pf-tabs>: integrated overflow controller.
Updated dependencies [530ef71]
Updated dependencies [e8788c7]
Updated dependencies [2e1fb57]
Updated dependencies [5d3315f]
- @patternfly/[email protected]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

@patternfly/[email protected]

Choose a tag to compare

Sorry, something went wrong.

Sorry, something went wrong.

Uh oh!

No results found

Major Changes

Breaking Changes

Breaking Changes

Breaking Changes

Breaking Changes

Breaking Changes:

Breaking Changes

Breaking Changes

Breaking Changes

Breaking Changes

Breaking Changes:

HTMLDialogElement Interface

Breaking Changes

Breaking Changes:

Breaking Changes:

Breaking Changes:

Minor Changes

Patch Changes

Uh oh!