@carbon/grid 10.32.1 → 10.34.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.32.1",
+  "version": "10.34.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.28.0"
+    "@carbon/layout": "^10.30.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.26.0",
+    "@carbon/cli": "^10.28.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -45,5 +45,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "51b7bce591d08798445927dec8a91436bfd31c57"
+  "gitHead": "1b4811e1ef0be1d058e63a90242d9d48f0bff445"
 }

package/scss/modules/_breakpoint.scss

@@ -91,7 +91,7 @@ $grid-breakpoints: (
 ) !default;
 
 /// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -110,7 +110,7 @@ $grid-breakpoints: (
 }
 
 /// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -129,7 +129,7 @@ $grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @return {Bool}
 /// @access public
@@ -148,7 +148,7 @@ $grid-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`.
+/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
 /// @param {String} $name - The name of the breakpoint
 /// @return {String}
 /// @access public

package/scss/modules/_css-grid.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use "sass:math";
+
 @use 'sass:map';
 @use 'config' as *;
 @use 'breakpoint' as *;
@@ -110,7 +112,7 @@
 // Condensed
 // -----------------------------------------------------------------------------
 .#{$prefix}--css-grid--condensed {
-  --cds-grid-gutter: 2px;
+  --cds-grid-gutter: 1px;
 
   column-gap: var(--cds-grid-gutter);
   row-gap: var(--cds-grid-gutter);
@@ -128,7 +130,7 @@
 // -----------------------------------------------------------------------------
 .#{$prefix}--css-grid--no-gutter {
   // This is set to 0px (versus 0) so that the calc expression for padding for
-  // a grid container works as epxected. Without the unit, the calc() will
+  // a grid container works as expected. Without the unit, the calc() will
   // result in a value of 0.
   // stylelint-disable-next-line length-zero-no-unit
   --cds-grid-gutter: 0px;
@@ -270,7 +272,7 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    // The `grid-column-end` and `grid-column-start` properies are *not* inclusive.
+    // The `grid-column-end` and `grid-column-start` properties are *not* inclusive.
     // It starts/ends the column *at* the column, not *on* the column. We must
     // ensure that there is one additional class available for each breakpoint.
     @for $i from 1 through $columns + 1 {
@@ -411,7 +413,7 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage($height / $width);
+      padding-top: percentage(math.div($height, $width));
     }
   }
 }

package/scss/modules/_mixins.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use "sass:math";
+
 @use 'config' as *;
 @use 'breakpoint' as *;
 
@@ -27,21 +29,21 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: ($gutter * 0.5);
+  padding-left: ($gutter * 0.5);
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
   // side.
   .#{$prefix}--row--condensed &,
   .#{$prefix}--grid--condensed & {
-    padding-right: ($condensed-gutter / 2);
-    padding-left: ($condensed-gutter / 2);
+    padding-right: ($condensed-gutter * 0.5);
+    padding-left: ($condensed-gutter * 0.5);
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}--row--narrow &,
   .#{$prefix}--grid--narrow & {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
     padding-left: 0;
   }
 }
@@ -61,8 +63,8 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: percentage($span / $columns);
-    flex: 0 0 percentage($span / $columns);
+    max-width: percentage(math.div($span, $columns));
+    flex: 0 0 percentage(math.div($span, $columns));
   }
 }
 
@@ -72,7 +74,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
-  $offset: $span / $columns;
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {
@@ -154,8 +156,8 @@
 @mixin make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter / 2;
-  margin-left: -1 * $gutter / 2;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -206,20 +208,20 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--end {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
   }
 
   // Deprecated ☠️
   .#{$prefix}--hang--left {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--right {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
   }
 }
 
@@ -246,14 +248,14 @@
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
-          padding-right: #{($grid-gutter / 2) + $margin};
-          padding-left: #{($grid-gutter / 2) + $margin};
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include breakpoint($name) {
-        padding-right: #{($grid-gutter / 2) + $margin};
-        padding-left: #{($grid-gutter / 2) + $margin};
+        padding-right: #{($grid-gutter * 0.5) + $margin};
+        padding-left: #{($grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -308,13 +310,13 @@
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: $grid-gutter / 2;
-    padding-bottom: $grid-gutter / 2;
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter / 2;
-    padding-bottom: $condensed-gutter / 2;
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);

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

@@ -54,7 +54,7 @@ $carbon--grid-breakpoints: (
 ) !default;
 
 /// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -73,7 +73,7 @@ $carbon--grid-breakpoints: (
 }
 
 /// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -92,7 +92,7 @@ $carbon--grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @return {Bool}
 /// @access public
@@ -116,7 +116,7 @@ $carbon--grid-breakpoints: (
   @return carbon--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`.
+/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
 /// @param {String} $name - The name of the breakpoint
 /// @return {String}
 /// @access public

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

@@ -57,7 +57,7 @@ $grid-breakpoints: (
 ) !default;
 
 /// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -76,7 +76,7 @@ $grid-breakpoints: (
 }
 
 /// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
@@ -95,7 +95,7 @@ $grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
 /// @return {Bool}
 /// @access public
@@ -114,7 +114,7 @@ $grid-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`.
+/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
 /// @param {String} $name - The name of the breakpoint
 /// @return {String}
 /// @access public