feat(spinner)!: port to pf-v6-spinner

.changeset/sixty-crabs-mate.md

@@ -0,0 +1,24 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-v6-spinner>`: replaces `<pf-v5-spinner>` with PatternFly v6 design specs.
+
+```html
+<pf-v6-spinner accessible-label="Loading data">Loading...</pf-v6-spinner>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-spinner>` to `<pf-v6-spinner>`
+- CSS custom properties renamed from `--pf-v5-c-spinner--*` to `--pf-v6-c-spinner--*`
+- Removed `diameter` attribute (use `--pf-v6-c-spinner--diameter` CSS custom property instead)
+
+**New features**
+
+- `inline` attribute to inherit font size for inline display
+- `accessible-label` attribute for screen reader text
+- `value-text` attribute for progress state description
+- `xs` size preset
+- ARIA `progressbar` role with `aria-label` and `aria-valuetext` via ElementInternals
+- `prefers-reduced-motion` support

docs/main.mjs

@@ -2,10 +2,7 @@ import '@rhds/elements/rh-footer/rh-footer-universal.js';
 import { PfV5Icon } from '@patternfly/elements/pf-v5-icon/pf-v5-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-v6-avatar/pf-v6-avatar.js';
 import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
-import '@patternfly/elements/pf-v6-background-image/pf-v6-background-image.js';
-import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
 import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
 import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
 import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
@@ -16,24 +13,27 @@ import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
 import '@patternfly/elements/pf-v5-helper-text/pf-v5-helper-text.js';
 import '@patternfly/elements/pf-v5-hint/pf-v5-hint.js';
 import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
-import '@patternfly/elements/pf-v5-label/pf-v5-label.js';
 import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js';
+import '@patternfly/elements/pf-v5-label/pf-v5-label.js';
 import '@patternfly/elements/pf-v5-modal/pf-v5-modal.js';
 import '@patternfly/elements/pf-v5-panel/pf-v5-panel.js';
 import '@patternfly/elements/pf-v5-popover/pf-v5-popover.js';
-import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
 import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
+import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
 import '@patternfly/elements/pf-v5-search-input/pf-v5-search-input.js';
 import '@patternfly/elements/pf-v5-select/pf-v5-select.js';
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
-import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 import '@patternfly/elements/pf-v5-table/pf-v5-table.js';
 import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 import '@patternfly/elements/pf-v5-text-area/pf-v5-text-area.js';
 import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
 import '@patternfly/elements/pf-v5-tile/pf-v5-tile.js';
-import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
 import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+import '@patternfly/elements/pf-v6-background-image/pf-v6-background-image.js';
+import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
+import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+import '@patternfly/elements/pf-v6-timestamp/pf-v6-timestamp.js';
 
 // if `/v2/` path load icons from static directory
 if (document.location.href.includes('/v2/')) {

elements/pf-v5-button/demo/stateful.html

@@ -12,7 +12,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 
   const logsBtn = document.getElementById('loading-logs');
   const loadBtn = document.getElementById('loading-scdr');

elements/pf-v5-button/pf-v5-button.css

@@ -308,7 +308,7 @@ pf-v5-icon,
   }
   &.primary:not(.plain),
   &.danger {
-    --pf-v5-c-spinner--Color: white;
+    --pf-v6-c-spinner--Color: white;
   }
   &:not(.plain) {
     padding-left: calc(12px + var(--pf-v5-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));

elements/pf-v5-button/pf-v5-button.ts

@@ -8,7 +8,7 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
 import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 
 import tokensStyles from './pf-v5-button-tokens.css';
 import iconStyles from './pf-v5-button-icon.css';
@@ -152,9 +152,9 @@ export class PfV5Button extends LitElement {
                  icon="${ifDefined(this.icon)}"
                  set="${ifDefined(this.iconSet)}"
                  ?hidden="${!this.icon || this.loading}"></pf-v5-icon>
-        <pf-v5-spinner size="md"
+        <pf-v6-spinner size="md"
                     ?hidden="${!this.loading}"
-                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-v5-spinner>
+                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-v6-spinner>
       </slot>
       <slot id="text"></slot>
     `;