From 1f7f8422d8e9c17d63124726802095f86242957d Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 21 Jan 2026 16:19:07 +0000 Subject: [PATCH 01/19] Add block --- .../loader.a11y.test.ts} | 6 +- .../lib/components/loader/loader.less | 80 ++++++++++++++ .../loader.visual.test.ts} | 8 +- .../lib/components/spinner/spinner.less | 103 ------------------ .../stacks-classic/lib/stacks-static.less | 2 +- .../_data/{spinner.json => loader.json} | 10 -- .../stacks-docs/_data/site-navigation.json | 8 +- .../components/{spinner.html => loader.html} | 31 ++---- temp_loading_svg.txt | 1 + 9 files changed, 101 insertions(+), 148 deletions(-) rename packages/stacks-classic/lib/components/{spinner/spinner.a11y.test.ts => loader/loader.a11y.test.ts} (69%) create mode 100644 packages/stacks-classic/lib/components/loader/loader.less rename packages/stacks-classic/lib/components/{spinner/spinner.visual.test.ts => loader/loader.visual.test.ts} (87%) delete mode 100644 packages/stacks-classic/lib/components/spinner/spinner.less rename packages/stacks-docs/_data/{spinner.json => loader.json} (69%) rename packages/stacks-docs/product/components/{spinner.html => loader.html} (66%) create mode 100644 temp_loading_svg.txt diff --git a/packages/stacks-classic/lib/components/spinner/spinner.a11y.test.ts b/packages/stacks-classic/lib/components/loader/loader.a11y.test.ts similarity index 69% rename from packages/stacks-classic/lib/components/spinner/spinner.a11y.test.ts rename to packages/stacks-classic/lib/components/loader/loader.a11y.test.ts index 51b9dbf0b7..456b79bd4b 100644 --- a/packages/stacks-classic/lib/components/spinner/spinner.a11y.test.ts +++ b/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("loading", () => { runA11yTests({ - baseClass: "s-spinner", + baseClass: "s-loading", modifiers: { - primary: ["xs", "sm", "md", "lg"], + primary: ["sm", "lg"], }, children: { default: `
Loading…
`, diff --git a/packages/stacks-classic/lib/components/loader/loader.less b/packages/stacks-classic/lib/components/loader/loader.less new file mode 100644 index 0000000000..74209cedd8 --- /dev/null +++ b/packages/stacks-classic/lib/components/loader/loader.less @@ -0,0 +1,80 @@ +.s-loading--block { + // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES + --_ld-size: var(--su-static24); + --_ld-block-size: calc(var(--su-static4) + var(--su-static1)); + --_ld-bg: var(--black-600); + --_ld-secondary-bg: var(--black-200); + + // MODIFIERS + &&__sm { + --_ld-size: var(--su-static16); + --_ld-block-size: calc((var(--su-static6) + var(--su-static1)) / 2); + } + &&__lg { + --_ld-size: var(--su-static48); + --_ld-block-size: var(--su-static8); + } + + // CHILD ELEMENTS + &:before { + animation: loading-block-animation 1.5s cubic-bezier(1, 1, 0, 1) infinite; + background-color: var(--_ld-secondary-bg); + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 0 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) 0 0 0 var(--_ld-secondary-bg); + content: ""; + display: block; + height: var(--_ld-block-size); + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: var(--_ld-block-size); + } + + height: var(--_ld-size); + position: relative; + width: var(--_ld-size); +} + +@keyframes loading-block-animation { + 0% { + background-color: var(--_ld-secondary-bg); + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 0 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) 0 0 0 var(--_ld-secondary-bg); + transform: translate(-50%, -50%); + } + 16.667% { + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) -5px 0 0 var(--_ld-bg), + calc(var(--_ld-block-size) + 2.5px) 0 0 0 var(--_ld-secondary-bg); + transform: translate(-50%, -50%); + } + 33.333% { + background-color: var(--_ld-secondary-bg); + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 0 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) 0 0 0 var(--_ld-secondary-bg); + transform: translate(-50%, -50%); + } + 50% { + background-color: var(--_ld-bg); + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 5px 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) 5px 0 0 var(--_ld-secondary-bg); + transform: translate(-50%, calc(-50% - 5px)); + } + 66.667% { + background-color: var(--_ld-secondary-bg); + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 0 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) 0 0 0 var(--_ld-secondary-bg); + transform: translate(-50%, -50%); + } + 83.333% { + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 0 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) -5px 0 0 var(--_ld-bg); + transform: translate(-50%, -50%); + } + 100% { + background-color: var(--_ld-secondary-bg); + box-shadow: calc(-1 * var(--_ld-block-size) - 2.5px) 0 0 0 var(--_ld-secondary-bg), + calc(var(--_ld-block-size) + 2.5px) 0 0 0 var(--_ld-secondary-bg); + transform: translate(-50%, -50%); + } +} \ No newline at end of file diff --git a/packages/stacks-classic/lib/components/spinner/spinner.visual.test.ts b/packages/stacks-classic/lib/components/loader/loader.visual.test.ts similarity index 87% rename from packages/stacks-classic/lib/components/spinner/spinner.visual.test.ts rename to packages/stacks-classic/lib/components/loader/loader.visual.test.ts index 7c7c23a217..73827b5c3b 100644 --- a/packages/stacks-classic/lib/components/spinner/spinner.visual.test.ts +++ b/packages/stacks-classic/lib/components/loader/loader.visual.test.ts @@ -6,12 +6,12 @@ import "../../index"; const template = ({ component, testid }: any) => html`
${component}
`; -describe("spinner", () => { +describe("loading", () => { // default, sizes runVisualTests({ - baseClass: "s-spinner", + baseClass: "s-loading", modifiers: { - primary: ["xs", "sm", "md", "lg"], + primary: ["sm", "lg"], }, children: { default: `
Loading…
`, @@ -20,7 +20,7 @@ describe("spinner", () => { }); // applied font color runVisualTests({ - baseClass: "s-spinner", + baseClass: "s-loading", modifiers: { global: ["fc-theme-primary"], }, diff --git a/packages/stacks-classic/lib/components/spinner/spinner.less b/packages/stacks-classic/lib/components/spinner/spinner.less deleted file mode 100644 index 8f30b0e17a..0000000000 --- a/packages/stacks-classic/lib/components/spinner/spinner.less +++ /dev/null @@ -1,103 +0,0 @@ -.s-spinner { - --_sp-baw: calc(var(--su-static1) * 3); // 3px - --_sp-size: var(--su-static24); - - // MODIFIERS - &&__xs { - --_sp-baw: var(--su-static1); - --_sp-size: var(--su-static12); - } - - &&__sm { - --_sp-baw: var(--su-static2); - --_sp-size: var(--su-static16); - } - - &&__md { - --_sp-baw: var(--su-static4); - --_sp-size: var(--su-static32); - } - - &&__lg { - --_sp-baw: var(--su-static6); - --_sp-size: var(--su-static48); - } - - // CHILD ELEMENTS - &:after, - &:before { - border: var(--_sp-baw) solid currentColor; - - border-radius: var(--br-circle); - content: ''; - height: 100%; - position: absolute; - width: 100%; - } - - &:after { - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9); - } - - &:before { - opacity: 0.25; - transform: rotate(90deg); // [1] - } - - height: var(--_sp-size); - width: var(--_sp-size); - - position: relative; - text-align: left; // [2] -} - -.is-loading { - --_li-offset: 0.6em; - --_il-size: 1.23076923em; - - &:after, - &:before { - border-radius: var(--br-circle); - border-style: solid; - border-width: var(--su-static2); - content: ""; - height: var(--_il-size); - left: var(--_li-offset); - position: absolute; - top: calc(50% - var(--_li-offset)); - width: var(--_il-size); - } - - &:after { - animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9); - border-color: transparent; - border-left-color: currentColor; - filter: invert(0); // [1] - transform-origin: 50% 50% var(--su-static1); // [1] - } - - &:before { - border-color: currentColor; - opacity: 0.3; - } - - padding-left: 2.2em; - position: relative; -} - -// Keyframes -@keyframes s-spinner-rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -// [1] no-op to reduce wobble in Edge. More info: https://github.com/StackExchange/Stacks/blob/d2af26aca06c47e3f1f7a638e49b221a9e28e450/lib/css/components/_stacks-spinner.less#L16-L26 - -// [2] When within a parent that has text-align: center, the spinner's entire container spins, not just the spinner. Let's force text-align left so things spin internally. diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less index ddb182b0f3..02cd046c2b 100644 --- a/packages/stacks-classic/lib/stacks-static.less +++ b/packages/stacks-classic/lib/stacks-static.less @@ -43,7 +43,7 @@ @import "components/select/select.less"; @import "components/sidebar-widget/sidebar-widget.less"; @import "components/skeleton/skeleton.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"; diff --git a/packages/stacks-docs/_data/spinner.json b/packages/stacks-docs/_data/loader.json similarity index 69% rename from packages/stacks-docs/_data/spinner.json rename to packages/stacks-docs/_data/loader.json index 70856d481b..1e9d30d44a 100644 --- a/packages/stacks-docs/_data/spinner.json +++ b/packages/stacks-docs/_data/loader.json @@ -5,21 +5,11 @@ "applies": "N/A", "description": "Base loading style that is used almost universally" }, - { - "class": ".s-spinner__xs", - "applies": ".s-spinner", - "description": "An extra small loading style for compact layouts" - }, { "class": ".s-spinner__sm", "applies": ".s-spinner", "description": "A small style for compact layouts" }, - { - "class": ".s-spinner__md", - "applies": ".s-spinner", - "description": "A medium style for larger layouts" - }, { "class": ".s-spinner__lg", "applies": ".s-spinner", diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 6746192f9b..88d08b5020 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -285,6 +285,10 @@ "title": "Link previews", "url": "/product/components/link-previews/" }, + { + "title": "Loader", + "url": "/product/components/loader/" + }, { "title": "Menus", "url": "/product/components/menus/", @@ -339,10 +343,6 @@ "title": "Skeleton", "url": "/product/components/skeleton/" }, - { - "title": "Spinner", - "url": "/product/components/spinner/" - }, { "title": "Tables", "url": "/product/components/tables/" diff --git a/packages/stacks-docs/product/components/spinner.html b/packages/stacks-docs/product/components/loader.html similarity index 66% rename from packages/stacks-docs/product/components/spinner.html rename to packages/stacks-docs/product/components/loader.html index d794d8d4fd..1fba0508ca 100644 --- a/packages/stacks-docs/product/components/spinner.html +++ b/packages/stacks-docs/product/components/loader.html @@ -1,8 +1,8 @@ --- layout: page -title: Spinner +title: Loader svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-spinner--docs -description: A loading spinner is used for indicating a loading state of a page or section. It is colored according to the currently applying font color. +description: "The Loader indicates an active wait state for a page, section, or interactive element." tags: components ---
@@ -17,7 +17,7 @@ - {% for item in spinner.spinner %} + {% for item in loader.loader %} {{ item.class }} {% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %} @@ -30,20 +30,15 @@
{% header "h2", "Examples" %} -

The spinner’s colors are based on the font color of the element, which will usually be inherited from its parent. If you need to apply a color override, the font color classes can provide themability. In most situations, a black and white spinner based on the default font color will be appropriate.

-

For accessibility, it’s important to add fallback loading text that is visible to screen readers. Additionally, you should add aria-busy="true" to the component that triggered the loading state while the spinner is shown.

+ {% header "h3", "Blocks" %} +

Use the Blocks variant as the standard loader for general UI states. This is the most common style and utilizes a monochrome black and gray palette.

+

For accessibility, it’s important to add fallback loading text that is visible to screen readers. Additionally, you should add aria-busy="true" to the component that triggered the loading state while the loader is shown.

{% highlight html %} - - -
diff --git a/packages/stacks-svelte/src/components/Button/Button.svelte b/packages/stacks-svelte/src/components/Button/Button.svelte index 8ebed227f9..dd264e98ae 100644 --- a/packages/stacks-svelte/src/components/Button/Button.svelte +++ b/packages/stacks-svelte/src/components/Button/Button.svelte @@ -65,6 +65,11 @@ */ loading?: boolean; + /** + * The i18n loading text + */ + i18nLoadingText?: string; + /** * Modifier describing if the button is selected */ @@ -104,6 +109,7 @@ icon = false, link = false, loading = false, + i18nLoadingText = "Loading…", selected = false, unset = false, class: className = "", @@ -186,6 +192,7 @@ {...restProps} >{#if loading}{/if}{#if !badge}{@render children()}{:else} {@render children()} From 45828087d0ff4eacf4c2da79e4f95e749d8fcac9 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 28 Jan 2026 16:41:19 +0000 Subject: [PATCH 17/19] Update site-navigation.json --- packages/stacks-docs/_data/site-navigation.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index ccc32fe7ec..112abaabfd 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/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/" From 0a9fae08ca8f3e8ef31b6f60c96ab639e75333d4 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 28 Jan 2026 16:47:05 +0000 Subject: [PATCH 18/19] fix test --- .../src/components/Button/Button.test.ts | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/packages/stacks-svelte/src/components/Button/Button.test.ts b/packages/stacks-svelte/src/components/Button/Button.test.ts index 77521cf0b8..3bbd37717b 100644 --- a/packages/stacks-svelte/src/components/Button/Button.test.ts +++ b/packages/stacks-svelte/src/components/Button/Button.test.ts @@ -1,11 +1,10 @@ -import { createRawSnippet, mount, unmount, tick } from "svelte"; +import { createRawSnippet, tick } from "svelte"; import { expect } from "@open-wc/testing"; import { render, screen } from "@testing-library/svelte"; import userEvent from "@testing-library/user-event"; import sinon from "sinon"; import Button from "./Button.svelte"; -import Loader from "../Loader/Loader.svelte"; const children = createRawSnippet(() => ({ render: () => "test btn", @@ -131,28 +130,12 @@ describe("Button", () => { }); it("should render the loading component when loading prop is provided", () => { - const loadingSnippet = createRawSnippet(() => ({ - render: () => "", - setup: (target) => { - const instance = mount(Loader, { - target, - props: { - size: "sm", - }, - }); - return () => { - unmount(instance); - }; - }, - })); - render(Button, { - loading: loadingSnippet, + loading: true, children, }); expect(screen.getByText("Loading…")).to.exist; - expect(screen.getByText("Loading…").closest(".s-loader")).to - .exist; + expect(screen.getByText("Loading…").closest(".s-loader")).to.exist; }); it("should render including the selected class", () => { From c0e8da83a8d2321f87ef2c16f6be063b488decb7 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 28 Jan 2026 16:47:18 +0000 Subject: [PATCH 19/19] Update Button.test.ts --- packages/stacks-svelte/src/components/Button/Button.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/Button/Button.test.ts b/packages/stacks-svelte/src/components/Button/Button.test.ts index 3bbd37717b..f426eac00e 100644 --- a/packages/stacks-svelte/src/components/Button/Button.test.ts +++ b/packages/stacks-svelte/src/components/Button/Button.test.ts @@ -129,7 +129,7 @@ describe("Button", () => { expect(screen.getByRole("button")).to.have.class("s-btn__link"); }); - it("should render the loading component when loading prop is provided", () => { + it("should render the loader component when loading prop is provided", () => { render(Button, { loading: true, children,