Merge branch 'main' into 3970-ui-shell-spread-issidenavexpanded

carbon-design-system · Mar 24, 2021 · 0920f4e · 0920f4e
2 parents 4270553 + cfcda43
commit 0920f4e
Show file tree

Hide file tree

Showing 47 changed files with 1,102 additions and 601 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/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/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/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;

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -187,10 +187,7 @@
     opacity: 1;
   }
 
-  .#{$prefix}--tile-input:checked
-    + .#{$prefix}--tile
-    > .#{$prefix}--tile__checkmark
-    svg {
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
     fill: $ui-05;
 
     // Windows, Firefox HCM Fix
@@ -213,6 +210,26 @@
   .#{$prefix}--tile-input:focus + .#{$prefix}--tile {
     @include focus-outline('outline');
   }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable {
+    color: $disabled-02;
+    background-color: $ui-01;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
+    background-color: $ui-02;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
+    outline-color: $disabled-02;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected
+    .#{$prefix}--tile__checkmark
+    svg {
+    fill: $disabled-02;
+  }
 }
 
 @include exports('tile') {

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -700,6 +700,12 @@
       @include tooltip--placement('icon', 'left', 'end');
     }
   }
+
+  // Allow pointer events on tooltip when tooltip is visible
+  .#{$prefix}--tooltip__trigger:not(.#{$prefix}--tooltip--hidden)
+    .#{$prefix}--assistive-text {
+    pointer-events: all;
+  }
 }
 
 @include exports('tooltip') {

diff --git a/packages/components/src/components/treeview/_treeview.scss b/packages/components/src/components/treeview/_treeview.scss
@@ -35,24 +35,34 @@
       @include focus-outline('outline');
     }
 
-    .#{$prefix}--tree-node--disabled {
-      color: $disabled-02;
-      background-color: $disabled-01;
-      pointer-events: none;
+    .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
+      outline: none;
     }
 
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover {
+    .#{$prefix}--tree-node--disabled,
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__label__details {
+      color: $disabled-02;
       background-color: $disabled-01;
     }
 
     .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon {
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__icon {
       fill: $disabled-02;
     }
 
+    .#{$prefix}--tree-node--disabled,
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-parent-node__toggle-icon:hover {
-      cursor: default;
+      cursor: not-allowed;
     }
 
     .#{$prefix}--tree-node__label {
@@ -62,10 +72,21 @@
       min-height: rem(32px);
 
       &:hover {
+        color: $text-01;
         background-color: $hover-ui;
       }
     }
 
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
+      color: $text-01;
+    }
+
+    .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
+      fill: $icon-01;
+    }
+
     .#{$prefix}--tree-leaf-node {
       display: flex;
       padding-left: $spacing-08;
@@ -101,7 +122,7 @@
     .#{$prefix}--tree-parent-node__toggle-icon {
       transform: rotate(-90deg);
       transition: all $duration--fast-02 motion(standard, productive);
-      fill: $icon-01;
+      fill: $icon-02;
     }
 
     .#{$prefix}--tree-parent-node__toggle-icon--expanded {
@@ -110,7 +131,7 @@
 
     .#{$prefix}--tree-node__icon {
       margin-right: $spacing-03;
-      fill: $icon-01;
+      fill: $icon-02;
     }
 
     .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
@@ -122,6 +143,15 @@
       }
     }
 
+    .#{$prefix}--tree-node--selected
+      > .#{$prefix}--tree-node__label
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--selected
+      > .#{$prefix}--tree-node__label
+      .#{$prefix}--tree-node__icon {
+      fill: $icon-01;
+    }
+
     .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
       position: relative;
 
@@ -131,7 +161,7 @@
         left: 0;
         width: rem(4px);
         height: 100%;
-        background-color: $interactive-01;
+        background-color: $interactive-04;
         content: '';
       }
     }

diff --git a/packages/components/src/globals/scss/_layout.scss b/packages/components/src/globals/scss/_layout.scss
@@ -12,14 +12,17 @@
 /// @type Map
 /// @group global-layout
 $z-indexes: (
+  // Dropdowns that render outside of a Modal should render above a Modal.
+  // Dropdowns below the modal will close when the Modal is opened, so
+  // having a higher z-index *should* not cause issues.
+  dropdown: 9100,
   modal: 9000,
-  overlay: 6000,
-  dropdown: 6000,
   header: 8000,
+  overlay: 6000,
+  floating: 6000,
   footer: 5000,
   hidden: - 1,
-  overflowHidden: - 1,
-  floating: 6000,
+  overflowHidden: - 1
 );
 
 /// @access public

diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -224,6 +224,39 @@
   $caret-width: rem(8px);
   $body-spacing: $caret-spacing + $caret-height;
 
+  // Use pseudo element to create invisible hover area to keep tooltip open on hover
+  .#{$prefix}--assistive-text::after {
+    position: absolute;
+    display: block;
+    content: '';
+    // clip-path: polygon(50% 100%, 0 0, 100% 0);
+
+    @if ($position == 'top' or $position == 'bottom') {
+      left: 0;
+      width: 100%;
+      height: rem(12px);
+    }
+
+    @if ($position == 'left' or $position == 'right') {
+      top: 0;
+      width: rem(12px);
+      height: 100%;
+    }
+
+    @if ($position == 'top') {
+      bottom: rem(-12px);
+    }
+    @if ($position == 'right') {
+      left: rem(-12px);
+    }
+    @if ($position == 'bottom') {
+      top: rem(-12px);
+    }
+    @if ($position == 'left') {
+      right: rem(-12px);
+    }
+  }
+
   // @todo Simplify CSS selectors on next major release
   &::before,
   &::after,

diff --git a/packages/icons/icons.yml b/packages/icons/icons.yml
@@ -13010,6 +13010,7 @@
   aliases:
     - soccer
     - sports
+    - football
   sizes:
     - 32
 - name: soil-moisture

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -207,6 +207,18 @@ Map {
         "isRequired": true,
         "type": "oneOf",
       },
+      "onBlur": Object {
+        "type": "func",
+      },
+      "onFocus": Object {
+        "type": "func",
+      },
+      "onMouseEnter": Object {
+        "type": "func",
+      },
+      "onMouseLeave": Object {
+        "type": "func",
+      },
       "renderIcon": Object {
         "args": Array [
           Array [
@@ -371,6 +383,12 @@ Map {
       "light": Object {
         "type": "bool",
       },
+      "maxCollapsedNumberOfRows": Object {
+        "type": "number",
+      },
+      "maxExpandedNumberOfRows": Object {
+        "type": "number",
+      },
       "onClick": Object {
         "type": "func",
       },
@@ -5740,6 +5758,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "handleClick": Object {
         "type": "func",
       },
@@ -5868,6 +5889,9 @@ Map {
       "defaultChecked": Object {
         "type": "bool",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "iconDescription": [Function],
       "id": Object {
         "type": "string",
@@ -6345,12 +6369,18 @@ Map {
       "id": Object {
         "type": "string",
       },
+      "onBlur": Object {
+        "type": "func",
+      },
       "onFocus": Object {
         "type": "func",
       },
       "onMouseEnter": Object {
         "type": "func",
       },
+      "onMouseLeave": Object {
+        "type": "func",
+      },
       "tooltipText": Object {
         "isRequired": true,
         "type": "string",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -48,6 +48,7 @@
     "@carbon/icons-react": "^10.28.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
     "classnames": "2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "downshift": "5.2.1",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",
-Original file line number
+Diff line change
@@ Expand Up / @@ -13010,6 +13010,7 @@ @@
       aliases:
         - soccer
         - sports
+        - football
       sizes:
         - 32
     - name: soil-moisture
@@ Expand Down @@