@carbon/grid 11.3.0 → 11.5.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.3.0",
+  "version": "11.5.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,10 +32,10 @@
     "clean": "rimraf scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/layout": "^11.3.0"
+    "@carbon/layout": "^11.5.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.2.0",
+    "@carbon/cli": "^11.3.0-rc.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -44,5 +44,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "b9bfd3eceeda13379b974831fb860ff6bd8064c5"
+  "gitHead": "5a23e3960d9bf5b652b96b6a051ae2b04cfa9a08"
 }

package/scss/_css-grid.scss

@@ -94,6 +94,7 @@
     --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
 
     display: grid;
+    width: 100%;
     max-width: get-grid-width(
       $breakpoints,
       largest-breakpoint-name($breakpoints)
@@ -246,21 +247,21 @@
         $span: $columns * 0.75;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
 
       .#{$prefix}--#{$name}\:col-span-50 {
         $span: $columns * 0.5;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
 
       .#{$prefix}--#{$name}\:col-span-25 {
         $span: $columns * 0.25;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
     } @else {
       @include breakpoint($name) {
@@ -278,21 +279,21 @@
           $span: $columns * 0.75;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
 
         .#{$prefix}--#{$name}\:col-span-50 {
           $span: $columns * 0.5;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
 
         .#{$prefix}--#{$name}\:col-span-25 {
           $span: $columns * 0.25;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }
@@ -425,7 +426,7 @@
     @if is-smallest-breakpoint($key, $breakpoints) {
       --cds-grid-columns: #{$span};
 
-      grid-column: span #{$span} / span #{$span};
+      grid-column: span list.slash($span, span) #{$span};
     } @else {
       $previous-breakpoint: breakpoint-prev($key, $breakpoints);
       $previous-column-count: get-column-count(
@@ -438,7 +439,7 @@
         @include breakpoint($key) {
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }

package/scss/_flex-grid.scss

@@ -70,13 +70,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.
-    @if meta.function-exists('div', 'math') {
-      max-width: math.percentage(math.div($span, $columns));
-      flex: 0 0 math.percentage(math.div($span, $columns));
-    } @else {
-      max-width: math.percentage(($span / $columns));
-      flex: 0 0 math.percentage(($span / $columns));
-    }
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
   }
 }
 
@@ -87,11 +82,7 @@
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
   $offset: 0;
-  @if meta.function-exists('div', 'math') {
-    $offset: math.div($span, $columns);
-  } @else {
-    $offset: ($span / $columns);
-  }
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {

package/scss/_inlined/_css-grid.scss

@@ -94,6 +94,7 @@
     --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
 
     display: grid;
+    width: 100%;
     max-width: get-grid-width(
       $breakpoints,
       largest-breakpoint-name($breakpoints)
@@ -246,21 +247,21 @@
         $span: $columns * 0.75;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
 
       .#{$prefix}--#{$name}\:col-span-50 {
         $span: $columns * 0.5;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
 
       .#{$prefix}--#{$name}\:col-span-25 {
         $span: $columns * 0.25;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
     } @else {
       @include breakpoint($name) {
@@ -278,21 +279,21 @@
           $span: $columns * 0.75;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
 
         .#{$prefix}--#{$name}\:col-span-50 {
           $span: $columns * 0.5;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
 
         .#{$prefix}--#{$name}\:col-span-25 {
           $span: $columns * 0.25;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }
@@ -425,7 +426,7 @@
     @if is-smallest-breakpoint($key, $breakpoints) {
       --cds-grid-columns: #{$span};
 
-      grid-column: span #{$span} / span #{$span};
+      grid-column: span list.slash($span, span) #{$span};
     } @else {
       $previous-breakpoint: breakpoint-prev($key, $breakpoints);
       $previous-column-count: get-column-count(
@@ -438,7 +439,7 @@
         @include breakpoint($key) {
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }

package/scss/_inlined/_flex-grid.scss

@@ -70,13 +70,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.
-    @if meta.function-exists('div', 'math') {
-      max-width: math.percentage(math.div($span, $columns));
-      flex: 0 0 math.percentage(math.div($span, $columns));
-    } @else {
-      max-width: math.percentage(($span / $columns));
-      flex: 0 0 math.percentage(($span / $columns));
-    }
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
   }
 }
 
@@ -87,11 +82,7 @@
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
   $offset: 0;
-  @if meta.function-exists('div', 'math') {
-    $offset: math.div($span, $columns);
-  } @else {
-    $offset: ($span / $columns);
-  }
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {

package/scss/_inlined/_mixins.scss

@@ -64,13 +64,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.
-    @if meta.function-exists('div', 'math') {
-      max-width: math.percentage(math.div($span, $columns));
-      flex: 0 0 math.percentage(math.div($span, $columns));
-    } @else {
-      max-width: math.percentage(($span / $columns));
-      flex: 0 0 math.percentage(($span / $columns));
-    }
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
   }
 }
 
@@ -81,11 +76,7 @@
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
   $offset: 0;
-  @if meta.function-exists('div', 'math') {
-    $offset: math.div($span, $columns);
-  } @else {
-    $offset: ($span / $columns);
-  }
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {

package/scss/_mixins.scss

@@ -64,13 +64,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.
-    @if meta.function-exists('div', 'math') {
-      max-width: math.percentage(math.div($span, $columns));
-      flex: 0 0 math.percentage(math.div($span, $columns));
-    } @else {
-      max-width: math.percentage(($span / $columns));
-      flex: 0 0 math.percentage(($span / $columns));
-    }
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
   }
 }
 
@@ -81,11 +76,7 @@
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
   $offset: 0;
-  @if meta.function-exists('div', 'math') {
-    $offset: math.div($span, $columns);
-  } @else {
-    $offset: ($span / $columns);
-  }
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {

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

@@ -24,11 +24,7 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1rem;
-  } @else {
-    @return ($px / $base-font-size) * 1rem;
-  }
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -41,9 +37,5 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1em;
-  } @else {
-    @return ($px / $base-font-size) * 1em;
-  }
+  @return math.div($px, $base-font-size) * 1em;
 }

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

@@ -24,11 +24,7 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1rem;
-  } @else {
-    @return ($px / $base-font-size) * 1rem;
-  }
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -41,9 +37,5 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1em;
-  } @else {
-    @return ($px / $base-font-size) * 1em;
-  }
+  @return math.div($px, $base-font-size) * 1em;
 }

package/scss/vendor/@carbon/layout/_convert.import.scss

@@ -1,63 +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.
-//
-//-------------------------------------------
-// Compatibility notes (*.import.scss)
-// ------------------------------------------
-//
-// This file is intended to be consumed and processed with dart-sass.
-// It is incompatible with node-sass/libsass as it contains sass language features
-// or functions that are unavailable in node-sass/libsass, such as `math.div`.
-//
-// The non-`.import` suffixed version of this file eg. `_filename.scss`
-// is intended to be compatible with node-sass/libsass.
-//
-// Styles authored within this file must be duplicated to the corresponding
-// compatibility file to ensure we continue to support node-sass and dart-sass
-// in v10.
-
-@use 'sass:meta';
-@use 'sass:math';
-
-/// Default font size
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$carbon--base-font-size: 16px !default;
-
-/// Convert a given px unit to a rem unit
-/// @param {Number} $px - Number with px unit
-/// @return {Number} Number with rem unit
-/// @access public
-/// @group @carbon/layout
-@function carbon--rem($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
-  }
-
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $carbon--base-font-size) * 1rem;
-  } @else {
-    @return ($px / $carbon--base-font-size) * 1rem;
-  }
-}
-
-/// Convert a given px unit to a em unit
-/// @param {Number} $px - Number with px unit
-/// @return {Number} Number with em unit
-/// @access public
-/// @group @carbon/layout
-@function carbon--em($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
-  }
-
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $carbon--base-font-size) * 1em;
-  } @else {
-    @return ($px / $carbon--base-font-size) * 1em;
-  }
-}