diff --git a/.changeset/sixty-cameras-visit.md b/.changeset/sixty-cameras-visit.md
new file mode 100644
index 00000000000..8b7fc84a6e4
--- /dev/null
+++ b/.changeset/sixty-cameras-visit.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Added 'medium' size to Spinner component with 'default' size now being an alias for 'medium'. 'Default' is to be deprecated.
diff --git a/packages/core/src/__tests__/__e2e__/spinner/Spinner.cy.tsx b/packages/core/src/__tests__/__e2e__/spinner/Spinner.cy.tsx
index d821784bbf3..7e03222da94 100644
--- a/packages/core/src/__tests__/__e2e__/spinner/Spinner.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/spinner/Spinner.cy.tsx
@@ -5,7 +5,11 @@ import { Spinner } from "@salt-ds/core";
describe("GIVEN a Spinner", () => {
it("THEN should show on the screen", () => {
cy.mount();
- cy.findByRole("img").should("have.class", "saltSpinner-default");
+ cy.findByRole("img").should("have.class", "saltSpinner-medium");
+ });
+ it("THEN size 'default' should have 'medium' classname", () => {
+ cy.mount();
+ cy.findByRole("img").should("have.class", "saltSpinner-medium");
});
it("THEN should show a large spinner on the screen", () => {
diff --git a/packages/core/src/spinner/Spinner.css b/packages/core/src/spinner/Spinner.css
index 3b403b9fe1c..7da4c58dd7b 100644
--- a/packages/core/src/spinner/Spinner.css
+++ b/packages/core/src/spinner/Spinner.css
@@ -8,8 +8,8 @@
stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));
}
-/* Styles applied when `size="default"` */
-.saltSpinner-default {
+/* Styles applied when `size="medium"` */
+.saltSpinner-medium {
--spinner-strokeWidth: var(--salt-size-bar);
height: var(--salt-size-base);
width: var(--salt-size-base);
diff --git a/packages/core/src/spinner/Spinner.tsx b/packages/core/src/spinner/Spinner.tsx
index ad6f3481553..7203c7e0a3a 100644
--- a/packages/core/src/spinner/Spinner.tsx
+++ b/packages/core/src/spinner/Spinner.tsx
@@ -13,11 +13,23 @@ import { useDensity } from "../salt-provider";
* Spinner component, provides an indeterminate loading indicator
*
* @example
- *
+ *
*/
-export const SpinnerSizeValues = ["default", "large", "small"] as const;
-export type SpinnerSize = (typeof SpinnerSizeValues)[number];
+export const SpinnerSizeValues = [
+ "default",
+ "large",
+ "small",
+ "medium",
+] as const;
+
+type SpinnerSize = (typeof SpinnerSizeValues)[number];
+
+export type SpinnerSVGSize = Exclude;
+
+const handleSize = (size: SpinnerSize): SpinnerSVGSize =>
+ size === "default" ? "medium" : size;
+
const withBaseName = makePrefixer("saltSpinner");
export interface SpinnerProps extends HTMLAttributes {
@@ -46,7 +58,7 @@ export interface SpinnerProps extends HTMLAttributes {
*/
role?: string;
/**
- * Determines the size of the spinner. Must be one of: 'default', 'large', 'small'.
+ * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.
*/
size?: SpinnerSize;
/**
@@ -65,7 +77,7 @@ export const Spinner = forwardRef(
disableAnnouncer,
role = "img",
className,
- size = "default",
+ size = "medium",
id: idProp,
...rest
},
@@ -82,6 +94,7 @@ export const Spinner = forwardRef(
const { announce } = useAriaAnnouncer();
const density = useDensity();
+ size = handleSize(size);
useEffect(() => {
if (disableAnnouncer) return;
diff --git a/packages/core/src/spinner/svgSpinners/SpinnerSVG.tsx b/packages/core/src/spinner/svgSpinners/SpinnerSVG.tsx
index f885b14cac8..4165bc0bcd8 100644
--- a/packages/core/src/spinner/svgSpinners/SpinnerSVG.tsx
+++ b/packages/core/src/spinner/svgSpinners/SpinnerSVG.tsx
@@ -1,6 +1,6 @@
import { SVGAttributes } from "react";
import { makePrefixer } from "../../utils";
-import { SpinnerSize } from "../Spinner";
+import { SpinnerSVGSize } from "../Spinner";
import { Density } from "../../theme";
const withBaseName = makePrefixer("saltSpinner");
@@ -8,12 +8,18 @@ const withBaseName = makePrefixer("saltSpinner");
interface SpinnerProps {
id?: string;
rest?: Omit, "id">;
- size: SpinnerSize;
+ size: SpinnerSVGSize;
density: Density;
}
const sizeAndStrokeWidthMapping = {
- default: {
+ small: {
+ high: { width: 12, strokeWidth: 2 },
+ medium: { width: 12, strokeWidth: 2 },
+ low: { width: 14, strokeWidth: 2 },
+ touch: { width: 16, strokeWidth: 2 },
+ },
+ medium: {
high: { width: 20, strokeWidth: 2 },
medium: { width: 28, strokeWidth: 4 },
low: { width: 36, strokeWidth: 6 },
@@ -25,12 +31,6 @@ const sizeAndStrokeWidthMapping = {
low: { width: 72, strokeWidth: 6 },
touch: { width: 88, strokeWidth: 8 },
},
- small: {
- high: { width: 12, strokeWidth: 2 },
- medium: { width: 12, strokeWidth: 2 },
- low: { width: 14, strokeWidth: 2 },
- touch: { width: 16, strokeWidth: 2 },
- },
};
export const SpinnerSVG = ({
diff --git a/site/docs/components/spinner/examples.mdx b/site/docs/components/spinner/examples.mdx
index 3323934a1d8..763fde54b7c 100644
--- a/site/docs/components/spinner/examples.mdx
+++ b/site/docs/components/spinner/examples.mdx
@@ -8,18 +8,28 @@ data:
---
-
+
- ### Size (default)
+ ### Small
- The default spinner is typically used for widget loading experiences.
+ The small spinner is used for embedding in individual components (e.g., button or input) that require dynamic loading experiences.
- For the default size, set the `size` prop to `”default”` or leave it as `undefined`.
+ For the small size set the `size` prop to `"small"`.
-
+
- ### Size (large)
+ ### Medium (default)
+
+ The medium spinner is typically used for widget loading experiences.
+
+ For the medium size, set the `size` prop to `”medium”` or leave it as `undefined`.
+
+
+
+
+
+ ### Large
The large spinner is useful for full screen loading experiences.
diff --git a/site/src/examples/spinner/SizeLarge.tsx b/site/src/examples/spinner/Large.tsx
similarity index 75%
rename from site/src/examples/spinner/SizeLarge.tsx
rename to site/src/examples/spinner/Large.tsx
index 45cd4133027..f58dabb1fc1 100644
--- a/site/src/examples/spinner/SizeLarge.tsx
+++ b/site/src/examples/spinner/Large.tsx
@@ -1,6 +1,6 @@
import { ReactElement } from "react";
import { Spinner } from "@salt-ds/core";
-export const SizeLarge = (): ReactElement => (
+export const Large = (): ReactElement => (
);
diff --git a/site/src/examples/spinner/Medium.tsx b/site/src/examples/spinner/Medium.tsx
new file mode 100644
index 00000000000..578776c5db3
--- /dev/null
+++ b/site/src/examples/spinner/Medium.tsx
@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { Spinner } from "@salt-ds/core";
+
+export const Medium = (): ReactElement => (
+
+);
diff --git a/site/src/examples/spinner/SizeDefault.tsx b/site/src/examples/spinner/SizeDefault.tsx
deleted file mode 100644
index c264bffdaf0..00000000000
--- a/site/src/examples/spinner/SizeDefault.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ReactElement } from "react";
-import { Spinner } from "@salt-ds/core";
-
-export const SizeDefault = (): ReactElement => (
-
-);
diff --git a/site/src/examples/spinner/Small.tsx b/site/src/examples/spinner/Small.tsx
new file mode 100644
index 00000000000..668d07e4e95
--- /dev/null
+++ b/site/src/examples/spinner/Small.tsx
@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { Spinner } from "@salt-ds/core";
+
+export const Small = (): ReactElement => (
+
+);
diff --git a/site/src/examples/spinner/index.ts b/site/src/examples/spinner/index.ts
index b3bd9afdf5b..4a86f9f3726 100644
--- a/site/src/examples/spinner/index.ts
+++ b/site/src/examples/spinner/index.ts
@@ -1,4 +1,5 @@
-export * from "./SizeDefault";
-export * from "./SizeLarge";
+export * from "./Small";
+export * from "./Medium";
+export * from "./Large";
export * from "./Loading";
export * from "./LoadingPartial";