search

material-components / material-components-android

Modular and customizable Material Design UI components for Android
Apache License 2.0
16.34k stars 3.06k forks source link

[Matrial Design Spec] Are MD states additive or not? #2003

Closed eugeneilyin closed 10 months ago

eugeneilyin commented 3 years ago

Material Library version: the recent Material Design spec.

Description: following the spec https://material.io/design/interaction/states.html

Principle: Additive

When multiple states occur at once, such as selection and hover, both state indicators should be displayed.

Anatomy: Overlay

Only one state layer is applied at a time. For example, if an element is first focused and then hovered, the hover state layer will be shown only until the hover is complete, then returning to the focus state layer if the element is still focused.

So... Are overlays additive or applied only one at a time? 🤔

If we carefully read the spec, we will find the next allowed states combinations:

Can be combined in both ways:

Can be combined in one way only:

Pressed ⇒ Focused

Focus states can be represented in combination with hover, activated, or selected states. Pressed states can be combined with hovered, focused, activated, or selected states.

Pressed ⇒ Activated

Activated states can be represented in combination with hover and focus states. Pressed states can be combined with hovered, focused, activated, or selected states.

Selected ⇒ Dragged

Selected states can be represented in combination with hover, focus, pressed or dragged states. there is no list of allowed states to combine with Dragged (as it's provided explicitly for the other states)

States combinations

So it's not clear :

If many states at a time allowed, then how several overlays must be applied?

Variants:

Principle: Distinct of the spec told:

States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels.

What are these priority levels for all listed states?

Spec inconsistency

The Pressed spec shows 16% overlay opacity on in "Pressed" section and the same spec shows 12% overlay opacity in the "Anatomy" section. So what pressed overlay opacity value is correct: 12% or 16%?

What about overlays opacity value for previosly Focused component in Activated state (like Checkbox, Radio Button, etc.) when I Hover over it and go to the Pressed state for it? Is it all 4 overlays on the same time must be applied? This will makes all content of such component almost not visible, because following the spec for on-primary backgrounds it will gives: 24% + 8% + 32% + 24% = 88% (!) of combined overlays opacity.

Why the MD spec is so inconsistent after 7 years of editing?

P.S. Why the most of the states are have -ed suffix, except Focus (mixed with Focused in many places) and Hover (mixed with Hovered in many places)? What is so special in words Focused or Hovered? Why they can't be consistent with with Selected, Pressed, Activated, and Dragged names? P.P.S. Where to ask/discuss/fix all these MD inconsistences issues? In what GitHub repository? Is it any Slack/Discord groups to clarify the MD spec questions with MD developers?

For example: I want to migrate from the current Material Design Color Tool based on the ancient Lab color space (with known non uniform hue issues and lot of known DeltaE 2000 issues) to the recent state-of-the-art more hue/lightness/chrome stable and uniform color spaces like JzAzBz or CAM-16. In what groups or chats I should discuss it?

Another example: I want to fix tons of issues in MD Icons (just check mdi-norm repository) or see the gallery or issues and duplicates. Where I can do it?

drchen commented 10 months ago

FYI our designers are aware of this and is updating the inconsistencies in the guidelines. As far as I can see most of them have been addressed. Closing the issue.