Merge branch 'main' into 8115-notification-style-updates

carbon-design-system · Mar 29, 2021 · 179d222 · 179d222
2 parents fbf4f0c + 431e5fc
commit 179d222
Show file tree

Hide file tree

Showing 36 changed files with 588 additions and 82 deletions.
diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -74,6 +74,72 @@
     }
   }
 
+  // Overflow Menu overrides
+  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
+    position: relative;
+    width: rem(20px);
+    height: rem(20px);
+
+    &:focus {
+      outline: 1px solid $focus;
+    }
+
+    &:hover {
+      background: transparent;
+    }
+
+    // Used to mimic link underline
+    &::after {
+      position: absolute;
+      bottom: 2px;
+      width: rem(12px);
+      height: 1px;
+      background: $hover-primary-text;
+      opacity: 0;
+      transition: opacity $duration--fast-01 motion(standard, productive);
+      content: '';
+    }
+  }
+
+  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
+    opacity: 1;
+  }
+
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon {
+    position: relative;
+    transform: translateY(4px);
+    fill: $link-01;
+  }
+
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu:hover
+    .#{$prefix}--overflow-menu__icon {
+    fill: $hover-primary-text;
+  }
+
+  .#{$prefix}--breadcrumb-menu-options:focus {
+    outline: none;
+  }
+
+  $caret-size: rem(7px);
+  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
+    top: -$caret-size;
+    left: $caret-size * 2;
+    width: 0;
+    height: 0;
+    margin: 0 auto;
+    background: transparent;
+    border-right: $caret-size solid transparent;
+    border-bottom: $caret-size solid $field-01;
+    border-left: $caret-size solid transparent;
+  }
+
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -104,6 +104,6 @@
 @mixin button-padding-large {
   align-items: baseline;
   padding-top: $spacing-05;
-  padding-right: $layout-05;
+  padding-right: $spacing-10;
   padding-left: $spacing-05;
 }
diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -197,20 +197,19 @@
     }
   }
 
-  //closed snippet container
+  //collapsed snippet container
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
     position: relative;
     order: 1;
     min-height: rem(56px);
-    max-height: rem(238px);
-    overflow: hidden;
+    max-height: 100%;
+    overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
   // expanded snippet container
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
     .#{$prefix}--snippet-container {
-    max-height: 100%;
     padding-bottom: $spacing-05;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
@@ -220,7 +219,7 @@
     word-wrap: break-word;
   }
 
-  // closed pre
+  // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $carbon--spacing-08;
     padding-bottom: rem(24px);

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -21,7 +21,7 @@
     position: relative;
     display: flex;
     width: 100%;
-    height: $layout-04;
+    height: $spacing-09;
     overflow: hidden;
     background: $ui-01;
   }
@@ -30,7 +30,7 @@
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    height: $layout-04;
+    height: $spacing-09;
     transform: translate3d(0, 0, 0);
     transition: transform $duration--fast-02 motion(standard, productive),
       clip-path $duration--fast-02 motion(standard, productive);
@@ -60,24 +60,24 @@
   //-------------------------------------------------
   .#{$prefix}--toolbar-search-container-expandable {
     position: relative;
-    width: $layout-04;
-    height: $layout-04;
+    width: $spacing-09;
+    height: $spacing-09;
     box-shadow: none;
     transition: flex $transition--expansion $carbon--standard-easing;
   }
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search {
     position: initial;
-    width: $layout-04;
+    width: $spacing-09;
     height: 100%;
   }
 
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search
     .#{$prefix}--search-magnifier {
     left: 0;
-    width: $layout-04;
-    height: $layout-04;
+    width: $spacing-09;
+    height: $spacing-09;
     padding: $spacing-05;
     cursor: pointer;
     transition: background $duration--fast-02 motion(entrance, productive);
@@ -135,8 +135,8 @@
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search
     .#{$prefix}--search-close {
-    width: $layout-04;
-    height: $layout-04;
+    width: $spacing-09;
+    height: $spacing-09;
 
     &::before {
       top: 2px;
@@ -239,8 +239,8 @@
     @include button-reset;
 
     display: flex;
-    width: $layout-04;
-    height: $layout-04;
+    width: $spacing-09;
+    height: $spacing-09;
     padding: $spacing-05;
     cursor: pointer;
     transition: background $duration--fast-02 motion(entrance, productive);
@@ -251,8 +251,8 @@
     @include button-reset;
 
     display: flex;
-    width: $layout-04;
-    height: $layout-04;
+    width: $spacing-09;
+    height: $spacing-09;
     cursor: pointer;
     transition: background $duration--fast-02 motion(entrance, productive);
   }
@@ -291,16 +291,16 @@
   }
 
   .#{$prefix}--overflow-menu--data-table {
-    height: $layout-04;
+    height: $spacing-09;
   }
 
   //-------------------------------------------------
   //TOOLBAR BUTTON ICONS
   //-------------------------------------------------
   .#{$prefix}--toolbar-action__icon {
     width: auto;
-    max-width: $layout-01;
-    height: $layout-01;
+    max-width: $spacing-05;
+    height: $spacing-05;
     fill: $icon-01;
   }
 
@@ -310,7 +310,7 @@
   .#{$prefix}--toolbar-search-container-persistent {
     position: relative;
     width: 100%;
-    height: $layout-04;
+    height: $spacing-09;
     opacity: 1;
   }
 
@@ -333,7 +333,7 @@
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search
     .#{$prefix}--search-input {
-    height: $layout-04;
+    height: $spacing-09;
     padding: 0 $spacing-09;
     border: none;
   }
@@ -362,8 +362,8 @@
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search
     .#{$prefix}--search-close {
-    width: $layout-04;
-    height: $layout-04;
+    width: $spacing-09;
+    height: $spacing-09;
   }
 
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
@@ -470,7 +470,7 @@
     left: 0;
     display: block;
     width: rem(1px);
-    height: $layout-01;
+    height: $spacing-05;
     background-color: $text-04;
     border: none;
     opacity: 1;
@@ -544,6 +544,10 @@
       padding: $spacing-03;
     }
 
+    .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent {
+      width: 100%;
+    }
+
     //hidden
     .#{$prefix}--toolbar-search-container-expandable {
       width: rem(32px);

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -70,7 +70,7 @@
 
   .#{$prefix}--data-table tr {
     width: 100%;
-    height: $layout-04;
+    height: $spacing-09;
     border: none;
   }
 
@@ -319,7 +319,6 @@
 
   .#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand {
-    width: rem(64px);
     height: rem(64px);
   }
 
@@ -532,7 +531,6 @@
 
   .#{$prefix}--data-table--sticky-header {
     display: block;
-    // max-height: rem(300px);
     overflow-y: scroll;
 
     thead,
@@ -587,10 +585,6 @@
       min-height: 3rem;
     }
 
-    // .#{$prefix}--parent-row td {
-    //   padding: 1rem;
-    // }
-
     &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--short)
       td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
       padding-top: rem(14px);

diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -70,6 +70,30 @@
       background-color $duration--fast-02 motion(standard, productive);
   }
 
+  //compact child row padding
+  .#{$prefix}--data-table--compact
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
+    padding-left: 2.5rem;
+  }
+
+  //short child row padding
+  .#{$prefix}--data-table--short
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
+    padding-left: 3rem;
+  }
+
+  //tall child row padding
+  .#{$prefix}--data-table--tall
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
+    padding-left: 5rem;
+  }
+
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
     + tr[data-child-row]
     td
@@ -198,6 +222,7 @@
     width: 100%;
     // Account for the border in `.bx--table-expand`
     height: calc(100% + 1px);
+    padding: 0 1rem;
     vertical-align: inherit;
   }
 

diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss
@@ -18,7 +18,7 @@
   // -------------------------------------
   .#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table th[aria-sort] {
-    height: $layout-04;
+    height: $spacing-09;
     padding: 0;
     border-top: none;
     border-bottom: none;
@@ -122,7 +122,7 @@
 
   .#{$prefix}--table-sort__icon-unsorted {
     width: rem(20px);
-    min-width: $layout-01;
+    min-width: $spacing-05;
     margin-right: $spacing-03;
     margin-left: $spacing-03;
     opacity: 0;
@@ -151,7 +151,7 @@
 
   .#{$prefix}--table-sort__icon {
     width: rem(20px);
-    min-width: $layout-01;
+    min-width: $spacing-05;
     margin-right: $spacing-03;
     margin-left: $spacing-03;
     transform: rotate(0);

diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
@@ -66,9 +66,6 @@
 
   // Menu's triggering element updated to button with Downshift v5 upgrade
   .#{$prefix}--dropdown .#{$prefix}--list-box__field {
-    @include button-reset;
-
-    padding: 0 rem(48px) 0 rem(16px);
     text-align: left;
 
     // Windows, Firefox HCM Fix

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -395,7 +395,6 @@ $list-box-menu-width: rem(300px);
     @include button-reset($width: false);
 
     position: absolute;
-    top: $carbon--spacing-03;
     right: $carbon--spacing-05;
     display: flex;
     align-items: center;