feat(grid): add full width grid modifier (carbon-design-system#207)

* feat: added fluid spacing token * docs: updated demo with fluid spacing * feat: added grid--full-width modifier * docs: updated demos to reflect new changes to grid
joshblack · Jan 3, 2019 · 5f72216 · 5f72216
1 parent 6eb3b0a
commit 5f72216
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 8 deletions.
diff --git a/packages/grid/examples/basic/src/components/App.js b/packages/grid/examples/basic/src/components/App.js
@@ -9,6 +9,8 @@ import CondensedPage from './CondensedPage';
 import HangPage from './HangPage';
 import AspectRatioPage from './AspectRatioPage';
 import FullBleedPage from './FullBleedPage';
+import Fluid from './Fluid';
+import FullWidth from './FullWidth';
 import NotFound from './NotFound';
 
 const { PATH_PREFIX = '' } = process.env;
@@ -18,6 +20,8 @@ export default function App() {
     <Router>
       <ExamplesPage path={PATH_PREFIX === '' ? '/' : PATH_PREFIX} />
       <BasicUsagePage path={`${PATH_PREFIX}/basic`} />
+      <Fluid path={`${PATH_PREFIX}/fluid`} />
+      <FullWidth path={`${PATH_PREFIX}/full-width`} />
       <OffsetPage path={`${PATH_PREFIX}/offset`} />
       <PaddingPage path={`${PATH_PREFIX}/padding`} />
       <BleedPage path={`${PATH_PREFIX}/bleed`} />

diff --git a/packages/grid/examples/basic/src/components/ExamplesPage.js b/packages/grid/examples/basic/src/components/ExamplesPage.js
@@ -24,6 +24,12 @@ export default function ExamplesPage() {
               <li>
                 <Link to={`${PATH_PREFIX}/basic`}>Basic Usage</Link>
               </li>
+              <li>
+                <Link to={`${PATH_PREFIX}/fluid`}>Fluid</Link>
+              </li>
+              <li>
+                <Link to={`${PATH_PREFIX}/full-width`}>Full Width</Link>
+              </li>
               <li>
                 <Link to={`${PATH_PREFIX}/offset`}>Offsets</Link>
               </li>

diff --git a/packages/grid/examples/basic/src/components/Fluid.js b/packages/grid/examples/basic/src/components/Fluid.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Grid, Row, Column } from './Grid';
+import Main from './Main';
+import ExampleContent from './ExampleContent';
+
+export default function BasicUsage() {
+  return (
+    <Main>
+      <div class="bx--fluid-grid">
+        <Row>
+          <Column breakpoint="md" span={4}>
+            <h1>Fluid example</h1>
+            <p>
+              This example showcases the percentage based container and how it
+              behaves responsively before maxing out at the largest breakpoint.
+            </p>
+          </Column>
+        </Row>
+        <ExampleContent />
+      </div>
+    </Main>
+  );
+}
diff --git a/packages/grid/examples/basic/src/components/FullBleedPage.js b/packages/grid/examples/basic/src/components/FullBleedPage.js
@@ -6,7 +6,7 @@ export default function FullBleedPage() {
   return (
     <Main>
       <div className="full-bleed-example">
-        <div className="bx--fluid-grid">
+        <div className="bx--fluid-grid bx--grid--full-width">
           <Row>
             <Column breakpoint="lg" span={10}>
               <div

diff --git a/packages/grid/examples/basic/src/components/FullWidth.js b/packages/grid/examples/basic/src/components/FullWidth.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Grid, Row, Column } from './Grid';
+import Main from './Main';
+import ExampleContent from './ExampleContent';
+
+export default function BasicUsage() {
+  return (
+    <Main>
+      <div class="bx--fluid-grid bx--grid--full-width">
+        <Row>
+          <Column breakpoint="md" span={4}>
+            <h1>Full width example</h1>
+          </Column>
+        </Row>
+        <Row>
+          <Column breakpoint="md" span={4}>
+            <p>
+              This example showcases the full width modifier on the fluid grid.
+            </p>
+          </Column>
+        </Row>
+        <Row>
+          <Column breakpoint="md" span={4}>
+            <h2>
+              Small{' '}
+              <span style={{ fontSize: '14px' }}>(4 columns @ 320px)</span>
+            </h2>
+          </Column>
+        </Row>
+        <Row>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+        </Row>
+      </div>
+      <div class="bx--grid bx--grid--full-width">
+        <Row>
+          <Column breakpoint="md" span={4}>
+            <p>
+              This example showcases the full width modifier on the basic grid.
+            </p>
+          </Column>
+        </Row>
+        <Row>
+          <Column breakpoint="md" span={4}>
+            <h2>
+              Small{' '}
+              <span style={{ fontSize: '14px' }}>(4 columns @ 320px)</span>
+            </h2>
+          </Column>
+        </Row>
+        <Row>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+          <Column breakpoint="sm" span={1}>
+            <div class="outside">
+              <div class="inside">1</div>
+            </div>
+          </Column>
+        </Row>
+      </div>
+    </Main>
+  );
+}
diff --git a/packages/grid/examples/basic/styles.scss b/packages/grid/examples/basic/styles.scss
@@ -43,6 +43,7 @@ h6 {
   outline: 1px dashed #97c1ff;
 }
 
+.bx--fluid-grid,
 .bx--grid {
   outline: 1px dashed #97c1ff;
 }

diff --git a/packages/grid/scss/_container.scss b/packages/grid/scss/_container.scss
@@ -11,14 +11,16 @@
  * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
  */
 @import '@carbon/layout/scss/breakpoint';
+@import '@carbon/layout/scss/utilities';
 
 /// Create the container for a grid. Will cause full-bleed for the grid unless
 /// max-width properties are added with `make-container-max-widths`
 @mixin make-container($breakpoints: $grid-breakpoints) {
-  width: 100%;
   margin-right: auto;
   margin-left: auto;
 
+  @include set-largest-breakpoint();
+
   @each $name, $value in $breakpoints {
     $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
     $margin: map-get($value, margin);
@@ -40,6 +42,12 @@
   }
 }
 
+// gets the last breakpoint width, and sets it to a max-width
+@mixin set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+  max-width: map-get($largest-breakpoint, 'width');
+}
+
 /// Add in the max-widths for each breakpoint to the container
 @mixin make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {

diff --git a/packages/grid/scss/grid.scss b/packages/grid/scss/grid.scss
@@ -11,16 +11,23 @@
 @import 'row';
 @import 'col';
 
-// Default container class for a grid. Includes max-width for each breakpoint
-.#{$prefix}--grid {
+@debug $grid-breakpoints;
+
+// Fluid variant of the grid.
+.#{$prefix}--fluid-grid {
   @include make-container();
-  @include make-container-max-widths();
 }
 
-// Fluid variant of the grid. Will not set max-width for breakpoints and will
-// full-bleed across the page.
-.#{$prefix}--fluid-grid {
+// Default container class for a grid. Includes max-width for all breakpoints
+.#{$prefix}--grid {
   @include make-container();
+  @include make-container-max-widths();
+
+  &--full-width {
+    @include largest-breakpoint() {
+      max-width: 100%;
+    }
+  }
 }
 
 .#{$prefix}--row {

diff --git a/packages/layout/scss/_breakpoint.scss b/packages/layout/scss/_breakpoint.scss
@@ -7,6 +7,7 @@
 
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
 @import 'convert';
+@import 'utilities';
 
 $grid-cell-padding: rem(16px);
 $grid-gutter: rem(32px);
@@ -75,6 +76,14 @@ $grid-breakpoints: (
   @return index(map-keys($breakpoints), $name) == 1;
 }
 
+/// returns the largest breakpoint name
+/// @param {string} $breakpoint
+/// @content
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: length($breakpoints);
+  @return key-by-index($breakpoints, $total-breakpoints);
+}
+
 /// Get the infix for a given breakpoint in a list of breakpoints. Usesful for
 /// generate the size part in a selector, for example: `.prefix--col-sm-2`
 /// @param {String} $name - the name of the breakpoint
@@ -148,6 +157,15 @@ $grid-breakpoints: (
   }
 }
 
+/// generate media query for the largest breakpoint
+/// @param {string} $breakpoint
+/// @content
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+
 /// Generate a media query for a given breakpoint
 /// @param {string} $breakpoint
 /// @content

diff --git a/packages/layout/scss/_utilities.scss b/packages/layout/scss/_utilities.scss
@@ -17,3 +17,23 @@
   }
   @return $map;
 }
+
+/// Key by Index
+/// provide a $map, and $index, and get back the relevant
+/// key value.
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} - Desired value
+@function key-by-index($map, $index) {
+  $keys: map-keys($map);
+  @return nth($keys, $index);
+}
+
+/// Last Map Item
+/// Pass in a map, and get the last one in the list back.
+/// @param {Map} $map - Map
+/// @return {*} - Desired value
+@function last-map-item($map) {
+  $total-length: length($map);
+  @return map-get($map, key-by-index($map, $total-length));
+}