Change MediaQuery to use two values to represent a breakpoint size's range

[dallanlee]

Hi 👋

I would like to see breakpoints implemented as actual ranges—two values representing the boundaries of the breakpoint size's range. Something like:

breakpoints: {
  xs: [0, 599],
  sm: [600, 899],
  md: [900, 1199],
  lg: [1200, 1799],
  xl: [1800, null]
}

(Or derive the range from an adjacent size's value.)

I personally like the implementation of css-media-vars. As explained in their docs, using naming such as "sm" (only "small breakpoint" range), "lte-sm" (small and down – lte = less than or equal to), and "gte-sm" (small and up – gte = greater than or equal to) feels more declarative and precise. Then I imagine using Mantine's MediaQuery component something like:

<MediaQuery show={["md", "lg"]}>
  <Badge color="pink">Smaller than xl, larger than sm</Badge>
</MediaQuery>

or

<MediaQuery show="lte-md">
  <Badge color="red">Smaller than lg</Badge>
</MediaQuery>

(The sizes in my example are from another article (also linked to in the css-media-vars docs) and are also my preference. But as that can be defined in my Mantine theme overrides, the important proposal here is the idea of breakpoint ranges.)

Thoughts?

[dallanlee]

This is currently how we're trying to make sense of Mantine's MediaQuery component usage:

// Making our breakpoint sizes work with Mantine is a bit tricky and unintuitive since breakpoint sizes indicate
// ranges—a lower boundary and an upper boundary. Mantine uses a single value to represent a breakpoint size. To work
// around this, we chose to set the upper boundary for each size. This means passing a value for `largerThan` is
// "intuitive" because we can use named string values.
// Example:
// Show "large" up (larger than "medium"): <MediaQuery largerThan="md">…</MediaQuery> 👌
// But values for `smallerThan` aren't so easy—we can't pass named string values. Instead, we derive a value by
// adding one to the "previous size" that is smaller than the named string value we would want to pass from our theme.
// Examples:
// Show "medium" down (smaller than "large"): <MediaQuery smallerThan={theme.breakpoints.md + 1}>…</MediaQuery> 🙃
// Show "small" only: <MediaQuery largerThan="xs" smallerThan={theme.breakpoints.sm + 1}>…</MediaQuery> 🙃
breakpoints: {
  xs: 599,
  sm: 899,
  md: 1199,
  lg: 1799,
  xl: 99999,
},

[rtivital]

Hi @dallanlee thanks for feedback! I like breakpoints the way they are represented now. This allows us to build responsive styles for Grid and SimpleGrid components easily. I guess the better idea here is just to add 1 to smallerThan prop in MediaQuery component and leave the rest as is.

[dallanlee]

I appreciate the consideration and I do agree that calculating smallerThan is a proper (prop-er 🥁😂) solution without changing the API. 👌

I think the MediaQuery component is a little confusing because it's only for showing and hiding based on screen min- and max-widths. But media queries are used for much more. So the implied hiding and showing based on smallerThan and largerThan trips me up a bit since that's the only functionality of the component. It seems like MediaQuery should be named something else like DisplayElement. I'm not actually suggesting that. But maybe instead MediaQuery should be more robust. 🤷‍♂️

[rtivital]

Yep, that's reasonable, I'll add query prop to MediaQuery component that will allow using any media query.

[rtivital]

I think such an api will provide all features that you would expect from MediaQuery:

<MediaQuery
  query="(max-width: 1200px) and (min-width: 800px)"
  styles={{ fontSize: 20, '&:hover': { backgroundColor: 'silver' } }}
>
  <Text>(max-width: 1200px) and (min-width: 800px) breakpoints</Text>
</MediaQuery>