fix(Button): keep group border above highlighted buttons#651
Merged
Conversation
The Button.Group outline border (::before) and a highlighted button's --highlighted layer both used --rs-z-index-relative in the same stacking context, so the button — being later in DOM order — painted over the border. With a fully opaque highlight color this masked the group border (#649). Raise the group border and shadow pseudo-elements one level above the highlighted button so the border always renders on top, regardless of highlight color opacity. Added a "variant: outline, highlighted" case to the group story, including an opaque highlight override to guard the fix. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018QGUrWA93vCuPkGwTYsg55
size-limit report 📦
|
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
2 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.
Summary
The
Button.Groupoutline border (rendered via the group's::beforepseudo-element) and a highlighted button's--highlightedlayer both used--rs-z-index-relativewithin the same stacking context. Because the button comes later in DOM order, it painted over the border. When the highlight color is semi-transparent this goes unnoticed, but with a fully opaque highlight color (common when theming) the highlighted button masks the group border.The fix raises the group's border/shadow pseudo-elements (
::before/::after) one level above the highlighted button (calc(var(--rs-z-index-relative) + 1)), so the group border always renders on top regardless of highlight color opacity. The highlighted button still stays above its neighbouring buttons; only the thin group frame is lifted above it.Related Issue
Fixes #649
Screenshots / Recordings
Verified in Storybook (
Components/Button→group→ new "variant: outline, highlighted" example) using an opaque#d4d4d4highlight override. Border shown in red to make the stacking order unambiguous:Notes for Reviewers
Button.module.css; the highlighted button keeps--rs-z-index-relativeso its ordering relative to sibling buttons is unchanged.variant: outline, highlightedcase to thegroupstory, including a group that overrides--rs-color-background-neutral-highlighted-fadedto an opaque grey to guard against regressions.patch).🤖 Generated with Claude Code
https://claude.ai/code/session_018QGUrWA93vCuPkGwTYsg55
Generated by Claude Code