"reverse" not working

[CharlieIGG]

The reverse prop for <Grid/> is just not working for me, either as a boolean or as an object. Help?

[jameslnewell]

👋 Hey. It works for me?

<Grid reverse>
	<Grid.Unit width={0.25}>#1</Grid.Unit>
	<Grid.Unit width={0.25}>#2</Grid.Unit>
	<Grid.Unit width={0.25}>#3</Grid.Unit>
	<Grid.Unit width={0.25}>#4</Grid.Unit>
</Grid>

Can you provide some way to reproduce it not working?

[CharlieIGG]

Hi @jameslnewell I just realized this works for me with most use cases with one important exception:

<Grid reverse wrap>
    <Grid.Unit style={{backgroundColor: "blue"}} width={1}>
       <span>Foo</span>
     </Grid.Unit>
     <Grid.Unit style={{backgroundColor: "red"}} width={1}>
       <span>Bar</span>
     </Grid.Unit> 
</Grid>

This is a simplified example, but I have a use case where, if the user is on mobile, I want the Grid.Units that I'm using to take up all of the space each, but I want them to switch places. Sort of like with Bootstrap's push and pull: https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

[jameslnewell]

Thanks for the report! I'll look at it in the next few days.

[jameslnewell]

Try 1.0.0-preview.11. https://github.com/jameslnewell/styled-components-grid/commit/b0165debbc2356c910963ae17d33c79463205c32

[CharlieIGG]

Im traveling right now, but the adjustment you made seems about right

[grgcnnr]

I'm going to revive this issue since there is a complex case where wrap and reverse still bump up against each other: Consider something like this:

<Grid reverse={{xs: false, sm: true, md:false}}>
          <GridUnit size={{xs:1/2, md: 1}}>1</GridUnit>
          <GridUnit size={{xs:1/2, md: 1}}>2</GridUnit>
 </Grid>

What we might expect:

xs [1 , 2]
sm [2, 1]
md [1
    2]

On a medium and above screen we would expect the grid to behave as a columns, however wrap-reverse is never unset so what we actually get is

md [2
    1]

Have included a demo of the bug in the example project https://github.com/grgcnnr/styled-components-grid/commit/8b2733014a6f013db9e9b06bc1c2c6d15b8b206f

[jameslnewell]

Hmm great find.

This appears to be due to this line where we're expecting reverse to be false but instead we get the truthy value of {mobile: false, tablet: true, desktop: false} since map only works on a single value.

halign likely suffers from the same problem.

Let me think about the best way of solving it.