Access to spacing scale in minWidth prop #3
Description
To be consistent with width, minWidth and maxWidth props of styled-system:
<Stack minWidth={5}>
<Box>foo</Box>
<Box>bar</Box>
</Stack>;Could be something like this:
const px = (value: TLengthStyledSystem): string =>
typeof value === 'number' ? `${value}px` : value;
const getMinMaxValue = (
value: TLengthStyledSystem,
scale: TLengthStyledSystem[] = []
): string => px(scale[value as any] || value);
const Stack = styled(Box)<Props>(
{
display: 'grid',
},
grid,
system({
minColumnWidth: {
property: 'gridTemplateColumns',
scale: 'space',
transform: (value, scale) =>
value
? `repeat(auto-fit, minmax(${getMinMaxValue(
value,
scale as TLengthStyledSystem[]
)}, 1fr))`
: null,
},
})
);- Change
minWidthprop implementation - Update docs if necessary to use spacing values instead of hardcoded ones