feat(loading) - Update Spinner to SHINE styles; rename to Loading

.changeset/nine-gifts-learn.md

@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update Loader (formerly known as Spinner) component to SHINE designs
+
+BREAKING CHANGES:
+
+- Spinner component has been replace with the Loader component

MIGRATION_GUIDE.md

@@ -72,6 +72,10 @@
 - `s-input__xl` removed
 - **Nested inputs** html will require slight tweaking on consumers' side
 
+#### Loader
+- `Spinner` component replaced with new `Loader` component
+- `xs` and `xl` sized have been removed, leaving only the default, `sm`, and `lg` sizes
+
 #### Menu
 
 The menu component has been updated to use new class names and structure. The following changes are breaking:

packages/stacks-classic/lib/components/spinner/spinner.a11y.test.ts → packages/stacks-classic/lib/components/loader/loader.a11y.test.ts

@@ -1,11 +1,11 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
-describe("spinner", () => {
+describe("loader", () => {
     runA11yTests({
-        baseClass: "s-spinner",
+        baseClass: "s-loader",
         modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
+            primary: ["sm", "lg"],
         },
         children: {
             default: `<div class="v-visible-sr">Loading…</div>`,

packages/stacks-classic/lib/components/loader/loader.less

@@ -0,0 +1,78 @@
+.s-loader {
+    --_ld-color: var(--black-600);
+    --_ld-gap: calc(var(--_ld-size) / 2);
+    --_ld-size: calc(var(--su4) + var(--su1)); // 5px
+    --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5); // -5/8ths of the size
+
+    // MODIFIERS
+    &__sm {
+        --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2); // 3.5px
+        margin-left: var(--su1);
+        margin-right: var(--su1);
+    }
+
+    &__lg {
+        --_ld-size: var(--su8);
+    }
+
+    // CHILD ELEMENTS
+    & &--block,
+    &:before,
+    &:after {
+        background-color: currentColor;
+        content: "";
+        display: block;
+        height: var(--_ld-size);
+        width: var(--_ld-size);
+
+        animation: loader-animation .8s cubic-bezier(1, 1, 0, 1) infinite;
+    }
+
+    & &--block {
+        animation-delay: .25s;
+    }
+
+    &:after {
+        animation-delay: .5s;
+    }
+
+    display: flex;
+    gap: var(--_ld-gap);
+    margin-top: var(--_ld-gap);
+}
+
+@media (prefers-reduced-motion:reduce){
+    .s-loader {
+        & &--block,
+        &:before,
+        &:after {
+            animation: loader-animation-reduced-motion 2s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes loader-animation {
+    0%,1%,99%,to{
+        opacity: 0.2;
+        transform: translateY(0);
+    }
+    49%,50%{
+        opacity: 1;
+        transform: translateY(var(--_ld-offset));
+    }
+    51%{
+        opacity: 0.2;
+        transform: translateY(var(--_ld-offset));
+    }
+}
+
+@keyframes loader-animation-reduced-motion {
+    0%,to{
+        opacity: 0.3;
+        transform: none;
+    }
+    50%{
+        opacity: 1;
+        transform: none;
+    }
+}

packages/stacks-classic/lib/components/spinner/spinner.visual.test.ts → packages/stacks-classic/lib/components/loader/loader.visual.test.ts

@@ -6,12 +6,12 @@ import "../../index";
 const template = ({ component, testid }: any) => html`
     <div class="d-inline-block p8" data-testid="${testid}">${component}</div>
 `;
-describe("spinner", () => {
+describe("loader", () => {
     // default, sizes
     runVisualTests({
-        baseClass: "s-spinner",
+        baseClass: "s-loader",
         modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
+            primary: ["sm", "lg"],
         },
         children: {
             default: `<div class="v-visible-sr">Loading…</div>`,
@@ -20,7 +20,7 @@ describe("spinner", () => {
     });
     // applied font color
     runVisualTests({
-        baseClass: "s-spinner",
+        baseClass: "s-loader",
         modifiers: {
             global: ["fc-theme-primary"],
         },

packages/stacks-classic/lib/stacks-static.less

@@ -42,7 +42,7 @@
 @import "components/prose/prose.less";
 @import "components/select/select.less";
 @import "components/sidebar-widget/sidebar-widget.less";
-@import "components/spinner/spinner.less";
+@import "components/loader/loader.less";
 @import "components/table/table.less";
 @import "components/table-container/table-container.less";
 @import "components/tag/tag.less";

packages/stacks-docs/_data/loader.json

@@ -0,0 +1,25 @@
+{
+  "classes": [
+    {
+      "class": ".s-loader",
+      "applies": "N/A",
+      "description": "Base class for the loader component"
+    },
+    {
+      "class": ".s-loader--block",
+      "applies": ".s-loader",
+      "description": "Child necessary to render the center loader block"
+    },
+    {
+      "class": ".s-loader__sm",
+      "applies": ".s-loader",
+      "description": "A small variant of the loader component"
+    },
+    {
+      "class": ".s-loader__lg",
+      "applies": ".s-loader",
+      "description": "A large variant of the loader component"
+    }
+  ],
+  "sizes": ["s-loader__sm", "", "s-loader__lg"]
+}

packages/stacks-docs/_data/site-navigation.json

@@ -287,6 +287,10 @@
                             "title": "Link previews",
                             "url": "/product/components/link-previews/"
                         },
+                        {
+                            "title": "Loader",
+                            "url": "/product/components/loader/"
+                        },
                         {
                             "title": "Menus",
                             "url": "/product/components/menus/",
@@ -337,10 +341,6 @@
                             "title": "Sidebar widgets",
                             "url": "/product/components/sidebar-widgets/"
                         },
-                        {
-                            "title": "Spinner",
-                            "url": "/product/components/spinner/"
-                        },
                         {
                             "title": "Tables",
                             "url": "/product/components/tables/"
@@ -577,4 +577,4 @@
             ]
         }
     ]
-}
+}

packages/stacks-docs/product/components/buttons.html

@@ -268,10 +268,16 @@
 
 <section class="docs-section">
     {% header "h2", "Loading" %}
-    <p class="docs-copy">Any button can have a loading state applied by adding the <code class="docs-code">.is-loading</code> state class.</p>
+    <p class="docs-copy">Indicate a loading state by adding a <a href="/product/components/loader/"><code class="docs-code">.s-loader</code></a> component to a button.</p>
     <div class="docs-preview">
 {% highlight html %}
-<button class="s-btn is-loading" type="button">…</button>
+<button class="s-btn" type="button">
+    <div class="s-loader s-loader__sm">
+        <div class="s-loader--block"></div>
+        <div class="v-visible-sr">Loading…</div>
+    </div>
+    Ask question
+</button>
 {% endhighlight %}
         <div class="docs-preview--example">
             <div class="overflow-x-auto">
@@ -298,12 +304,30 @@
                                         {% if btn.modifier != nil %}
                                             <code class="docs-code">.{{ btn.modifier }}</code>
                                         {% endif %}
-                                        <code class="docs-code">.is-loading</code>
+                                        <code class="docs-code">.s-loader s-loader__sm</code>
                                     </div>
                                 </td>
-                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }} is-loading" type="button">Ask question</button></td>
-                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }} is-selected is-loading" type="button" aria-pressed="true">Ask question</button></td>
-                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }} is-loading" type="button" disabled>Ask question</button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }}" type="button">
+                                    <div class="s-loader s-loader__sm">
+                                        <div class="s-loader--block"></div>
+                                        <div class="v-visible-sr">Loading…</div>
+                                    </div>
+                                    Ask question
+                                </button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }} is-selected" type="button" aria-pressed="true">
+                                    <div class="s-loader s-loader__sm">
+                                        <div class="s-loader--block"></div>
+                                        <div class="v-visible-sr">Loading…</div>
+                                    </div>
+                                    Ask question
+                                </button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }}" type="button" disabled>
+                                    <div class="s-loader s-loader__sm">
+                                        <div class="s-loader--block"></div>
+                                        <div class="v-visible-sr">Loading…</div>
+                                    </div>
+                                    Ask question
+                                </button></td>
                             </tr>
                         {% endfor %}
                     </tbody>