User avatar

[elycheea]

User avatar

Brief description

Details

v11 only in order to support localized theme.

Link to design — needs to be updated. Link to UserProfileImage

Links to other materials

e.g. sketch files, icons, images, prototypes

Additional info from #1929

The PAL guidance currently lists 6 sizes for user profile images. During review of #69, we removed the two smallest sizes for 16px and 20px.

Based on the current guidelines, some teams do use the 48px user profile icon and therefore we should include this.

Details

• [ ] Add new size for 48px
• [ ] Add or update tests as needed

Profile scale 48px / Type 20px (~$productive-heading-03~ $heading-03) / icon scale 24px

Note: Introducing the 48px sizing in UserProfileImage will likely require a breaking change, hence the new component with corrected sizes.

Size	Old sizing	New sizing
xl	64px	64px
lg	32px	48px
md	24px	32px
sm	-	24px

Additional information

Designers: Marion Hekeler, Mitchell Bernstein Cate Wilcox also worked on the Figma component for this.

Design Maintainer(s)

• Marion Hekeler (@marion-bruells)
• @cate-wilcox

Tasks

Before starting work on this epic, please review and complete the following.

• [ ] Initial review of design/existing code

Working in Carbon for IBM Products package

• [ ] Have you reviewed our contribution guidelines?
• [ ] Have you noted our code guidelines?
• [ ] Did you use the CLI to scaffold your new component?

### Acceptance criteria
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4021
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4017
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4016
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4035
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4040
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4332
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4073
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4074
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4297
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5047
- [ ] User avatar style docs
- [ ] User avatar accessibility docs
- [ ] User avatar in Figma kit
- [ ] https://github.com/carbon-design-system/ibm-products/issues/6469

### Review process
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5543
- [x] Accessibility review
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5544

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[elycheea]

Will be addressed in v2.

[elycheea]

As a part of this issue, we will also need to update the PAL guidance with the rename/deprecation and update content that is also inaccurate.

[elycheea]

Will schedule a call with Cate Wilcox to discuss acceptance criteria and theming. Want to start prioritizing this since Security will be migrating off of their ProfileImage when moving to Carbon 11.

[elycheea]

New token suggestions and mapping based on the call with Cate, @marion-bruells

Order	Name	Light theme token	Dark theme token
1	$order-1-cyan	$cyan-60	$cyan-50
2	$order-2-gray	$gray-60	$gray-50
3	$order-3-green	$green-60	$green-50
4	$order-4-magenta	$magenta-60	$magenta-50
5	$order-5-purple	$purple-60	$purple-50
6	$order-6-teal	$teal-60	$teal-50
7	$order-7-cyan	$cyan-80	$cyan-30
8	$order-8-gray	$gray-80	$gray-30
9	$order-9-green	$green-80	$green-30
10	$order-10-magenta	$magenta-80	$magenta-30
11	$order-11-purple	$purple-80	$purple-30
12	$order-12-teal	$teal-80	$teal-30