@carbon/grid 10.41.0 → 10.42.0-rc.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.41.0",
+  "version": "10.42.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,11 +32,11 @@
     "clean": "rimraf scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.36.0"
+    "@carbon/import-once": "^10.7.0-rc.0",
+    "@carbon/layout": "^10.37.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.33.0",
+    "@carbon/cli": "^10.34.0-rc.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -45,5 +45,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
+  "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
 }

package/scss/_inlined/_mixins.import.scss

@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../vendor/@carbon/layout/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

package/scss/_mixins.import.scss

@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '@carbon/layout/scss/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

package/scss/modules/_breakpoint.scss

@@ -20,7 +20,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -32,7 +32,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -42,7 +42,7 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, key-by-index($map, $total-length));
 }
 

package/scss/modules/_css-grid.scss

@@ -5,10 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'sass:meta';
-@use "sass:math";
-
+@use 'sass:list';
 @use 'sass:map';
+@use "sass:math";
+@use 'sass:meta';
 @use 'config' as *;
 @use 'breakpoint' as *;
 

package/scss/modules/_flex-grid.scss

@@ -70,11 +70,11 @@
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     @if meta.function-exists('div', 'math') {
-      max-width: percentage(math.div($span, $columns));
-      flex: 0 0 percentage(math.div($span, $columns));
+      max-width: math.percentage(math.div($span, $columns));
+      flex: 0 0 math.percentage(math.div($span, $columns));
     } @else {
-      max-width: percentage(($span / $columns));
-      flex: 0 0 percentage(($span / $columns));
+      max-width: math.percentage(($span / $columns));
+      flex: 0 0 math.percentage(($span / $columns));
     }
   }
 }
@@ -94,7 +94,7 @@
   @if $offset == 0 {
     margin-left: 0;
   } @else {
-    margin-left: percentage($offset);
+    margin-left: math.percentage($offset);
   }
 }
 
@@ -113,7 +113,7 @@
 
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
     @for $i from 0 through $columns {
@@ -257,11 +257,11 @@
   @include -set-largest-breakpoint();
 
   @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
-    $margin: map-get($value, margin);
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
 
     @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
+      $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
           padding-right: #{($grid-gutter * 0.5) + $margin};
@@ -284,7 +284,7 @@
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
 
-  max-width: map-get($largest-breakpoint, 'width');
+  max-width: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -294,7 +294,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include breakpoint($name) {
-      max-width: map-get($value, width);
+      max-width: map.get($value, width);
     }
   }
 }
@@ -341,26 +341,26 @@
 }
 
 @if $flex-grid-columns == 12 {
-  $flex-12-column-grid: map-merge(
+  $flex-12-column-grid: map.merge(
     $grid-breakpoints,
     (
       lg:
-        map-merge(
-          map-get($grid-breakpoints, lg),
+        map.merge(
+          map.get($grid-breakpoints, lg),
           (
             columns: 12,
           )
         ),
       xlg:
-        map-merge(
-          map-get($grid-breakpoints, xlg),
+        map.merge(
+          map.get($grid-breakpoints, xlg),
           (
             columns: 12,
           )
         ),
       max:
-        map-merge(
-          map-get($grid-breakpoints, max),
+        map.merge(
+          map.get($grid-breakpoints, max),
           (
             columns: 12,
           )

package/scss/modules/_mixins.scss

@@ -65,11 +65,11 @@
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     @if meta.function-exists('div', 'math') {
-      max-width: percentage(math.div($span, $columns));
-      flex: 0 0 percentage(math.div($span, $columns));
+      max-width: math.percentage(math.div($span, $columns));
+      flex: 0 0 math.percentage(math.div($span, $columns));
     } @else {
-      max-width: percentage(($span / $columns));
-      flex: 0 0 percentage(($span / $columns));
+      max-width: math.percentage(($span / $columns));
+      flex: 0 0 math.percentage(($span / $columns));
     }
   }
 }
@@ -89,7 +89,7 @@
   @if $offset == 0 {
     margin-left: 0;
   } @else {
-    margin-left: percentage($offset);
+    margin-left: math.percentage($offset);
   }
 }
 
@@ -108,7 +108,7 @@
 
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
     @for $i from 0 through $columns {
@@ -252,11 +252,11 @@
   @include -set-largest-breakpoint();
 
   @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
-    $margin: map-get($value, margin);
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
 
     @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
+      $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
           padding-right: #{($grid-gutter * 0.5) + $margin};
@@ -279,7 +279,7 @@
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
 
-  max-width: map-get($largest-breakpoint, 'width');
+  max-width: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -289,7 +289,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include breakpoint($name) {
-      max-width: map-get($value, width);
+      max-width: map.get($value, width);
     }
   }
 }

package/scss/vendor/@carbon/import-once/import-once.scss

@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

package/scss/vendor/@carbon/layout/_key-height.import.scss

@@ -21,8 +21,8 @@
 
 @use 'sass:meta';
 @use "sass:math";
-@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'breakpoint';
+@import 'utilities';
 
 /// Get the column width for a given breakpoint
 /// @param {String} $breakpoint

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

@@ -14,7 +14,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -26,7 +26,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -36,6 +36,6 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, carbon--key-by-index($map, $total-length));
 }

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

@@ -1,232 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'convert';
-@use 'utilities';
-
-/// Carbon gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$grid-gutter: convert.rem(32px);
-
-/// Carbon condensed gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$grid-gutter--condensed: convert.rem(1px);
-
-// Initial map of our breakpoints and their values
-/// @type Map
-/// @access public
-/// @group @carbon/layout
-$grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: convert.rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
-  ),
-) !default;
-
-/// Get the value of the next breakpoint, or null for the last breakpoint
-/// @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}
-/// @access public
-/// @group @carbon/layout
-@function breakpoint-next(
-  $name,
-  $breakpoints: $grid-breakpoints,
-  $breakpoint-names: map.keys($breakpoints)
-) {
-  $n: list.index($breakpoint-names, $name);
-  @if $n != null and $n < list.length($breakpoint-names) {
-    @return list.nth($breakpoint-names, $n + 1);
-  }
-  @return null;
-}
-
-/// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @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}
-/// @access public
-/// @group @carbon/layout
-@function breakpoint-prev(
-  $name,
-  $breakpoints: $grid-breakpoints,
-  $breakpoint-names: map.keys($breakpoints)
-) {
-  $n: list.index($breakpoint-names, $name);
-  @if $n != null and $n > 1 {
-    @return list.nth($breakpoint-names, $n - 1);
-  }
-  @return null;
-}
-
-/// Check to see if the given breakpoint name
-/// @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
-/// @group @carbon/layout
-@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
-  @return list.index(map.keys($breakpoints), $name) == 1;
-}
-
-/// Returns the largest breakpoint name
-/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
-/// @return {String}
-/// @access public
-/// @group @carbon/layout
-@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
-  $total-breakpoints: list.length($breakpoints);
-  @return key-by-index($breakpoints, $total-breakpoints);
-}
-
-/// 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
-/// @group @carbon/layout
-@function breakpoint-infix($name) {
-  @return '-#{$name}';
-}
-
-/// Generate a media query from the width of the given breakpoint to infinity
-/// @param {String | Number} $name
-/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  @if meta.type-of($name) == 'number' {
-    @media (min-width: $name) {
-      @content;
-    }
-  } @else if map.has-key($breakpoints, $name) {
-    $breakpoint: map.get($breakpoints, $name);
-    $width: map.get($breakpoint, width);
-    @if is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (min-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the maximum width of the given styles
-/// @param {String | Number} $name
-/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-  @if meta.type-of($name) == 'number' {
-    @media (max-width: $name) {
-      @content;
-    }
-  } @else if map.has-key($breakpoints, $name) {
-    // We borrow this logic from bootstrap for specifying the value of the
-    // max-width. The maximum width is calculated by finding the breakpoint and
-    // subtracting .02 from its value. This value is used instead of .01 to
-    // avoid rounding issues in Safari
-    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
-    $breakpoint: map.get($breakpoints, $name);
-    $width: map.get($breakpoint, width) - 0.02;
-    @media (max-width: $width) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the range between the lower and upper breakpoints
-/// @param {String | Number} $lower
-/// @param {String | Number} $upper
-/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  $is-number-lower: meta.type-of($lower) == 'number';
-  $is-number-upper: meta.type-of($upper) == 'number';
-  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
-  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
-
-  @if $min and $max {
-    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
-    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
-    @media (min-width: $min-width) and (max-width: $max-width) {
-      @content;
-    }
-  } @else if $min != null and $max == null {
-    @include breakpoint-up($lower) {
-      @content;
-    }
-  } @else if $min == null and $max != null {
-    @include breakpoint-down($upper) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
-  }
-}
-
-/// Generate media query for the largest breakpoint
-/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
-  @include breakpoint(largest-breakpoint-name()) {
-    @content;
-  }
-}
-
-/// Generate a media query for a given breakpoint
-/// @param {String | Number} $name
-/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
-  @include breakpoint-up($name, $breakpoints) {
-    @content;
-  }
-}