Skip to content

[material-next][Chip] Improve color prop usage and options #39173

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.

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

Open
DiegoAndai opened this issue Sep 26, 2023 · 0 comments
Open

[material-next][Chip] Improve color prop usage and options #39173

DiegoAndai opened this issue Sep 26, 2023 · 0 comments
Assignees
Labels
design: material you enhancement This is not a bug, nor a new feature

Comments

@DiegoAndai
Copy link
Member

A gap to fill as the Material You specs do not specify how to use other colors for the chip component. How it works right now is similar to v5:

  • If no color prop is provided, then the specs defined color is used:
    • outline color for the outlined variant
    • secondary color for the filled variant
    • surface container low color for the elevated variant
  • If the color prop is provided, that one is used. Right now this only supports accent colors.

Points of improvement:

  • Feels weird that when no color prop is provided, different colors are used for different variants. This is the less confusing way I could come up with on initial implementation but I think there should be a better way
  • Supporting other colors? The difficult part here is that not all variants should support all colors
    • Supporting other surface container colors might be useful for the elevated variant
    • Supporting outline variant color might be useful for the outlined variant
    • Adding a "high-contrast" option which is similar to v5 might be useful for the filled and elevated variants, e.g. using the primary and onPrimary tokens instead of the primaryContainer and onPrimaryContainer colors
  • Restricting colors? The color specs mention that chips should use only secondary color. That feels restrictive, but maybe an option we want to explore?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design: material you enhancement This is not a bug, nor a new feature
Projects
Status: Backlog
Status: No status
Development

No branches or pull requests

2 participants