fix(tabs): scope secondary variant CSS to prevent leaking into nested Tabs#6384
Merged
jrgarciadev merged 2 commits intoApr 17, 2026
Merged
Conversation
… Tabs The secondary variant styles used descendant selectors (e.g. .tabs--secondary .tabs__tab) which leaked into nested Tabs components with a different variant, because inner elements are still descendants of the outer .tabs--secondary. Fixed by scoping all secondary variant selectors through the direct child > .tabs__list-container, which correctly stops at the Tabs component boundary. Nested Tabs have their own .tabs__list-container that is NOT a direct child of the outer .tabs--secondary. Closes heroui-inc#6381
|
@Gdhanush-13 is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
commit: |
wingkwong
approved these changes
Apr 12, 2026
jrgarciadev
added a commit
that referenced
this pull request
Apr 17, 2026
* chore(deps): React Aria Upgrade (v1.17.0) (#6433) * chore(deps): bump react-aria versions * fix(toast): align ToastRegion queue with stately ToastQueue types * refactor(react): apply subpaths to RAC * feat(table): introduce Expandable Rows * fix(tabs): scope secondary variant CSS to prevent leaking into nested Tabs (#6384) * fix(tabs): scope secondary variant CSS to prevent leaking into nested Tabs The secondary variant styles used descendant selectors (e.g. .tabs--secondary .tabs__tab) which leaked into nested Tabs components with a different variant, because inner elements are still descendants of the outer .tabs--secondary. Fixed by scoping all secondary variant selectors through the direct child > .tabs__list-container, which correctly stops at the Tabs component boundary. Nested Tabs have their own .tabs__list-container that is NOT a direct child of the outer .tabs--secondary. Closes #6381 * chore(styles): remove comment --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> * feat(hooks): add use-theme hook (#6426) * feat(hooks): add use-theme hook * feat(hooks): revise use-theme logic * chore(docs): add dark mode section and include use-theme example * fix(hooks): check custom theme before removing * refactor(hooks): simplify useTheme to accept any theme name string Remove ThemeProps constant and allow passing plain strings ("light", "dark", "brutalism-light", etc.) directly to useTheme. Made-with: Cursor --------- Co-authored-by: Junior <jrgarciadev@gmail.com> * feat: dom polymorphic utility and render-prop element customization (#6403) * feat(utils): add dom polymorphic utility * feat(card): enable render-prop element customization for card * feat(card): enable render-prop element customization for card * chore(react): export dom utility * feat(alert): enable render-prop element customization * feat(badge): enable render-prop element customization * feat(chip): enable render-prop element customization * feat(empty-state): enable render-prop element customization * feat(fieldset): enable render-prop element customization * feat(kbd): enable render-prop element customization * feat(pagination): enable render-prop element customization * feat(skeleton): enable render-prop element customization * feat(spinner): enable render-prop element customization * feat(switch-group): enable render-prop element customization * feat(table): enable render-prop element customization * feat(react): enable render-prop element customization * chore(utils): add use client * fix(calendar-year-picker): type issue * chore(docs): add heroui's render prop in composition * docs(native): add v1.0.2 release notes and update component API references (#6429) * docs(native): update radio-group doc file with radio api ref * docs(native): update portal ref with unstable_accessibilityContainerViewIsModal * docs(native): update overlay portal api ref * docs(native): add 1.0.2 release note * fix(docs): broken link in migration guide (#6440) * fix(utils): remove unexpected DOM element warning from render prop Made-with: Cursor * Revert "Merge remote-tracking branch 'origin/v3' into feat/HHTA-580" This reverts commit 8f68adb, reversing changes made to 226d179. --------- Co-authored-by: Volodymyr Serbulenko <115154506+vvv-sss@users.noreply.github.com> Co-authored-by: Stybo <84643947+Stybo@users.noreply.github.com> Co-authored-by: Junior <jrgarciadev@gmail.com> * feat(docs): v3.0.3 release note (#6435) * feat(docs): add v3.0.3 meta * feat(docs): add v3.0.3 synopsis * feat(docs): add v3.0.3 release note (draft) * docs(releases): remove NumberField PR #6417 from v3.0.3 release notes Made-with: Cursor --------- Co-authored-by: Junior <jrgarciadev@gmail.com> * fix: restore files reverted by squash merge from feat/HHTA-580 The squash merge in #6403 included an accidental revert of the v3 merge, which undid the Apache License, Codex MCP examples, and other docs changes. This restores all affected files to match v3. Made-with: Cursor * docs(releases): update useTheme example to use plain strings Made-with: Cursor * docs(releases): use Button component in useTheme example Made-with: Cursor * chore(docs): update pull id (#6442) * docs(releases): mention Apache 2.0 license change in v3.0.3 notes Made-with: Cursor * docs(home): update hero badge to v3.0.3 release Made-with: Cursor * docs(releases): revise v3.0.3 notes and hero badge - Highlight RAC 1.17 with 90% fewer deps in badge and intro - Split expandable rows into its own section with demo - Link RAC release notes in dependencies - Remove stale NumberField references Made-with: Cursor * docs(home): fix spacing in hero badge title Made-with: Cursor * docs(home): capitalize Table in hero badge title Made-with: Cursor --------- Co-authored-by: WK <wingkwong.code@gmail.com> Co-authored-by: Dhanush <122294583+Gdhanush-13@users.noreply.github.com> Co-authored-by: Volodymyr Serbulenko <115154506+vvv-sss@users.noreply.github.com> Co-authored-by: Stybo <84643947+Stybo@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Fixes #6381
Problem
The secondary variant styles use descendant selectors (e.g.
.tabs--secondary .tabs__tab) which leak into nestedTabscomponents that use a different variant. When a primaryTabsis nested inside a secondaryTabs, the inner tabs incorrectly inherit the secondary (underline) styling because their elements are still DOM descendants of the outer.tabs--secondary.Root Cause
CSS descendant selectors in
.tabs--secondarymatch ALL nested.tabs__tab,.tabs__list,.tabs__indicator, etc. elements regardless of whichTabsinstance they belong to.Fix
Scoped all secondary variant selectors through the direct child
> .tabs__list-container. This correctly stops at the Tabs component boundary because nestedTabshave their own.tabs__list-containerthat is NOT a direct child of the outer.tabs--secondary.Before:
.tabs--secondary .tabs__list { ... }After:
.tabs--secondary > .tabs__list-container > .tabs__list { ... }This is a CSS-only fix (9 insertions, 6 deletions in
tabs.css).