fix(spinner)!: remove BaseSpinner

Closes #2614

.changeset/remove-basespinner.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-spinner>`: Removed `BaseSpinner` class. Reimplement (recommended) or extend `PfSpinner`.

elements/package.json

@@ -42,7 +42,6 @@
     "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
-    "./pf-spinner/BaseSpinner.js": "./pf-spinner/BaseSpinner.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/BaseSwitch.js": "./pf-switch/BaseSwitch.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",

elements/pf-spinner/pf-spinner.css

@@ -1,12 +1,16 @@
-[hidden] {
-  display: none !important;
+:host {
+  display: inline-block;
+  width: min-content;
+  min-height: 0;
+  aspect-ratio: 1 / 1;
 }
 
-div {
-  display: contents;
+[hidden] {
+  display: none !important;
 }
 
 svg {
+  overflow: hidden;
   width: var(--pf-c-spinner--Width,
     var(--pf-c-spinner--diameter,
       var(--pf-global--icon--FontSize--xl, 3.375rem)));
@@ -19,35 +23,41 @@ svg {
     var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;
 }
 
-:host([size="sm"]) div {
+circle {
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
+  stroke-width: var(--pf-c-spinner--stroke-width, 10);
+  animation:
+    pf-c-spinner-animation-dash
+    var(--pf-c-spinner--AnimationDuration, 1.4s)
+    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
+}
+
+:host([size="sm"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,
     var(--pf-global--icon--FontSize--sm, 0.625rem));
 }
 
-:host([size="md"]) div {
+:host([size="md"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,
     var(--pf-global--icon--FontSize--md, 1.125rem));
 }
 
-:host([size="lg"]) div {
+:host([size="lg"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,
     var(--pf-global--icon--FontSize--lg, 1.5rem));
 }
 
-:host([size="xl"]) div {
+:host([size="xl"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,
     var(--pf-global--icon--FontSize--xl, 3.375rem));
 }
 
-circle {
-  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
-  stroke-width: var(--pf-c-spinner--stroke-width, 10);
-  animation:
-    pf-c-spinner-animation-dash
-    var(--pf-c-spinner--AnimationDuration, 1.4s)
-    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
-}
-
 @keyframes pf-c-spinner-animation-rotate {
   0% {
     transform: rotate(0deg);

elements/pf-spinner/pf-spinner.ts

@@ -1,8 +1,8 @@
-import { html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { property } from 'lit/decorators/property.js';
 
-import { BaseSpinner } from './BaseSpinner.js';
 import styles from './pf-spinner.css';
 
 /**
@@ -26,10 +26,23 @@ import styles from './pf-spinner.css';
  */
 
 @customElement('pf-spinner')
-export class PfSpinner extends BaseSpinner {
-  static readonly styles = [...BaseSpinner.styles, styles];
-  render() {
-    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
+export class PfSpinner extends LitElement {
+  static readonly styles = [styles];
+
+  /** Preset sizes for the spinner */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'xl';
+
+  /** Custom diameter of spinner set as CSS variable */
+  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;
+
+  override render() {
+    return html`
+      <svg role="progressbar"
+           viewBox="0 0 100 100"
+           style="${styleMap({ '--pf-c-spinner--diameter': this.diameter })}">
+        <circle cx="50" cy="50" r="45" fill="none" />
+      </svg>
+    `;
   }
 }