Skip to content

refactor(badge,statuslight,sized-mixin): reorganize types and remove S2 suffix from exports#6096

Closed
Rajdeepc wants to merge 2 commits intomainfrom
rajdeepc/refactor-badge-statuslight-types-sized-mixin
Closed

refactor(badge,statuslight,sized-mixin): reorganize types and remove S2 suffix from exports#6096
Rajdeepc wants to merge 2 commits intomainfrom
rajdeepc/refactor-badge-statuslight-types-sized-mixin

Conversation

@Rajdeepc
Copy link
Copy Markdown
Contributor

@Rajdeepc Rajdeepc commented Mar 19, 2026

Summary

  • Badge types: Reorganize into SHARED/S1-ONLY/CANONICAL sections. Remove S2 suffix from canonical exports (BADGE_VARIANTS_S2 -> BADGE_VARIANTS, BADGE_VARIANTS_COLOR_S2 -> BADGE_VARIANTS_COLOR, etc.) since 2nd-gen is the forward-looking default
  • Sized mixin: Replace ElementSizes record with ELEMENT_SIZES and DEFAULT_ELEMENT_SIZES const arrays, enabling as const satisfies type-safe patterns. Old ElementSizes re-exported from @spectrum-web-components/base as deprecated alias
  • Code quality: Asset uses when directive + swc- CSS class prefix; Divider uses styles getter; ProgressCircle uses consistent styles naming; StatusLight gets @todo annotations

Motivation

The S2 suffix in type exports (BADGE_VARIANTS_S2, BadgeVariantS2, etc.) creates a naming dependency that will require a breaking change to remove later. By making the canonical (unsuffixed) names the 2nd-gen default now, we avoid that future breaking change. S1-specific subsets remain with the _S1 suffix and can be cleanly deleted when 1st-gen is retired.

The sized mixin refactoring from Record<string, ElementSize> to as const arrays enables better IDE autocomplete and compile-time validation throughout the codebase.

Related

Test plan

  • Badge stories render correctly with renamed exports
  • Badge tests pass with updated type references
  • 1st-gen components still compile using deprecated ElementSizes alias
  • Asset renders file/folder/slot variants correctly with when directive
  • Divider and ProgressCircle render without regressions

…S2 suffix from exports

Reorganize Badge types into SHARED/S1-ONLY/CANONICAL sections for a
clearer future S1 removal path. Remove the `S2` suffix from all
canonical exports since 2nd-gen is the forward-looking default:

  - BADGE_VARIANTS_S2 -> BADGE_VARIANTS
  - BADGE_VARIANTS_COLOR_S2 -> BADGE_VARIANTS_COLOR
  - BadgeVariantS2 -> BadgeVariant
  - BadgeColorVariantS2 -> BadgeColorVariant

Replace the `ElementSizes` record in sized-mixin with `ELEMENT_SIZES`
and `DEFAULT_ELEMENT_SIZES` const arrays, enabling `as const satisfies`
patterns. The old `ElementSizes` record is re-exported from
@spectrum-web-components/base as a deprecated alias to avoid breaking
1st-gen consumers.

Additional code quality updates aligned with style guide conventions:
- Asset: use `when` directive, rename CSS classes from spectrum- to swc-
- Divider: convert styles property to getter
- ProgressCircle: rename progressCircleStyles to styles
- StatusLight: add @todo annotations, fix satisfies syntax
- Badge base: add @todo comments for mixin composition review

Made-with: Cursor
@Rajdeepc Rajdeepc requested a review from a team as a code owner March 19, 2026 15:47
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 19, 2026

🦋 Changeset detected

Latest commit: 8d84feb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 85 packages
Name Type
@spectrum-web-components/core Minor
@adobe/spectrum-wc Minor
@spectrum-web-components/base Patch
@spectrum-web-components/alert-banner Patch
@spectrum-web-components/asset Patch
@spectrum-web-components/badge Patch
@spectrum-web-components/divider Patch
@spectrum-web-components/progress-circle Patch
@spectrum-web-components/status-light Patch
@spectrum-web-components/reactive-controllers Patch
@spectrum-web-components/shared Patch
@spectrum-web-components/theme Patch
@spectrum-web-components/accordion Patch
@spectrum-web-components/action-bar Patch
@spectrum-web-components/action-button Patch
@spectrum-web-components/action-group Patch
@spectrum-web-components/action-menu Patch
@spectrum-web-components/alert-dialog Patch
@spectrum-web-components/avatar Patch
@spectrum-web-components/breadcrumbs Patch
@spectrum-web-components/button-group Patch
@spectrum-web-components/button Patch
@spectrum-web-components/card Patch
@spectrum-web-components/checkbox Patch
@spectrum-web-components/clear-button Patch
@spectrum-web-components/close-button Patch
@spectrum-web-components/coachmark Patch
@spectrum-web-components/color-area Patch
@spectrum-web-components/color-field Patch
@spectrum-web-components/color-handle Patch
@spectrum-web-components/color-loupe Patch
@spectrum-web-components/color-slider Patch
@spectrum-web-components/color-wheel Patch
@spectrum-web-components/combobox Patch
@spectrum-web-components/contextual-help Patch
@spectrum-web-components/dialog Patch
@spectrum-web-components/dropzone Patch
@spectrum-web-components/field-group Patch
@spectrum-web-components/field-label Patch
@spectrum-web-components/help-text Patch
@spectrum-web-components/icon Patch
@spectrum-web-components/icons-ui Patch
@spectrum-web-components/icons-workflow Patch
@spectrum-web-components/icons Patch
@spectrum-web-components/iconset Patch
@spectrum-web-components/illustrated-message Patch
@spectrum-web-components/infield-button Patch
@spectrum-web-components/link Patch
@spectrum-web-components/menu Patch
@spectrum-web-components/meter Patch
@spectrum-web-components/modal Patch
@spectrum-web-components/number-field Patch
@spectrum-web-components/overlay Patch
@spectrum-web-components/picker-button Patch
@spectrum-web-components/picker Patch
@spectrum-web-components/popover Patch
@spectrum-web-components/progress-bar Patch
@spectrum-web-components/radio Patch
@spectrum-web-components/search Patch
@spectrum-web-components/sidenav Patch
@spectrum-web-components/slider Patch
@spectrum-web-components/split-view Patch
@spectrum-web-components/swatch Patch
@spectrum-web-components/switch Patch
@spectrum-web-components/table Patch
@spectrum-web-components/tabs Patch
@spectrum-web-components/tags Patch
@spectrum-web-components/textfield Patch
@spectrum-web-components/thumbnail Patch
@spectrum-web-components/toast Patch
@spectrum-web-components/tooltip Patch
@spectrum-web-components/top-nav Patch
@spectrum-web-components/tray Patch
@spectrum-web-components/underlay Patch
@spectrum-web-components/custom-vars-viewer Patch
@spectrum-web-components/story-decorator Patch
@spectrum-web-components/vrt-compare Patch
@spectrum-web-components/bundle Patch
@spectrum-web-components/grid Patch
@spectrum-web-components/opacity-checkerboard Patch
@spectrum-web-components/styles Patch
@spectrum-web-components/truncated Patch
documentation Patch
@spectrum-web-components/eslint-plugin Patch
@spectrum-web-components/stylelint-header-plugin Patch

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
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 19, 2026

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When 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: pr-6096

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@caseyisonit caseyisonit self-assigned this Mar 23, 2026
@caseyisonit caseyisonit added Status:Ready for review PR ready for review or re-review. High priority PR review PR is a high priority and should be reviewed ASAP labels Mar 23, 2026
@caseyisonit caseyisonit changed the base branch from main to caseyisonit/typescript-guide March 23, 2026 23:13
@caseyisonit caseyisonit changed the base branch from caseyisonit/typescript-guide to main March 23, 2026 23:14
@caseyisonit
Copy link
Copy Markdown
Contributor

closing this in favor of the original PR as feedback was not addressed before splitting

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High priority PR review PR is a high priority and should be reviewed ASAP Status:Ready for review PR ready for review or re-review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants