Merge pull request #32257 from adam187/styled-system-responsive-object

[styled-system] Add support for responsive object props

types/styled-system/index.d.ts

@@ -8,6 +8,7 @@
 //                 Matthieu Vachon <https://github.com/maoueh>
 //                 Adam Lavin <https://github.com/lavoaster>
 //                 Joachim Schuler <https://github.com/jschuler>
+//                 Adam Misiorny <https://github.com/adam187>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -43,7 +44,7 @@ export interface LowLevelStylefunctionArguments {
 export function style(args: LowLevelStylefunctionArguments): {[cssProp: string]: string};
 
 export type TLengthStyledSystem = string | 0 | number;
-export type ResponsiveValue<T> = T | Array<T | null>;
+export type ResponsiveValue<T> = T | Array<T | null> | { [key: string]: T };
 
 /**
  * Converts shorthand margin and padding props to margin and padding CSS declarations

types/styled-system/styled-system-tests.tsx

@@ -314,12 +314,15 @@ const test = () => (
         <Box bg="tomato" />
         // responsive width
         <Box width={[1, 1 / 2, 1 / 4]} />
+        <Box width={{ sm: 1, md: 1 / 2, lg: 1 / 4 }} />
         // responsive font-size
         <Box fontSize={[2, 3, 4]} />
+        <Box fontSize={{ sm: 2, md: 3, lg: 4 }} />
         // responsive margin
         <Box m={[1, 2, 3]} />
         // responsive padding
         <Box p={[1, 2, 3]} />
+        <Box p={{ sm: 1, md: 2, lg: 3 }} />
         // examples (margin prop) // sets margin value of `theme.space[2]`
         <Box m={2} />
         // sets margin value of `-1 * theme.space[2]`
@@ -332,6 +335,7 @@ const test = () => (
         // sets margin `8px` on all viewports and `16px` from the smallest
         breakpoint and up
         <Box m={[1, 2]} />
+        <Box m={{ sm: 1, md: 2 }} />
         // examples // width `50%`
         <Box width={1 / 2} />
         // width `256px`
@@ -341,6 +345,7 @@ const test = () => (
         // width `100%` on all viewports and `50%` from the smallest breakpoint
         and up
         <Box width={[1, 1 / 2]} />
+        <Box width={{ sm: 1, md: 1 / 2 }} />
         // examples // font-size of `theme.fontSizes[3]`
         <Text fontSize={3} />
         // font-size `32px`
@@ -350,6 +355,7 @@ const test = () => (
         // font-size `10px` on all viewports and `12px` from the smallest
         breakpoint and up
         <Text fontSize={[10, 12]} />
+        <Text fontSize={{ sm: 10, md: 12 }} />
         // examples // picks the value defined in `theme.colors['blue']`
         <Box color="blue" />
         // picks up a nested color value using dot notation //
@@ -362,6 +368,7 @@ const test = () => (
         // textAlign (responsive)
         <Text textAlign="center" />
         <Text textAlign={["center", "left"]} />
+        <Text textAlign={{ sm: "center", md: "left" }} />
         // lineHeight
         <Text lineHeight="1.25" />
         // fontWeight
@@ -371,72 +378,107 @@ const test = () => (
         // display (responsive)
         <Box display="inline-block" />
         <Box display={["block", "inline-block"]} />
+        <Box display={{ sm: "block", md: "inline-block" }} />
         // maxWidth (responsive)
         <Box maxWidth={1024} />
         <Box maxWidth={[768, null, null, 1024]} />
+        <Box maxWidth={{ sm: 768, lg: 1024 }} />
         // minWidth (responsive)
         <Box minWidth={128} />
         <Box minWidth={[96, 128]} />
+        <Box minWidth={{ sm: 96, lg: 128 }} />
         // height (responsive)
         <Box height={64} />
         <Box height={[48, 64]} />
+        <Box height={{ sm: 48, md: 64 }} />
         // maxHeight (responsive)
         <Box maxHeight={512} />
         <Box maxHeight={[384, 512]} />
+        <Box maxHeight={{ sm: 384, md: 512 }} />
         // minHeight (responsive)
         <Box minHeight={512} />
         <Box minHeight={[384, 512]} />
+        <Box minHeight={{ sm: 384, md: 512 }} />
         // size (responsive, width & height)
         <Box size={32} />
         <Box size={[32, 48]} />
+        <Box size={{ sm: 32, md: 48 }} />
         // ratio (height: 0 & paddingBottom)
         <Box ratio={3 / 4} />
         // alignItems (responsive)
         <Flex alignItems="center" />
+        <Flex alignItems={["center"]} />
+        <Flex alignItems={{ sm: "center" }} />
         // alignContent (responsive)
         <Flex alignContent="center" />
+        <Flex alignContent={["center"]} />
+        <Flex alignContent={{ sm: "center" }} />
         // justifyContent (responsive)
         <Flex justifyContent="center" />
+        <Flex justifyContent={["center"]} />
+        <Flex justifyContent={{ sm: "center" }} />
         // flexWrap (responsive)
         <Flex flexWrap="wrap" />
+        <Flex flexWrap={["wrap"]} />
+        <Flex flexWrap={{ sm: "wrap" }} />
         // flexBasis (responsive)
         <Flex flexBasis="auto" />
         // flexDirection (responsive)
         <Flex flexDirection="column" />
+        <Flex flexDirection={["column"]} />
+        <Flex flexDirection={{ sm: "column" }} />
         // gridGap
         <Grid gridGap="1px" />
         <Grid gridGap={["1", "2"]} />
+        <Grid gridGap={{ sm: "1", md: "2" }} />
         // gridRowGap
         <Grid gridRowGap="1px" />
         <Grid gridRowGap={["1", "2"]} />
+        <Grid gridRowGap={{ sm: "1", md: "2" }} />
         // gridColumnGap
         <Grid gridColumnGap="1px" />
         <Grid gridColumnGap={["1", "2"]} />
+        <Grid gridColumnGap={{ sm: "1", md: "2" }} />
         // gridRow
         <Grid gridRow="auto" />
+        <Grid gridRow={["auto"]} />
+        <Grid gridRow={{ sm: "auto" }} />
         // gridColumn
         <Grid gridColumn="auto" />
+        <Grid gridColumn={["auto"]} />
+        <Grid gridColumn={{ sm: "auto" }} />
         // gridAutoFlow
         <Grid gridAutoFlow="auto" />
         <Grid gridAutoFlow={["auto", "1fr"]} />
+        <Grid gridAutoFlow={{ sm: "auto", md: "1fr" }} />
         // gridAutoRows
         <Grid gridAutoRows="auto" />
         <Grid gridAutoRows={["auto", "1fr"]} />
+        <Grid gridAutoRows={{ sm: "auto", md: "1fr" }} />
         // gridAutoColumns
         <Grid gridAutoColumns="auto" />
         <Grid gridAutoColumns={["auto", "1fr"]} />
+        <Grid gridAutoColumns={{ sm: "auto", md: "1fr" }} />
         // gridTemplateRows
         <Grid gridTemplateRows="auto" />
         <Grid gridTemplateRows={["auto", "1fr"]} />
+        <Grid gridTemplateRows={{ sm: "auto", md: "1fr" }} />
         // gridTemplateColumns
         <Grid gridTemplateColumns="auto" />
         <Grid gridTemplateColumns={["auto", "1fr"]} />
+        <Grid gridTemplateColumns={{ sm: "auto", md: "1fr" }} />
         // flex (responsive)
         <Box flex="1 1 auto" />
+        <Box flex={["1 1 auto"]} />
+        <Box flex={{ sm: "1 1 auto" }} />
         // justifySelf (responsive)
         <Box justifySelf="center" />
+        <Box justifySelf={["center"]} />
+        <Box justifySelf={{ sm: "center" }} />
         // alignSelf (responsive)
         <Box alignSelf="center" />
+        <Box alignSelf={["center"]} />
+        <Box alignSelf={{ sm: "center" }} />
         <Box border="1px solid" />
         <Box borderTop="1px solid" />
         <Box borderRight="1px solid" />
@@ -448,10 +490,19 @@ const test = () => (
         <Box borderRadius={4} />
         // position (responsive)
         <Box position="absolute" />
+        <Box position={["absolute"]} />
+        <Box position={{ sm: "absolute" }} />
         // zIndex
         <Box zIndex={2} />
         // top, right, bottom, left (responsive)
         <Box top="0" right="0" bottom="0" left="0" />
+        <Box top={["0"]} right={["0"]} bottom={["0"]} left={["0"]} />
+        <Box
+            top={{ sm: "0" }}
+            right={{ sm: "0" }}
+            bottom={{ sm: "0" }}
+            left={{ sm: "0" }}
+        />
         // boxShadow
         <Box boxShadow={1} />
         // backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat