chore: Update Avatar to use createStencil and createComponent

[kaconant]

Summary

Fixes: #1738
Refactored Avatar to use our new styling utilities and tokens. Also updated documentation to use MDX.

Release Category

Components

Release Note

The Avatar component has been refactored to use our new tokens and styling utilities. The changes below highlight the breaking changes to the API.

BREAKING CHANGES

• Avatar no longer uses SystemIconCircle for sizing.
• Avatar.Size is no longer supported. The size prop type has change to accept the following: "extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})
• Avatar.Variant is no longer supported. Enum AvatarVariant has been removed. The variant type prop now accepts "dark" | "light"
• The as prop now accepts any element, not just div.

---

Checklist

Will do the following once have a more stable branch!

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

• Review to see if direction is right. Currently working with @mannycarrera4.

Areas for Feedback? (optional)

• Code
• Documentation
• Testing
• Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif

[cypress]

---

Test summary

847 • 0 • 3 • 0 • 0

---

Run details

Project	Workday/canvas-kit
Status	Passed
Commit	e696505 ℹ️
Started	Aug 7, 2024 3:39 PM
Ended	Aug 7, 2024 3:44 PM
Duration	04:48 💡
OS	Linux Ubuntu - 22.04
Browser	Electron 94

View run in Cypress Cloud ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud

[mannycarrera4]

Amazing work! Way to push through, thank you for working on this!