Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rebuild Avatar component #1738

Closed
2 tasks
Tracked by #1926
mannycarrera4 opened this issue Aug 22, 2022 · 2 comments
Closed
2 tasks
Tracked by #1926

Rebuild Avatar component #1738

mannycarrera4 opened this issue Aug 22, 2022 · 2 comments
Assignees
@alanbsmith
Labels
11.x

Comments

@mannycarrera4
Copy link
Contributor

mannycarrera4 commented Aug 22, 2022 •
edited by alanbsmith
Loading

💡 Suggestion

Avatar is still a class component which means we sometimes don't have typescript play nicely when we try to use this component as a sub component of another component. If we refactor this to use our createComponent function we'll get a lot of the typing that can allows us to omit props like altText or default the element to a div when needed.

  • Convert Avatar to a compound component.
  • Update Avatar to use our new style utils and CSS variable tokens
@mannycarrera4 mannycarrera4 mentioned this issue Aug 22, 2022
Closed
@RayRedGoose
Copy link
Contributor

It seems like popper use forwardRef to create component too.

@jaclynjessup jaclynjessup moved this to 🆕 New in Canvas Kit Aug 29, 2022
@jaclynjessup jaclynjessup removed the status in Canvas Kit Oct 12, 2022
@jaclynjessup jaclynjessup moved this to 🔖 Ready in Canvas Kit Nov 17, 2022
This was referenced Nov 29, 2022
Closed
Open
@RayRedGoose RayRedGoose mentioned this issue Dec 19, 2022
Closed
@alanbsmith alanbsmith changed the title Convert Avatar to use our createComponent Rebuild Avatar component Dec 21, 2023
@alanbsmith alanbsmith self-assigned this Dec 21, 2023
@kaconant kaconant mentioned this issue Jun 15, 2024
Closed
10 tasks
@myvuuu
Copy link
Collaborator

myvuuu commented Jun 17, 2024

Closing this out, Avatar does not need to be a compound component. The remaining work for restyling is a duplicate for canvas-kit #2779

@myvuuu myvuuu closed this as completed Jun 17, 2024
@github-project-automation github-project-automation bot moved this from 🔖 Ready to ✅ Done in Canvas Kit Jun 17, 2024
@kaconant kaconant mentioned this issue Jun 24, 2024
Merged
10 tasks
alanbsmith pushed a commit that referenced this issue Aug 7, 2024
@kaconant @mannycarrera4
chore!: Update Avatar to use createStencil and createComponent (#2793)
3b7726a 
Fixes: [#1738](#1738)
Refactored Avatar to use our new styling utilities and tokens. Also updated documentation to use MDX.

[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`.

Co-authored-by: krissy.conant <[email protected]>
Co-authored-by: @mannycarrera4 <[email protected]>
Co-authored-by: manuel.carrera <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alanbsmith alanbsmith

Labels
11.x
Projects
Canvas Kit
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore: Update Avatar to use createStencil and createComponent kaconant/canvas-kit
4 participants
@alanbsmith @mannycarrera4 @RayRedGoose @myvuuu