@patternfly/[email protected]

Minor Changes

• cf5abb5: ✨ Added <pf-banner>

  <pf-banner variant="info" icon="info" sticky>
    Important information.
  </pf-banner>

• 23bf9b2: ✨ Added <pf-table>

  <pf-table>
    <pf-thead>
      <pf-tr>
        <pf-th>Repositories</pf-th>
        <pf-th>Branches</pf-th>
        <pf-th>Pull requests</pf-th>
        <pf-th>Workspaces</pf-th>
        <pf-th>Last commit</pf-th>
      </pf-tr>
    </pf-thead>
    <pf-tr>
      <pf-th>one</pf-th>
      <pf-td>two</pf-td>
      <pf-td>three</pf-td>
      <pf-td>four</pf-td>
      <pf-td>five</pf-td>
    </pf-tr>
    <pf-tr>
      <pf-th>one - 2</pf-th>
      <pf-td></pf-td>
      <pf-td></pf-td>
      <pf-td>four - 2</pf-td>
      <pf-td>five - 2</pf-td>
    </pf-tr>
    <pf-tr>
      <pf-th>one - 3</pf-th>
      <pf-td>two - 3</pf-td>
      <pf-td>three - 3</pf-td>
      <pf-td>four - 3</pf-td>
      <pf-td>five - 3</pf-td>
    </pf-tr>
  </pf-table>

  This is an initial release, that implements a subset of the features of upstream
  PatternFly's table component. APIs can be expected to change.

• c072818: ✨ Added <pf-text-input>

  <label>
    Text Input
    <pf-text-input></pf-text-input>
  </label>

• dcdbce6: <pf-tooltip>: added no-flip and flip-behaviour attributes as in <pf-popover>

• dcdbce6: <pf-tooltip> added the trigger attribute to specify a tooltip-invoking
  element outside of the tooltip's children.

  <pf-button id="button">Button</pf-button>
  <pf-tooltip trigger="button" content="I'm a button!"></pf-tooltip>

• dcdbce6: ✨ Added <pf-progress>

  <pf-progress description="Default" value="33"></pf-progress>

• b9f86f8: <pf-tabs>: add isExpandEvent static method, to help prevent name conflicts

  import { PfTabs } from "@patternfly/elements/pf-tabs/pf-tabs.js";
  document.addEventListener("expand", function (event) {
    if (PfTabs.isExpandEvent(event)) {
      // a pf-tabs' tab has expanded
    }
  });

Patch Changes

• 69021bb: Restores support for Safari 16.3 (by compiling element sources to ECMAScript 2020)
• dd2d5b7: <pf-accordion>: fixed focus event triggering incorrect tabindex
• da84c10: <pf-accordion>: fixed issue with panels collapsing when a child checkbox was toggled.
• 343d597: <pf-card>: improved slotted content layout
• dcdbce6: <pf-tooltip>: marks BaseTooltip and it's stylesheet as deprecated.
  The files will remain in place until the next major version.
• 1723146: <pf-tabs>: corrected the name of the expand event in the custom elements manifest

@patternfly/[email protected]

Patch Changes

• 91850fb: fixed TypeScript typings for react wrappers

@patternfly/[email protected]

Patch Changes

• 1924229: Generate TypeScript typings for React wrapper components

@patternfly/[email protected]

Minor Changes

• f4a7ae7: React: adds @patternfly/pfe-tools/react/generate-wrappers.js

  Use this to generate React component wrappers for Lit custom elements,
  based on their custom-elements.json manifest.

  import { generateReactWrappers } from "@patternfly/pfe-tools/react/generate-wrappers.js";
  
  const inURL = new URL("../elements/custom-elements.json", import.meta.url);
  const outURL = new URL("../elements/react/", import.meta.url);
  
  await generateReactWrappers(inURL, outURL);

Patch Changes

• 699a812: 11ty: prevent duplicate IDs on code pages when multiple elements are documented

@patternfly/[email protected]

Patch Changes

• 5b16b3b: SlotController: ensure first render is correct when used in certain javascript frameworks

@patternfly/[email protected]

Minor Changes

• a81bcb1: Controllers: Added timestamp controller

Patch Changes

• 7055add: FloatingDOMController: fixed an incorrect typescript import

@patternfly/[email protected]

Patch Changes

• 91850fb: fixed TypeScript typings for react wrappers

@patternfly/[email protected]

Patch Changes

• 1924229: Generate TypeScript typings for React wrapper components

@patternfly/[email protected]

Minor Changes

• c4170a5: PatternFly elements are now available wrapped in React components. While it was
  always possible to use PatternFly elements (or any other custom elements) in
  React apps, this release makes it easier to integrate them into React without
  the need for cumbersome workarounds to React's poor HTML and DOM support.

  Before:

  import { useEffect, useState, useRef } from "react";
  import "@patternfly/elements/pf-switch/pf-switch.js";
  
  function App() {
    const [checked, setChecked] = useState(false);
    const switchRef = useRef(null);
    useEffect(() => {
      switchRef.current.checked = checked;
    }, [switchRef.current, checked]);
    useEffect(() => {
      switchRef.current.addEventListener("change", () =>
        setChecked(switchRef.current.checked)
      );
    }, [switchRef.current]);
    return (
      <>
        <pf-switch ref={switchRef}></pf-switch>
      </>
    );
  }

  After:

  import { useState } from "react";
  import { Switch } from "@patternfly/elements/react/pf-switch/pf-switch.js";
  
  function App() {
    const [checked, setChecked] = useState(false);
    return (
      <>
        <Switch
          checked={checked}
          onChange={({ target }) => setChecked(target.checked)}
        />
      </>
    );
  }

Patch Changes

• f4a7ae7: <pf-accordion>: update the expandedIndex DOM property on change
• Updated dependencies [7055add]
• Updated dependencies [a81bcb1]
  • @patternfly/[email protected]

@patternfly/[email protected]

Patch Changes

• 5f2e653: <pf-tabs>: prevent error when using tabs-panel with certain frameworks or imperative javascript code