Rework spinner and use it in button

src/components.d.ts

@@ -594,14 +594,6 @@ export namespace Components {
         "value": string | Array<string>;
     }
     interface SlSpinner {
-        /**
-          * The spinner's size.
-         */
-        "size": number;
-        /**
-          * The stroke width of the spinner in pixels.
-         */
-        "strokeWidth": number;
     }
     interface SlSwitch {
         /**
@@ -1720,14 +1712,6 @@ declare namespace LocalJSX {
         "value"?: string | Array<string>;
     }
     interface SlSpinner {
-        /**
-          * The spinner's size.
-         */
-        "size"?: number;
-        /**
-          * The stroke width of the spinner in pixels.
-         */
-        "strokeWidth"?: number;
     }
     interface SlSwitch {
         /**

src/components/button/button.scss

@@ -364,7 +364,7 @@
 
 .button--loading {
   position: relative;
-  pointer-events: none;
+  cursor: wait;
 
   .button__prefix,
   .button__label,
@@ -373,25 +373,14 @@
     visibility: hidden;
   }
 
-  .button__spinner {
+  sl-spinner {
+    --color: currentColor;
+    --stroke-width: 1px;
     position: absolute;
+    height: 1em;
+    width: 1em;
     top: calc(50% - 0.5em);
     left: calc(50% - 0.5em);
-    width: 1em;
-    height: 1em;
-    border: solid 1px currentColor;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    animation: 1s linear infinite spin;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
   }
 }
 

src/components/button/button.tsx

@@ -18,6 +18,7 @@ export class Button {
   constructor() {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleClick = this.handleClick.bind(this);
   }
 
   button: HTMLButtonElement;
@@ -82,6 +83,13 @@ export class Button {
     this.slFocus.emit();
   }
 
+  handleClick(event: MouseEvent) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
   render() {
     return (
       <button
@@ -117,6 +125,7 @@ export class Button {
         type={this.submit ? 'submit' : 'button'}
         onBlur={this.handleBlur}
         onFocus={this.handleFocus}
+        onClick={this.handleClick}
       >
         <span class="button__prefix">
           <slot name="prefix" />
@@ -142,7 +151,7 @@ export class Button {
           </span>
         )}
 
-        {this.loading && <span class="button__spinner" />}
+        {this.loading && <sl-spinner />}
       </button>
     );
   }

src/components/spinner/spinner.scss

@@ -1,15 +1,19 @@
 @import 'component';
 
 :host {
-  display: inline-block;
+  display: inline-flex;
+
+  --stroke-width: 2px;
+  --color: var(--sl-color-primary-50);
 }
 
 .spinner {
   display: inline-block;
+  width: 1em;
+  height: 1em;
   border-radius: 50%;
-  border: solid var(--sl-color-primary-50);
+  border: solid var(--stroke-width) var(--color);
   border-bottom-color: transparent;
-  vertical-align: middle;
   animation: 1s linear infinite spin;
 }
 

src/components/spinner/spinner.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 /**
  * @since 1.0
@@ -11,24 +11,7 @@ import { Component, Prop, h } from '@stencil/core';
   shadow: true
 })
 export class Spinner {
-  /** The spinner's size. */
-  @Prop() size = 24;
-
-  /** The stroke width of the spinner in pixels. */
-  @Prop() strokeWidth = 2;
-
   render() {
-    return (
-      <span
-        class="spinner"
-        aria-busy="true"
-        aria-live="polite"
-        style={{
-          borderWidth: `${this.strokeWidth}px`,
-          width: `${this.size}px`,
-          height: `${this.size}px`
-        }}
-      />
-    );
+    return <span class="spinner" aria-busy="true" aria-live="polite" />;
   }
 }