@carbon/grid 11.46.0 → 11.48.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": "11.46.0",
+  "version": "11.48.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -35,11 +35,11 @@
     "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "dependencies": {
-    "@carbon/layout": "^11.44.0",
+    "@carbon/layout": "^11.46.0-rc.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.37.0",
+    "@carbon/cli": "^11.38.0",
     "rimraf": "^6.0.1"
   },
   "eyeglass": {
@@ -48,5 +48,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
+  "gitHead": "8263c72357fc43c00e66c9030698f759ef7977ce"
 }

package/scss/_breakpoint.scss

@@ -25,7 +25,7 @@
 /// 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
+/// @param {List} $breakpoint-names [map.keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
 /// @access public
 /// @group @carbon/layout
@@ -44,7 +44,7 @@
 /// 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
+/// @param {List} $breakpoint-names [map.keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
 /// @access public
 /// @group @carbon/layout
@@ -152,12 +152,33 @@
 @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));
+  $min: null;
+  $max: null;
+
+  @if $is-number-lower {
+    $min: $lower;
+  } @else {
+    $min: map.get($breakpoints, $lower);
+  }
+
+  @if $is-number-upper {
+    $max: $upper;
+  } @else {
+    $max: 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);
+    $min-width: $min;
+    $max-width: $max;
+
+    @if not $is-number-lower and meta.type-of($min) == 'map' {
+      $min-width: map.get($min, width);
+    }
+
+    @if not $is-number-upper and meta.type-of($max) == 'map' {
+      $max-width: map.get($max, width);
+    }
+
     @media (min-width: $min-width) and (max-width: $max-width) {
       @content;
     }

package/scss/_flex-grid.scss

@@ -100,7 +100,7 @@
     @include -make-col-ready($gutter);
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
     $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 

package/scss/_inlined/_breakpoint.scss

@@ -25,7 +25,7 @@
 /// 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
+/// @param {List} $breakpoint-names [map.keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
 /// @access public
 /// @group @carbon/layout
@@ -44,7 +44,7 @@
 /// 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
+/// @param {List} $breakpoint-names [map.keys($breakpoints)] - A list of names from the `$breakpoints` map
 /// @return {String}
 /// @access public
 /// @group @carbon/layout
@@ -152,12 +152,33 @@
 @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));
+  $min: null;
+  $max: null;
+
+  @if $is-number-lower {
+    $min: $lower;
+  } @else {
+    $min: map.get($breakpoints, $lower);
+  }
+
+  @if $is-number-upper {
+    $max: $upper;
+  } @else {
+    $max: 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);
+    $min-width: $min;
+    $max-width: $max;
+
+    @if not $is-number-lower and meta.type-of($min) == 'map' {
+      $min-width: map.get($min, width);
+    }
+
+    @if not $is-number-upper and meta.type-of($max) == 'map' {
+      $max-width: map.get($max, width);
+    }
+
     @media (min-width: $min-width) and (max-width: $max-width) {
       @content;
     }

package/scss/_inlined/_flex-grid.scss

@@ -100,7 +100,7 @@
     @include -make-col-ready($gutter);
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
     $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 

package/scss/_inlined/_mixins.scss

@@ -7,6 +7,7 @@
 
 @use 'sass:meta';
 @use 'sass:math';
+@use 'sass:map';
 
 @use 'config' as *;
 @use 'breakpoint' as *;
@@ -94,7 +95,7 @@
     @include -make-col-ready($gutter);
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
     $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 

package/scss/_mixins.scss

@@ -7,6 +7,7 @@
 
 @use 'sass:meta';
 @use 'sass:math';
+@use 'sass:map';
 
 @use 'config' as *;
 @use 'breakpoint' as *;
@@ -94,7 +95,7 @@
     @include -make-col-ready($gutter);
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
     $columns: map.get(map.get($breakpoints, $breakpoint), columns);