@patternfly/[email protected]

Major Changes

• e8788c7: Initial Release 🎉

  @patternfly/pfe-core provides utilities for building PatternFly elements,
  like TypeScript decorators and Lit reactive controllers.
  Core utilities replace the PFElement base class.

  Before

  export class PfeJazzHands extends PFElement {
    static get tag() {
      return "pfe-jazz-hands";
    }
  
    static get properties() {
      return {
        cool: {
          type: Boolean,
          observer: "_upgradeObserver",
        },
      };
    }
  }
  PFElement.create(PfeJazzHands);

  After

  @customElement("pf-jazz-hands")
  export class PfJazzHands extends LitElement {
    @observed("_upgradeObserver")
    @property({ type: Boolean })
    cool = true;
    _upgradeObserver() {
      console.log("cool");
    }
  }

  Controllers

  • ✨ Added FloatingDOMController for use with components that require popover
    content. For example, in BaseTooltip we use the controller in this manner:

    import { FloatingDOMController } from "@patternfly/pfe-core/controllers/floating-dom-controller.js";
    
    export class BaseTooltip extends LitElement {
      #domController = new FloatingDOMController(this);
    }

  • ✨ Added InternalsController, providing preliminary facility for
    ElementInternals

  • ✨ Added ScrollSpyController which sets an attribute (active by default)
    on one of it's children when that child's href attribute is to a hash
    reference to an ID'd heading on the page.

  • ✨ Added RovingTabindexController which implements roving tabindex, as
    described in WAI-ARIA practices. Added RovingTabindexController.

  See README and the docs for more info.

Minor Changes

• 530ef71: ✨ Added OverflowController

  When added to a container and given a child array of elements,
  OverflowController checks to see if those elements exceed the bounds of the
  container.

• 2e1fb57: InternalsController: added labels and validity getters; added setFormValue, setValidity, checkValidity and reportValidity methods

Patch Changes

• 5d3315f: Prepared release candidate

@patternfly/[email protected]

Major Changes

• 67c3c35: ✨ Added @patternfly/eslint-plugin-elements

  Initial release contains a single rule:

  • no-lit-decorators-index-import enforces that decorator imports from lit are
    tree-shaken in source

@patternfly/[email protected]

Patch Changes

• 67c3c35: ✨ Added @patternfly/eslint-plugin-elements

  Initial release contains a single rule:

  • no-lit-decorators-index-import enforces that decorator imports from lit are
    tree-shaken in source

• 5d3315f: Prepared release candidate

• Updated dependencies [67c3c35]

  • @patternfly/[email protected]

@patternfly/[email protected]

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-.

    <!-- BEFORE: -->
    <pfe-button>Cancel</pfe-button>
    <!-- AFTER: -->
    <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

    <!-- BEFORE -->
    <pfe-card size="small"></pfe-card>
    <!-- AFTER -->
    <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.

    <!-- BEFORE -->
    <pfe-icon ...

@patternfly/[email protected]

Major Changes

• 034eed0: ✨ Added @patternfly/create-element package. Use it with the command

  npm init @patternfly/element

Patch Changes

• 5d3315f: Prepared release candidate

@patternfly/[email protected]

Patch Changes

• 0a22a33: dev-server: refresh element css when files change
• f03a419: 11ty plugin: calculate path to demo files in more circumstances
• 42d5cd9: a11ySnapshot: fixed typescript types

@patternfly/[email protected]

Minor Changes

• 530ef71: ✨ Added OverflowController

  When added to a container and given a child array of elements,
  OverflowController checks to see if those elements exceed the bounds of the
  container.

• 2e1fb57: InternalsController: added labels and validity getters; added setFormValue, setValidity, checkValidity and reportValidity methods

@patternfly/[email protected]

Major Changes

• 67c3c35: ✨ Added @patternfly/eslint-plugin-elements

  Initial release contains a single rule:

  • no-lit-decorators-index-import enforces that decorator imports from lit are
    tree-shaken in source

@patternfly/[email protected]

Patch Changes

• 67c3c35: ✨ Added @patternfly/eslint-plugin-elements

  Initial release contains a single rule:

  • no-lit-decorators-index-import enforces that decorator imports from lit are
    tree-shaken in source

• Updated dependencies [67c3c35]

  • @patternfly/[email protected]

@patternfly/[email protected]

Patch Changes

• 67c3c35: improved performance when loading individual elements
• 530ef71: <pf-tabs>: integrated overflow controller.
• Updated dependencies [530ef71]
• Updated dependencies [2e1fb57]
  • @patternfly/[email protected]