Skip to content

attribute chips: fix exclusion-group width stretch + add group boundary (#742, #743) - #749

Merged
WilfordGrimley merged 1 commit into
masterfrom
fix-chip-panel-layout
Aug 6, 2026
Merged

attribute chips: fix exclusion-group width stretch + add group boundary (#742, #743)#749
WilfordGrimley merged 1 commit into
masterfrom
fix-chip-panel-layout

Conversation

@WilfordGrimley

Copy link
Copy Markdown

Summary

  • Fixes What's That: exclusion-group chip rows stretch to the full panel width, with the Yes/No controls stranded at the far right #742: an exclusion-group chip (Black/White/Silver Border, Old/Modern
    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's
    default align-items: stretch stretches any child with no definite
    cross-size to the column's full width. ChipGroup now sets
    width: fit-content, which is immune to that stretch regardless of which
    axis the ancestor row happens to run on - a one-line fix that doesn't
    require touching the existing breakpoint.
  • Fixes What's That: the attribute chip panel renders two independent exclusion groups as one unlabelled list #743: BORDER_COLOR_GROUP and FRAME_STYLE_GROUP are independent
    axes, but nothing rendered their existing label field - 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 label as a heading, plus a divider between them in
    the flat-stack (Level 2) layout - the ring layout keeps them apart
    spatially already, so it doesn't need one.
  • Amends docs/proposals/mockups/wtc-rebuild/SPEC-wtc-rebuild.md (A14) to
    record 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 passed
  • npx playwright test - 345 passed, 6 skipped (pre-existing flakes,
    unrelated to this change), 0 failed
  • npm run build - compiled successfully
  • python3 .github/scripts/coverage_delta.py --base origin/master - clean
  • Measured live in a real browser (Chromium, via Playwright) before and
    after: 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 576px breakpoint that
    triggers the stretch)
  • Confirmed the chip panel never intersects the pinned reference card's
    bounding box at 390px, 800px, and 1600px
  • Confirmed "Border Color" / "Frame Style" headings render and the
    collapse-siblings-not-vote test still passes unchanged

…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.
@WilfordGrimley
WilfordGrimley merged commit 00c802f into master Aug 6, 2026
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant