Merge branch 'main' into snippet-fixes

carbon-design-system · Mar 30, 2021 · 68b2837 · 68b2837
2 parents 02b6118 + 8abe3ae
commit 68b2837
Show file tree

Hide file tree

Showing 43 changed files with 38,548 additions and 493 deletions.
diff --git a/.github/workflows/dco.yml b/.github/workflows/dco.yml
@@ -0,0 +1,31 @@
+name: "DCO Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened, closed, synchronize]
+
+jobs:
+  DCO:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "DCO Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the DCO document and I hereby sign the DCO.') || github.event_name == 'pull_request_target'
+        uses: cla-assistant/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+        with:
+          path-to-signatures: "dco-signatures.json"
+          path-to-document: "https://github.com/carbon-design-system/carbon-dco/blob/main/dco.md"
+          branch: "main"
+          allowlist: dependabot,kodiakhq
+          remote-organization-name: carbon-design-system
+          remote-repository-name: carbon-dco
+          create-file-commit-message: "chore: create file to store dco signatures"
+          signed-commit-message: "chore: $contributorName has signed the dco in #$pullRequestNo"
+          custom-notsigned-prcomment: "Thanks for your submission! We ask that $you sign our [Developer Certificate of Origin](https://github.com/carbon-design-system/carbon-dco/blob/main/dco.md) before we can accept your contribution. You can sign the DCO by adding a comment below using this text:"
+          custom-pr-sign-comment: "I have read the DCO document and I hereby sign the DCO."
+          custom-allsigned-prcomment: "All contributors have signed the DCO."
+          lock-pullrequest-aftermerge: false
+          use-dco-flag: true
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/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;