Merge branch 'main' into 8136-composed-modal-overflow-indicator-spacing

carbon-design-system · Mar 29, 2021 · dc3796d · dc3796d
2 parents 9fe91f4 + 43a8379
commit dc3796d
Show file tree

Hide file tree

Showing 76 changed files with 39,265 additions and 684 deletions.
diff --git a/...board-npm-3.2.0-1297123826-b574ecaed1.zip → ...board-npm-3.3.1-18029bce99-9707f2e405.zip b/...board-npm-3.2.0-1297123826-b574ecaed1.zip → ...board-npm-3.3.1-18029bce99-9707f2e405.zip
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/_button.scss b/packages/components/src/components/button/_button.scss
@@ -162,6 +162,12 @@
     }
   }
 
+  // Allow pointer events on tooltip when tooltip is visible
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(.#{$prefix}--tooltip--hidden)
+    .#{$prefix}--assistive-text {
+    pointer-events: all;
+  }
+
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
 

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/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -30,10 +30,6 @@
     height: rem(48px);
   }
 
-  .#{$prefix}--content-switcher--disabled {
-    cursor: not-allowed;
-  }
-
   .#{$prefix}--content-switcher-btn {
     @include reset;
     @include type-style('body-short-01');
@@ -50,8 +46,10 @@
     white-space: nowrap;
     text-align: left;
     text-decoration: none;
-    background-color: $ui-01;
+    background-color: transparent;
     border: none;
+    border-top: rem(1px) solid $ui-05;
+    border-bottom: rem(1px) solid $ui-05;
     transition: all $duration--fast-01 motion(standard, productive);
 
     &:focus {
@@ -66,6 +64,7 @@
     }
 
     &:hover {
+      color: $text-01;
       cursor: pointer;
     }
 
@@ -78,33 +77,38 @@
 
     &:disabled {
       color: $disabled-02;
-      background-color: $disabled-01;
-      pointer-events: none;
+      background-color: transparent;
+      border-color: $disabled-02;
 
       &:hover {
         cursor: not-allowed;
       }
     }
-  }
-
-  .#{$prefix}--content-switcher--light .#{$prefix}--content-switcher-btn {
-    background-color: $ui-02;
 
-    &:hover {
-      background-color: $hover-light-ui;
+    &:disabled:first-child,
+    &:disabled:last-child {
+      border-color: $disabled-02;
     }
   }
 
   .#{$prefix}--content-switcher-btn:first-child {
+    border-left: rem(1px) solid $ui-05;
     border-top-left-radius: rem(4px);
     border-bottom-left-radius: rem(4px);
   }
 
   .#{$prefix}--content-switcher-btn:last-child {
+    border-right: rem(1px) solid $ui-05;
     border-top-right-radius: rem(4px);
     border-bottom-right-radius: rem(4px);
   }
 
+  .#{$prefix}--content-switcher--selected,
+  .#{$prefix}--content-switcher--selected:first-child,
+  .#{$prefix}--content-switcher--selected:last-child {
+    border: 0;
+  }
+
   .#{$prefix}--content-switcher-btn::before {
     position: absolute;
     left: 0;
@@ -120,26 +124,6 @@
     display: none;
   }
 
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn::before {
-    background-color: $decorative-01;
-  }
-
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:focus::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:focus
-    + .#{$prefix}--content-switcher-btn::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:hover::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:hover
-    + .#{$prefix}--content-switcher-btn::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher--selected::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher--selected
-    + .#{$prefix}--content-switcher-btn::before,
   .#{$prefix}--content-switcher-btn:focus::before,
   .#{$prefix}--content-switcher-btn:focus
     + .#{$prefix}--content-switcher-btn::before,
@@ -152,6 +136,19 @@
     background-color: transparent;
   }
 
+  .#{$prefix}--content-switcher-btn:disabled::before,
+  .#{$prefix}--content-switcher-btn:disabled:hover
+    + .#{$prefix}--content-switcher-btn:disabled::before {
+    background-color: $disabled-02;
+  }
+
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled
+    + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover
+    + .#{$prefix}--content-switcher-btn::before {
+    background-color: transparent;
+  }
+
   .#{$prefix}--content-switcher__icon {
     transition: fill $duration--fast-01 motion(standard, productive);
     fill: $text-02;
@@ -173,8 +170,6 @@
     fill: $text-01;
   }
 
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
     z-index: 3;
     color: $inverse-01;