chore: Update icon sizes with new design intent

[snowystinger]

Closes

Updates from design. Testing for chromatic and checking breadth of changes. The intent of design was to have the icon match the line height of the text. This works perfectly with the widely available lh unit. I had to make a few small changes to Avatar to also support it, but overall it simplifies our code.

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1285

The question we'll need to answer, is this breaking, from a design point of view. It's not breaking any APIs since I'm not changing how fontRelative works. I did add to our existing API for Avatar, but that should be non-breaking. The question about breaking is, does anyone use fontRelative(20) already and will it be noticeable next to our components.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[snowystinger]

do we want this API? are users likely to do anything other than 1lh? should we limit it?

[LFDanLu]

based on what was discussed in otters, I think this is fine, did you also want to include rlh as well or should that be removed from the style macro for now since you aren't using it elsewhere?

[snowystinger]

it's a valid unit for other places and is widely supported, so think it should be added regardless

[LFDanLu]

then should this have ${number}rlhtoo then?

[snowystinger]

no, the intent for Avatar is just to match the workflow icon sizing, which is 1lh

we can eventually add all the other units. From discussion:

and we could eventually allow any css unit for size

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:Avatar

 Avatar {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) = 24
+}) | `${number}lh` = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

/@react-spectrum/s2:AvatarProps

 AvatarProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) = 24
+}) | `${number}lh` = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

---

[rspbot]

Agent Skills Changes

Modified (9)

• react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria.tar.gz
• react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
• s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
• s2/agent-skills/react-spectrum-s2.tar.gz
• s2/agent-skills/react-spectrum-s2/references/components/Avatar.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/b51090ecc858577efde233294d2f50f68877e7c8/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/b51090ecc858577efde233294d2f50f68877e7c8/