chore(close-button): add structure for s2 migration#6355
Conversation
Scaffold 2nd-gen close-button in core and swc: CloseButtonBase with static-color and sizing, minimal render and CSS, Storybook stories, and placeholder tests. Wire core package exports and mark Setup complete in the migration status table. Co-authored-by: Cursor <cursoragent@cursor.com>
|
📚 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 |
Wire close-button l/xl to spectrum-css UI icon paths instead of reusing Cross300. Co-authored-by: Cursor <cursoragent@cursor.com>
Description
Phase 2 (Setup) of the
swc-close-button1st-gen → 2nd-gen washing machine migration. This PR scaffolds the component so it builds, registers, and appears in Storybook before API polish and S2 styling land in follow-up PRs.Core (
2nd-gen/packages/core/components/close-button/)CloseButton.types.ts—CLOSE_BUTTON_VALID_SIZES, static-color / variant typesCloseButton.base.ts— extendsButtonBasewithstatic-color, legacyvariant(maps tostatic-colorwhen set; full deprecation warnings deferred to Phase 3), and 1st-gennoDefaultSizesizing behaviorcore/package.jsonSWC (
2nd-gen/packages/swc/components/close-button/)CloseButton.ts— inner<button type="button">, size-mapped cross icon, visually hidden default slot,aria-labelfrom resolved accessible nameclose-button.css— stub layout and visually hidden label styles (not S2 visual parity)swc-close-button.ts— element registrationDocs
Motivation and context
Close button migration is tracked under the 2nd-gen component workstream. Setup must land before Phase 3 (API / TypeScript) and Phase 5 (S2 CSS). This PR intentionally ships a minimal, buildable skeleton — not visual parity with Spectrum 2 closebutton CSS.
Related issue(s)
(#6322)
Screenshots (if appropriate)
N/A — stub styling only; no meaningful visual regression vs Spectrum 2
yet.
Author's checklist
m-web-components/blob/main/CONTRIBUTING.md) and
[PULL_REQUESTS](https://github.com/adobe/spectrum-web-components/blob
/main/PULL_REQUESTS.md) documents.
see: Aria Practices
Storybook + a11y snapshot; full coverage in Phase 6).
published.
(status table only).
Reviewer's checklist
number without a link
include
patch,minor, ormajorfeatureswriting
Manual review test cases
yarn buildfrom repo root (or2nd-genworkspace build forcore+swc).branch preview Storybook if available).
<swc-close-button accessible-label="Close">renders witha cross icon.
<button type="button">witharia-label="Close".sizetos,m,l, andxl; confirm thehost updates and the icon mapping changes (l/xl may share the largest
available 2nd-gen cross icon until Cross400/500 land).
static-colortowhiteorblack; confirm classesswc-CloseButton--staticWhite/swc-CloseButton--staticBlackappearon the inner button (styling is stub-only).
sizewhen unset<swc-close-button accessible-label="Close">with nosizeattribute.sizeattribute on the host(visual default still behaves as
m).Device review
Accessibility testing checklist
a visible focus indicator on the inner button (delegated focus).
activates (click handler / default button behavior).
disabledon the control; confirm the button is not reachablevia Tab and does not activate.
Close (from
accessible-labelor slotted text).disabledset, confirm the control is announced asunavailable/disabled.