[SWC-1668] feat: migrate poc components to full-fidelity production#6122
Open
rise-erpelding wants to merge 37 commits intomainfrom
Open
[SWC-1668] feat: migrate poc components to full-fidelity production#6122rise-erpelding wants to merge 37 commits intomainfrom
rise-erpelding wants to merge 37 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: a236565 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 |
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 |
rise-erpelding
force-pushed
the
swc-1668/poc-components
branch
2 times, most recently
from
59b1cda to
2147d55
Compare
marissahuysentruyt
force-pushed
the
swc-1668/poc-components
branch
from
419e8bf to
5038447
Compare
8 tasks
rise-erpelding
force-pushed
the
swc-1668/poc-components
branch
from
a099390 to
06a2855
Compare
cdransf
force-pushed
the
swc-1668/poc-components
branch
from
e0d3061 to
b446021
Compare
caseyisonit
added
Status:WIP
rise-erpelding
commented
Apr 21, 2026
cdransf
force-pushed
the
swc-1668/poc-components
branch
from
d5935a6 to
f5ad47d
Compare
rise-erpelding
commented
Apr 23, 2026
rise-erpelding
commented
Apr 23, 2026
cdransf
force-pushed
the
swc-1668/poc-components
branch
2 times, most recently
from
68a9a2e to
dc14cef
Compare
rise-erpelding
commented
Apr 24, 2026
cdransf
reviewed
Apr 24, 2026
rise-erpelding
commented
Apr 24, 2026
cdransf
force-pushed
the
swc-1668/poc-components
branch
2 times, most recently
from
8a0c24d to
f8029c2
Compare
* chore(core): remove 1st-gen type references from 2nd-gen core * chore(badge): move properties to badge base * chore(badge): update badge todo * chore(status-light): restore removed comments * chore(status-light): remove doc block line in status light
* feat(progresscircle): ensure s2 visual fidelity
- Exports `ProgressCircleSize` type from core
- Adds `prefers-reduced-motion` CSS media query
- Adds `dashOffset` variable to ensure contrast at 0% progress
- Replaces hardcoded size templates with `PROGRESS_CIRCLE_VALID_SIZES.map()`
- Removes sizing antipattern in render
- Removes canvas WHCM track color
- Implements a11y improvements per migration analysis
Also includes minor cross-component cleanup:
- Renames `STATUSLIGHT_*` constants to `STATUS_LIGHT_*` convention
- Adds `{ type: String }` to `@property()` decorators in Asset and Icon base classes
- Fixes `customElements` path in swc package.json
- Tags icon internal stories as migrated
- Updates Storybook source type from auto to dynamic
- Minor avatar stories and status-light stories updates
fixes swc-1670
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * style(progress-circle): clean up code styles (#6146) * chore(storybook): review and complete storybook docs * fix(storybook): revert icon test change to debug test failures * fix(storybook): changes to align w/progress circle being set to indeterminate by default * fix(storybook): correct test failure caused by string mismatch * fix(storybook): correct test failures * fix(testing): correct failing tests in 2nd gen * fix(storybook): correct test failures * chore(storybook): address feedback * chore(storybook): address feedback --------- Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>
* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>
cdransf
force-pushed
the
swc-1668/poc-components
branch
from
e1cd323 to
371783d
Compare
25 tasks
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
5 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
Apply the standards and code quality patterns to Badge, Progress Circle, Status Light, and Divider components that were used to establish 2nd-gen POC. We will be disabling Asset from storybook until we can reach alignment with Design on a path forward for that pattern.
DOD for all 4 components:
Includes an a11y migration doc in the component project planning directory of CONTRIBUTOR-DOCS
Meets full s2 visual fidelity
Conform to the code style guides
Includes all necessary tests
includes complete documentation in storybook
Is fully accessible and aligns with a11y patterns
Establishes a starting migration guide in the component source directory
DOD for Asset:
Disable this component from Storybook until we align with design
Motivation and context
The branch started from early 2nd-gen POC implementations that predated a formal changeset and complete migration guidance. This PR consolidates and validates the cross-ticket work in one merge point so final review can confirm:
Related issue(s)
Issues & tasks in epic
maindocs: accessibility recommendation for proof of concept next-gen migration #6105)@todocomments that say things like "This can be moved to the base class once we are no longer maintaining 1st-gen" - it looks like only Badge has these comments, but there may be similar moveable logic in other components (chore(core): remove 1st-gen type references from 2nd-gen core #6168)Oustanding issues related to this work not addressed here
SWC-1891: S2 Progress-Circle: Spike/RFC to look into if we want default indeterminate vs value(addressed in feat(progresscircle): ensure s2 visual fidelity #6151)@todocomment would be addressed thereScreenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Validate each component's default behavior matches migration docs
badge,divider,progress-circle, andstatus-light.Validate API and styling migrations from 1st-gen
indeterminate,disabled,accent) are not required and that replacement behavior works.--swc-*styling hooks work and previous--mod-*hooks are no longer treated as public API.Validate accessibility semantics and naming expectations
progress-circlelabel and value semantics, and that non-interactive components do not create focus traps.Device 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)
badge,divider,progress-circle, andstatus-light.Screen reader (required — document steps below)
progress-circleannouncesprogressbarwith expected name/value in determinate mode and no value in indeterminate mode.