feat(icon)!: port to <pf-v6-icon>

.changeset/soft-icons-listen.md

@@ -0,0 +1,39 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-icon>`: replaces `<pf-v5-icon>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-icon icon="check-circle" size="xl" status="success"></pf-v6-icon>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-icon>` to `<pf-v6-icon>`
+- CSS custom properties renamed from `--pf-v5-icon--size` to `--pf-v6-c-icon--*`,
+  matching the React component's custom properties. To size the icon, set
+  `size` or `--pf-v6-c-icon__content--FontSize`; to color it, set `status`,
+  `--pf-v6-c-icon__content--Color`, or set that property to `initial` and use
+  the CSS `color` property
+- The default size changed: v5 added `size="sm"` (10px) to every instance;
+  v6 sizes to the body-default text size (0.875rem) with no attribute. Add
+  `size="sm"` to keep the v5 size
+
+**New features**
+
+- v6 sizes: `2xl`, `3xl`, body sizes (`body-sm`, `body-default`, `body-lg`), and
+  heading sizes (`heading-sm` through `heading-3xl`)
+- `icon-size` attribute to size the icon independently of its container
+- `status` attribute for `danger`, `warning`, `success`, `info`, and `custom`
+  status colors
+- `inline` attribute to inherit the surrounding text's size and color
+- `in-progress` attribute and `progress` slot, which swaps the icon for a
+  spinner (or a slotted element) without shifting surrounding content
+- `mirror-rtl` attribute to mirror the icon in right-to-left languages
+- `accessible-label` attribute, which exposes the icon as a labelled image;
+  without it the icon is decorative and hidden from screen readers
+
+**Note**
+
+`<pf-v5-icon>` remains available while the remaining v5 elements port to v6.

docs/_snippets/pf-bar-html.md

@@ -3,7 +3,7 @@
     PatternFly.org
   </a>
   <a href="https://github.com/patternfly/patternfly-elements" class="cta">
-    <pf-v5-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-v5-icon>
+    <pf-v6-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-v6-icon>
     Contribute on Github
   </a>
 </div>

docs/docs/develop/troubleshooting.md

@@ -19,7 +19,7 @@ tags:
 If you experience issues when using or developing with PatternFly Elements, please open an issue on [GitHub](https://github.com/patternfly/patternfly-elements/issues/new/choose).
 
 <a class="cta secondary" href="https://github.com/patternfly/patternfly-elements/issues/new/choose">
-  <pf-v5-icon icon="github" set="fab" size="md"></pf-v5-icon>
+  <pf-v6-icon icon="github" set="fab" size="md"></pf-v6-icon>
   Open an issue
 </a>
 

docs/main.mjs

@@ -1,5 +1,5 @@
 import '@rhds/elements/rh-footer/rh-footer-universal.js';
-import { PfV5Icon } from '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
+import { PfV6Icon } from '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
 import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
 import '@patternfly/elements/pf-v5-alert/pf-v5-alert.js';
 import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
@@ -38,8 +38,7 @@ import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
 
 // if `/v2/` path load icons from static directory
 if (document.location.href.includes('/v2/')) {
-  PfV5Icon.getIconUrl = (set, icon) => {
-    const url = new URL(`/v2/components/icon/icons/${set}/${icon}.js`, import.meta.url);
-    return url;
-  };
+  PfV6Icon.resolve = (set, icon) =>
+    import(new URL(`/v2/components/icon/icons/${set}/${icon}.js`, import.meta.url).href)
+        .then(mod => mod.default.cloneNode(true));
 }

elements/pf-v6-banner/README.md

@@ -42,6 +42,6 @@ A full-width banner for communicating short, non-dismissible messages.
 | v5 API | v6 API | Notes |
 |---|---|---|
 | `variant` attribute (`default`, `info`, `warning`, `danger`, `success`) | `status` attribute (`success`, `warning`, `danger`, `info`, `custom`) | `variant` removed. Use `status` for semantic meaning or `color` for decorative colors. `default` variant maps to no attribute (gray). |
-| `icon` attribute (shorthand) | Slot an icon in the default slot | `icon` attribute removed. Use `<pf-v5-icon>` (or `<pf-v6-icon>` when available) as slotted content. |
+| `icon` attribute (shorthand) | Slot an icon in the default slot | `icon` attribute removed. Use `<pf-v6-icon>` as slotted content. |
 | `icon` slot (named) | Default slot | Icons are now part of the default slot content, not a separate named slot. |
 

elements/pf-v6-banner/demo/status.html

@@ -3,38 +3,38 @@
 description: When a banner conveys status, use the status attribute. Include an icon and visually-hidden text for accessibility.
 ---
 <pf-v6-banner status="success">
-  <pf-v5-icon icon="check-circle"></pf-v5-icon>
+  <pf-v6-icon icon="check-circle"></pf-v6-icon>
   <span class="pf-v6-screen-reader">Success alert:</span>
   Success banner
 </pf-v6-banner>
 
 <pf-v6-banner status="warning">
-  <pf-v5-icon icon="exclamation-triangle"></pf-v5-icon>
+  <pf-v6-icon icon="exclamation-triangle"></pf-v6-icon>
   <span class="pf-v6-screen-reader">Warning alert:</span>
   Warning banner
 </pf-v6-banner>
 
 <pf-v6-banner status="danger">
-  <pf-v5-icon icon="exclamation-circle"></pf-v5-icon>
+  <pf-v6-icon icon="exclamation-circle"></pf-v6-icon>
   <span class="pf-v6-screen-reader">Danger alert:</span>
   Danger banner
 </pf-v6-banner>
 
 <pf-v6-banner status="info">
-  <pf-v5-icon icon="info-circle"></pf-v5-icon>
+  <pf-v6-icon icon="info-circle"></pf-v6-icon>
   <span class="pf-v6-screen-reader">Info alert:</span>
   Info banner
 </pf-v6-banner>
 
 <pf-v6-banner status="custom">
-  <pf-v5-icon icon="bell"></pf-v5-icon>
+  <pf-v6-icon icon="bell"></pf-v6-icon>
   <span class="pf-v6-screen-reader">Custom alert:</span>
   Custom banner
 </pf-v6-banner>
 
 <script type="module">
   import '@patternfly/elements/pf-v6-banner/pf-v6-banner.js';
-  import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
+  import '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
 </script>
 
 <style>

elements/pf-v6-icon/README.md

@@ -0,0 +1,74 @@
+# Icon
+
+`<pf-v6-icon>` - a container that allows for icons of varying dimensions to
+seamlessly replace each other without shifting surrounding content. Supports
+sizes, status colors, inline usage, and an in-progress state.
+
+## Usage
+
+```html
+<pf-v6-icon icon="plus-circle"></pf-v6-icon>
+```
+
+Sized and colored:
+
+```html
+<pf-v6-icon icon="check-circle" size="xl" status="success"></pf-v6-icon>
+```
+
+Inline with text:
+
+```html
+<pf-v6-icon icon="info-circle" inline></pf-v6-icon>
+```
+
+Loading state swaps the icon for a spinner:
+
+```html
+<pf-v6-icon icon="check-circle" in-progress></pf-v6-icon>
+```
+
+Icons resolve by name from an icon set (`fas` by default) via
+`@patternfly/icons`. Register your own sets with `PfV6Icon.addIconSet()` (see
+the custom icon sets demo), and give fallback content in the default slot for
+use when the icon fails to load.
+
+To color the icon with the CSS `color` property instead of a status, set
+`--pf-v6-c-icon__content--Color: initial` and set `color` on the element or an
+ancestor.
+
+## Divergences from React `Icon`
+
+### Not implemented
+
+| React prop                | Notes                                                                       |
+| ------------------------- | --------------------------------------------------------------------------- |
+| `progressIconSize`        | Size the default spinner with `--pf-v6-c-spinner--diameter`, or slot a custom progress icon sized directly |
+| `defaultProgressArialabel`| The default spinner announces "Loading...". For a custom label, slot `<pf-v6-spinner slot="progress" accessible-label="...">` |
+
+### Changed API
+
+| React prop             | Web component                         | Difference                                                                    |
+| ---------------------- | ------------------------------------- | ------------------------------------------------------------------------------ |
+| `children` (icon node) | `icon` + `set` attributes             | Icons resolve by name from icon sets instead of accepting a React node. Override `PfV6Icon.resolve` or call `PfV6Icon.addIconSet()` for custom icons |
+| `size`                 | `size`                                | Same sizes, but heading and body values are dash-case: `heading-sm`, `heading-2xl`, `body-default`, etc. instead of `headingSm`, `heading_2xl`, `bodyDefault` |
+| `iconSize`             | `icon-size`                           | Dash-case attribute; same sizes as `size`                                      |
+| `progressIcon`         | `progress` slot                       | Slot an element instead of passing a React node                                |
+| `isInline`             | `inline`                              | Boolean attribute, no `is-` prefix                                             |
+| `isInProgress`         | `in-progress`                         | Boolean attribute, no `is-` prefix                                             |
+| `shouldMirrorRTL`      | `mirror-rtl`                          | Boolean attribute, no `is-` prefix                                             |
+| `className`            | CSS custom properties                 | Standard web component styling mechanisms                                      |
+
+### Added
+
+| Web component API                        | Notes                                                                |
+| ---------------------------------------- | -------------------------------------------------------------------- |
+| `set` attribute                          | Icon set to resolve from (`fas`, `far`, `fab`, `patternfly`)         |
+| `loading` attribute                      | `lazy` (default), `idle`, or `eager` icon fetching                   |
+| `PfV6Icon.addIconSet()` / `.resolve`     | Register custom icon sets or replace the resolver function           |
+| `load` event                             | Fired when an icon is loaded and rendered                            |
+| `error` event (`IconResolveError`)       | Fired when an icon fails to load                                     |
+| default slot                             | Fallback content while the icon is unavailable or fails to load      |
+| `accessible-label` attribute             | Exposes the icon as a labelled image; without it the icon is decorative and hidden from assistive technology |
+| `--pf-v6-c-icon__content--Color: initial`| Opt out of the default icon color to inherit the CSS `color`         |
+| `fallback` CSS part                      | Styling hook for the fallback content container                      |

elements/pf-v6-icon/demo/body-sizes.html

@@ -0,0 +1,22 @@
+---
+name: Body sizes
+description: These size options are meant to make icons match the size of body text.
+---
+<section>
+  <pf-v6-icon icon="plus-circle" size="body-sm"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="body-default"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="body-lg"></pf-v6-icon>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+</script>
+
+<style>
+  section {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1em;
+  }
+</style>

elements/pf-v6-icon/demo/custom-icon-sets.html

@@ -0,0 +1,35 @@
+---
+name: Custom icon sets
+description: Register your own icon sets with a resolver function, so that any icon name in the set resolves to a module whose default export is a lit-renderable node.
+---
+<section>
+  <h3>Custom Icon Sets</h3>
+  <p>Call <code>PfV6Icon.addIconSet</code> with a string (icon set name) and a function taking the
+     icon set name and the icon name, and returning a URL (object) to a javascript module whose
+     default export is a lit renderable.</p>
+
+  <pf-v6-icon set="rh" icon="boba-tea" size="xl" loading="lazy"></pf-v6-icon>
+  <pf-v6-icon set="rh" icon="lifecycle" size="xl" loading="lazy"></pf-v6-icon>
+
+  <pre><code>&lt;pf-v6-icon set="rh" icon="boba-tea" size="lg" loading="lazy"&gt;&lt;/pf-v6-icon&gt;
+&lt;pf-v6-icon set="rh" icon="lifecycle" size="lg" loading="lazy"&gt;&lt;/pf-v6-icon&gt;</code></pre>
+  <pre><code>import { PfV6Icon } from '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+PfV6Icon.addIconSet('rh', async (set, icon) =&gt;
+  import(`./icons/${set}/${icon}.js`)
+    .then(mod =&gt; mod.default));</code></pre>
+</section>
+
+<script type="module">
+  import { PfV6Icon } from '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+  // The demo icons live in this element's demo directory; resolve them by
+  // absolute path so that the set works from any route the demo is served at.
+  PfV6Icon.addIconSet('rh', async (set, icon) =>
+    import(`/elements/pf-v6-icon/demo/icons/${set}/${icon}.js`)
+      .then(mod => mod.default));
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>

elements/pf-v6-icon/demo/custom-in-progress-icon.html

@@ -0,0 +1,36 @@
+---
+name: Custom in progress icon
+description: Slot an element into the progress slot to replace the default spinner while in progress is set.
+---
+<section>
+  <label>
+    <input id="toggle" type="checkbox"> Toggle in progress state
+  </label>
+  <pf-v6-icon id="icon" icon="check-circle">
+    <pf-v6-spinner slot="progress" accessible-label="Loading results"></pf-v6-spinner>
+  </pf-v6-icon>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+
+  document.getElementById('toggle')
+    .addEventListener('change', function() {
+      document.getElementById('icon').toggleAttribute('in-progress', this.checked);
+    });
+</script>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1em;
+  }
+
+  pf-v6-spinner {
+    --pf-v6-c-spinner--diameter: 2em;
+  }
+</style>

elements/pf-v6-icon/demo/heading-sizes.html

@@ -0,0 +1,25 @@
+---
+name: Heading sizes
+description: These size options are meant to make icons match the size of heading text.
+---
+<section>
+  <pf-v6-icon icon="plus-circle" size="heading-sm"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="heading-md"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="heading-lg"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="heading-xl"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="heading-2xl"></pf-v6-icon>
+  <pf-v6-icon icon="plus-circle" size="heading-3xl"></pf-v6-icon>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+</script>
+
+<style>
+  section {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1em;
+  }
+</style>

elements/pf-v6-icon/demo/in-progress.html

@@ -0,0 +1,29 @@
+---
+name: In progress
+description: Setting the in-progress attribute swaps the icon for a progress indicator. By default the progress indicator is a spinner, sized to the icon.
+---
+<section>
+  <label>
+    <input id="toggle" type="checkbox"> Toggle in progress state
+  </label>
+  <pf-v6-icon id="icon" icon="check-circle"></pf-v6-icon>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+
+  document.getElementById('toggle')
+    .addEventListener('change', function() {
+      document.getElementById('icon').toggleAttribute('in-progress', this.checked);
+    });
+</script>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1em;
+  }
+</style>

elements/pf-v6-icon/demo/index.html

@@ -0,0 +1,20 @@
+---
+name: Basic
+description: A basic icon displays an icon from the default icon set.
+---
+<section>
+  <pf-v6-icon icon="long-arrow-alt-down"></pf-v6-icon>
+  <pf-v6-icon icon="angle-right"></pf-v6-icon>
+  <pf-v6-icon icon="angle-down"></pf-v6-icon>
+  <pf-v6-icon icon="cog"></pf-v6-icon>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-icon/pf-v6-icon.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>