Merge branch 'main' into 11717-update-dropdown-story-controls

carbon-design-system · Jul 14, 2022 · 1b79dd8 · 1b79dd8
2 parents fb617e5 + b6cdb30
commit 1b79dd8
Show file tree

Hide file tree

Showing 55 changed files with 2,292 additions and 5,449 deletions.
diff --git a/.yarn/cache/postcss-loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip b/.yarn/cache/postcss-loader-npm-7.0.0-e0a0c61fcd-b8e51e9989.zip
diff --git a/e2e/components/Notifications/Notifications-test.e2e.js b/e2e/components/Notifications/Notifications-test.e2e.js
@@ -16,24 +16,24 @@ test.describe('Notifications', () => {
     test.describe(theme, () => {
       test('toast @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Notifications',
-          id: 'components-notifications--toast',
+          component: 'Toast',
+          id: 'components-notifications-toast--default',
           theme,
         });
       });
 
       test('inline @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Notifications',
-          id: 'components-notifications--inline',
+          component: 'Inline',
+          id: 'components-notifications-inline--default',
           theme,
         });
       });
 
       test('actionable @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Notifications',
-          id: 'components-notifications--actionable',
+          component: 'Actionable',
+          id: 'components-notifications-actionable--default',
           theme,
         });
       });
@@ -42,8 +42,8 @@ test.describe('Notifications', () => {
 
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
-      component: 'Notifications',
-      id: 'components-notifications--toast',
+      component: 'Toast',
+      id: 'components-notifications-toast--default',
       globals: {
         theme: 'white',
       },

diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
@@ -247,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) {
@@ -279,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};
         }
       }
     }
@@ -426,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(
@@ -439,7 +439,7 @@
         @include breakpoint($key) {
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }

diff --git a/packages/grid/scss/_flex-grid.scss b/packages/grid/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 {

diff --git a/packages/grid/scss/_mixins.scss b/packages/grid/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 {

diff --git a/packages/layout/scss/_convert.import.scss b/packages/layout/scss/_convert.import.scss
diff --git a/packages/layout/scss/_convert.scss b/packages/layout/scss/_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;
 }
diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/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;
 }