Spinner Doc Updates (#2609)

.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.

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(<Spinner />);
-    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(<Spinner size="default" />);
+    cy.findByRole("img").should("have.class", "saltSpinner-medium");
   });
 
   it("THEN should show a large spinner on the screen", () => {

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);

packages/core/src/spinner/Spinner.tsx

@@ -13,11 +13,23 @@ import { useDensity } from "../salt-provider";
  * Spinner component, provides an indeterminate loading indicator
  *
  * @example
- * <Spinner size="default | "large" | "small" />
+ * <Spinner size="small" | "medium" | "large" />
  */
 
-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<SpinnerSize, "default">;
+
+const handleSize = (size: SpinnerSize): SpinnerSVGSize =>
+  size === "default" ? "medium" : size;
+
 const withBaseName = makePrefixer("saltSpinner");
 
 export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
@@ -46,7 +58,7 @@ export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
    */
   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<HTMLDivElement, SpinnerProps>(
       disableAnnouncer,
       role = "img",
       className,
-      size = "default",
+      size = "medium",
       id: idProp,
       ...rest
     },
@@ -82,6 +94,7 @@ export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
     const { announce } = useAriaAnnouncer();
 
     const density = useDensity();
+    size = handleSize(size);
 
     useEffect(() => {
       if (disableAnnouncer) return;

packages/core/src/spinner/svgSpinners/SpinnerSVG.tsx

@@ -1,19 +1,25 @@
 import { SVGAttributes } from "react";
 import { makePrefixer } from "../../utils";
-import { SpinnerSize } from "../Spinner";
+import { SpinnerSVGSize } from "../Spinner";
 import { Density } from "../../theme";
 
 const withBaseName = makePrefixer("saltSpinner");
 
 interface SpinnerProps {
   id?: string;
   rest?: Omit<SVGAttributes<SVGSVGElement>, "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 = ({

site/docs/components/spinner/examples.mdx

@@ -8,18 +8,28 @@ data:
 ---
 
 <LivePreviewControls>
-  <LivePreview componentName="spinner" exampleName="SizeDefault" >
+    <LivePreview componentName="spinner" exampleName="Small" >
 
-    ### 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"`.
 
   </LivePreview>
-  <LivePreview componentName="spinner" exampleName="SizeLarge" >
+    <LivePreview componentName="spinner" exampleName="Medium" >
 
-    ### 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`.
+
+  </LivePreview>
+
+    <LivePreview componentName="spinner" exampleName="Large" >
+
+    ### Large
 
     The large spinner is useful for full screen loading experiences.
 

site/src/examples/spinner/SizeLarge.tsx → 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 => (
   <Spinner aria-label="loading" role="status" size="large" />
 );

site/src/examples/spinner/Medium.tsx

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { Spinner } from "@salt-ds/core";
+
+export const Medium = (): ReactElement => (
+  <Spinner aria-label="loading" role="status" size="medium" />
+);

site/src/examples/spinner/Small.tsx

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { Spinner } from "@salt-ds/core";
+
+export const Small = (): ReactElement => (
+  <Spinner aria-label="loading" role="status" size="small" />
+);

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";