attribute chips: fix exclusion-group width stretch + add group boundary (#742, #743) - #749
Merged
Merged
Conversation
…ry (#742, #743) An exclusion-group chip (Border Color / Frame Style) rendered at the panel's full column width once its row switched to flex-direction: column - the flex default align-items: stretch stretched every chip with no definite cross-size to that width, stranding the Yes/No buttons far from their label. ChipGroup now sets width: fit-content, which is immune to that stretch regardless of which axis the ancestor row runs on. BORDER_COLOR_GROUP and FRAME_STYLE_GROUP are independent axes, but nothing rendered their existing label field - the two groups' rows ran together as one unlabelled list, so a collapse that correctly affects only one group's siblings read as a bug. Each group now renders its label as a heading, with a divider between them in the flat-stack layout. Collapse behaviour (which chips dim/hide) is unchanged.
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
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
Border, Future Frame) rendered at the panel's full column width - measured
494px on an 800px viewport, ~1170px at 1600px - with the Yes/No controls
stranded far from their label. Root cause confirmed live in a real browser:
once the chip's row switches to
flex-direction: column, the flex spec'sdefault
align-items: stretchstretches any child with no definitecross-size to the column's full width.
ChipGroupnow setswidth: fit-content, which is immune to that stretch regardless of whichaxis the ancestor row happens to run on - a one-line fix that doesn't
require touching the existing breakpoint.
BORDER_COLOR_GROUPandFRAME_STYLE_GROUPare independentaxes, but nothing rendered their existing
labelfield - the two groups'chip rows ran together as one unlabelled list, so a correct half-collapse
(one group's siblings dimming, the other untouched) read as a bug. Each
group now renders its
labelas a heading, plus a divider between them inthe flat-stack (Level 2) layout - the ring layout keeps them apart
spatially already, so it doesn't need one.
docs/proposals/mockups/wtc-rebuild/SPEC-wtc-rebuild.md(A14) torecord both fixes, following the file's existing amendment format.
Collapse behaviour (which chips dim or hide when a sibling is selected) is
unchanged - only its legibility was at fault.
Test plan
npm test- 73 suites / 676 tests passednpx playwright test- 345 passed, 6 skipped (pre-existing flakes,unrelated to this change), 0 failed
npm run build- compiled successfullypython3 .github/scripts/coverage_delta.py --base origin/master- cleanafter: exclusion-group chip width at 800px went from 468px (stretched
to the panel) to 162px (content-sized, matching the standalone chips'
density); at 1600px from 1164px to 162px; at 390px it was already
162px both before and after (below the
576pxbreakpoint thattriggers the stretch)
bounding box at 390px, 800px, and 1600px
collapse-siblings-not-vote test still passes unchanged