fix(spinner): cater global spinner variant #5948

wingkwong · 2025-11-26T06:14:57Z

Closes #5939

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

New Features
- Spinners now support global variant configuration through HeroUIProvider, enabling consistent styling across your application without repeating variant props.
- Individual spinner variants can override the global setting when explicitly specified for component-level customization.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

changeset-bot · 2025-11-26T06:15:02Z

🦋 Changeset detected

Latest commit: ab0f06f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@heroui/spinner	Patch
@heroui/button	Patch
@heroui/select	Patch
@heroui/toast	Patch
@heroui/react	Patch
@heroui/alert	Patch
@heroui/autocomplete	Patch
@heroui/calendar	Patch
@heroui/date-picker	Patch
@heroui/dropdown	Patch
@heroui/number-input	Patch
@heroui/popover	Patch
@heroui/snippet	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-11-26T06:15:03Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 26, 2025 6:16am
heroui-sb	Ready	Preview	Comment	Nov 26, 2025 6:16am

coderabbitai · 2025-11-26T06:15:08Z

Walkthrough

A changeset file, test cases, and hook modification address a bug where HeroUIProvider's spinnerVariant setting was not being applied to Spinner components. The useSpinner hook now includes variant in its dependency array and spreads variantProps alongside variant to enable proper variant resolution.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/perfect-toes-cry.md`	Added patch release changeset for `@heroui/spinner` to support global spinner variant configuration.
Tests `packages/components/spinner/__tests__/spinner.test.tsx`	Added two test cases verifying that Spinner adopts the global `spinnerVariant` from HeroUIProvider when no variant prop is defined, and respects explicit variant props when provided.
Hook Implementation `packages/components/spinner/src/use-spinner.ts`	Modified useSpinner to spread `variantProps` together with `variant` in the memoized invocation and added both `objectToDeps(variantProps)` and `variant` to dependency array for proper slot recomputation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Hook logic change is focused but requires verification of dependency array correctness
Tests are straightforward validations of the fix
Consider confirming that the dependency tracking properly captures all variant changes needed for slot updates

Suggested reviewers

jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete; only the issue number is filled in while all content sections (Description, Current behavior, New behavior, Breaking change, Additional Information) are empty.	Complete the description template by adding content to Description, Current behavior, New behavior, and Breaking change sections to explain the bug fix.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly describes the main change: fixing the spinner component to support the global spinnerVariant from HeroUIProvider.
Linked Issues check	✅ Passed	The PR changes address the linked issue #5939 by implementing global spinnerVariant support in the Spinner component through variant props handling and provider integration.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the HeroUIProvider spinnerVariant inheritance issue; no out-of-scope modifications were introduced.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/issue-5939

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce0c298 and ab0f06f.

📒 Files selected for processing (3)

.changeset/perfect-toes-cry.md (1 hunks)
packages/components/spinner/__tests__/spinner.test.tsx (2 hunks)
packages/components/spinner/src/use-spinner.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-25T17:08:46.283Z

Learnt from: adbjo
Repo: heroui-inc/heroui PR: 5846
File: packages/components/tabs/src/tabs.tsx:156-157
Timestamp: 2025-10-25T17:08:46.283Z
Learning: In packages/components/tabs/src/tabs.tsx, the renderTabs useMemo dependency array intentionally includes `variant` and `isVertical` to prevent potential side-effects, even though they might appear redundant based on static analysis.

Applied to files:

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

🧬 Code graph analysis (1)

packages/components/spinner/src/use-spinner.ts (3)

packages/core/system-rsc/src/extend-variants.js (1)

slots (107-107)

packages/core/theme/src/components/spinner.ts (1)

spinner (319-319)

packages/utilities/shared-utils/src/common/functions.ts (1)

objectToDeps (149-159)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: TypeScript
GitHub Check: ESLint
GitHub Check: Build
GitHub Check: Continuous Release

🔇 Additional comments (5)

.changeset/perfect-toes-cry.md (1)

1-5: LGTM! Changeset follows conventions.

The changeset correctly specifies a patch release for the spinner component with a clear reference to the issue being fixed.

packages/components/spinner/src/use-spinner.ts (1)

48-51: LGTM! Proper fix for global variant propagation.

The changes correctly address the issue:

Spreading variant alongside variantProps ensures the resolved variant (from props or global context) is passed to the spinner function

Including variant in the dependency array ensures re-computation when the global spinnerVariant changes

The spread order {...variantProps, variant} correctly prioritizes the resolved variant over any variant in variantProps

Based on learnings, including variant in the dependency array is an intentional pattern used in similar components to prevent side-effects.

packages/components/spinner/__tests__/spinner.test.tsx (3)

3-3: LGTM! Required import for global variant testing.

The HeroUIProvider import is necessary for testing the global spinnerVariant behavior.

45-53: LGTM! Test correctly verifies global variant inheritance.

The test properly validates that a Spinner without an explicit variant prop adopts the spinnerVariant from HeroUIProvider. The class selector approach is reasonable for this scenario.

55-63: LGTM! Test correctly verifies local variant override.

The test properly validates that an explicit variant prop on Spinner takes precedence over the global spinnerVariant from HeroUIProvider. Together with the previous test, these cases comprehensively cover the global variant behavior.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-11-26T06:21:02Z

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5948

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5948

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5948

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5948

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5948

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5948

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5948

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5948

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5948

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5948

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5948

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5948

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5948

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5948

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5948

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5948

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5948

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5948

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5948

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5948

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5948

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5948

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5948

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5948

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5948

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5948

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5948

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5948

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5948

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5948

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5948

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5948

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5948

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5948

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5948

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5948

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5948

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5948

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5948

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5948

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5948

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5948

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5948

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5948

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5948

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5948

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5948

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5948

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5948

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5948

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5948

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5948

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5948

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5948

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5948

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5948

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5948

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5948

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5948

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5948

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5948

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5948

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5948

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5948

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5948

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5948

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5948

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5948

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5948

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5948

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5948

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5948

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5948

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5948

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5948

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5948

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5948

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5948

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5948

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5948

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5948

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5948

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5948

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5948

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5948

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5948

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5948

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5948

commit: ab0f06f

wingkwong added 3 commits November 26, 2025 14:11

fix(spinner): cater global spinner variant

dd526ad

feat(spinner): add spinner test cases

bd6433f

chore(changeset): add changeset

ab0f06f

wingkwong added this to the v2.8.6 milestone Nov 26, 2025

wingkwong requested a review from jrgarciadev as a code owner November 26, 2025 06:14

vercel bot deployed to Preview – heroui-sb November 26, 2025 06:16 View deployment

vercel bot deployed to Preview – heroui November 26, 2025 06:16 View deployment

wingkwong merged commit 0825f88 into canary Nov 26, 2025
10 checks passed

wingkwong deleted the fix/issue-5939 branch November 26, 2025 08:46

github-actions bot mentioned this pull request Nov 26, 2025

ci(changesets): 📦 version packages #5820

Merged

wingkwong restored the fix/issue-5939 branch November 27, 2025 03:29

github-actions bot mentioned this pull request Nov 29, 2025

ci(changesets): 📦 release packages (alpha) vezham/heroui-v2#4

Merged

wingkwong deleted the fix/issue-5939 branch December 12, 2025 13:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(spinner): cater global spinner variant #5948

fix(spinner): cater global spinner variant #5948

Uh oh!

wingkwong commented Nov 26, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Nov 26, 2025

Uh oh!

vercel bot commented Nov 26, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 26, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(spinner): cater global spinner variant #5948

fix(spinner): cater global spinner variant #5948

Uh oh!

Conversation

wingkwong commented Nov 26, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Nov 26, 2025

🦋 Changeset detected

Uh oh!

vercel bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

wingkwong commented Nov 26, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Nov 26, 2025 •

edited

Loading

coderabbitai bot commented Nov 26, 2025 •

edited

Loading