docs(react): update grid docs (#6733)

* docs(react): update grid docs * docs(react): update toc of grid docs * Update packages/react/src/components/Grid/Grid.mdx Co-authored-by: Alison Joseph <[email protected]> * chore(react): remove console.log * chore(grid): run prettier Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 31, 2020 · be373d6 · be373d6
1 parent 1351f63
commit be373d6
Show file tree

Hide file tree

Showing 5 changed files with 344 additions and 24 deletions.
diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
@@ -119,7 +119,7 @@ function getClassNameForBreakpoints(breakpoints) {
 
   for (let i = 0; i < breakpoints.length; i++) {
     const breakpoint = breakpoints[i];
-    if (!breakpoint) {
+    if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
 

diff --git a/packages/react/src/components/Grid/Grid-story.js b/packages/react/src/components/Grid/Grid-story.js
@@ -1,6 +1,7 @@
 import './Grid-story.scss';
 import React from 'react';
 import { Grid, Row, Column } from './';
+import mdx from './Grid.mdx';
 
 export default {
   title: 'Grid',
@@ -10,6 +11,11 @@ export default {
     Column,
   },
   decorators: [(storyFn) => <div id="templates">{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 function DemoContent({ children }) {
@@ -24,16 +30,16 @@ export const autoColumns = () => (
   <Grid>
     <Row>
       <Column>
-        <DemoContent>1/4</DemoContent>
+        <DemoContent>Span 25%</DemoContent>
       </Column>
       <Column>
-        <DemoContent>1/4</DemoContent>
+        <DemoContent>Span 25%</DemoContent>
       </Column>
       <Column>
-        <DemoContent>1/4</DemoContent>
+        <DemoContent>Span 25%</DemoContent>
       </Column>
       <Column>
-        <DemoContent>1/4</DemoContent>
+        <DemoContent>Span 25%</DemoContent>
       </Column>
     </Row>
   </Grid>
@@ -42,17 +48,26 @@ export const autoColumns = () => (
 export const responsiveGrid = () => (
   <Grid>
     <Row>
-      <Column sm={1} md={4} lg={8}>
-        <DemoContent>sm: 1/4, md: 1/2, lg: 2/3</DemoContent>
-      </Column>
-      <Column sm={1} md={2} lg={2}>
-        <DemoContent>sm: 1/4, md: 1/4, lg: 1/6</DemoContent>
-      </Column>
-      <Column sm={1} md={1} lg={1}>
-        <DemoContent>sm: 1/4, md: 1/8, lg: 1/12</DemoContent>
-      </Column>
-      <Column sm={1} md={1} lg={1}>
-        <DemoContent>sm: 1/4, md: 1/8, lg: 1/12</DemoContent>
+      <Column sm={2} md={4} lg={6}>
+        <DemoContent>
+          <p>Small: Span 2 of 4</p>
+          <p>Medium: Span 4 of 8</p>
+          <p>Large: Span 6 of 12</p>
+        </DemoContent>
+      </Column>
+      <Column sm={2} md={2} lg={3}>
+        <DemoContent>
+          <p>Small: Span 2 of 4</p>
+          <p>Medium: Span 2 of 8</p>
+          <p>Large: Span 3 of 12</p>
+        </DemoContent>
+      </Column>
+      <Column sm={0} md={2} lg={3}>
+        <DemoContent>
+          <p>Small: Span 0 of 4</p>
+          <p>Medium: Span 2 of 8</p>
+          <p>Large: Span 3 of 12</p>
+        </DemoContent>
       </Column>
     </Row>
   </Grid>
@@ -62,16 +77,16 @@ export const offset = () => (
   <Grid>
     <Row>
       <Column sm={{ span: 1, offset: 3 }}>
-        <DemoContent>Small Screen Offset 3</DemoContent>
+        <DemoContent>Small: offset 3</DemoContent>
       </Column>
       <Column sm={{ span: 2, offset: 2 }}>
-        <DemoContent>Small Screen Offset 2</DemoContent>
+        <DemoContent>Small: offset 2</DemoContent>
       </Column>
       <Column sm={{ span: 3, offset: 1 }}>
-        <DemoContent>Small Screen Offset 1</DemoContent>
+        <DemoContent>Small: offset 1</DemoContent>
       </Column>
       <Column sm={{ span: 4, offset: 0 }}>
-        <DemoContent>Small Screen Offset 0</DemoContent>
+        <DemoContent>Small: offset 0</DemoContent>
       </Column>
     </Row>
   </Grid>
@@ -227,3 +242,50 @@ export const fullWidth = () => (
     </Row>
   </Grid>
 );
+
+export const mixedGridModes = () => (
+  <Grid>
+    <Row>
+      <Column>
+        <DemoContent>Wide</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+    </Row>
+    <Row narrow>
+      <Column>
+        <DemoContent>Narrow</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+    </Row>
+    <Row condensed>
+      <Column>
+        <DemoContent>Condensed</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+      <Column>
+        <DemoContent>1/4</DemoContent>
+      </Column>
+    </Row>
+  </Grid>
+);
diff --git a/packages/react/src/components/Grid/Grid-story.scss b/packages/react/src/components/Grid/Grid-story.scss
@@ -6,12 +6,12 @@
 }
 
 // grid styles
-#root .outside {
+.bx--grid .outside {
   min-height: 80px;
   height: 100%;
 }
 
-#root .inside {
+.bx--grid .inside {
   min-height: 80px;
   height: 100%;
 }

diff --git a/packages/react/src/components/Grid/Grid.js b/packages/react/src/components/Grid/Grid.js
@@ -52,8 +52,8 @@ Grid.propTypes = {
   className: PropTypes.string,
 
   /**
-   * Collapse the gutter to 2px. Useful for fluid layouts.
-   * Rows have 2px of margin between them to match gutter.
+   * Collapse the gutter to 1px. Useful for fluid layouts.
+   * Rows have 1px of margin between them to match gutter.
    */
   condensed: PropTypes.bool,