feat(avatar): migrate s2 avatar

[cdransf]

Description

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

1. Access the Storybook URL for the PR (or fetch the branch and run it locally)
2. Navigate to the avatar story
3. 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:

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

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

4. 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]

🦋 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]

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

[github-actions]

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]

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?

[cdransf]

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]

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

[marissahuysentruyt]

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!