feat(user-card): full s2 migration by aramos-adobe · Pull Request #6742 · adobe/spectrum-web-components

aramos-adobe · 2026-09-14T19:20:50Z

Description

This migration brings user-card into the Spectrum 2 component structure and updates it to match the newer card patterns and token system.

The work includes the new user-card component, updated exports and types, Spectrum 2 styling, storybook docs, and the test coverage needed to support the component in the SWC library.

I also added the changelog entry and migration docs so the component lands with the rest of the gen2 work.

Motivation and context

We’re moving the older first-generation components to the new Spectrum 2 architecture, and user-card is part of that effort.

This update keeps the component aligned with the newer API, design tokens, and documentation standards while making it ready for the same testing and accessibility expectations as the rest of the library.

Related issue(s)

fixes SWC-2371

Screenshots (if appropriate)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

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

Default render and layout
1. Open the user-card Storybook story.
2. Confirm the avatar, heading, metadata, and optional actions render in the expected layout.
3. Check that the spacing and visual treatment match the Spectrum 2 card patterns.
Content and action states
1. Review the story variants with different metadata and action combinations.
2. Confirm content alignment and sizing hold up across the supported states.
3. Verify focus and hover treatment looks correct and remains accessible.
Accessibility check
1. Tab through the interactive elements in Storybook.
2. Confirm focus order is logical and the visible focus indicator remains clear.
3. Review the rendered semantics and names to ensure the content is announced clearly to assistive tech.

Device review

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

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) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.
1. Open the user-card Storybook stories and tab through each interactive control.
2. Verify focus moves in a logical order and the focus ring stays visible.
3. Confirm activation works as expected without trapping focus.
Screen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.
1. Inspect the rendered markup and accessibility attributes in Storybook or devtools.
2. Check that labels, text content, and actions are announced clearly and without duplication.
3. Confirm important state changes are exposed through the appropriate ARIA patterns.

* feat(user-card): files, api, styling extend CardBase * fix(user-card): updating xs avatar size to 100 * chore(user-card): keep it focused on files api and styling for now tests for next pr * feat(user-card): update grid avatar layout and docs * fix(usercard): fixing broken doc links * Update 2nd-gen/packages/swc/components/user-card/user-card.css Use border width token instead of hardcoded value Co-authored-by: Stephanie Eckles <seckles@adobe.com> --------- Co-authored-by: Stephanie Eckles <seckles@adobe.com>

… branch

changeset-bot · 2026-09-14T19:20:55Z

⚠️ No Changeset found

Latest commit: 67f496f

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.

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 · 2026-09-14T19:27:42Z

📚 Branch Preview Links

🔍 Gen1 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-6742

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.

* test(user-card): add vrt, tests and a11y specs * fix(user-card): overlap test fix * test(user-card): add action button in docs and vrt * fix(user-card): update fire udpate * fix(user-card): fix type error

* docs(user-card): update docs * docs(user-card): updating docs to include asset * docs(card): update migration plan docs * feat(user-card): adding asset card to test with * docs(user-card): removing default 3 1 line * chore(user-card): bringing new changes to PR * docs(user-card): update migration plans * chore(user-card): addressing feedback * docs(user-card): make decorative and alt consistent

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

5t3ph

Great work on this! I just missed getting to it during the docs phase, so a bit of comments from that angle.

5t3ph · 2026-10-06T19:53:16Z

+      <swc-avatar
+        slot="avatar"
+        src="./images/avatar-preview.png"
+        alt="Jane Doe"


This change to swc-avatar was missed

5t3ph · 2026-10-06T20:10:29Z

   COMBINED STATES
   ───────────────────────────────────────────────────────────────────────────── */

-:host(:is([title-as-link], [selectable]):not([variant="tertiary"], [variant="quiet"]):is(:hover, :focus-visible)) {


To fix the Card VRT regression, restore this selector since it's a :not() condition, since it's already complex it will be easiest to keep here and won't harm the other card types as it will be ignored as not applicable.

nikkimk

I have some a11y questions on this one that need to be resolved. I'd like to pause if we can.

aramos-adobe and others added 2 commits September 14, 2026 15:15

feat(user-card): first commit bringing in usercard in to main feature…

3996597

… branch

aramos-adobe self-assigned this Sep 14, 2026

aramos-adobe requested a review from a team as a code owner September 14, 2026 19:20

aramos-adobe added Status:WIP PR is a work in progress or draft Component:Card gen2 These issues or PRs map to our 2nd generation work to modernizing infrastructure. labels Sep 14, 2026

aramos-adobe marked this pull request as draft September 14, 2026 19:21

aramos-adobe changed the title ~~Aziz/user card migration~~ feat(user-card): full s2 migration Sep 14, 2026

aramos-adobe added this pull request to stack #6744 September 14, 2026 20:14

chore(user-card): move changeset

b833403

aramos-adobe marked this pull request as ready for review September 15, 2026 22:35

aramos-adobe removed this pull request from stack #6744 September 15, 2026 22:37

aramos-adobe added 4 commits September 15, 2026 18:38

test(user-card): add vrt, tests and a11y specs (#6743)

d357346

* test(user-card): add vrt, tests and a11y specs * fix(user-card): overlap test fix * test(user-card): add action button in docs and vrt * fix(user-card): update fire udpate * fix(user-card): fix type error

Merge branch 'main' into aziz/user-card-migration

d563457

chore(user-card): updating new card changes

80b1b31

aramos-adobe added Status:Ready for review PR ready for review or re-review. run_vrt Triggers the Chromatic VRT run for 2nd-gen High priority PR review PR is a high priority and should be reviewed ASAP and removed Status:WIP PR is a work in progress or draft labels Oct 6, 2026

aramos-adobe and others added 2 commits October 5, 2026 22:34

Merge branch 'main' into aziz/user-card-migration

d70391d

chore: remove stray worktree gitlink

fbc20c4

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

5t3ph self-assigned this Oct 6, 2026

5t3ph requested changes Oct 6, 2026

View reviewed changes

aramos-adobe added 2 commits October 6, 2026 13:45

Merge branch 'main' into aziz/user-card-migration

d6ce63a

feat(user-card): addressing feedback

73f9260

5t3ph reviewed Oct 6, 2026

View reviewed changes

aramos-adobe added 3 commits October 6, 2026 16:28

test(user-card): restore quiet styles

b56a4b8

Merge branch 'main' into aziz/user-card-migration

985fdf2

test(user-card): fix a11y spec text to be visible

237f442

nikkimk requested changes Oct 7, 2026

View reviewed changes

test(user-card): working out some worst case scenarios

67f496f

aramos-adobe marked this pull request as draft October 8, 2026 15:19

aramos-adobe added Status:Blocked PR is blocked for some reason and removed Status:Ready for review PR ready for review or re-review. labels Oct 8, 2026

Navigation Menu

Repository navigation

feat(user-card): full s2 migration - #6742

feat(user-card): full s2 migration#6742
aramos-adobe wants to merge 15 commits into
mainfrom
aziz/user-card-migration

aramos-adobe commented Sep 14, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Sep 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 14, 2026

Uh oh!

5t3ph left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

5t3ph Oct 6, 2026

Uh oh!

5t3ph Oct 6, 2026

Uh oh!

nikkimk left a comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

aramos-adobe commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Accessibility testing checklist

Uh oh!

changeset-bot Bot commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Sep 14, 2026

📚 Branch Preview Links

Uh oh!

5t3ph left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

5t3ph Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

nikkimk left a comment

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aramos-adobe commented Sep 14, 2026 •

edited

Loading

changeset-bot Bot commented Sep 14, 2026 •

edited

Loading