Grid: allow multiple values for reversed prop

[dhilgarth]

Steps

Trying to create a grid whose columns are reversed on Mobile and Tablet.
I tried:

<Grid reversed="computer tablet">
// or
<Grid reversed="computer,tablet">
// or
<Grid reversed="computer|tablet">
// or
<Grid reversed={["computer","tablet"]}>

Expected Result

Same behavior as in Semantic UI: https://codepen.io/dhilgarth/pen/Naezay

Actual Result

Error message:

Warning: Failed prop type: Invalid prop reversed of value computer,tablet supplied to GridRow, expected one of ["computer","computer vertically","mobile","mobile vertically","tablet","tablet vertically"].

Version

0.75.1

Testcase

https://codesandbox.io/s/w0n3wp9j48

See also my question on SO

[Maxhodges]

which syntax is supported?

<Grid reversed="computer tablet">

<Grid reversed="computer,tablet">

<Grid reversed="computer|tablet">

<Grid reversed={["computer","tablet"]}>

[layershifter]

<Grid reversed="computer tablet"/>

https://react.semantic-ui.com/collections/grid#grid-example-reversed-multiple

[Rex90]

How can we have it reversed for all the sizes? is there catchall?

[webberwang]

<Grid reversed="all" />

would be great

[brianespinosa]

@webberwang the reversed styling is for responsively switching the order of grid items per device. If you wanted to switch the order of the row on all devices the correct way to do this would be to simply render the Grid.Columns in your rows in the order you would like them to show up and not reverse them at all.

[webberwang]

@brianespinosa I was rendering an array of Grid's, I'm offsetting every other Grid to make a zig zag layout for text on one side and image on another.

I think there could still be a use case for "all". In my case I can't control the order manually if I'm mapping the components.

or just

<Grid reversed />

[brianespinosa]

@webberwang the great news is that you can actually do that in your map. If you want to post a question and a link to it on Stack Overflow with an example of what you are trying to do with your markup and the code for your map, I can go answer you there. 👍

[webberwang]

@brianespinosa oh thanks for that tip! I forgot we can do that