fix(design-system): toast/tooltip overlay stacking, button nowrap, code primary-alt#237
Merged
Merged
Conversation
Buttons squeezed inside flex rows shrank below their intrinsic width and wrapped their labels. ButtonBase now carries whitespace-nowrap and shrink-0, covering Button, ToggleButton, TabsButton, and SegmentedControlButton. The fullWidth variant re-enables shrink (via tailwind-merge last-wins) so multiple fullWidth buttons can still split a row without overflowing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Tooltip content carried a static z-50, which zag's popper mirrors into the portal positioner - below any nested drawer or dialog positioner (50 + layer * 20), so a tooltip hovered inside a nested overlay rendered underneath it. Unlike Select/DropdownMenu/Popover (fixed in 0ad1c21), tooltips never join zag's dismissable layer stack, so --layer-index is never set on the content and the layer-aware formula cannot apply. Tooltips instead get a dedicated top-tier --tooltip-z-index token (1000) that clears any realistic overlay stack. Adds a WithNestedDialog story plus an e2e stacking assertion via elementFromPoint (verified red -> green locally). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The toaster region forced !z-[50], which sat at or below drawer/dialog positioners (50 + layer * 20) and nested overlays (40 + layer * 20), so toasts fired while any drawer or dialog was open rendered underneath it. The region now uses a dedicated top-tier --toast-z-index token (900) - above any realistic overlay stack, below --tooltip-z-index (1000). The important flag stays to beat zag's inline zIndex on the region; raising it is safe because zag sets pointer-events: none while the region holds no toasts. Adds a WithNestedOverlays story (drawer -> nested dialog, both firing toasts) plus an e2e stacking assertion via polled elementFromPoint (verified red -> green locally for both the nested and non-nested case). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…enshots] Body checkbox cells of the auto-injected selection column move from py-4 to py-8; the header checkbox cell keeps py-4. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
This PR is included in version 0.77.3 |
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
Four independent fixes, one commit each:
ButtonBasenow carrieswhitespace-nowrapandshrink-0, so buttons no longer wrap their labels or get squeezed in flex rows. CoversButton,ToggleButton,TabsButton,SegmentedControlButton. ThefullWidthvariant re-enablesshrink(tailwind-merge last-wins) so multiple fullWidth buttons can still split a row.primary-altcolor variant forCode(text-text-primary-alt).--layer-indexformula can't apply; they get a dedicated top-tier--tooltip-z-indextoken (1000) instead.!z-[50]sat at/below positioners (50 + layer * 20); it now uses--toast-z-index(900) — above any realistic overlay stack, below tooltips. Safe to raise: zag setspointer-events: noneon the region while it holds no toasts.Test plan
WithNestedDialogstory (Tooltip) + e2e stacking assertion viaelementFromPoint— verified red → green locally.WithNestedOverlaysstory (Toast: drawer → nested dialog, both firing toasts) + polledelementFromPointe2e assertion for both the nested and non-nested case — verified red → green locally.[update-screenshots]needed.tsc --noEmitall pass locally.🤖 Generated with Claude Code