feat(actiongroup): full fidelity styles#6484
Draft
rise-erpelding wants to merge 23 commits into
Draft
Conversation
🦋 Changeset detectedLatest commit: 647ca0c The changes in this PR will be included in the next version bump. This PR includes changesets to release 85 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| display: inline-flex; | ||
| position: relative; | ||
| inline-size: 100%; | ||
| gap: var(--swc-action-button-gap, token("base-gap-medium")); |
Contributor
There was a problem hiding this comment.
🚫 [stylelint] <order/properties-order> reported by reviewdog 🐶
Expected "gap" to come before "inline-size"
rise-erpelding
changed the base branch from
main
to
swc-2212/migrate-action-group
Contributor
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
Collaborator
Coverage Report for CI Build 28956788727Warning No base build found for commit Coverage: 96.262%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsRequires a base build to compare against. How to fix this → Coverage Stats
💛 - Coveralls |
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.
Description
Phase 5 (styling / full fidelity) of the
swc-action-groupmigration, per SWC-2216.action-group.stories.tsto full Phase 5 scope:Anatomy,Sizes,Orientations,Static colors,Disabled,Compact(horizontal and vertical shown side by side),Quiet(demonstrates the compact-join being disabled when both are set),Justified.action-group.css: Built out from the Phase 5 stub — flex layout with size-based gap (spacing-100default,spacing-75atxs/s, translated fromspectrum-two'sactiongroup/index.css);orientation="vertical"column stacking;justifiedequal-fill viaflex: 1 1 0%;compactborder-join implemented via a CSS custom-property cascade onto--swc-action-button-border-*-radius(interior corners zeroed per child position, outer corners left at the button's natural radius); compact has no effect whenquietis also set, matching 1st-gen. Focus-ring stacking in compact mode uses:focus-withinrather than:focus-visible—delegatesFocusretargets:focus/:focus-withinonto the custom-element host in Chromium but not:focus-visible, so the original:focus-visibleselector never matched and the z-index escalation was dead, letting a focused button's ring get covered by an adjacent button's border (resolves SWC-1342).ActionGroup.ts: Wrapped the slot in an internal.swc-ActionGroupelement per the migration plan's Phase 5 checklist; added the@cssprop --swc-action-group-gapdoc tag.action-button.css/ActionButton.ts(prerequisite, per migration plan): Exposed four logical corner-radius custom properties (--swc-action-button-border-{start-start,start-end,end-start,end-end}-radius), each falling back to the existing--swc-action-button-border-radius, so action-group's compact mode can override individual corners without hardcoding a size-specific token. Also addedinline-size: 100%to.swc-ActionButton— the shadow-DOM<button>was shrink-wrapping to its own content regardless of how wide an ancestor flex layout stretched the custom-element host, soverticalandvertical+compactaction groups rendered with visibly unequal button widths even though the (invisible) host boxes were already stretched correctly.Motivation and context
Implements SWC-2216 (Phase 5: styling) of the Action Group 2nd-gen migration epic (SWC-2212), translating the
spectrum-twoS2 source (components/actiongroup/index.css) into the 2nd-gen token-based CSS structure per the approved migration plan. This is the last functional gap before Phase 6 (testing) and Phase 7 (documentation) — API and accessibility semantics were completed in SWC-2215.Related issue(s)
sp-action-groupsets z-index on focused button, hiding focus indicator (resolved)Screenshots (if appropriate)
Compactstory: horizontal and vertical variants side by side, showing joined borders with outer-corner-only rounding.Orientations,Sizes,Static colors,Justifiedstories.Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Compact join renders with correct corner radii
Compactstory in the 2nd-gen Storybook (yarn storybookfrom2nd-gen/)Compact focus ring is never clipped by a neighbor
Compactstory, Tab into the horizontal group, then press → to move through each buttonVertical and vertical + compact groups have equal-width buttons
Orientationsstory and the vertical group in theCompactstory, compare button widths visually and via DevTools (getBoundingClientRect()on eachswc-action-button's inner<button>)Quiet disables the compact join
QuietstorycompactJustified fills the available width
JustifiedstoryStandalone and horizontal action-button usage is unaffected
Playground/Overviewstories in default (horizontal) orientationinline-size: 100%change on.swc-ActionButton— standalone buttons and horizontal groups still size to content, not to 100% of some ancestorDevice review
Accessibility testing checklist
Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).
Keyboard (required — document steps below) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.
Compactstory in 2nd-gen StorybookScreen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.
CompactandJustifiedstories with VoiceOver (macOS) or NVDA (Windows)