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