Merge branch 'master' into 5785-tooltip-z-index-helper-import

carbon-design-system · Apr 3, 2020 · 5d4708f · 5d4708f
2 parents 706e8fa + 1e6e03f
commit 5d4708f
Show file tree

Hide file tree

Showing 40 changed files with 13,506 additions and 12,880 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
   <a href="https://circleci.com/gh/carbon-design-system/carbon">
     <img src="https://circleci.com/gh/carbon-design-system/carbon.svg?style=shield" alt="Build Status" />
   </a>
-  <a href="https://lernajs.io/">
+  <a href="https://lerna.js.org/">
     <img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Maintained with Lerna" />
   </a>
   <a href="https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md">

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -7246,6 +7246,7 @@ $field-02: if(
   - [tabs [mixin]](#tabs-mixin)
   - [text-area [mixin]](#text-area-mixin)
   - [text-input [mixin]](#text-input-mixin)
+  - [tile [mixin]](#tile-mixin)
   - [toolbar [mixin]](#toolbar-mixin)
 
 ### ✅inverse-01 [variable]
@@ -23134,6 +23135,32 @@ Tabs styles
     padding: $carbon--spacing-05;
   }
 
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--text-input,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--text-area,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--search-input,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--select-input,
+  .#{$prefix}--tabs--container ~ .#{$prefix}--tab-content .#{$prefix}--dropdown,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--dropdown-list,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--number
+    input[type='number'],
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--date-picker__input {
+    background-color: $field-02;
+  }
+
   //-----------------------------
   // Skeleton state
   //-----------------------------
@@ -23743,6 +23770,17 @@ Tile styles
     }
   }
 
+  .#{$prefix}--tile .#{$prefix}--text-input,
+  .#{$prefix}--tile .#{$prefix}--text-area,
+  .#{$prefix}--tile .#{$prefix}--search-input,
+  .#{$prefix}--tile .#{$prefix}--select-input,
+  .#{$prefix}--tile .#{$prefix}--dropdown,
+  .#{$prefix}--tile .#{$prefix}--dropdown-list,
+  .#{$prefix}--tile .#{$prefix}--number input[type='number'],
+  .#{$prefix}--tile .#{$prefix}--date-picker__input {
+    background-color: $field-02;
+  }
+
   .#{$prefix}--tile--light {
     background-color: $ui-02;
   }
@@ -23908,6 +23946,7 @@ Tile styles
   - [prefix [variable]](#prefix-variable)
   - [ui-01 [variable]](#ui-01-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
+  - [field-02 [variable]](#field-02-variable)
   - [ui-02 [variable]](#ui-02-variable)
   - [hover-ui [variable]](#hover-ui-variable)
   - [text-01 [variable]](#text-01-variable)

diff --git a/packages/components/src/components/data-table/_data-table-skeleton.scss b/packages/components/src/components/data-table/_data-table-skeleton.scss
@@ -9,29 +9,17 @@
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/vars';
 
-@include exports('data-table-v2-skeleton') {
+@include exports('data-table-skeleton') {
   .#{$prefix}--data-table.#{$prefix}--skeleton {
     th {
       vertical-align: middle;
-
-      &:nth-child(3n + 1) {
-        width: 10%;
-      }
-
-      &:nth-child(3n + 2) {
-        width: 30%;
-      }
-
-      &:nth-child(3n + 3) {
-        width: 15%;
-      }
     }
 
     th span,
     td span {
       @include skeleton;
-      width: 75%;
-      height: 1rem;
+      width: rem(64px);
+      height: rem(16px);
       display: block;
     }
 
@@ -48,7 +36,30 @@
     }
   }
 
-  .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 {
+  .#{$prefix}--data-table.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 {
     pointer-events: none;
   }
+
+  .#{$prefix}--data-table.#{$prefix}--skeleton th span {
+    background: $skeleton-02;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--skeleton th span::before {
+    background: $skeleton-01;
+  }
+
+  .#{$prefix}--data-table-container.#{$prefix}--skeleton
+    .#{$prefix}--data-table-header__title {
+    @include skeleton;
+    width: rem(120px);
+    height: rem(24px);
+  }
+
+  .#{$prefix}--data-table-container.#{$prefix}--skeleton
+    .#{$prefix}--data-table-header__description {
+    @include skeleton;
+    margin-top: $spacing-03;
+    width: rem(160px);
+    height: rem(16px);
+  }
 }
diff --git a/packages/components/src/components/skeleton/skeleton.hbs b/packages/components/src/components/skeleton/skeleton.hbs
@@ -114,51 +114,62 @@
 </div>
 
 <p>Data Table</p>
-<table class="{{@root.prefix}}--skeleton {{@root.prefix}}--data-table-v2">
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-      <th></th>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><span></span></td>
-      <td><span></span></td>
-      <td><span></span></td>
-      <td><span></span></td>
-      <td><span></span></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
+<div class="{{@root.prefix}}--skeleton {{@root.prefix}}--data-table-container">
+  <div class="{{@root.prefix}}--data-table-header">
+    <h4 class="{{@root.prefix}}--data-table-header__title"></h4>
+    <p class="{{@root.prefix}}--data-table-header__description"></p>
+  </div>
+  <section aria-label="data table toolbar" class="{{@root.prefix}}--table-toolbar">
+    <div class="{{@root.prefix}}--toolbar-content">
+      <button class="{{@root.prefix}}--skeleton {{@root.prefix}}--btn {{@root.prefix}}--btn--sm" type="button"></button>
+    </div>
+  </section>
+  <table class="{{@root.prefix}}--skeleton {{@root.prefix}}--data-table">
+    <thead>
+      <tr>
+        <th><span></span></th>
+        <th><span></span></th>
+        <th><span></span></th>
+        <th><span></span></th>
+        <th><span></span></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+      </tr>
+      <tr>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+      </tr>
+      <tr>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+      </tr>
+      <tr>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+      </tr>
+      <tr>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+        <td><span></span></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
@@ -155,8 +155,9 @@
     @include carbon--breakpoint(md) {
       background: transparent;
       height: auto;
-      & + .#{$prefix}--tabs__nav-item {
-        margin-left: rem(2px);
+
+      + .#{$prefix}--tabs__nav-item {
+        margin-left: rem(1px);
       }
     }
   }
@@ -407,6 +408,32 @@
     padding: $carbon--spacing-05;
   }
 
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--text-input,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--text-area,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--search-input,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--select-input,
+  .#{$prefix}--tabs--container ~ .#{$prefix}--tab-content .#{$prefix}--dropdown,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--dropdown-list,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--number
+    input[type='number'],
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--date-picker__input {
+    background-color: $field-02;
+  }
+
   //-----------------------------
   // Skeleton state
   //-----------------------------

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -33,6 +33,17 @@
     }
   }
 
+  .#{$prefix}--tile .#{$prefix}--text-input,
+  .#{$prefix}--tile .#{$prefix}--text-area,
+  .#{$prefix}--tile .#{$prefix}--search-input,
+  .#{$prefix}--tile .#{$prefix}--select-input,
+  .#{$prefix}--tile .#{$prefix}--dropdown,
+  .#{$prefix}--tile .#{$prefix}--dropdown-list,
+  .#{$prefix}--tile .#{$prefix}--number input[type='number'],
+  .#{$prefix}--tile .#{$prefix}--date-picker__input {
+    background-color: $field-02;
+  }
+
   .#{$prefix}--tile--light {
     background-color: $ui-02;
   }

diff --git a/packages/pictograms/categories.yml b/packages/pictograms/categories.yml
@@ -152,17 +152,41 @@ categories:
     members:
       - analyze
       - blockchain
+      - box-plot
+      - chart--3D
+      - chart--area
       - chart--bar
+      - chart--bubble
       - chart--bubble--line
+      - chart--candlestick
+      - chart--error-bar
+      - chart--evaluation
+      - chart--high-low
+      - chart--histogram
       - chart--line
+      - chart--multi-line
+      - chart--parallel
+      - chart--radar
+      - chart--river
       - chart--scatterplot
+      - chart--t-SNE
+      - circle-packing
       - flow--chart
       - flow--chart--detail
       - heat--map
+      - heat-map--02
+      - math-curve
+      - population-diagram
+      - q-q-plot
       - rank
+      - relationship-diagram
       - report
+      - scatter-matrix
       - secure--data
+      - tree--diagram
+      - tree--map
       - user--analytics
+      - word-cloud
   - name: Data Storage
     members:
       - archive