[RFC] Screen Size Context Refactor Proposal about styled-material-components HOT 4 OPEN

RichardM [4 minutes ago]
but it also doesn't let us enforce a strict material spec as we become more compliant to spec.
could you please explain this? (edited)

@richTheCreator answering here to keep a permanent record of conversation for public benefit.

By allowing the end user to declare their own breakpoints we have to support a much wider set of features. Right now there is no guarantee the end user will use our keys, for example. So columns and rows have to accept props for whatever keys the user defines for their breakpoints. It also means we limit our ability to implement components in strict compliance with material design because the end user can mutate the media queries. So if material spec says a button should have a specific gutter at a specific resolution we can put those defaults in but we introduce the ability for a poor user (developer) experience when they go to customize the breakpoints.

I think i'm in favor of tightening the scope of the theme and what we really allow users to change.

from styled-material-components.

Thanks for the explanation @brad-decker. Makes sense! Excited to see how this would lower the overhead for responsiveness out of the box.

from styled-material-components.

Regarding screenSizeConsumer, I am a fan of the idea of using material compliant breakpoints for all three of the reasons @brad-decker mentioned. I totally support enforcing material standards, and I think that the more powerful API that this allows us to expose is a huge win. Also great to make the grid more performant by being able to do a pure CSS implementation.

Regarding withScreenSize and our current responsive strategy, I did an audit of our usage of withScreenSize. Definitely possible that I'm missing some use cases, but it seems like our use cases across our org's code fall into two broad categories:

Applying mobile styles intended for mobile screen size and/or conditionally displaying elements

For mobile styles, Those are a light lift to reword as media queries
For conditionally displaying elements on mobile screens, those can use this pattern instead, using display in combination with media queries
I like @brad-decker's idea of exposing material compliant breakpoints on SMC in some way. I think mobile, tablet, and desktop media queries or as a styles mixin could be a cool way to do that.

Functionality that is platform specific, not screen size specific

Since these are intended to relate to platform and not screen size, it seems like these could be well served by a withPlatform enhancer separate from withScreenSize. We could break out the platform.js logic into its own HOC.

see here for examples of these patterns

from styled-material-components.

👍

from styled-material-components.