Skip to content

chore(close-button): add structure for s2 migration#6355

Draft
TarunAdobe wants to merge 2 commits into
mainfrom
ttomar/migrate-close-button
Draft

chore(close-button): add structure for s2 migration#6355
TarunAdobe wants to merge 2 commits into
mainfrom
ttomar/migrate-close-button

Conversation

@TarunAdobe
Copy link
Copy Markdown
Contributor

Description

Phase 2 (Setup) of the swc-close-button 1st-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.tsCLOSE_BUTTON_VALID_SIZES, static-color / variant types
  • CloseButton.base.ts — extends ButtonBase with static-color, legacy variant (maps to static-color when set; full deprecation warnings deferred to Phase 3), and 1st-gen noDefaultSize sizing behavior
  • Package export wired in core/package.json
    SWC (2nd-gen/packages/swc/components/close-button/)
  • CloseButton.ts — inner <button type="button">, size-mapped cross icon, visually hidden default slot, aria-label from resolved accessible name
  • close-button.css — stub layout and visually hidden label styles (not S2 visual parity)
  • swc-close-button.ts — element registration
  • Storybook Playground + Overview stories
  • Placeholder unit and a11y spec tests (expanded in Phase 6)

Docs

  • Migration status table: Close Button Setup marked complete

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)

  • Epic SWC-2087 — Close button migration
  • Planning (separate PR): SWC-2089 — migration plan
    (#6322)

Screenshots (if appropriate)

N/A — stub styling only; no meaningful visual regression vs Spectrum 2
yet.

Author's checklist

  • I have read the [CONTRIBUTING](https://github.com/adobe/spectru
    m-web-components/blob/main/CONTRIBUTING.md)
    and
    [PULL_REQUESTS](https://github.com/adobe/spectrum-web-components/blob
    /main/PULL_REQUESTS.md)
    documents.
  • I have reviewed the Accessibility Practices for this feature,
    see: Aria Practices
  • I have added automated tests to cover my changes (placeholder
    Storybook + a11y snapshot; full coverage in Phase 6).
  • I have included a well-written changeset if my change needs to be
    published.
  • I have included updated documentation if my change required it
    (status table only).

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket
    number without a link
  • Includes thoughtfully written changeset if changes suggested
    include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for
    writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

  • Verify close-button scaffold builds and registers
    1. Run yarn build from repo root (or 2nd-gen workspace build for
      core + swc).
    2. Confirm build completes without errors.
  • Verify element registration and Storybook
    1. Open 2nd-gen Storybook → Close ButtonPlayground (or
      branch preview Storybook if available).
    2. Confirm <swc-close-button accessible-label="Close"> renders with
      a cross icon.
    3. In DevTools, confirm shadow DOM contains a real inner <button type="button"> with aria-label="Close".
  • Verify size and static-color attributes (stub visuals)
    1. In Playground, set size to s, m, l, and xl; confirm the
      host updates and the icon mapping changes (l/xl may share the largest
      available 2nd-gen cross icon until Cross400/500 land).
    2. Set static-color to white or black; confirm classes
      swc-CloseButton--staticWhite / swc-CloseButton--staticBlack appear
      on the inner button (styling is stub-only).
  • Verify no reflected size when unset
    1. Render <swc-close-button accessible-label="Close"> with no
      size attribute.
    2. Inspect the host; expect no size attribute on the host
      (visual default still behaves as m).

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

Accessibility testing checklist

  • Keyboard (required — document steps below)
    1. Open 2nd-gen Storybook → Close ButtonPlayground.
    2. Press Tab until focus reaches the close button; confirm
      a visible focus indicator on the inner button (delegated focus).
    3. Press Enter or Space; confirm the button
      activates (click handler / default button behavior).
    4. Set disabled on the control; confirm the button is not reachable
      via Tab and does not activate.
  • Screen reader (required — document steps below)
    1. Open Playground with VoiceOver (macOS) or NVDA (Windows).
    2. Tab to the button; confirm it is announced as a button named
      Close (from accessible-label or slotted text).
    3. With disabled set, confirm the control is announced as
      unavailable/disabled.

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>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 1, 2026

⚠️ No Changeset found

Latest commit: 7e643ab

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 1, 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-6355

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.

Wire close-button l/xl to spectrum-css UI icon paths instead of reusing Cross300.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant