mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.9k stars 32.26k forks source link

[material-ui][Chip] Add three-valued filter chip with additional prohibiting state #40737

Open sergeyprokhorenko opened 9 months ago

sergeyprokhorenko commented 9 months ago

Summary

The three-valued chip represents a control that implements the three-valued logic.

Prohibition filter chips

These states must be looped: disabled -> enabled -> prohibited -> disabled

A combination of two-valued and three-valued filter chips is allowed.

Examples

There are only homemade solutions now that are similar to my proposal, for example, in Nigma search engine: Nigma

Motivation

This new feature should be used to apply or prohibit the specified search criterion.

Search keywords: three-valued filter chip

DiegoAndai commented 9 months ago

Hey @sergeyprokhorenko, thanks for the report!

As this is a new feature, I've added the waiting for upvotes label so the community can vote for it. In the meantime, this should be achievable on user-land with the Chip's icon prop.

sergeyprokhorenko commented 9 months ago

Thank you @DiegoAndai!

I would like to draw your attention to the fact that this is not just a chip with an icon, but a Material 3 Filter Chip with looped states. Switching states in a loop should be an integral part of this component, and not left to the software on the user side. Likewise, a checkbox is an independent interface element, and not two icons that replace each other using the user's software.