[v10] Add gap property to Flex (#981) (#983)

* Add gap property to Flex (#981) * Add gap property to Flex This will help us stop adding margins on individual items. styled-system doesn't seem to support gap yet [1] but we can just add it ourselves. This code works for styled-system v3.1.11 [2]. In the future we'll need to simply replace `style` with `system` [3]. [1] styled-system/styled-system#1159 [2] https://github.com/styled-system/styled-system/blob/v3.1.11/docs/custom-props.md [3] https://styled-system.com/custom-props/ * Remove unnecessary tranformValue for gap (#984) It makes it impossible to specify gap as a specific value, for example "8px" as it'll get transformed to "8pxpx". Co-authored-by: Jeff Pihach <[email protected]>
gravitational · Jul 18, 2022 · f6ba3a0 · f6ba3a0
1 parent c77d16d
commit f6ba3a0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/web/packages/design/src/Flex/Flex.jsx b/web/packages/design/src/Flex/Flex.jsx
@@ -20,14 +20,19 @@ import {
   justifyContent,
   flexWrap,
   flexDirection,
+  gap,
   propTypes,
 } from 'design/system';
 import theme from 'design/theme';
 import Box from '../Box';
 
 const Flex = styled(Box)`
   display: flex;
-  ${alignItems} ${justifyContent} ${flexWrap} ${flexDirection};
+  ${alignItems}
+  ${justifyContent}
+  ${flexWrap}
+  ${flexDirection}
+  ${gap};
 `;
 
 Flex.defaultProps = {
@@ -40,6 +45,7 @@ Flex.propTypes = {
   ...propTypes.justifyContent,
   ...propTypes.flexWrap,
   ...propTypes.flexDirection,
+  ...propTypes.gap,
 };
 
 Flex.displayName = 'Flex';

diff --git a/web/packages/design/src/Flex/Flex.story.js b/web/packages/design/src/Flex/Flex.story.js
@@ -23,8 +23,8 @@ export default {
 };
 
 export const Basic = () => (
-  <Flex>
-    <Box width={1 / 2} bg="pink" p={5} mr={5}>
+  <Flex gap={5}>
+    <Box width={1 / 2} bg="pink" p={5}>
       Box one
     </Box>
     <Box width={1 / 2} bg="orange" p={5}>
@@ -34,8 +34,8 @@ export const Basic = () => (
 );
 
 export const Wrapped = () => (
-  <Flex flexWrap="wrap">
-    <Box width={[1, 1 / 2]} bg="pink" p={5} mb={2}>
+  <Flex flexWrap="wrap" gap={2}>
+    <Box width={[1, 1 / 2]} bg="pink" p={5}>
       Box one
     </Box>
     <Box width={[1, 1 / 2]} bg="orange" p={5}>

diff --git a/web/packages/design/src/system/index.js b/web/packages/design/src/system/index.js
@@ -39,11 +39,22 @@ import {
   space,
   textAlign,
   width,
+  style,
 } from 'styled-system';
 
 import typography from './typography';
 import borderRadius from './borderRadius';
 
+const gap = style({
+  prop: 'gap',
+  cssProperty: 'gap',
+  // This makes gap use the space defined in the theme.
+  // https://github.com/styled-system/styled-system/blob/v3.1.11/src/index.js#L67
+  key: 'space',
+});
+
+propTypes.gap = gap.propTypes;
+
 export {
   alignItems,
   alignSelf,
@@ -57,6 +68,7 @@ export {
   flexWrap,
   fontSize,
   fontWeight,
+  gap,
   height,
   justifyContent,
   justifySelf,