@patternfly/[email protected]

Patch Changes

• 77ce9f7: <pf-clipboard-copy>: prevent component's internal layout from wrapping lines
• 708824d: <pf-jump-links>: improved accessibility for keyboard users
• 5905246: <pf-clipboard-copy>: fixed icon size and input-group CSS styles
• Updated dependencies [e45f5eb]
  • @patternfly/[email protected]

@patternfly/[email protected]

Patch Changes

• abf2a7c: Added lint rule: no-missing-package-exports

[email protected]

Patch Changes

• 5d3315f: Prepared release candidate

@patternfly/[email protected]

Major Changes

• d01c7e0: Removed and deprecated esbuild and cem/a features

  Breaking Changes

  • ❌ Removed esbuild helpers
  • 💱 Moved custom-elements-manifest config helper to custom-elements-manifest/config.js
  • 💱 Moved dev-server config helper to dev-server/config.js
  • 💱 Moved test-runner config helper to test-runner/config.js
  • ⚠️ Deprecated custom-elements-manifest helpers

Minor Changes

• c76a65b: ✨ Added minify option to @patternfly/pfe-tools/typescript/transformers/css-imports.cjs

• 99db432: ✨ Added anchors 11ty plugin, based on @orchidjs/eleventy-plugin-ids

• d4a99f6: ✨ Added @patternfly/pfe-tools package

  • ✨ Added dev server and test runner configs

  • ✨ Added custom-elements-manifest analyzer configs and plugins

  • ✨ Added typescript transform to inline css imports

  • ✨ Added 11ty plugins to render custom element manifests, etc.

  • ✨ Added test helpers like a11ySnapshot

  • ✨ Added Logger stub for quieter tests

  • ✨ Added colored(colorString) assertion to chai when using createFixture

    expect("rgba(0,0,0,0)").to.be.colored("transparent");

  • ✨ Added an optional unified config file for custom elements manifest, dev
    server, and docs pages

    Create a .pfe.config.json file at the root of your project to customize the
    pfe tools builds.

    The default values are:

    {
      "tagPrefix": "pfe",
      "demoURLPrefix": "https://patternflyelements.org/",
      "sourceControlURLPrefix": "https://github.com/patternfly/patternfly-elements/tree/main/",
      "aliases": {},
      "site": {
        "title": "PatternFly Elements",
        "description": "PatternFly Elements: A set of community-created web components based on PatternFly design.",
        "favicon": "/brand/logo/svg/pfe-icon-blue.svg",
        "logoUrl": "/brand/logo/svg/pfe-icon-white-shaded.svg",
        "stylesheets": []
      }
    }

    See @patternfly/pfe-tools/config.d.ts for more information.

Patch Changes

• 0a22a33: dev-server: refresh element css when files change
• 3ab1de1: Allowed TypeScript modules to import multiple CSS modules when inlining CSS.
• f03a419: 11ty plugin: calculate path to demo files in more circumstances
• 42d5cd9: a11ySnapshot: fixed typescript types
• 5d3315f: Prepared release candidate
• b3b472e: update 11ty
• 3035d91: analyzer: find demos in different repo setups
• 66b025d: dev-server: fixed demo script import and styles

@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