Add grid support for multiple device visibility breakpoints?

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’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>

[levithomason]

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