Releases: patternfly/patternfly-elements
@patternfly/elements@2.4.0
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>
: addedno-flip
andflip-behaviour
attributes as in<pf-popover>
-
dcdbce6:
<pf-tooltip>
added thetrigger
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>
: addisExpandEvent
static method, to help prevent name conflictsimport { 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>
: marksBaseTooltip
and it's stylesheet as deprecated.
The files will remain in place until the next major version. - 1723146:
<pf-tabs>
: corrected the name of theexpand
event in the custom elements manifest
@patternfly/pfe-tools@1.4.2
Patch Changes
- 91850fb: fixed TypeScript typings for react wrappers
@patternfly/pfe-tools@1.4.1
Patch Changes
- 1924229: Generate TypeScript typings for React wrapper components
@patternfly/pfe-tools@1.4.0
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 theircustom-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/pfe-core@2.4.1
Patch Changes
- 5b16b3b:
SlotController
: ensure first render is correct when used in certain javascript frameworks
@patternfly/pfe-core@2.4.0
@patternfly/elements@2.3.2
Patch Changes
- 91850fb: fixed TypeScript typings for react wrappers
@patternfly/elements@2.3.1
Patch Changes
- 1924229: Generate TypeScript typings for React wrapper components
@patternfly/elements@2.3.0
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
@patternfly/elements@2.2.2
Patch Changes
- 5f2e653:
<pf-tabs>
: prevent error when using tabs-panel with certain frameworks or imperative javascript code