fix(spinner): remove diameter attribute in favor of CSS custom property

Author: zeroedin

elements/pf-v6-spinner/README.md

@@ -0,0 +1,51 @@
+# PatternFly Elements Spinner
+
+`<pf-v6-spinner>` is used to indicate to users that an action is in progress.
+
+Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)
+
+## Installation
+
+Load `<pf-v6-spinner>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+```
+
+## Usage
+```html
+<pf-v6-spinner>Loading...</pf-v6-spinner>
+```
+
+### Size variations
+
+```html
+<pf-v6-spinner size="sm">Loading...</pf-v6-spinner>
+<pf-v6-spinner size="md">Loading...</pf-v6-spinner>
+<pf-v6-spinner size="lg">Loading...</pf-v6-spinner>
+<pf-v6-spinner size="xl">Loading...</pf-v6-spinner>
+```
+
+### Custom size
+
+```html
+<pf-v6-spinner style="--pf-v6-c-spinner--diameter: 80px">Loading...</pf-v6-spinner>
+```
+
+## Discrepancies from React
+
+| React Prop | Web Component | Rationale |
+|------------|---------------|-----------|
+| `diameter` | `--pf-v6-c-spinner--diameter` CSS custom property | React's `diameter` prop abstracts setting this CSS custom property. In HTML, authors can set the custom property directly via `style`, so a dedicated attribute is not needed. |

elements/pf-v6-spinner/demo/custom-size.html

@@ -1,9 +1,9 @@
 ---
 name: Custom size
-description: A spinner can have a custom diameter using the `diameter` attribute.
+description: A spinner can have a custom diameter using the `--pf-v6-c-spinner--diameter` CSS custom property.
 ---
 <section>
-  <pf-v6-spinner diameter="80px" accessible-label="Custom size spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner style="--pf-v6-c-spinner--diameter: 80px" accessible-label="Custom size spinner">Loading...</pf-v6-spinner>
 </section>
 
 <script type="module">

elements/pf-v6-spinner/pf-v6-spinner.ts

@@ -30,9 +30,6 @@ export class PfV6Spinner extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) inline = false;
 
-  /** Custom diameter of spinner set as CSS variable */
-  @property({ reflect: true }) diameter?: string;
-
   /** Accessible label describing what is loading */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
@@ -48,13 +45,6 @@ export class PfV6Spinner extends LitElement {
       this.#internals.ariaLabel = label;
       this.#internals.ariaValueText = label;
     }
-    if (changed.has('diameter')) {
-      if (this.diameter) {
-        this.style.setProperty('--pf-v6-c-spinner--diameter', this.diameter);
-      } else {
-        this.style.removeProperty('--pf-v6-c-spinner--diameter');
-      }
-    }
   }
 
   override render(): TemplateResult {

elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts

@@ -103,11 +103,11 @@ describe('<pf-v6-spinner>', function() {
     }
   });
 
-  describe('diameter attribute', function() {
+  describe('custom diameter via CSS custom property', function() {
     it('sets the element diameter', async function() {
       const customDiameterValue = 80;
       const element = await createFixture<PfV6Spinner>(html`
-        <pf-v6-spinner diameter="${customDiameterValue}px">Loading...</pf-v6-spinner>
+        <pf-v6-spinner style="--pf-v6-c-spinner--diameter: ${customDiameterValue}px">Loading...</pf-v6-spinner>
       `);
       expect(element.offsetWidth).to.equal(customDiameterValue);
     });