Better organization of enabled and disabled chips and rename elevated chips.

[TahaTesser]

The current organisation puts all chips into a single section which makes it challenging to distinguish enabled and disabled chips especially when applying custom colors.

Suggestion

Separate chips like this

[rydmike]

Have a bunch of theming features to test and add to Chips as well, so this will be a trivial and logical cleanup of Playground UI when working on those features.

The current design is legacy from when a lot widgets shared the same panel and we wanted to fit them in a compact responsive view using a simple Wrap for all of the different Chip variants. Current design allows for this layout much better and changing to it is indeed a good suggestion.

[rydmike]

Since it is a very responsive layout, this is the best I can do with Wraps. It will still have a 3 col layout mode in some layout sizes, which is not ideal, but just use a bigger screen and you never see that 😃

With Grid and LayoutBuilder I could do better layout that avoids 3 columns, but I don't think it so necessary for this presentation

Screen.Recording.2023-10-12.at.18.42.52.mov

---

Q: @TahaTesser what do you mean with rename elevated chips? I'm using the names the Widgets have in Flutter at te moment.

---

Observation:

I don't think it is still possible to create themes where each chip type Action, Filter, Choice and Input all use from each other different foreground, background colors and disabled color styles, for disabled foreground and background. But I have not checked with all the latest improvements on master channel yet, but last time I looked it was not possible. 😃

[TahaTesser]

Q: @TahaTesser what do you mean with rename elevated chips? I'm using the names the Widgets have in Flutter at te moment.

I was thinking if it could be better to have names like FilterChip and `Elevated FilterChip' to see which ones are elevated.
As the chips blend when you modify elevation, can't disguise which is elevated variant.