feat(avatar): migrate s2 avatar by cdransf · Pull Request #3355 · adobe/spectrum-css

cdransf · 2024-10-30T18:35:35Z

Description

For CSS-1031.

Adds support for new avatar-size tokens (avatar-size-800 to avatar-size-1500). Updates avatar component story to support new sizes. Adds support for avatar-border-color and avatar-border-thickness.

Validation steps

Access the Storybook URL for the PR (or fetch the branch and run it locally)
Navigate to the avatar story
Toggle through the new sizes added to the avatar story, verify they behave as expected and align with the added avatar sizes.

How and where has this been tested?

Locally in Storybook.

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-10-30T18:35:40Z

🦋 Changeset detected

Latest commit: ac9fd79

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

This PR includes changesets to release 3 packages

Name	Type
@spectrum-css/avatar	Major
@spectrum-css/tag	Major
@spectrum-css/taggroup	Major

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 · 2024-10-30T18:38:31Z

🚀 Deployed on https://pr-3355--spectrum-css.netlify.app

github-actions · 2024-10-30T18:38:33Z

File metrics

Summary

Total size: 4.29 MB^*
Total change (Δ): ⬆ 5.33 KB (0.12%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
avatar	6.56 KB	⬆ 1.54 KB

Details

avatar

File	Head	Base	Δ
index-base.css	6.56 KB	5.02 KB	⬆ 1.54 KB (30.79%)
index-vars.css	6.56 KB	5.02 KB	⬆ 1.54 KB (30.79%)
index.css	6.56 KB	5.02 KB	⬆ 1.54 KB (30.79%)
metadata.json	2.46 KB	1.76 KB	⬆ 0.71 KB (39.45%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

5t3ph

All sizes match the Figma ✨

marissahuysentruyt · 2024-11-06T16:16:10Z

-  --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
+	--spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
+	--spectrum-avatar-border-thickness: var(--spectrum-avatar-border-width);
+	--spectrum-avatar-border-color: rgb(var(--spectrum-gray-25-rgb));


I actually went back and tried this with the token from the design, but changed the custom property name a touch, and I think everything is working ok now.

--spectrum-avatar-border-color-default: var(--spectrum-avatar-border-color);

I wonder if we had some caching issues? Because, it was definitely coming up undefined right? Maybe tweaking the custom property and adding that -default helped?

So strange! I see it working now too. Just updated the PR. ✨

marissahuysentruyt

This is looking really good to me. Now that we added the -default to the avatar border property, I think we just need to update the name in .spectrum-Avatar too.

I also had one thought about adding the new sizes to the docs page (eventually).

marissahuysentruyt · 2024-11-06T17:25:50Z

+	border-style: solid;
+	border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
+	border-width: var(--spectrum-avatar-border-thickness);
+	border-color: var(--spectrum-avatar-border-color);


We should change this to the --spectrum-avatar-border-color-default!

marissahuysentruyt · 2024-11-06T17:25:56Z

 				category: "Component",
 			},
-			options: ["50", "75", "100", "200", "300", "400", "500", "600", "700"],
+			options: ["50", "75", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "1300", "1400", "1500"],


ooo! Would you please make a card to add these new sizes to the table we have on the docs page on main? I was going to ask you to add them, and then realized the docs page on this branch is totally different than what's on main! We should make sure we reference the new sizes on that page eventually, once the big merge happens.

marissahuysentruyt

Looks great! All of the sizes are working, I see all of the new size tokens, border width and border color tokens! Glad we got the border color thing figured out!

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

cdransf marked this pull request as ready for review October 30, 2024 19:42

cdransf requested review from jawinn, marissahuysentruyt and rise-erpelding October 30, 2024 19:43

cdransf self-assigned this Oct 30, 2024

cdransf added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Oct 30, 2024

cdransf force-pushed the cdransf/spectrum-two-avatar-migration branch from 82c08b5 to f322aaa Compare October 30, 2024 19:49

chore(s2-avatar): initial commit

9e19b84

cdransf force-pushed the cdransf/spectrum-two-avatar-migration branch from f322aaa to 3d6fcf2 Compare November 4, 2024 16:16

cdransf changed the title ~~cdransf/spectrum two avatar migration~~ feat(avatar): migrate s2 avatar Nov 5, 2024

5t3ph approved these changes Nov 6, 2024

View reviewed changes

marissahuysentruyt reviewed Nov 6, 2024

View reviewed changes

cdransf force-pushed the cdransf/spectrum-two-avatar-migration branch from 3d6fcf2 to bfdab94 Compare November 6, 2024 17:02

marissahuysentruyt requested changes Nov 6, 2024

View reviewed changes

chore(s2-avatar): add sizing and border tokens

ac9fd79

cdransf force-pushed the cdransf/spectrum-two-avatar-migration branch from bfdab94 to ac9fd79 Compare November 6, 2024 17:30

marissahuysentruyt approved these changes Nov 6, 2024

View reviewed changes

cdransf merged commit a827601 into spectrum-two Nov 8, 2024

cdransf deleted the cdransf/spectrum-two-avatar-migration branch November 8, 2024 18:50

github-actions Bot mentioned this pull request Nov 8, 2024

chore: release (next) #3379

Merged

castastrophe pushed a commit that referenced this pull request Dec 27, 2024

feat(avatar): migrate s2 avatar (#3355)

0505fff

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Dec 29, 2024

feat(avatar): migrate s2 avatar (#3355)

38fc68b

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Dec 29, 2024

feat(avatar): migrate s2 avatar (#3355)

ad8796f

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Jan 17, 2025

feat(avatar): migrate s2 avatar (#3355)

d292ec5

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Jan 17, 2025

feat(avatar): migrate s2 avatar (#3355)

8077cee

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Jan 21, 2025

feat(avatar): migrate s2 avatar (#3355)

6f11c7a

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Jan 22, 2025

feat(avatar): migrate s2 avatar (#3355)

073e11a

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 5, 2025

feat(avatar): migrate s2 avatar (#3355)

64d1a32

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(avatar): migrate s2 avatar (#3355)

004c8df

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(avatar): migrate s2 avatar (#3355)

07be535

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(avatar): migrate s2 avatar (#3355)

a9895f0

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 11, 2025

feat(avatar): migrate s2 avatar (#3355)

e9fb520

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 24, 2025

feat(avatar): migrate s2 avatar (#3355)

6041ce6

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 24, 2025

feat(avatar): migrate s2 avatar (#3355)

139fff9

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe pushed a commit that referenced this pull request Feb 25, 2025

feat(avatar): migrate s2 avatar (#3355)

19f79cc

* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

rise-erpelding mentioned this pull request Sep 19, 2025

chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail adobe/spectrum-web-components#5740

Merged

18 tasks

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(avatar): migrate s2 avatar#3355

feat(avatar): migrate s2 avatar#3355
cdransf merged 2 commits into
spectrum-twofrom
cdransf/spectrum-two-avatar-migration

cdransf commented Oct 30, 2024 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 30, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 30, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 30, 2024 •

edited

Loading

avatar

Uh oh!

5t3ph left a comment

Uh oh!

marissahuysentruyt Nov 6, 2024

Uh oh!

cdransf Nov 6, 2024

Uh oh!

marissahuysentruyt left a comment

Uh oh!

marissahuysentruyt Nov 6, 2024

Uh oh!

marissahuysentruyt Nov 6, 2024

Uh oh!

marissahuysentruyt left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cdransf commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Validation steps

How and where has this been tested?

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot Bot commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

avatar

Uh oh!

5t3ph left a comment

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Nov 6, 2024

Choose a reason for hiding this comment

Uh oh!

cdransf Nov 6, 2024

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Nov 6, 2024

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Nov 6, 2024

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cdransf commented Oct 30, 2024 •

edited

Loading

changeset-bot Bot commented Oct 30, 2024 •

edited

Loading

github-actions Bot commented Oct 30, 2024 •

edited

Loading

github-actions Bot commented Oct 30, 2024 •

edited

Loading