Open
Conversation
… into swc-1873/button
… into swc-1873/button
… Button global styles (#6227)
… into swc-1873/button
… into swc-1873/button
5t3ph
added
Component:Button
🦋 Changeset detectedLatest commit: 90022c3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 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 |
Contributor
📚 Branch Preview Links🔍 First Generation 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 |
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
3 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.
Note to reviewers: This is the feature-branch merge. All individual phases were reviewed in separate, smaller PRs. This description provides the high-level summary; the migration plan has the full rationale and decision log.
The individual phase PRs (#6176, #6177, #6209, #6226, #6227, #6236, #6246) contain the detailed implementation history.
Description
Completes the 2nd-gen migration of
sp-buttontoswc-button. The new component:<button>as the semantic control (host carries no button role or tab stop)core/swcsplit —ButtonBaseincoreowns accessible-name resolution, pending-label behavior, and attribute-forwarding logic so future button-like components (ActionButton,ClearButton, etc.) can reuse the semantic contract without inheritingswc-button's DOM or stylingvite-global-elements-css) that auto-generatesglobal-button.cssfrombutton.csson every dev/build run, eliminating drift between the component and global-element stylingBreaking API changes (from 1st-gen)
treatment="fill|outline"fill-style="fill|outline"label(accessible name)accessible-labelno-wraptruncatequiet(outline alias)fill-style="outline"href,target,download, etc.<a>with global button stylesvariantaliases (cta,overBackground,white,black)See consumer-migration-guide.mdx for migration paths.
Deferred follow-up tickets
submit/resetfocus/blurcompatibility paritygenaiandpremiumvariantsMotivation and context
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Smoke test the Storybook overview
variant="primary"and all Storybook controls respond correctlyVariants and fill styles
accentandnegativehave no outline option (controls absent or disabled)primaryandsecondaryrender correctly in both fill and outlineStatic color
static-color="white"outline button is displayed on a sufficiently dark background (SWC-1139)Pending state
Truncation
Justified
Global button styles
<a>and<button>elements styled with.swc-Buttonclasses matchswc-buttonvisually for shared combinationsDevice review
Accessibility testing checklist
Keyboard (required — document steps below)
Tabto "Save document" → Expect: button receives focus, focus ring is visibleTabto the icon-only "Add item" button → Expect: focus lands on the button; screen reader announces "Add item, button"Tabto the pending "Upload in-progress" button → Expect: button is included in tab order (not skipped); focus ring visibleEnterorSpaceon the pending button → Expect: no activation; button stays focusedTabthrough buttons → Expect: "Disabled" button is skipped; "Default" and "Pending" receive focusScreen reader (required — document steps below)
swc-buttonhost is NOT announced as a separate buttonpending-labelvalueWindows High Contrast (SWC-459)
Reduced motion
prefers-reduced-motion: reduce→ View the States or Pending story with pending toggle active → Wait 1 second → Expect: spinner is visible but animation is slowed per the preference