docs(react): update grid docs

carbon-design-system · Aug 26, 2020 · 49d9258 · 49d9258
1 parent 92992ef
commit 49d9258
Show file tree

Hide file tree

Showing 5 changed files with 347 additions and 25 deletions.
diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
@@ -119,10 +119,11 @@ function getClassNameForBreakpoints(breakpoints) {
 
   for (let i = 0; i < breakpoints.length; i++) {
     const breakpoint = breakpoints[i];
-    if (!breakpoint) {
+    if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
 
+    console.log(breakpoint);
     const name = breakpointNames[i];
 
     // If our breakpoint is a boolean, the user has specified that the column

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',
@@ -9,7 +10,12 @@ export default {
     Row,
     Column,
   },
-  decorators: [(storyFn) => <div id="templates">{storyFn()}</div>],
+  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,