feat(spinner): 1:1

.changeset/seven-phones-crash.md

@@ -0,0 +1,17 @@
+---
+"@patternfly/pfe-spinner": minor
+"@patternfly/pfe-button": patch
+"@patternfly/pfe-tools": patch
+---
+
+BREAKING CHANGE:
+
+Renames `<pfe-progress-indicator>` to `<pfe-spinner>` and changes it's HTML and
+CSS APIs to more closely match PatternFly v4 design specs.
+
+```html
+<!-- BEFORE -->
+<pfe-progress-indicator indeterminate>Loading...</pfe-progress-indicator>
+<!-- AFTER -->
+<pfe-spinner>Loading...</pfe-spinner>
+```

elements/pfe-button/demo/pfe-button.js

@@ -1,7 +1,7 @@
 import '@patternfly/pfe-band';
 import '@patternfly/pfe-button';
 import '@patternfly/pfe-icon/font-awesome.js';
-import '@patternfly/pfe-progress-indicator';
+import '@patternfly/pfe-spinner';
 import '@patternfly/pfe-select';
 
 const root = document.querySelector('[data-demo="pfe-button"]')?.shadowRoot ?? document;

elements/pfe-button/package.json

@@ -71,7 +71,7 @@
   "dependencies": {
     "@patternfly/pfe-core": "^2.0.0-next.8",
     "@patternfly/pfe-icon": "^2.0.0-next.4",
-    "@patternfly/pfe-progress-indicator": "^2.0.0-next.4",
+    "@patternfly/pfe-spinner": "^2.0.0-next.4",
     "lit": "2.3.0"
   }
 }

elements/pfe-button/pfe-button.ts

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { BaseButton } from './BaseButton.js';
 
 import '@patternfly/pfe-icon';
-import '@patternfly/pfe-progress-indicator';
+import '@patternfly/pfe-spinner';
 
 import styles from './pfe-button.scss';
 
@@ -160,11 +160,10 @@ export class PfeButton extends BaseButton {
   protected override renderDefaultIcon() {
     return html`
       <pfe-icon ?hidden=${!this.icon} icon=${this.icon} size="sm"></pfe-icon>
-      <pfe-progress-indicator
+      <pfe-spinner
           ?hidden=${!this.loading}
-          indeterminate
           aria-label=${this.getAttribute('progress-label') ?? 'loading'}
-      ></pfe-progress-indicator>
+      ></pfe-spinner>
     `;
   }
 }

elements/pfe-button/tsconfig.json

@@ -7,7 +7,7 @@
   },
   "references": [
     { "path": "../../core/pfe-core" },
-    { "path": "../pfe-progress-indicator" },
+    { "path": "../pfe-spinner" },
     { "path": "../pfe-icon" },
     { "path": "../../tools/pfe-tools" }
   ]