search

mui / material-ui

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

Implement theme level states design tokens #10870

Open SebastianSchmidt opened 6 years ago

SebastianSchmidt commented 6 years ago

Material Design provides a page: https://material.io/design/interaction/states.html#usage on how to style the different states. States are visual representations used to communicate the status of a component or an interactive element.

The components to handle:

Related issues:

SebastianSchmidt commented 6 years ago

@oliviertassinari @mbrookes What do you think about making the hover effects of Material-UI consistent? I think that would improve the usability of the components. I'd like to take care of it, but I'd like to know your opinion beforehand.

mbrookes commented 6 years ago

I have no fundamental objection, but I'd like to see how each one looks, even if just a mockup, or ideally a link to another implementation. StepButton seems likely to be the most problematic (visiually).

oliviertassinari commented 6 years ago

I have no fundamental objection

Me neither. I do agree that consistency is important. I believe it's dependent on #9526.

It's an area of investigation: It might make sense to move the logic to the ButtonBase component. We could have a property to toggle to disable the hover behavior. We could also rely on currentColor and opacity to get the correct value. It would be more flexible than hardcoding the background color. Well no, forget it. I think that it will have the opposite effect, making overrides harder.

I have also realized that we are using fade(0.12) while MWC is using 0.04. Should we follow them? Should we use a theme variable for consistency?

mbrookes commented 6 years ago

Do we know if MCW fade() algo is constant with ours?

Should we use a theme variable for consistency?

Might be no harm if it's going to be used in multiple components.

SebastianSchmidt commented 6 years ago

I am in favour of continuing to use fade(0.12) because the contrast of the hover effect to the background is too weak when fade(0.04) is used. (Edit: Another alternative would be fade(0.08).)

fade(0.12) face(0.08) fade(0.04)
Example 1 fade(0.12) Example 1 fade(0.08) Example 1 face(0.04)
Example 2 fade(0.12) Example 2 fade(0.08) Example 2 face(0.04)
Example 3 fade(0.12) Example 3 fade(0.08) Example 3 face(0.04)
Example 4 fade(0.12) Example 4 fade(0.08) Example 4 face(0.04)
oliviertassinari commented 6 years ago

@SebastianSchmidt I can understand the issue. I have been wondering too. At least, It's not an issue on white backgrounds.

SebastianSchmidt commented 6 years ago

I have noticed that there is already a theme variable for hover effects. However, this value is currently only used for the ListItem component; and contains another alpha value: 0.08. MDC uses 0.04 for the hover effect for the list items - consistent to the buttons. I think we should also use 0.12 (or 0.04) consistently for the list items.

@oliviertassinari @mbrookes What do you think: Should the alpha value be moved to a separate variable or should the existing variable be changed so that it contains only the alpha value (= breaking change)?

createPalette.js:

  // The colors used to style the action elements.
  action: {
    // The color of an active action like an icon button.
    active: 'rgba(0, 0, 0, 0.54)',
    // The color of an hovered action.
    hover: 'rgba(0, 0, 0, 0.08)',
    // The color of a selected action.
    selected: 'rgba(0, 0, 0, 0.14)',
    // The color of a disabled action.
    disabled: 'rgba(0, 0, 0, 0.26)',
    // The background color of a disabled action.
    disabledBackground: 'rgba(0, 0, 0, 0.12)',
  },

// ...

  action: {
    active: common.white,
    hover: 'rgba(255, 255, 255, 0.1)',
    selected: 'rgba(255, 255, 255, 0.2)',
    disabled: 'rgba(255, 255, 255, 0.3)',
    disabledBackground: 'rgba(255, 255, 255, 0.12)',
  },
oliviertassinari commented 6 years ago

and contains another alpha value: 0.08

This sounds like an inconsistency we need to fix, good catch 👍.

What do you think: Should the alpha value be moved to a separate variable or should the existing variable be changed so that it contains only the alpha value (= breaking change)?

I think that it would be best to use a separate alpha variable.

SebastianSchmidt commented 6 years ago

All right, then the next step is to add the new theme variable and use it in the components Button, IconButton and ListItem. I'll take care of it!

elmeerr commented 4 years ago

@oliviertassinari @SebastianSchmidt I found a hover inconsistency on Table Row...alpha value is 0.08 while in MDC is 0.04

oliviertassinari commented 4 years ago

@elmeerr Interesting, looking more closely at the hover opacity. This looks more or less OK but we could make it a bit lighter:

However, the selected color seems off, it should be colored (primary/secondary color?):

Do you want to work on the problem?

elmeerr commented 4 years ago

@oliviertassinari indeed the selected is off (but it's applying the "correct" alpha) as far as I can tell, it should be the primary color + alpha .04

I can double check. I'll create a PR when I finish

oliviertassinari commented 4 years ago

To be clear, I don't think that MDC shouldn't be given a higher weight than any of the other google's products. I think that http://material.io/ should be our primary reference.

Capture d’écran 2020-01-21 à 12 06 39

https://material.io/design/interaction/states.html#anatomy

kainoa21 commented 2 years ago

I am very excited about the direction this is going as it seems to more closely align with the Material spec.

One practical challenge I am running into is that I would like the ability to set the opacity of a given state (e.g. hover) based on the underlying surface color. In particular on darker surfaces, higher opacities are required in order to provide adequate visual contrast. I believe this is consistent with the implications on material.io (https://material.io/design/interaction/states.html#anatomy).

If I understand correctly, currently there is only a single theme value for controlling opacity for a given state (e.g. palette.action.hoverOpacity). Would it be possible to provide overrides at the palette color level? Or otherwise provide a function that could be given the currentColor and return the desired opacity?

siriwatknp commented 6 days ago

This issue is outdated (MD2 related). We aim to have a fresh look for Material UI in the near future, so I’m closing this.

github-actions[bot] commented 6 days ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @SebastianSchmidt How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

oliviertassinari commented 5 days ago

I'm repurposing this issue. Let's make it about having a coherent set of tokens to design the state of components. Even if we don't follow Material Design, it seems that we still need the design system to satisfy this constraint.