Min and max feature of between stopped working
nilsborg opened this issue · comments
polishedversion: 3.4.4JSS-in_CSSlibrary and version: styled-components 5.0.1- Any relevant JS library and version: React 16.12.0
Mixin/Helper/Shorthand you were using and how you were using it:
const Headline = styled.h1`
font-size: ${between("20px", "40px")};
`;What you are seeing:
It seems like the media query based min and max values are simply not kicking in. But I'm pretty sure it was working before.
As you can see in the screenshot, the max should be 40px but it goes up and up …
What you expected to see:
I expected to see that the max value kicks in at 40px.
Reproduction:
https://codesandbox.io/s/thirsty-jennings-ul2py (I tried Chrome and Firefox latest versions)
@nilsborg You want fluidRange in this case: https://codesandbox.io/s/twilight-breeze-9mesd
between will calculate the appropriate linear interpolation but allow it to shrink/grow with a min/max. Admittedly, we can be clearer about this in the docs.
@nilsborg Think of it this way: fluidRange wraps between.
between creates the calculation for ensuring that the text will be X size at Y resolution and linearly scale to Z size at A resolution. However, it does not cap that scale so the text will scale along that curve indefinitely in either direction.
fluidRange simply adds the media queries necessary to enforce the hard min/max so it will scale linearly along that curve, but stop at the bottom and top.
between is only really useful if you want to scale indefinitely, but either only care about how it scales between a min/max or want to think about the linear scale in a narrower context.
In most cases, folks will use fluidRange between has very limited use cases and is mostly a helper for fluidRange
🤯🤘
Thank you so much for this! Finally makes sense and will now be saved in my brain forever.