Add grid support for multiple device visibility breakpoints?

[nolandg]

Currently, you can specify only one value for the only device visibility prop on <Grid.Column/Row>. One accepted value is tablet mobile.

This means if I want a <Row> to be visible for both tablet and computer devices, I need to either duplicate the markup with different only props or manually specify className="only tablet only computer" which works but is not ideal.

Is there a reason we can't support something like:
<Grid.Row only={['tablet', 'computer']}> or <Grid.Row only="tablet computer">
Multiple values like this works in practice using the SUI css.

I think it's a very common use case to have a column visible for all devices larger than X and another column hidden for everything smaller than Y. Or am I missing something in SUI that gives you this greater than/less than ability? It's seems awkward to need to list all device sizes when I all I want is bigger/smaller than.

[levithomason]

I think we should support both of these features. Here are my thoughts.

Allow an only array

This is more simple to validate and loop since large screen is also valid value and contains a space. only='desktop large screen' can be parsed without too much trouble, but, some trouble none the less.

<Grid.Column only={['tablet', 'mobile']} />
//=> <div class="colum tablet only mobile only"></div>

<Grid.Column only={['desktop', 'large screen']} />
//=> <div class="colum only desktop only large screen"></div>

largerThan & smallerThan

I'd love suggestions for prop names here as well. "Larger/smaller than" may imply the size of the column which is not the case.

<Grid.Column largerThan='tablet' />
//=> <div class="colum computer only large screen only"></div>

<Grid.Column smallerThan='computer' />
//=> <div class="colum only tablet only mobile"></div>

[nolandg]

only as an array is easier for the framework. only as a string is easier for the user.

maybe
<Grid.Column onlySmaller='computer' />

[levithomason]

Another possibility is to standardize the string large sreen to largeScreen. This would make it very easy to work with (parsing and validation) and also makes it consistent with the prop for the user experience:

<Grid.Column largeScreen='5' />
<Grid.Column only='largeScreen' />

<Grid.Column only='computer largeScreen' />

I like onlySmaller onlyLarger better than largerThan smallerThan.

[levithomason]

The downside to largeScreen is that other two-word prop string values are not camelCased, such as attached='top right'.

[levithomason]

I've marked this as ready for development. Let's go ahead and get this going:

Multiple only support:

<Grid.Column only='tablet mobile' />
//=> <div class="column tablet only mobile only"></div>

<Grid.Column only='desktop large screen' />
//=> <div class="column desktop only large screen only"></div>

Sugar for onlyLarger and onlySmaller:

<Grid.Column onlyLarger='desktop' />
//=> <div class="column large screen only"></div>

<Grid.Column onlySmaller='desktop' />
//=> <div class="column tablet only mobile only"></div>