fix(spinner): cater global spinner variant (#5948)

* fix(spinner): cater global spinner variant

* feat(spinner): add spinner test cases

* chore(changeset): add changeset

Author: wingkwong

.changeset/perfect-toes-cry.md

@@ -0,0 +1,5 @@
+---
+"@heroui/spinner": patch
+---
+
+cater global spinner variant (#5939)

packages/components/spinner/__tests__/spinner.test.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
+import {HeroUIProvider} from "@heroui/system";
 
 import {Spinner} from "../src";
 
@@ -40,4 +41,24 @@ describe("Spinner", () => {
 
     expect(getByLabelText("Custom label")).toBeInTheDocument();
   });
+
+  it("should use global spinner variant if variant is not defined", () => {
+    const {container} = render(
+      <HeroUIProvider spinnerVariant="gradient">
+        <Spinner aria-label="Custom label" />
+      </HeroUIProvider>,
+    );
+
+    expect(container.querySelector("[class*='gradient']")).toBeInTheDocument();
+  });
+
+  it("should not use global spinner variant if variant is defined", () => {
+    const {container} = render(
+      <HeroUIProvider spinnerVariant="gradient">
+        <Spinner aria-label="Custom label" variant="default" />
+      </HeroUIProvider>,
+    );
+
+    expect(container.querySelector("[class*='gradient']")).not.toBeInTheDocument();
+  });
 });

packages/components/spinner/src/use-spinner.ts

@@ -45,7 +45,10 @@ export function useSpinner(originalProps: UseSpinnerProps) {
 
   const {children, className, classNames, label: labelProp, ...otherProps} = props;
 
-  const slots = useMemo(() => spinner({...variantProps}), [objectToDeps(variantProps)]);
+  const slots = useMemo(
+    () => spinner({...variantProps, variant}),
+    [objectToDeps(variantProps), variant],
+  );
 
   const baseStyles = clsx(classNames?.base, className);