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

Avatar: add option to set the background color #4900

Closed
Tracked by #7180
benelan opened this issue Jul 11, 2022 · 5 comments
Closed
Tracked by #7180

Avatar: add option to set the background color #4900

benelan opened this issue Jul 11, 2022 · 5 comments
Assignees
@alisonailea @geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 2 Small fix or update, may require updates to tests. good first issue Issues that can be worked on by contributors new to calcite-components. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2024-09-30 - 2.13...

Comments

@benelan
Copy link
Member

benelan commented Jul 11, 2022

Description

Add a CSS variable or property that allows users to change the background color of calcite-avatar. That is a pretty common use case in profile configuration. The app developer would have to choose colors that meet contrast ratio guidelines, and then the user could select one of those colors in the profile UI.

Acceptance Criteria

A CSS variable (my preference) or property for changing calcite-avatar's background color.

Relevant Info

From https://community.esri.com/t5/calcite-design-system-questions/avatar-choose-colour-and-3-character-id-display/m-p/1191371

Which Component

calcite-avatar

Example Use Case

Like how Esri Community lets you choose different background colors for globes:
image

Only it would be different background colors w/ initials for calcite-avatar.
@benelan benelan added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jul 11, 2022
@benelan benelan added the Calcite (dev) Issues logged by Calcite developers. label Jan 30, 2023
@macandcheese macandcheese added the design-tokens Issues requiring design tokens. label Oct 23, 2023
@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library estimate - 2 Small fix or update, may require updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. good first issue Issues that can be worked on by contributors new to calcite-components. and removed needs triage Planning workflow - pending design/dev review. labels Nov 6, 2023
@geospatialem
Copy link
Member

Related to efforts from #7180.

Additional consideration: Add a screenshot test to ensure color contrast is part of the effort with sufficient foreground and background contrast.

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Nov 7, 2023
@geospatialem geospatialem mentioned this issue Dec 21, 2023
Open
@evan-cx
Copy link

evan-cx commented Apr 25, 2024

Our team would like this implemented

@geospatialem geospatialem self-assigned this Jul 29, 2024
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jul 29, 2024
@geospatialem geospatialem added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 4, 2024
@geospatialem geospatialem removed their assignment Sep 4, 2024
@geospatialem geospatialem added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Sep 4, 2024
@geospatialem geospatialem removed this from the 2024-09-24 - Sep Main release milestone Sep 4, 2024
@alisonailea alisonailea mentioned this issue Sep 12, 2024
Merged
alisonailea added a commit that referenced this issue Sep 20, 2024
@alisonailea
feat(avatar): add component tokens (#10280)
f8f881b 
**Related Issue:** #7180 #7651 #4900

## Summary

### Tokens

--calcite-avatar-corner-radius: defines the corner radius of the
component.
--calcite-avatar-color: defines the icon or initial color in the
component.
--calcite-avatar-background-color: defines the background color of the
component.
@alisonailea alisonailea self-assigned this Sep 20, 2024
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. labels Sep 20, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Sep 20, 2024
@alisonailea alisonailea self-assigned this Sep 20, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Sep 20, 2024

🍠 Verified locally on dev
image

@DitwanP DitwanP closed this as completed Sep 20, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Sep 20, 2024
@evan-cx
Copy link

evan-cx commented Sep 20, 2024

Thanks guys!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alisonailea alisonailea

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 2 Small fix or update, may require updates to tests. good first issue Issues that can be worked on by contributors new to calcite-components. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2024-09-30 - 2.13.0 Sep Main release
Development

No branches or pull requests
7 participants
@alisonailea @macandcheese @geospatialem @benelan @DitwanP @evan-cx @brittneytewks