Merge branch 'master' into feat/progressive-icon-props

carbon-design-system · Jan 28, 2020 · 0907c5a · 0907c5a
2 parents 87c0618 + e72508e
commit 0907c5a
Show file tree

Hide file tree

Showing 38 changed files with 529 additions and 88 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -7108,6 +7108,7 @@ $focus: if(
   - [checkbox [mixin]](#checkbox-mixin)
   - [snippet [mixin]](#snippet-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
+  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [data-table-expandable [mixin]](#data-table-expandable-mixin)
   - [modal [mixin]](#modal-mixin)
   - [radio-button [mixin]](#radio-button-mixin)
@@ -13094,8 +13095,7 @@ Button styles
   }
 
   .#{$prefix}--btn--field {
-    height: 40px;
-    min-height: 40px;
+    min-height: rem(40px);
     padding: $button-padding-field;
   }
 
@@ -14269,6 +14269,12 @@ Data table action styles
     }
   }
 
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-close:focus::before {
+    background-color: $focus;
+  }
+
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -14287,7 +14293,7 @@ Data table action styles
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search
     .#{$prefix}--search-input {
-    padding-left: $spacing-09;
+    padding: 0 $spacing-09;
     visibility: inherit;
   }
 
@@ -14343,6 +14349,11 @@ Data table action styles
     background-color: transparent;
   }
 
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search-close::before {
+    display: none;
+  }
+
   //-------------------------------------------------
   //TOOLBAR BUTTONS
   //-------------------------------------------------
@@ -14442,7 +14453,7 @@ Data table action styles
     .#{$prefix}--search
     .#{$prefix}--search-input {
     height: $layout-04;
-    padding-left: $spacing-09;
+    padding: 0 $spacing-09;
     border: none;
   }
 
@@ -14659,7 +14670,7 @@ Data table action styles
     .#{$prefix}--toolbar-search-container-expandable
       .#{$prefix}--search
       .#{$prefix}--search-input {
-      padding-left: $spacing-xl;
+      padding: 0 $spacing-09;
     }
 
     //active
@@ -14749,6 +14760,7 @@ Data table action styles
   - [spacing-05 [variable]](#spacing-05-variable)
   - [hover-field [variable]](#hover-field-variable)
   - [hover-ui [variable]](#hover-ui-variable)
+  - [focus [variable]](#focus-variable)
   - [spacing-09 [variable]](#spacing-09-variable)
   - [layout-01 [variable]](#layout-01-variable)
   - [icon-01 [variable]](#icon-01-variable)
@@ -17269,7 +17281,7 @@ Inline loading styles
   }
 
   .#{$prefix}--inline-loading__text {
-    @include type-style('body-short-01');
+    @include type-style('label-01');
     color: $text-02;
   }
 
@@ -21166,7 +21178,7 @@ Select styles
     background-color: $field-02;
 
     &:hover {
-      background-color: $ui-01;
+      background-color: $hover-ui;
     }
 
     &:disabled,
@@ -21311,8 +21323,8 @@ Select styles
   - [disabled-02 [variable]](#disabled-02-variable)
   - [support-01 [variable]](#support-01-variable)
   - [field-02 [variable]](#field-02-variable)
-  - [ui-01 [variable]](#ui-01-variable)
   - [ui-05 [variable]](#ui-05-variable)
+  - [ui-01 [variable]](#ui-01-variable)
   - [spacing-03 [variable]](#spacing-03-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [spacing-07 [variable]](#spacing-07-variable)
@@ -22129,8 +22141,8 @@ Tag styles
 ```scss
 @mixin tags() {
   .#{$prefix}--tag {
-    @include type-style('label-01');
     @include button-reset($width: false);
+    @include type-style('label-01');
 
     display: inline-flex;
     align-items: center;

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -239,8 +239,7 @@
   }
 
   .#{$prefix}--btn--field {
-    height: 40px;
-    min-height: 40px;
+    min-height: rem(40px);
     padding: $button-padding-field;
   }
 

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -123,6 +123,12 @@
     }
   }
 
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-close:focus::before {
+    background-color: $focus;
+  }
+
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -141,7 +147,7 @@
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search
     .#{$prefix}--search-input {
-    padding-left: $spacing-09;
+    padding: 0 $spacing-09;
     visibility: inherit;
   }
 
@@ -197,6 +203,11 @@
     background-color: transparent;
   }
 
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search-close::before {
+    display: none;
+  }
+
   //-------------------------------------------------
   //TOOLBAR BUTTONS
   //-------------------------------------------------
@@ -296,7 +307,7 @@
     .#{$prefix}--search
     .#{$prefix}--search-input {
     height: $layout-04;
-    padding-left: $spacing-09;
+    padding: 0 $spacing-09;
     border: none;
   }
 
@@ -513,7 +524,7 @@
     .#{$prefix}--toolbar-search-container-expandable
       .#{$prefix}--search
       .#{$prefix}--search-input {
-      padding-left: $spacing-xl;
+      padding: 0 $spacing-09;
     }
 
     //active

diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss
@@ -32,7 +32,7 @@
   }
 
   .#{$prefix}--inline-loading__text {
-    @include type-style('body-short-01');
+    @include type-style('label-01');
     color: $text-02;
   }
 

diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
@@ -118,7 +118,7 @@
     background-color: $field-02;
 
     &:hover {
-      background-color: $ui-01;
+      background-color: $hover-ui;
     }
 
     &:disabled,

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -16,8 +16,8 @@
 /// @group tag
 @mixin tags {
   .#{$prefix}--tag {
-    @include type-style('label-01');
     @include button-reset($width: false);
+    @include type-style('label-01');
 
     display: inline-flex;
     align-items: center;

diff --git a/packages/components/src/components/tooltip/tooltip--definition.hbs b/packages/components/src/components/tooltip/tooltip--definition.hbs
@@ -5,7 +5,7 @@
   LICENSE file in the root directory of this source tree.
 -->
 {{!-- @todo remove duplicate class on next major release when selectors can be cleaned up --}}
-<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
+<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y" data-tooltip-definition>
   <button aria-describedby="example-start"
     class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start">
     Definition Tooltip (start aligned)
@@ -14,7 +14,7 @@
     above.</div>
 </div>
 <br>
-<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
+<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y" data-tooltip-definition>
   <button aria-describedby="example-center"
     class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center">
     Definition Tooltip (center aligned)
@@ -23,7 +23,7 @@
     above.</div>
 </div>
 <br>
-<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
+<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y" data-tooltip-definition>
   <button aria-describedby="example-end"
     class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end">
     Definition Tooltip (end aligned)

diff --git a/packages/components/src/components/tooltip/tooltip--icon.hbs b/packages/components/src/components/tooltip/tooltip--icon.hbs
@@ -8,42 +8,50 @@
 <br>
 {{!-- @todo Had to add a modifier to the parent to correct the animation but in the next major release it could be removed in favor of the new HTML format --}}
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <br>
 <br>
 <p>center</p>
 <br>
-<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left">
+<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
-<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top">
+<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
-<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom">
+<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
-<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right">
+<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
@@ -52,22 +60,26 @@
 <p>end</p>
 <br>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-end">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-end"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-end">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-end"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>
 <button
-  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-end">
+  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-end"
+  data-tooltip-icon>
   <span class="{{@root.prefix}}--assistive-text">Filter</span>
   {{ carbon-icon 'Filter16' }}
 </button>