@carbon/grid 10.12.0 → 10.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.12.0",
+  "version": "10.14.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/grid",
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.3.0",
-    "@carbon/layout": "^10.11.0"
+    "@carbon/layout": "^10.12.0"
   },
   "devDependencies": {
     "@carbon/bundler": "^10.9.0",
@@ -40,5 +40,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "ff543b3d3dbbf51170a185c0ecff62b7dca253c7"
+  "gitHead": "213cbde854a4958334cff9914b91863ce6debb9d"
 }

package/scss/_inlined/_mixins.scss

@@ -41,6 +41,13 @@
     padding-right: ($condensed-gutter / 2);
     padding-left: ($condensed-gutter / 2);
   }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: ($gutter / 2);
+    padding-left: 0;
+  }
 }
 
 /// Define the width of the column for a given span and column count.
@@ -159,17 +166,28 @@
 // No gutter
 // -----------------------------------------------------------------------------
 
-/// Add `no-gutter` and `no-gutter--{left,right}` classes to the output CSS. These
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
 /// classes are useful for dropping the gutter in fluid situations.
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--no-gutter {
   .#{$prefix}--no-gutter,
   .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
     padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
 
+  // Deprecated ☠️
   .#{$prefix}--no-gutter--left,
   .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
     padding-left: 0;
@@ -185,12 +203,21 @@
 // Hang
 // -----------------------------------------------------------------------------
 
-/// Add `hang--left` and `hang--right` classes for a given gutter. These classes are
-/// used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
 /// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--hang--left {
     padding-left: ($gutter / 2);
   }
@@ -237,17 +264,17 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    content: '';
-    width: 1px;
-    margin-left: -1px;
     float: left;
+    width: 1px;
     height: 0;
+    margin-left: -1px;
+    content: '';
   }
 
   .#{$prefix}--aspect-ratio::after {
-    content: '';
     display: table;
     clear: both;
+    content: '';
   }
 
   @each $aspect-ratio in $aspect-ratios {
@@ -292,14 +319,14 @@ $carbon--aspect-ratios: (
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include carbon--breakpoint($name) {
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
           padding-right: #{($carbon--grid-gutter / 2) + $margin};
+          padding-left: #{($carbon--grid-gutter / 2) + $margin};
         }
       }
     } @else {
       @include carbon--breakpoint($name) {
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
         padding-right: #{($carbon--grid-gutter / 2) + $margin};
+        padding-left: #{($carbon--grid-gutter / 2) + $margin};
       }
     }
   }

package/scss/_mixins.scss

@@ -41,6 +41,13 @@
     padding-right: ($condensed-gutter / 2);
     padding-left: ($condensed-gutter / 2);
   }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: ($gutter / 2);
+    padding-left: 0;
+  }
 }
 
 /// Define the width of the column for a given span and column count.
@@ -159,17 +166,28 @@
 // No gutter
 // -----------------------------------------------------------------------------
 
-/// Add `no-gutter` and `no-gutter--{left,right}` classes to the output CSS. These
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
 /// classes are useful for dropping the gutter in fluid situations.
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--no-gutter {
   .#{$prefix}--no-gutter,
   .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
     padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
 
+  // Deprecated ☠️
   .#{$prefix}--no-gutter--left,
   .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
     padding-left: 0;
@@ -185,12 +203,21 @@
 // Hang
 // -----------------------------------------------------------------------------
 
-/// Add `hang--left` and `hang--right` classes for a given gutter. These classes are
-/// used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
 /// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--hang--left {
     padding-left: ($gutter / 2);
   }
@@ -237,17 +264,17 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    content: '';
-    width: 1px;
-    margin-left: -1px;
     float: left;
+    width: 1px;
     height: 0;
+    margin-left: -1px;
+    content: '';
   }
 
   .#{$prefix}--aspect-ratio::after {
-    content: '';
     display: table;
     clear: both;
+    content: '';
   }
 
   @each $aspect-ratio in $aspect-ratios {
@@ -292,14 +319,14 @@ $carbon--aspect-ratios: (
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include carbon--breakpoint($name) {
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
           padding-right: #{($carbon--grid-gutter / 2) + $margin};
+          padding-left: #{($carbon--grid-gutter / 2) + $margin};
         }
       }
     } @else {
       @include carbon--breakpoint($name) {
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
         padding-right: #{($carbon--grid-gutter / 2) + $margin};
+        padding-left: #{($carbon--grid-gutter / 2) + $margin};
       }
     }
   }

package/scss/vendor/@carbon/layout/_breakpoint.scss

@@ -19,7 +19,7 @@ $carbon--grid-gutter: carbon--rem(32px);
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$carbon--grid-gutter--condensed: carbon--rem(2px);
+$carbon--grid-gutter--condensed: carbon--rem(1px);
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -125,7 +125,7 @@ $carbon--grid-breakpoints: (
   @return '-#{$name}';
 }
 
-/// Generate a media query up to the width of the given breakpoint name
+/// Generate a media query from the width of the given breakpoint to infinity
 /// @param {String | Number} $name
 /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
 /// @content