mui / mui/material-ui

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

Open
#39,173 0 comments 0 reactions 1 assignee View on GitHub

@DiegoAndai is already working on this.

Since Sep 26, 2023.

design: material you on hold scope: chip type: enhancement
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.