Consolidate the specification of breakpoints

[stephan-noel]

Feature Report

I propose consolidating the specification of breakpoints into a single prop named breakpoints

Motivation

The current specification of breakpoints can be done either by 1) breakpoints and breakpointsMax or 2) mediaQueries. I see the following problems with this approach:

• The naming of breakpoints and breakpointsMax is asymmetric.
• The usage of breakpoints and breakpointsMax is unintuitive. Perhaps I'm not understanding the README well but breakpoints sm at 576px and breakpointsMax sm at 575px is not really conveying much to me. Wouldn't it be simpler to make a (possibly configurable decision) to be mobile first or desktop first?
• breakpoints and breakpointsMax are partial. This just doesn't right, I get the feeling that a prop should fully specify the value on its own, not specify a part of a value. This partiality also leads to problems with required and default props stated below.
• Because there are two different props for doing the same thing, the API is prevented from being able to supply a sensible default value for breakpoints for users who want to worry about customization later. It's true that we could check if a combination of the props are undefined, though this is somewhat clunky. The same applies to a prop being required, you can't specify that one of the props are required.
• Larger than necessary API and the possibility of invalid prop combinations

Proposal

A single prop that serves to specify the breakpoints. If multiple formats are desired, this can be detected by the library itself instead of using multiple different props.

Comments

I could be misunderstanding the API but I'd like to know more about the motivation of these props and the need that motivated the creation of these additional props.

I'm aware that this would be a breaking change but I'm bringing it up early so that it can be discussed and considered and possibly batched along with other breaking changes.

[SoaresMG]

The problem is that we need to have both breakpoints and breakpointsMax because you could be using em instead of px so we can't just subtract 1 on breakpointsMax to get the max of the respective breakpoint.

We could have a single prop like:

breakpoints: {
  xs: [0, 575],
  sm: [576, 767],
  md: [768, 991],
  lg: [992, 1199],
  xl: [1200]
}

and have another prop measurement: "em"

[SoaresMG]

mediaQueries is useful if for example you need to specify breakpoints for different devices

[stephan-noel]

Okay, I see, thanks for the explanation. That approach of breakpoints and measurement seems cleaner to me. Or maybe unit?

mediaQueries is useful if for example you need to specify breakpoints for different devices

Can you elaborate on what you mean by this, maybe with an example? It seems that it's the same as breakpoints but with _initial.

[gsferreira]

Closed due to project archival #76