feat(core-flex-grid): add outsideGutter property

telus · Aug 25, 2020 · d5b1a36 · d5b1a36
1 parent b4905c7
commit d5b1a36
Show file tree

Hide file tree

Showing 4 changed files with 563 additions and 30 deletions.
diff --git a/packages/FlexGrid/FlexGrid.jsx b/packages/FlexGrid/FlexGrid.jsx
@@ -15,35 +15,34 @@ import GutterContext from './gutterContext'
 const rem = breakpoint => {
   return `${breakpoints[breakpoint] / 16}rem`
 }
-
-const StyledGrid = styled(({ reverseLevel, limitWidth, ...rest }) => <Grid {...rest} />)(
-  ({ reverseLevel, limitWidth }) => ({
-    display: 'flex',
-    flexWrap: 'wrap',
-    margin: '0 auto',
-    width: '100%',
-    'div&': { padding: 0 },
-    ...media.until('sm').css({
-      flexDirection: reverseLevel[0] ? 'column-reverse' : 'column',
-    }),
-    ...media.from('sm').css({
-      ...(limitWidth && { maxWidth: rem('sm') }),
-      flexDirection: reverseLevel[1] ? 'column-reverse' : 'column',
-    }),
-    ...media.from('md').css({
-      ...(limitWidth && { maxWidth: rem('md') }),
-      flexDirection: reverseLevel[2] ? 'column-reverse' : 'column',
-    }),
-    ...media.from('lg').css({
-      ...(limitWidth && { maxWidth: rem('lg') }),
-      flexDirection: reverseLevel[3] ? 'column-reverse' : 'column',
-    }),
-    ...media.from('xl').css({
-      ...(limitWidth && { maxWidth: rem('xl') }),
-      flexDirection: reverseLevel[4] ? 'column-reverse' : 'column',
-    }),
-  })
-)
+const StyledGrid = styled(({ reverseLevel, limitWidth, outsideGutter, ...rest }) => (
+  <Grid {...rest} />
+))(({ reverseLevel, limitWidth, outsideGutter }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  margin: `0 ${!outsideGutter ? '-1rem' : 'auto'}`,
+  width: !outsideGutter ? undefined : '100%',
+  'div&': { padding: 0 },
+  ...media.until('sm').css({
+    flexDirection: reverseLevel[0] ? 'column-reverse' : 'column',
+  }),
+  ...media.from('sm').css({
+    ...(limitWidth && { maxWidth: rem('sm') }),
+    flexDirection: reverseLevel[1] ? 'column-reverse' : 'column',
+  }),
+  ...media.from('md').css({
+    ...(limitWidth && { maxWidth: rem('md') }),
+    flexDirection: reverseLevel[2] ? 'column-reverse' : 'column',
+  }),
+  ...media.from('lg').css({
+    ...(limitWidth && { maxWidth: rem('lg') }),
+    flexDirection: reverseLevel[3] ? 'column-reverse' : 'column',
+  }),
+  ...media.from('xl').css({
+    ...(limitWidth && { maxWidth: rem('xl') }),
+    flexDirection: reverseLevel[4] ? 'column-reverse' : 'column',
+  }),
+}))
 
 /**
  * A mobile-first flexbox grid.
@@ -54,6 +53,7 @@ const StyledGrid = styled(({ reverseLevel, limitWidth, ...rest }) => <Grid {...r
 const FlexGrid = ({
   limitWidth,
   gutter,
+  outsideGutter,
   xsReverse,
   smReverse,
   mdReverse,
@@ -65,7 +65,13 @@ const FlexGrid = ({
   const reverseLevel = calculateLevel(xsReverse, smReverse, mdReverse, lgReverse, xlReverse)
   return (
     <GutterContext.Provider value={gutter}>
-      <StyledGrid {...safeRest(rest)} fluid reverseLevel={reverseLevel} limitWidth={limitWidth}>
+      <StyledGrid
+        {...safeRest(rest)}
+        fluid
+        outsideGutter={outsideGutter}
+        reverseLevel={reverseLevel}
+        limitWidth={limitWidth}
+      >
         {children}
       </StyledGrid>
     </GutterContext.Provider>
@@ -81,6 +87,10 @@ FlexGrid.propTypes = {
    * Whether or not to include gutters in between columns.
    */
   gutter: PropTypes.bool,
+  /**
+   * Whether or not to include gutter at the ends to the left and right of the FlexGrid
+   */
+  outsideGutter: PropTypes.bool,
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
@@ -110,6 +120,7 @@ FlexGrid.propTypes = {
 FlexGrid.defaultProps = {
   limitWidth: true,
   gutter: true,
+  outsideGutter: true,
   xsReverse: undefined,
   smReverse: undefined,
   mdReverse: undefined,

diff --git a/packages/FlexGrid/FlexGrid.md b/packages/FlexGrid/FlexGrid.md
@@ -74,6 +74,53 @@ horizontal padding from all child columns.
 </FlexGrid>
 ```
 
+### Removing the outside gutter
+
+In some layouts, there might be the need to remove the gutter from the left and right of the row.
+For example, if the layout requires a `FlexGrid` to be nested under another `FlexGrid` Column,
+the child `FlexGrid`'s columns will not line up with the parent `FlexGrid`'s columns due to the additional gutter between the child columns.
+
+It is possible to avoid this situation while keeping the gutters between the columns,
+to do so, pass `outsideGutter={false}` to the child `FlexGrid`.
+This will remove the gutter on the left and the right of the `FlexGrid`.
+
+`outsideGutter` should not be false if parent `FlexGrid` has `gutter={false}`.
+
+```jsx { "props": { "className": "docs_full-width-playground docs_flex-grid-coloring" } }
+<FlexGrid>
+  <FlexGrid.Row>
+    <FlexGrid.Col>
+      <Box vertical={2}>
+        <Text>Parent Column</Text>
+      </Box>
+    </FlexGrid.Col>
+    <FlexGrid.Col>
+      <Box vertical={2}>
+        <Text>Parent Column</Text>
+      </Box>
+    </FlexGrid.Col>
+  </FlexGrid.Row>
+  <FlexGrid.Row>
+    <FlexGrid.Col>
+      <FlexGrid outsideGutter={false}>
+        <FlexGrid.Row>
+          <FlexGrid.Col>
+            <Box vertical={2}>
+              <Text>Child Column</Text>
+            </Box>
+          </FlexGrid.Col>
+          <FlexGrid.Col>
+            <Box vertical={2}>
+              <Text>Child Column</Text>
+            </Box>
+          </FlexGrid.Col>
+        </FlexGrid.Row>
+      </FlexGrid>
+    </FlexGrid.Col>
+  </FlexGrid.Row>
+</FlexGrid>
+```
+
 ### Working with full-width and limited-width content
 
 Pages should have multiple instances of `FlexGrid` to separate full-width content and regular limited-width content.

diff --git a/packages/FlexGrid/__tests__/FlexGrid.spec.jsx b/packages/FlexGrid/__tests__/FlexGrid.spec.jsx
@@ -107,4 +107,11 @@ describe('FlexGrid', () => {
 
     expect(flexGrid).toMatchSnapshot()
   })
+
+  it('renders with no outside gutter', () => {
+    const { flexGrid } = doMount({
+      outsideGutter: true,
+    })
+    expect(flexGrid).toMatchSnapshot()
+  })
 })