Updates to the <sl-spinner> component

docs/pages/components/button.md

@@ -561,10 +561,10 @@ const App = () => (
 Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
 
 ```html:preview
-<sl-button variant="default" loading>Default</sl-button>
-<sl-button variant="primary" loading>Primary</sl-button>
-<sl-button variant="warning" loading>Warning</sl-button>
-<sl-button variant="danger" loading>Danger</sl-button>
+<sl-button variant="default" size="small" loading>Default</sl-button>
+<sl-button variant="primary" size="medium" loading>Primary</sl-button>
+<sl-button variant="warning" size="large" loading>Warning</sl-button>
+<sl-button variant="danger" size="x-large" loading>Danger</sl-button>
 ```
 
 ```pug:slim

docs/pages/components/spinner.md

@@ -9,12 +9,19 @@ layout: component
 
 ### Basic Spinner
 
+By default a spinner inherits its parent element's font size.
+
 ```html:preview
 <sl-spinner></sl-spinner>
+<div style="font-size: 32px;">
+  <sl-spinner></sl-spinner>
+</div>
 ```
 
 ```pug:slim
 sl-spinner
+div style="font-size: 32px;"
+  sl-spinner
 ```
 
 ```jsx:react
@@ -25,18 +32,26 @@ const App = () => <SlSpinner />;
 
 ### Size
 
-Spinners are sized based on the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
+Use the `size` property to display the spinner in one of 4 pre-defined sizes: `small` (16px), `medium` (32px), `large` (48px), and `x-large` (64px).
+
+:::warning
+**Note:** If the pre-defined sizes don't work for your use case, you can set a custom size using the `customSize` property (as shown in the example below). Please consult the design team before using this option, so that the team can review the pattern and determine whether the existing size set should be updated.
+:::
 
 ```html:preview
-<sl-spinner></sl-spinner>
-<sl-spinner style="font-size: 2rem;"></sl-spinner>
-<sl-spinner style="font-size: 3rem;"></sl-spinner>
+<sl-spinner size="small"></sl-spinner>
+<sl-spinner size="medium"></sl-spinner>
+<sl-spinner size="large"></sl-spinner>
+<sl-spinner size="x-large"></sl-spinner>
+<sl-spinner customSize="88px"></sl-spinner>
 ```
 
 ```pug:slim
-sl-spinner
-sl-spinner style="font-size: 2rem;"
-sl-spinner style="font-size: 3rem;"
+sl-spinner size="small"
+sl-spinner size="medium"
+sl-spinner size="large"
+sl-spinner size="x-large"
+sl-spinner customSize="88px"
 ```
 
 {% raw %}
@@ -55,45 +70,20 @@ const App = () => (
 
 {% endraw %}
 
-### Track Width
+### Styling the Spinner
 
-The width of the spinner's track can be changed by setting the `--track-width` custom property.
+The spinner's track width, track color, and indicator color can be customized with the `--track-width`, `--track-color`, and `--indicator-color` custom properties.
 
-```html:preview
-<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
-```
-
-```pug:slim
-sl-spinner style="font-size: 50px; --track-width: 10px;"
-```
-
-{% raw %}
-
-```jsx:react
-import SlSpinner from '@teamshares/shoelace/dist/react/spinner';
-
-const App = () => (
-  <SlSpinner
-    style={{
-      fontSize: '3rem',
-      '--track-width': '6px'
-    }}
-  />
-);
-```
-
-{% endraw %}
-
-### Color
-
-The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
+:::warning
+**Note:** In general, you shouldn’t need to do this. If you are working on a design that requires custom styling, please ensure that there’s not a standard spinner in the design system that would work instead. If you really do need a non-standard spinner, please consult the design team before implementing a custom spinner, so that the team can determine whether the existing pattern should be updated.
+:::
 
 ```html:preview
-<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
+<sl-spinner style="--track-width: 8px; --indicator-color: teal; --track-color: paleturquoise;" size="x-large"></sl-spinner>
 ```
 
 ```pug:slim
-sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"
+sl-spinner style="--track-width: 8px; --indicator-color: teal; --track-color: paleturquoise;" size="x-large"
 ```
 
 {% raw %}
@@ -105,8 +95,7 @@ const App = () => (
   <SlSpinner
     style={{
       fontSize: '3rem',
-      '--indicator-color': 'deeppink',
-      '--track-color': 'pink'
+      '--track-width': '6px'
     }}
   />
 );

src/components/button/button.styles.ts

@@ -505,7 +505,10 @@ export default css`
   }
 
   .button--loading sl-spinner {
-    --indicator-color: currentColor;
+    --track-color: rgba(var(--ts-color-gray-600-rgb), 0.35);
+    --indicator-color: white;
+    --track-width: 2px;
+    --speed: 3s;
     position: absolute;
     font-size: 1em;
     height: 1em;

src/components/dialog/dialog.component.ts

@@ -103,12 +103,6 @@ export default class SlDialog extends ShoelaceElement {
    */
   @property({ reflect: true }) label = '';
 
-  /**
-   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
-   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
-   */
-  @property({ type: Boolean, reflect: true }) icon = false;
-
   /**
    * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
    * accessible way for users to dismiss the dialog.

src/components/spinner/spinner.component.ts

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
+import { property } from 'lit/decorators.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import styles from './spinner.styles.js';
 import type { CSSResultGroup } from 'lit';
@@ -9,6 +10,8 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://shoelace.style/components/spinner
  * @status stable
  * @since 2.0
+ * @pattern stable
+ * @figma ready
  *
  * @csspart base - The component's base wrapper.
  *
@@ -22,11 +25,38 @@ export default class SlSpinner extends ShoelaceElement {
 
   private readonly localize = new LocalizeController(this);
 
+  /** The spinner's size. If left unset, the spinner will inherit the parent element's font size. Alternatively you can also set a custom size by passing a value to the `customSize` property. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' | 'x-large' | 'custom' = 'custom';
+
+  /** Can be used to set a custom size either in pixels or rems. Whenever possible, avoid using this option and stick to the pre-defined size options. */
+  @property() customSize: '';
+
   render() {
+    const svgSizes = {
+      small: '16px',
+      medium: '32px',
+      large: '48px',
+      'x-large': '64px',
+      custom: this.customSize ? this.customSize : '1em'
+    };
+
     return html`
-      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term('loading')}>
+      <svg
+        part="base"
+        class="spinner"
+        role="progressbar"
+        aria-label=${this.localize.term('loading')}
+        width=${svgSizes[this.size]}
+        height=${svgSizes[this.size]}
+        font-size=${svgSizes[this.size]}
+      >
         <circle class="spinner__track"></circle>
-        <circle class="spinner__indicator"></circle>
+        <mask id="mask">
+          <circle class="spinner__indicator"></circle>
+        </mask>
+        <foreignObject x="0" y="0" width="100%" height="100%" mask="url(#mask)">
+          <div class="indicator__gradient"></div>
+        </foreignObject>
       </svg>
     `;
   }

src/components/spinner/spinner.styles.ts

@@ -5,14 +5,12 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-width: 2px;
-    --track-color: rgb(128 128 128 / 25%);
+    --track-width: 3.5px;
+    --track-color: var(--sl-color-primary-100);
     --indicator-color: var(--sl-color-primary-600);
-    --speed: 2s;
+    --speed: 4s;
 
     display: inline-flex;
-    width: 1em;
-    height: 1em;
   }
 
   .spinner {
@@ -37,16 +35,28 @@ export default css`
   }
 
   .spinner__indicator {
-    stroke: var(--indicator-color);
+    stroke: white;
     stroke-linecap: round;
-    stroke-dasharray: 150% 75%;
     animation: spin var(--speed) linear infinite;
   }
 
+  .indicator__gradient {
+    background: conic-gradient(
+      from 270deg,
+      var(--indicator-color) 5%,
+      var(--track-color) 35% 60%,
+      var(--indicator-color) 95%
+    );
+    width: 100%;
+    height: 100%;
+    transform-origin: 50% 50%;
+    animation: spin-gradient var(--speed) linear infinite;
+  }
+
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 1.375em, 1.375em;
     }
 
     50% {
@@ -56,7 +66,21 @@ export default css`
 
     100% {
       transform: rotate(1080deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+  }
+
+  @keyframes spin-gradient {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
     }
   }
 `;

src/styles/exports/overrides.css

@@ -65,6 +65,8 @@
   --sl-panel-background-color: var(--sl-color-neutral-0);
   --sl-panel-border-color: var(--sl-color-neutral-300);
   --sl-panel-border-width: 1px;
+  /* Tooltip */
+  --sl-tooltip-border-radius: var(--ts-border-radius-x-small);
 }
 
 /** *********************************** */