Material-ui: [Theme] Override number of + values of shadow array in theme override using createMuiTheme

[veronicaerick]

I am using createMuiTheme to override the palette, fonts, etc. I want to slim down the shadow array in the theme object which by default comes with 25 values. I only want to offer two options in my shadow array to keep things simple in usage and documentation.

When I pass the two values I want to support for shadows into the array I get a warning from MUI:

index.js:1437 Warning: Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.

So i've gotten around this by adding setting "none" for the other shadows that I don't want set values for like so:

This is not ideal since it bloats the theme a ton w/r/t using as a ref to see whats available to use for theming in our documentation, is there a way around this?

My ideal state is representation in the theme object that looks like this but with no console warnings:

let theme = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "#fff",
      ...
    },
  typography: {
    fontFamily: opensans,
    ...
  },
  shadows: [
    `0px 0px 6px 0px ${hexa(grey[500], 0.25)}`,
    `0px 0px 6px 0px ${hexa(grey[500], 0.55)}`,
  ]
});

[oliviertassinari]

@veronicaerick Interesting, I think that we can/should remove this warning, thanks for raising the concern. Worth case, the index value is undefined, and no box-shadow property is applied. We could use a proxy in dev mode to warn against it, but I'm not sure it's needed.

[oliviertassinari]

@veronicaerick Do you want to submit a pull request to remove this constraint? :)

[eps1lon]

Just stumbled over this warning today. An error should only be logged on read. For example the Paper component uses the shadows for elevation. It should simply check if the elevation is available via shadows: https://github.com/mui-org/material-ui/blob/d183b449df71b84ecc54c225ea0ba681432ce13e/packages/material-ui/src/Paper/Paper.js#L40-L43

[oliviertassinari]

. It should simply check if the elevation is available via shadows

So instead of checking that the elevation prop, a developer provides, is in the range [0, 25[, it should look at the existence of the index in theme.shadows. Agree.

[eps1lon]

Yeah it's a tough call if we want to warn on theme creation that you might have to few shadows or if we want to error when using non-existing elevations. But the error should have a notice about the potential source of this issue (creating too few shadows).

[veronicaerick]

@oliviertassinari sorry for the delay, I hadn't gotten a notification for your response! Thank you for responding and modifying this so swiftly 😄

[oliviertassinari]

@veronicaerick unless you have missed my message. This issue should be good to move forward. We would be happy to review a pull request, if you have the time.

[millnitzluan]

@oliviertassinari I can work in this enhancement :D

[oliviertassinari]

Awesome