styled-components-grid
styled-components-grid copied to clipboard
"reverse" not working
The reverse
prop for <Grid/> is just not working for me, either as a boolean or as an object. Help?
👋 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?
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.Unit
s 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
Thanks for the report! I'll look at it in the next few days.
Try 1.0.0-preview.11
.
https://github.com/jameslnewell/styled-components-grid/commit/b0165debbc2356c910963ae17d33c79463205c32
Im traveling right now, but the adjustment you made seems about right
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
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.