From 7b60fa412c31ca0c804925352e7937463449a556 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 10 Apr 2019 16:46:16 -0700
Subject: [PATCH 01/18] fix(motion): start work on motion update

---
 src/components/button/_mixins.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
index 11e808e52774..f8f3293dcfbb 100644
--- a/src/components/button/_mixins.scss
+++ b/src/components/button/_mixins.scss
@@ -24,7 +24,7 @@
   border-radius: $button-border-radius;
   text-align: left;
   text-decoration: none;
-  transition: $duration--fast-01 motion(entrance, productive);
+  transition: all $duration--fast-02 motion(standard, productive);
   outline: $button-outline-width solid transparent;
   position: relative;
   max-width: rem(320px);
@@ -43,7 +43,7 @@
     flex-shrink: 0;
     width: rem(16px);
     height: rem(16px);
-    transition: $duration--fast-01 motion(entrance, productive);
+    transition: all $duration--fast-02 motion(standard, productive);
   }
 }
 
@@ -66,7 +66,7 @@
     box-sizing: border-box;
     position: absolute;
     content: '';
-    transition: $duration--fast-01 motion(entrance, productive);
+    transition: all $duration--fast-02 motion(standard, productive);
   }
 
   &:not(.#{$prefix}--btn--disabled)::before {

From 3d8a3f341a788dd3f6bceb535937ec39535669a6 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 10 Apr 2019 16:52:20 -0700
Subject: [PATCH 02/18] fix(motion): update date-table

---
 .../data-table-v2/_data-table-v2-core.scss    | 425 ++++++++++++++++++
 1 file changed, 425 insertions(+)

diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
index 45c9547b3ebf..ca5311d8d169 100644
--- a/src/components/data-table-v2/_data-table-v2-core.scss
+++ b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -5,4 +5,429 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+<<<<<<< HEAD
 @import '../data-table/data-table-core';
+=======
+@import '../../globals/scss/css--typography';
+@import '../../globals/scss/functions';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+
+@mixin data-table-v2-core {
+  .#{$prefix}--data-table-v2-container {
+    width: 100%;
+    min-width: rem(500px);
+    overflow-x: auto;
+    padding-top: $spacing-3xs; // allow space for focus styles
+  }
+
+  .#{$prefix}--data-table-v2 {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    border-bottom: 1px solid $ui-03;
+
+    @if feature-flag-enabled('breaking-changes-x') {
+      min-width: rem(500px);
+    }
+
+    thead {
+      @include typescale('zeta');
+      background-color: $ui-02;
+      font-weight: 700;
+      border-right: 1px solid $ui-03;
+    }
+
+    tbody {
+      @include typescale('zeta');
+      background-color: $ui-01;
+      border-right: 1px solid $ui-03;
+    }
+
+    tr {
+      height: rem(48px);
+
+      &:hover {
+        td {
+          background-color: rgba($brand-02, 0.1);
+          border-top: 1px solid $brand-01;
+          border-bottom: 1px solid $brand-01;
+
+          &:first-of-type {
+            border-left: 1px solid $brand-01;
+          }
+
+          &:last-of-type {
+            border-right: 1px solid $brand-01;
+          }
+        }
+
+        .#{$prefix}--overflow-menu {
+          opacity: 1;
+        }
+      }
+    }
+
+    th {
+      border-top: 1px solid $ui-03;
+    }
+
+    th,
+    td {
+      @include typescale('zeta');
+      border-top: 1px solid $ui-03;
+      padding-left: $spacing-sm;
+      vertical-align: middle;
+      text-align: left;
+      color: $text-01;
+
+      &:first-of-type {
+        padding-left: rem(24px);
+        border-left: 1px solid $ui-03;
+      }
+
+      &:last-of-type {
+        padding-right: $spacing-lg;
+      }
+    }
+
+    // Overrrides
+    .#{$prefix}--checkbox-label {
+      padding-left: rem(28px);
+    }
+
+    .#{$prefix}--overflow-menu {
+      opacity: 0;
+
+      &:focus {
+        outline: 0;
+        opacity: 1;
+        box-shadow: none;
+
+        .#{$prefix}--overflow-menu__icon {
+          box-shadow: inset 0px 0px 0px 1px $brand-01;
+        }
+      }
+    }
+
+    .#{$prefix}--overflow-menu__icon {
+      transform: rotate(90deg);
+    }
+  }
+
+  // Options
+
+  .#{$prefix}--data-table-v2-header {
+    margin-bottom: $spacing-xs;
+    color: $text-01;
+  }
+
+  .#{$prefix}--data-table-v2--zebra {
+    tbody tr:nth-child(even) {
+      background-color: $ui-02;
+    }
+  }
+
+  .#{$prefix}--data-table-v2--no-border {
+    & {
+      border-bottom-color: transparent;
+    }
+
+    thead,
+    tbody {
+      border-right-color: transparent;
+    }
+
+    th,
+    td {
+      &:first-of-type {
+        border-left-color: transparent;
+      }
+    }
+  }
+
+  .#{$prefix}--data-table-v2--compact {
+    tbody tr {
+      height: rem(24px);
+    }
+  }
+
+  .#{$prefix}--data-table-v2--short {
+    tbody tr {
+      height: rem(32px);
+    }
+  }
+
+  .#{$prefix}--data-table-v2--tall {
+    tbody tr {
+      height: rem(64px);
+    }
+  }
+
+  .#{$prefix}--data-table-v2--static {
+    width: auto;
+  }
+
+  .#{$prefix}--data-table-v2--zebra tbody tr.#{$prefix}--data-table-v2--selected,
+  tbody tr.#{$prefix}--data-table-v2--selected {
+    background-color: rgba($brand-02, 0.1);
+  }
+}
+
+@mixin data-table-core--x {
+  //----------------------------------------------------------------------------
+  // Container
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table-container {
+    min-width: rem(500px);
+    overflow-x: auto;
+    padding-top: $spacing-01; // allow space for focus styles
+  }
+
+  //----------------------------------------------------------------------------
+  // Table title text
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table-header {
+    background: $ui-01;
+    padding: $spacing-05 0 $spacing-06 $spacing-05;
+  }
+
+  .#{$prefix}--data-table-header__title {
+    @include type-style('productive-heading-03');
+    color: $text-01;
+  }
+
+  .#{$prefix}--data-table-header__description {
+    @include type-style('body-short-01');
+    color: $text-02;
+  }
+
+  //----------------------------------------------------------------------------
+  // Data table
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+  }
+
+  .#{$prefix}--data-table thead {
+    @include type-style('heading-01');
+    background-color: $ui-03;
+  }
+
+  .#{$prefix}--data-table tbody {
+    @include type-style('body-short-01');
+    background-color: $ui-01;
+    width: 100%;
+  }
+
+  .#{$prefix}--data-table tr {
+    border: none;
+    height: $layout-04;
+    width: 100%;
+  }
+
+  .#{$prefix}--data-table tbody tr,
+  .#{$prefix}--data-table tbody tr td {
+    transition: background-color $duration--fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--data-table tbody tr:hover {
+    background: $hover-field;
+  }
+
+  .#{$prefix}--data-table tbody tr:hover td {
+    color: $text-01;
+    background: $hover-field;
+    border-bottom: 1px solid $hover-field;
+    border-top: 1px solid $hover-field;
+  }
+
+  .#{$prefix}--data-table th,
+  .#{$prefix}--data-table td {
+    padding-left: $spacing-04;
+    padding-right: $spacing-04;
+    vertical-align: top;
+    text-align: left;
+  }
+
+  .#{$prefix}--data-table th {
+    color: $text-01;
+    background-color: $ui-03;
+    border-top: 1px solid $ui-03;
+    border-bottom: 1px solid $ui-03;
+  }
+
+  .#{$prefix}--data-table th:first-of-type {
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--data-table .#{$prefix}--table-header-label {
+    display: block;
+    padding: rem(14px) 0;
+  }
+
+  .#{$prefix}--data-table td {
+    background: $ui-01;
+    color: $text-02;
+    border-top: 1px solid $ui-01;
+    border-bottom: 1px solid $ui-03;
+    padding: rem(14px) $spacing-04;
+    padding-bottom: rem(13px);
+  }
+
+  @supports (-moz-appearance: none) {
+    .#{$prefix}--data-table td {
+      background-clip: padding-box; // fix to show borders in ff
+    }
+  }
+
+  .#{$prefix}--data-table td:first-of-type {
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--data-table td:last-of-type {
+    padding-right: $spacing-05;
+  }
+
+  // specific padding for overflow menu columns
+  .#{$prefix}--data-table .#{$prefix}--table-column-menu,
+  .#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
+    padding-top: $spacing-03;
+    padding-right: $spacing-03;
+  }
+
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu {
+    padding-bottom: 0;
+  }
+
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
+    background: $ui-03;
+  }
+
+  // Overflow Menu Overrides
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
+    opacity: 0;
+  }
+
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:hover .#{$prefix}--overflow-menu__icon,
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:focus .#{$prefix}--overflow-menu__icon,
+  .#{$prefix}--data-table tr:hover td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
+    opacity: 1;
+  }
+
+  .#{$prefix}--table-row--menu-option
+    .#{$prefix}--overflow-menu-options__btn
+    .#{$prefix}--overflow-menu-options__option-content
+    svg {
+    margin-right: $spacing-03;
+    position: relative;
+    top: rem(3px); //used to center svg without setting display flex //display block needed for overflow text truncation
+  }
+
+  //----------------------------------------------------------------------------
+  //ZEBRA
+  //----------------------------------------------------------------------------
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
+    border-bottom: 1px solid $ui-01;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd) td {
+    background-color: $data-table-zebra-color;
+    border-bottom: 1px solid $data-table-zebra-color;
+    border-top: 1px solid $data-table-zebra-color;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:hover td {
+    background-color: $hover-field;
+    border-bottom: 1px solid $hover-field;
+    border-top: 1px solid $hover-field;
+  }
+
+  //----------------------------------------------------------------------------
+  // Select
+  //----------------------------------------------------------------------------
+  .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
+    padding: rem(12px) $spacing-03 0 $spacing-05;
+    width: rem(44px); // 16px padding left + 8px padding right + 20px checkbox width
+  }
+
+  .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
+    padding-top: rem(11px);
+    padding-bottom: 0;
+  }
+
+  th.#{$prefix}--table-column-checkbox:hover {
+    background: $data-table-column-hover;
+  }
+
+  // default selected row + zebra select - even child
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected td,
+  tr.#{$prefix}--data-table--selected td {
+    color: $text-01;
+    background-color: $ui-03;
+    border-top: 1px solid $ui-03;
+    border-bottom: 1px solid $active-01; //bottom border acts as separator from other rows
+  }
+
+  // first row
+  .#{$prefix}--data-table--zebra tbody tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
+  tr.#{$prefix}--data-table--selected:first-of-type td {
+    border-top: 1px solid $active-01; //top border acts as separator from thead
+  }
+
+  // last row + zebra select last
+  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
+  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected td,
+  tr.#{$prefix}--data-table--selected:last-of-type td {
+    border-top: 1px solid $ui-03; // doesn't need separators
+    border-bottom: 1px solid $ui-03;
+  }
+
+  // zebra select - odd child
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected td {
+    border-bottom: 1px solid $active-01;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td {
+    border-bottom: 1px solid $data-table-column-hover;
+  }
+
+  // hover + zebra select - even child
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected:hover td,
+  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
+    color: $text-01;
+    background: $data-table-column-hover;
+    border-top: 1px solid $data-table-column-hover;
+    border-bottom: 1px solid $data-table-column-hover;
+  }
+
+  // selected overflow menu
+  .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
+    opacity: 1;
+  }
+}
+
+@include exports('data-table-v2-core') {
+  @if feature-flag-enabled('components-x') {
+    @include data-table-core--x;
+  } @else {
+    @include data-table-v2-core;
+  }
+}
+>>>>>>> fix(motion): update date-table

From fa5fc18c54173c4d03e5e667b3aa5f854ab7bdc8 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 15 Apr 2019 13:21:45 -0700
Subject: [PATCH 03/18] fix(motion): update date-table, dropdown, modal

---
 .../data-table-v2/_data-table-v2-core.scss    | 425 ------------------
 .../data-table/_data-table-core.scss          |   5 +
 .../data-table/_data-table-expandable.scss    |  27 +-
 src/components/dropdown/_dropdown.scss        |   3 +-
 src/components/modal/_modal.scss              |  14 +-
 5 files changed, 37 insertions(+), 437 deletions(-)

diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
index ca5311d8d169..45c9547b3ebf 100644
--- a/src/components/data-table-v2/_data-table-v2-core.scss
+++ b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -5,429 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-<<<<<<< HEAD
 @import '../data-table/data-table-core';
-=======
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-
-@mixin data-table-v2-core {
-  .#{$prefix}--data-table-v2-container {
-    width: 100%;
-    min-width: rem(500px);
-    overflow-x: auto;
-    padding-top: $spacing-3xs; // allow space for focus styles
-  }
-
-  .#{$prefix}--data-table-v2 {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    border-bottom: 1px solid $ui-03;
-
-    @if feature-flag-enabled('breaking-changes-x') {
-      min-width: rem(500px);
-    }
-
-    thead {
-      @include typescale('zeta');
-      background-color: $ui-02;
-      font-weight: 700;
-      border-right: 1px solid $ui-03;
-    }
-
-    tbody {
-      @include typescale('zeta');
-      background-color: $ui-01;
-      border-right: 1px solid $ui-03;
-    }
-
-    tr {
-      height: rem(48px);
-
-      &:hover {
-        td {
-          background-color: rgba($brand-02, 0.1);
-          border-top: 1px solid $brand-01;
-          border-bottom: 1px solid $brand-01;
-
-          &:first-of-type {
-            border-left: 1px solid $brand-01;
-          }
-
-          &:last-of-type {
-            border-right: 1px solid $brand-01;
-          }
-        }
-
-        .#{$prefix}--overflow-menu {
-          opacity: 1;
-        }
-      }
-    }
-
-    th {
-      border-top: 1px solid $ui-03;
-    }
-
-    th,
-    td {
-      @include typescale('zeta');
-      border-top: 1px solid $ui-03;
-      padding-left: $spacing-sm;
-      vertical-align: middle;
-      text-align: left;
-      color: $text-01;
-
-      &:first-of-type {
-        padding-left: rem(24px);
-        border-left: 1px solid $ui-03;
-      }
-
-      &:last-of-type {
-        padding-right: $spacing-lg;
-      }
-    }
-
-    // Overrrides
-    .#{$prefix}--checkbox-label {
-      padding-left: rem(28px);
-    }
-
-    .#{$prefix}--overflow-menu {
-      opacity: 0;
-
-      &:focus {
-        outline: 0;
-        opacity: 1;
-        box-shadow: none;
-
-        .#{$prefix}--overflow-menu__icon {
-          box-shadow: inset 0px 0px 0px 1px $brand-01;
-        }
-      }
-    }
-
-    .#{$prefix}--overflow-menu__icon {
-      transform: rotate(90deg);
-    }
-  }
-
-  // Options
-
-  .#{$prefix}--data-table-v2-header {
-    margin-bottom: $spacing-xs;
-    color: $text-01;
-  }
-
-  .#{$prefix}--data-table-v2--zebra {
-    tbody tr:nth-child(even) {
-      background-color: $ui-02;
-    }
-  }
-
-  .#{$prefix}--data-table-v2--no-border {
-    & {
-      border-bottom-color: transparent;
-    }
-
-    thead,
-    tbody {
-      border-right-color: transparent;
-    }
-
-    th,
-    td {
-      &:first-of-type {
-        border-left-color: transparent;
-      }
-    }
-  }
-
-  .#{$prefix}--data-table-v2--compact {
-    tbody tr {
-      height: rem(24px);
-    }
-  }
-
-  .#{$prefix}--data-table-v2--short {
-    tbody tr {
-      height: rem(32px);
-    }
-  }
-
-  .#{$prefix}--data-table-v2--tall {
-    tbody tr {
-      height: rem(64px);
-    }
-  }
-
-  .#{$prefix}--data-table-v2--static {
-    width: auto;
-  }
-
-  .#{$prefix}--data-table-v2--zebra tbody tr.#{$prefix}--data-table-v2--selected,
-  tbody tr.#{$prefix}--data-table-v2--selected {
-    background-color: rgba($brand-02, 0.1);
-  }
-}
-
-@mixin data-table-core--x {
-  //----------------------------------------------------------------------------
-  // Container
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table-container {
-    min-width: rem(500px);
-    overflow-x: auto;
-    padding-top: $spacing-01; // allow space for focus styles
-  }
-
-  //----------------------------------------------------------------------------
-  // Table title text
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table-header {
-    background: $ui-01;
-    padding: $spacing-05 0 $spacing-06 $spacing-05;
-  }
-
-  .#{$prefix}--data-table-header__title {
-    @include type-style('productive-heading-03');
-    color: $text-01;
-  }
-
-  .#{$prefix}--data-table-header__description {
-    @include type-style('body-short-01');
-    color: $text-02;
-  }
-
-  //----------------------------------------------------------------------------
-  // Data table
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-  }
-
-  .#{$prefix}--data-table thead {
-    @include type-style('heading-01');
-    background-color: $ui-03;
-  }
-
-  .#{$prefix}--data-table tbody {
-    @include type-style('body-short-01');
-    background-color: $ui-01;
-    width: 100%;
-  }
-
-  .#{$prefix}--data-table tr {
-    border: none;
-    height: $layout-04;
-    width: 100%;
-  }
-
-  .#{$prefix}--data-table tbody tr,
-  .#{$prefix}--data-table tbody tr td {
-    transition: background-color $duration--fast-02 motion(standard, productive);
-  }
-
-  .#{$prefix}--data-table tbody tr:hover {
-    background: $hover-field;
-  }
-
-  .#{$prefix}--data-table tbody tr:hover td {
-    color: $text-01;
-    background: $hover-field;
-    border-bottom: 1px solid $hover-field;
-    border-top: 1px solid $hover-field;
-  }
-
-  .#{$prefix}--data-table th,
-  .#{$prefix}--data-table td {
-    padding-left: $spacing-04;
-    padding-right: $spacing-04;
-    vertical-align: top;
-    text-align: left;
-  }
-
-  .#{$prefix}--data-table th {
-    color: $text-01;
-    background-color: $ui-03;
-    border-top: 1px solid $ui-03;
-    border-bottom: 1px solid $ui-03;
-  }
-
-  .#{$prefix}--data-table th:first-of-type {
-    padding-left: $spacing-05;
-  }
-
-  .#{$prefix}--data-table .#{$prefix}--table-header-label {
-    display: block;
-    padding: rem(14px) 0;
-  }
-
-  .#{$prefix}--data-table td {
-    background: $ui-01;
-    color: $text-02;
-    border-top: 1px solid $ui-01;
-    border-bottom: 1px solid $ui-03;
-    padding: rem(14px) $spacing-04;
-    padding-bottom: rem(13px);
-  }
-
-  @supports (-moz-appearance: none) {
-    .#{$prefix}--data-table td {
-      background-clip: padding-box; // fix to show borders in ff
-    }
-  }
-
-  .#{$prefix}--data-table td:first-of-type {
-    padding-left: $spacing-05;
-  }
-
-  .#{$prefix}--data-table td:last-of-type {
-    padding-right: $spacing-05;
-  }
-
-  // specific padding for overflow menu columns
-  .#{$prefix}--data-table .#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
-    padding-top: $spacing-03;
-    padding-right: $spacing-03;
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu {
-    padding-bottom: 0;
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
-    background: $ui-03;
-  }
-
-  // Overflow Menu Overrides
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
-    outline: none;
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
-    opacity: 0;
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:hover .#{$prefix}--overflow-menu__icon,
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:focus .#{$prefix}--overflow-menu__icon,
-  .#{$prefix}--data-table tr:hover td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
-    opacity: 1;
-  }
-
-  .#{$prefix}--table-row--menu-option
-    .#{$prefix}--overflow-menu-options__btn
-    .#{$prefix}--overflow-menu-options__option-content
-    svg {
-    margin-right: $spacing-03;
-    position: relative;
-    top: rem(3px); //used to center svg without setting display flex //display block needed for overflow text truncation
-  }
-
-  //----------------------------------------------------------------------------
-  //ZEBRA
-  //----------------------------------------------------------------------------
-
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
-    border-bottom: 1px solid $ui-01;
-  }
-
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd) td {
-    background-color: $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
-    border-top: 1px solid $data-table-zebra-color;
-  }
-
-  .#{$prefix}--data-table--zebra tbody tr:hover td {
-    background-color: $hover-field;
-    border-bottom: 1px solid $hover-field;
-    border-top: 1px solid $hover-field;
-  }
-
-  //----------------------------------------------------------------------------
-  // Select
-  //----------------------------------------------------------------------------
-  .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
-    padding-left: $spacing-05;
-  }
-
-  .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
-    padding: rem(12px) $spacing-03 0 $spacing-05;
-    width: rem(44px); // 16px padding left + 8px padding right + 20px checkbox width
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
-    padding-top: rem(11px);
-    padding-bottom: 0;
-  }
-
-  th.#{$prefix}--table-column-checkbox:hover {
-    background: $data-table-column-hover;
-  }
-
-  // default selected row + zebra select - even child
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected td,
-  tr.#{$prefix}--data-table--selected td {
-    color: $text-01;
-    background-color: $ui-03;
-    border-top: 1px solid $ui-03;
-    border-bottom: 1px solid $active-01; //bottom border acts as separator from other rows
-  }
-
-  // first row
-  .#{$prefix}--data-table--zebra tbody tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
-  tr.#{$prefix}--data-table--selected:first-of-type td {
-    border-top: 1px solid $active-01; //top border acts as separator from thead
-  }
-
-  // last row + zebra select last
-  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
-  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected td,
-  tr.#{$prefix}--data-table--selected:last-of-type td {
-    border-top: 1px solid $ui-03; // doesn't need separators
-    border-bottom: 1px solid $ui-03;
-  }
-
-  // zebra select - odd child
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected td {
-    border-bottom: 1px solid $active-01;
-  }
-
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td {
-    border-bottom: 1px solid $data-table-column-hover;
-  }
-
-  // hover + zebra select - even child
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected:hover td,
-  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
-    color: $text-01;
-    background: $data-table-column-hover;
-    border-top: 1px solid $data-table-column-hover;
-    border-bottom: 1px solid $data-table-column-hover;
-  }
-
-  // selected overflow menu
-  .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
-    opacity: 1;
-  }
-}
-
-@include exports('data-table-v2-core') {
-  @if feature-flag-enabled('components-x') {
-    @include data-table-core--x;
-  } @else {
-    @include data-table-v2-core;
-  }
-}
->>>>>>> fix(motion): update date-table
diff --git a/src/components/data-table/_data-table-core.scss b/src/components/data-table/_data-table-core.scss
index 7ecfd20b24e7..c832a185b631 100644
--- a/src/components/data-table/_data-table-core.scss
+++ b/src/components/data-table/_data-table-core.scss
@@ -66,6 +66,11 @@
     width: 100%;
   }
 
+  .#{$prefix}--data-table tbody tr,
+  .#{$prefix}--data-table tbody tr td {
+    transition: background-color $duration--fast-02 motion(standard, productive);
+  }
+
   .#{$prefix}--data-table tbody tr:hover {
     background: $hover-field;
   }
diff --git a/src/components/data-table/_data-table-expandable.scss b/src/components/data-table/_data-table-expandable.scss
index d3349fd16909..4d088939ca31 100644
--- a/src/components/data-table/_data-table-expandable.scss
+++ b/src/components/data-table/_data-table-expandable.scss
@@ -34,7 +34,7 @@
   //child row hidden
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] {
     height: 0;
-    transition: height $transition--expansion $carbon--standard-easing;
+    transition: height $duration--moderate-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td {
@@ -42,8 +42,8 @@
     padding-bottom: 0;
     border: 0;
     background-color: $hover-field;
-    transition: padding $transition--expansion $carbon--standard-easing,
-      background-color $transition--expansion $carbon--standard-easing;
+    transition: padding $duration--moderate-01 motion(standard, productive),
+      background-color $duration--moderate-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td .#{$prefix}--child-row-inner-container {
@@ -53,12 +53,12 @@
 
   //child row visible
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
-    transition: height $transition--expansion $carbon--standard-easing;
+    transition: height $duration--moderate-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
     padding-bottom: rem(23px);
-    transition: padding $transition--expansion $carbon--standard-easing;
+    transition: padding $duration--moderate-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td .#{$prefix}--child-row-inner-container {
@@ -83,7 +83,18 @@
   //----------------------------------------------------------------------------
   // Hover styles
   //----------------------------------------------------------------------------
-  //hovering on collapsed parent
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td,
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td,
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
+    transition: height $duration--moderate-02 motion(standard, productive),
+      background-color $duration--fast-02 motion(standard, productive);
+  }
+
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
+    transition: all $duration--fast-02 motion(standard, productive);
+  }
+
+  // hovering on collapsed parent
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover td {
     border-top: 1px solid $hover-field;
     border-bottom: 1px solid $hover-field;
@@ -148,7 +159,7 @@
 
   .#{$prefix}--table-expand[data-previous-value='collapsed'] .#{$prefix}--table-expand__svg {
     transform: rotate(270deg);
-    transition: transform $transition--expansion $carbon--standard-easing;
+    transition: transform $duration--moderate-01 motion(standard, productive);
   }
 
   .#{$prefix}--table-expand__button {
@@ -170,7 +181,7 @@
   .#{$prefix}--table-expand__svg {
     fill: $ui-05;
     transform: rotate(90deg);
-    transition: transform $transition--expansion $carbon--standard-easing;
+    transition: transform $duration--moderate-01 motion(standard, productive);
   }
 
   th.#{$prefix}--table-expand + th.#{$prefix}--table-column-checkbox {
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
index 69c834fac332..b70f9f221fbf 100644
--- a/src/components/dropdown/_dropdown.scss
+++ b/src/components/dropdown/_dropdown.scss
@@ -55,7 +55,7 @@
     cursor: pointer;
     color: $text-01;
     outline: 2px solid transparent;
-    transition: $duration--fast-02 motion(standard, productive) all;
+    transition: background-color $duration--fast-02 motion(standard, productive);
 
     &:focus {
       @include focus-outline('outline');
@@ -219,6 +219,7 @@
 
   .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
     max-height: 15rem;
+    transition: max-height $duration--fast-02 motion(entrance, productive);
 
     &:hover {
       overflow: auto;
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 1cf134d33fc9..af51aa1b91bb 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -36,14 +36,16 @@
     content: '';
     opacity: 0;
     background-color: $overlay-01;
-    transition: opacity $duration--moderate-01 motion(exit, expressive),
-      z-index 0s $duration--moderate-01 motion(exit, expressive), visibility 0s $duration--moderate-01 motion(exit, expressive);
     visibility: hidden;
+    transition: opacity $duration--slow-01 motion(exit, expressive), z-index $duration--slow-01 motion(exit, expressive),
+      visibility $duration--slow-01 motion(exit, expressive);
 
     &.is-visible {
       z-index: z('modal');
+      transform: translateY(0);
       opacity: 1;
-      transition: opacity $duration--slow-01 motion(entrance, expressive);
+      transition: opacity $duration--slow-01 motion(entrance, expressive) z-index $duration--slow-01 motion(entrance, expressive),
+        visibility $duration--slow-01 motion(entrance, expressive);
       visibility: visible;
     }
 
@@ -57,6 +59,10 @@
     @include modal--color($support-01);
   }
 
+  .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
+    transform: translateY(0);
+  }
+
   .#{$prefix}--modal-container {
     position: relative;
     display: flex;
@@ -65,6 +71,8 @@
     width: 100%;
     max-height: 100%;
     height: 100%;
+    transform: translateY(-24px);
+    transition: transform $duration--moderate-02 motion(entrance, expressive);
 
     @include carbon--breakpoint(md) {
       height: auto;

From e84eddf6b8aecf6b215a32ee96a81dc6c1724edf Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 15 Apr 2019 14:53:35 -0700
Subject: [PATCH 04/18] fix(motion): update number input

---
 src/components/number-input/_number-input.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index 70b654593061..771b3e776f21 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -46,6 +46,10 @@
       @include focus-outline('outline');
     }
 
+    &:hover {
+      background-color: $hover-field;
+    }
+
     &:disabled {
       cursor: not-allowed;
       background-color: $disabled-background-color;

From 53018988b1e41818c6e5b7208f6f276383ab0a0c Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 15 Apr 2019 15:15:59 -0700
Subject: [PATCH 05/18] fix(motion): tweak modal animations

---
 src/components/modal/_modal.scss | 33 +++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index af51aa1b91bb..a6d97b613f47 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -37,16 +37,17 @@
     opacity: 0;
     background-color: $overlay-01;
     visibility: hidden;
-    transition: opacity $duration--slow-01 motion(exit, expressive), z-index $duration--slow-01 motion(exit, expressive),
-      visibility $duration--slow-01 motion(exit, expressive);
+    transition: opacity $duration--moderate-02 motion(exit, expressive), z-index $duration--slow-01 motion(exit, expressive),
+      visibility $duration--moderate-02 motion(exit, expressive);
 
     &.is-visible {
       z-index: z('modal');
       transform: translateY(0);
       opacity: 1;
-      transition: opacity $duration--slow-01 motion(entrance, expressive) z-index $duration--slow-01 motion(entrance, expressive),
-        visibility $duration--slow-01 motion(entrance, expressive);
       visibility: visible;
+      transition: opacity $duration--moderate-02 motion(entrance, expressive) z-index $duration--slow-01
+          motion(entrance, expressive),
+        visibility $duration--moderate-02 motion(entrance, expressive);
     }
 
     .#{$prefix}--text-input,
@@ -61,6 +62,15 @@
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
     transform: translateY(0);
+    max-height: 100%;
+
+    @include carbon--breakpoint(md) {
+      max-height: 90%;
+    }
+
+    @include carbon--breakpoint(lg) {
+      max-height: 80%;
+    }
   }
 
   .#{$prefix}--modal-container {
@@ -69,20 +79,17 @@
     flex-direction: column;
     background-color: $ui-01;
     width: 100%;
-    max-height: 100%;
+    max-height: 0;
     height: 100%;
-    transform: translateY(-24px);
-    transition: transform $duration--moderate-02 motion(entrance, expressive);
+    overflow: hidden;
+    transform: translate3d(0, -24px, 0);
+    transition: transform $duration--moderate-02 motion(exit, expressive),
+      max-height $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {
-      height: auto;
       width: 50%;
       max-width: 768px;
-      max-height: 90%;
-    }
-
-    @include carbon--breakpoint(lg) {
-      max-height: 80%;
+      height: auto;
     }
   }
 

From 4d73ca610b5bdb95491b7020d0aaa47d0d290d54 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 15 Apr 2019 15:41:54 -0700
Subject: [PATCH 06/18] fix(motion): fix modal animation

---
 src/components/modal/_modal.scss | 38 +++++++++++++++-----------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index a6d97b613f47..0a5bd0675301 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -34,19 +34,20 @@
     align-items: center;
     justify-content: center;
     content: '';
+    background-color: transparent;
     opacity: 0;
-    background-color: $overlay-01;
     visibility: hidden;
-    transition: opacity $duration--moderate-02 motion(exit, expressive), z-index $duration--slow-01 motion(exit, expressive),
+    transition: background-color $duration--slow-02 motion(exit, expressive),
+      opacity $duration--moderate-02 motion(exit, expressive), z-index $duration--slow-02 motion(exit, expressive),
       visibility $duration--moderate-02 motion(exit, expressive);
 
     &.is-visible {
       z-index: z('modal');
-      transform: translateY(0);
-      opacity: 1;
       visibility: visible;
-      transition: opacity $duration--moderate-02 motion(entrance, expressive) z-index $duration--slow-01
-          motion(entrance, expressive),
+      opacity: 1;
+      background-color: $overlay-01;
+      transition: background-color $duration--slow-02 motion(entrance, expressive),
+        opacity $duration--moderate-02 motion(entrance, expressive), z-index $duration--slow-02 motion(entrance, expressive),
         visibility $duration--moderate-02 motion(entrance, expressive);
     }
 
@@ -61,16 +62,8 @@
   }
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
-    transform: translateY(0);
-    max-height: 100%;
-
-    @include carbon--breakpoint(md) {
-      max-height: 90%;
-    }
-
-    @include carbon--breakpoint(lg) {
-      max-height: 80%;
-    }
+    transition: transform $duration--moderate-02 motion(entrance, expressive);
+    transform: translateY(0) scaleY(1);
   }
 
   .#{$prefix}--modal-container {
@@ -79,18 +72,23 @@
     flex-direction: column;
     background-color: $ui-01;
     width: 100%;
-    max-height: 0;
     height: 100%;
+    max-height: 100%;
     overflow: hidden;
-    transform: translate3d(0, -24px, 0);
-    transition: transform $duration--moderate-02 motion(exit, expressive),
-      max-height $duration--moderate-02 motion(exit, expressive);
+    transform-origin: top center;
+    transform: translate3d(0, -24px, 0) scaleY(0);
+    transition: transform $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {
       width: 50%;
       max-width: 768px;
+      max-height: 90%;
       height: auto;
     }
+
+    @include carbon--breakpoint(lg) {
+      max-height: 80%;
+    }
   }
 
   .#{$prefix}--modal-header,

From c173d5fa74938b1e15f38c3c3b2ad8e018a7afef Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 15 Apr 2019 16:08:05 -0700
Subject: [PATCH 07/18] fix(motion): add animation to button hover

---
 src/components/modal/_modal.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 0a5bd0675301..dd1e41210346 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -160,6 +160,7 @@
     overflow: hidden;
     cursor: pointer;
     background-color: transparent;
+    transition: background-color $duration--fast-02 motion(standard, productive);
 
     &:hover {
       background-color: $hover-ui;

From 4fda88f7709ecb6402969fd609c28d997f171364 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Apr 2019 10:10:07 -0700
Subject: [PATCH 08/18] fix(modal): remove scale animation

---
 src/components/modal/_modal.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index dd1e41210346..3750e06d7c5a 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -63,7 +63,7 @@
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
     transition: transform $duration--moderate-02 motion(entrance, expressive);
-    transform: translateY(0) scaleY(1);
+    transform: translate3d(0, 0, 0);
   }
 
   .#{$prefix}--modal-container {
@@ -76,7 +76,7 @@
     max-height: 100%;
     overflow: hidden;
     transform-origin: top center;
-    transform: translate3d(0, -24px, 0) scaleY(0);
+    transform: translate3d(0, -24px, 0);
     transition: transform $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {

From b56962b478a712c27a259eed1aa49045350ad4bb Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Apr 2019 11:22:52 -0700
Subject: [PATCH 09/18] fix(search): update search motion

---
 .../number-input/_number-input.scss           |  3 +-
 .../_progress-indicator.scss                  | 12 ++---
 src/components/search/_search.scss            | 54 ++++++++++++++++---
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index 771b3e776f21..4e0b99640411 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -40,7 +40,8 @@
     border: none;
     border-radius: 0;
     border-bottom: 1px solid $ui-04;
-    transition: all $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive);
 
     &:focus {
       @include focus-outline('outline');
diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss
index 74d714c22451..584db9ce3975 100644
--- a/src/components/progress-indicator/_progress-indicator.scss
+++ b/src/components/progress-indicator/_progress-indicator.scss
@@ -28,7 +28,6 @@
     flex: 1;
     min-width: 7rem;
     width: rem(128px);
-    transition: $duration--fast-02 all motion(standard, productive);
     overflow: visible;
 
     .#{$prefix}--tooltip__label {
@@ -55,14 +54,14 @@
   }
 
   .#{$prefix}--progress-label {
+    @include type-style('body-short-01');
     line-height: 1.45;
     max-width: rem(88px);
     margin: $carbon--spacing-03 0 0 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    @include type-style('body-short-01');
-    transition: box-shadow $transition--base $carbon--standard-easing;
+    transition: box-shadow $duration--fast-02 motion(standard, productive), color $duration--fast-02 motion(standard, productive);
 
     &::before {
       content: '';
@@ -80,7 +79,6 @@
     outline: none;
     color: $link-01;
     box-shadow: 0 rem(3px) 0 0 $link-01;
-    transition: box-shadow 0.05s $carbon--standard-easing;
   }
 
   .#{$prefix}--progress-label:active {
@@ -106,6 +104,7 @@
 
   //single line tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip {
+    @include type-style('body-long-01');
     min-width: rem(115px);
     width: rem(125px);
     min-height: $carbon--spacing-06;
@@ -114,25 +113,24 @@
     padding: $carbon--spacing-03 $carbon--spacing-05;
     display: block;
     visibility: hidden;
-    @include type-style('body-long-01');
     color: $inverse-01;
   }
 
   //multiline tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
+    @include type-style('body-long-01');
     width: rem(150px);
     height: auto;
-    @include type-style('body-long-01');
     color: $inverse-01;
   }
 
   //OPTIONAL HELPER TEXT STYLING
   .#{$prefix}--progress-optional {
+    @include type-style('label-01');
     position: absolute;
     left: 0;
     margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
-    @include type-style('label-01');
     color: $text-01;
   }
 
diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss
index bec676903d0c..bbed6a95b8b0 100644
--- a/src/components/search/_search.scss
+++ b/src/components/search/_search.scss
@@ -42,9 +42,14 @@
     text-overflow: ellipsis;
     width: 100%;
     order: 1;
-    transition: background-color $duration--fast-01, outline $duration--fast-01;
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive);
     border-bottom: 1px solid $ui-04;
 
+    &:hover {
+      background-color: $hover-field;
+    }
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -117,9 +122,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: opacity $duration--fast-02, outline $duration--fast-02, background-color $duration--fast-02,
-      border-color $duration--fast-02;
-    border-bottom: 1px solid transparent;
+    transition: opacity $duration--fast-02 motion(standard, productive),
+      background-color $duration--fast-02 motion(standard, productive), outline $duration--fast-02 motion(standard, productive),
+      border $duration--fast-02 motion(standard, productive);
     cursor: pointer;
     visibility: visible;
     opacity: 1;
@@ -128,22 +133,55 @@
     width: rem(40px);
     right: 0;
     fill: $icon-01;
-    border: 2px solid transparent;
+    border: 1px solid transparent;
     border-left: 0;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $hover-field;
       border-bottom: 1px solid $ui-04;
     }
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+
     &:active {
       @include focus-outline('outline');
       background-color: $selected-ui;
     }
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: rem(1px);
+      height: calc(100% - 2px);
+      width: 2px;
+      background-color: $field-01;
+      transition: background-color $duration--fast-02 motion(standard, productive);
+    }
+  }
+
+  .#{$prefix}--search-close:hover {
+    &::before {
+      background-color: $hover-field;
+    }
+  }
+
+  .#{$prefix}--search-close:focus,
+  .#{$prefix}--search-close:active {
+    &::before {
+      background-color: $focus;
+    }
+  }
+
+  .#{$prefix}--search-input:hover ~ .#{$prefix}--search-close::before {
+    background-color: $hover-field;
   }
 
   .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
-    border: 2px solid $focus;
-    border-left: 0;
+    @include focus-outline('outline');
   }
 
   .#{$prefix}--search--sm .#{$prefix}--search-close {

From ce7bf80d8c2cab0608210c9ee0f21b50e37cd503 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Apr 2019 14:28:51 -0700
Subject: [PATCH 10/18] fix(motion): fix motion in slider, structured list

---
 src/components/slider/_slider.scss                   | 11 ++++++++---
 src/components/structured-list/_structured-list.scss |  6 ++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/slider/_slider.scss b/src/components/slider/_slider.scss
index d53357e5b9d6..7dd53fbfe528 100644
--- a/src/components/slider/_slider.scss
+++ b/src/components/slider/_slider.scss
@@ -73,7 +73,7 @@
     transform-origin: left;
     pointer-events: none;
     transform: translate(0%, -50%);
-    transition: background $duration--fast-01 motion(standard, productive);
+    transition: background $duration--fast-02 motion(standard, productive);
   }
 
   .#{$prefix}--slider__thumb {
@@ -85,8 +85,8 @@
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
     top: 0;
     transform: translate(-50%, -50%);
-    transition: transform $duration--fast-01 motion(standard, productive),
-      background $duration--fast-01 motion(standard, productive), box-shadow $duration--fast-01 motion(standard, productive);
+    transition: transform $duration--fast-02 motion(standard, productive),
+      background $duration--fast-02 motion(standard, productive), box-shadow $duration--fast-02 motion(standard, productive);
     cursor: pointer;
     outline: none;
     z-index: 3;
@@ -125,6 +125,10 @@
     &::-webkit-inner-spin-button {
       display: none;
     }
+
+    &:hover {
+      background-color: $hover-field;
+    }
   }
 
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
@@ -169,6 +173,7 @@
     background-color: $disabled-01;
     color: $disabled-02;
     transition: none;
+    cursor: not-allowed;
 
     &:active,
     &:focus,
diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
index 8c699a959d9e..0fd97c67b955 100644
--- a/src/components/structured-list/_structured-list.scss
+++ b/src/components/structured-list/_structured-list.scss
@@ -43,11 +43,12 @@
   .#{$prefix}--structured-list-row {
     display: table-row;
     border-bottom: 1px solid $ui-03;
+    transition: background-color $duration--fast-02 motion(standard, productive);
   }
 
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
-    background-color: $ui_01;
+    background-color: $ui-01;
     cursor: pointer;
     border-bottom: 1px solid $ui-01;
   }
@@ -108,6 +109,7 @@
     position: relative;
     display: table-cell;
     max-width: 36rem;
+    transition: color $duration--fast-02 motion(standard, productive);
   }
 
   .#{$prefix}--structured-list-th {
@@ -125,7 +127,7 @@
     display: inline-block;
     fill: transparent;
     vertical-align: middle;
-    transition: $duration--fast-02 motion(standard, productive);
+    transition: all $duration--fast-02 motion(standard, productive);
   }
 
   .#{$prefix}--structured-list-row:hover .#{$prefix}--structured-list-svg {

From 7e425364f102b9b39b69644da2fa4706e8f89abc Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Apr 2019 15:14:06 -0700
Subject: [PATCH 11/18] fix(motion): fix tabs motion

---
 demo/scss/_layout.scss         |  4 ----
 src/components/tabs/_tabs.scss | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/demo/scss/_layout.scss b/demo/scss/_layout.scss
index 23d463d3326a..1f1bc99525f5 100644
--- a/demo/scss/_layout.scss
+++ b/demo/scss/_layout.scss
@@ -76,7 +76,3 @@ a {
 svg {
   transition: fill 250ms;
 }
-
-.bx--tabs__nav-item {
-  transition: background-color 250ms;
-}
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index b5126d468e17..e7ce99e33003 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -141,6 +141,8 @@
     cursor: pointer;
     width: 100%;
     height: rem(40px);
+    transition: background-color $duration--fast-02 motion(standard, productive);
+
     @include carbon--breakpoint(md) {
       background: transparent;
       height: auto;
@@ -150,6 +152,11 @@
     }
   }
 
+  .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
+    transition: color $duration--fast-02 motion(standard, productive),
+      border-bottom-color $duration--fast-02 motion(standard, productive), outline $duration--fast-02 motion(standard, productive);
+  }
+
   //-----------------------------
   // Item Hover
   //-----------------------------
@@ -183,6 +190,8 @@
   .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
     border: none;
     display: none;
+    transition: color $duration--fast-02 motion(standard, productive);
+
     @include carbon--breakpoint(md) {
       display: flex;
       .#{$prefix}--tabs__nav-link {
@@ -194,7 +203,7 @@
       .#{$prefix}--tabs__nav-link:focus,
       .#{$prefix}--tabs__nav-link:active {
         color: $text-01;
-        border-bottom: 2px;
+        border-bottom: 2px solid $interactive-01;
       }
     }
   }
@@ -203,6 +212,7 @@
   // Link
   //-----------------------------
   a.#{$prefix}--tabs__nav-link {
+    @include focus-outline('reset');
     display: inline-block;
     color: $text-02;
     text-decoration: none;
@@ -216,6 +226,7 @@
     line-height: rem(16px);
     border-bottom: 1px solid $ui-03;
     overflow: hidden;
+    transition: border $duration--fast-02 motion(standard, productive), outline $duration--fast-02 motion(standard, productive);
 
     &:focus,
     &:active {

From 4a2df0bf6815a026f42e9db0b52e3b5321c10c0a Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Apr 2019 15:44:12 -0700
Subject: [PATCH 12/18] fix(motion): add motion to inputs, toggle

---
 src/components/text-area/_text-area.scss   |  7 ++++++-
 src/components/text-input/_text-input.scss |  7 ++++++-
 src/components/toggle/_toggle.scss         | 10 +++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
index 10a0eb829a83..8d97e3fdb1a1 100644
--- a/src/components/text-area/_text-area.scss
+++ b/src/components/text-area/_text-area.scss
@@ -35,7 +35,8 @@
     resize: vertical;
     border: none;
     border-bottom: 1px solid $ui-04;
-    transition: $duration--fast-02 all;
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive);
 
     & ~ .#{$prefix}--form__helper-text {
       margin-top: 0;
@@ -55,6 +56,10 @@
     }
   }
 
+  .#{$prefix}--text-area:hover {
+    background-color: $hover-field;
+  }
+
   .#{$prefix}--text-area:focus,
   .#{$prefix}--text-area:active {
     @include focus-outline('outline');
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index 5077ba0205ae..208e4aff0517 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -30,7 +30,12 @@
     color: $text-01;
     border: none;
     border-bottom: 1px solid $ui-04;
-    transition: $duration--fast-02 all;
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive);
+
+    &:hover {
+      background-color: $hover-field;
+    }
 
     &:focus,
     &:active {
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
index c0208c8c5b10..e0c458468300 100644
--- a/src/components/toggle/_toggle.scss
+++ b/src/components/toggle/_toggle.scss
@@ -54,6 +54,10 @@
       width: rem(48px);
       border-radius: rem(15px);
       top: 0;
+      will-change: box-shadow;
+      box-shadow: 0 0 0 2px transparent;
+      transition: box-shadow $duration--fast-02 motion(standard, productive),
+        background-color $duration--fast-02 motion(standard, productive);
     }
 
     // Toggle circle
@@ -69,7 +73,7 @@
       background-color: $ui-03;
       border-radius: 50%;
       content: '';
-      transition: $duration--fast-01 motion(exit, productive);
+      transition: transform $duration--fast-02 motion(standard, productive);
     }
   }
 
@@ -99,7 +103,7 @@
     left: 6px;
     top: 6px;
     z-index: 1;
-    transition: $duration--fast-01 motion(exit, productive);
+    transition: $duration--fast-02 motion(exit, productive);
     transform: scale(0.2);
   }
 
@@ -187,7 +191,7 @@
     &:before,
     &:after {
       cursor: not-allowed;
-      transition: $duration--fast-01 motion(exit, productive);
+      transition: $duration--fast-02 motion(exit, productive);
     }
   }
 

From 408841df2d16a39975edf12a2eac3bb09f1ed83e Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 22 Apr 2019 12:18:48 -0700
Subject: [PATCH 13/18] fix(motion): update data-table button

---
 src/components/button/_mixins.scss            |  4 +--
 .../data-table/_data-table-action.scss        | 28 +++++++++++++------
 .../data-table/_data-table-core.scss          | 10 ++++++-
 .../data-table/_data-table-sort.scss          |  7 +++--
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
index f8f3293dcfbb..65b05dca0d32 100644
--- a/src/components/button/_mixins.scss
+++ b/src/components/button/_mixins.scss
@@ -24,7 +24,7 @@
   border-radius: $button-border-radius;
   text-align: left;
   text-decoration: none;
-  transition: all $duration--fast-02 motion(standard, productive);
+  transition: all $duration--fast-01 motion(entrance, productive);
   outline: $button-outline-width solid transparent;
   position: relative;
   max-width: rem(320px);
@@ -43,7 +43,7 @@
     flex-shrink: 0;
     width: rem(16px);
     height: rem(16px);
-    transition: all $duration--fast-02 motion(standard, productive);
+    transition: all $duration--fast-01 motion(entrance, productive);
   }
 }
 
diff --git a/src/components/data-table/_data-table-action.scss b/src/components/data-table/_data-table-action.scss
index e0d1b06780cd..1c19517b8203 100644
--- a/src/components/data-table/_data-table-action.scss
+++ b/src/components/data-table/_data-table-action.scss
@@ -29,6 +29,11 @@
     height: $layout-04;
     width: 100%;
     justify-content: flex-end;
+    will-change: transform;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+    transition: transform $duration--fast-01 motion(exit, productive);
+    transition-delay: $duration--fast-01;
   }
 
   //-------------------------------------------------
@@ -52,6 +57,8 @@
     width: $layout-04;
     padding: $spacing-md;
     left: 0;
+    cursor: pointer;
+    transition: background $duration--fast-01 motion(entrance, productive);
   }
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-magnifier:focus {
@@ -136,6 +143,7 @@
     height: $layout-04;
     width: $layout-04;
     padding: $spacing-md;
+    transition: background $duration--fast-01 motion(entrance, productive);
   }
 
   .#{$prefix}--toolbar-action:hover:not([disabled]) {
@@ -230,7 +238,10 @@
 
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
-    opacity: 0;
+    visibility: hidden;
+    transform: translate3d(0, 48px, 0);
+    transition: transform $duration--fast-01 motion(entrance, productive);
+    transition-delay: 0;
   }
 
   //-------------------------------------------------
@@ -242,14 +253,16 @@
     top: 0;
     left: 0;
     align-items: center;
-    opacity: 0;
     padding-left: $spacing-lg;
     padding-right: $spacing-lg;
     width: 100%;
     height: 100%;
-    z-index: z('header');
-    background-color: transparent;
-    transition: opacity $transition--base $carbon--standard-easing, background-color $transition--base $carbon--standard-easing;
+    will-change: transform;
+    background-color: $brand-01;
+    transition: transform $duration--fast-01 motion(exit, productive), visibility $duration--fast-01 motion(exit, productive),
+      opacity $duration--fast-01 motion(exit, productive);
+    transform: translate3d(0, 48px, 0);
+    transition-delay: 0;
     pointer-events: none;
     visibility: hidden;
   }
@@ -260,10 +273,9 @@
 
   .#{$prefix}--batch-actions--active {
     visibility: visible;
-    background-color: $brand-01;
     pointer-events: all;
-    transition: opacity $transition--base $carbon--standard-easing, background-color $transition--base $carbon--standard-easing;
-    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition-delay: $duration--fast-01;
   }
 
   //btns container
diff --git a/src/components/data-table/_data-table-core.scss b/src/components/data-table/_data-table-core.scss
index c832a185b631..0d2d47014244 100644
--- a/src/components/data-table/_data-table-core.scss
+++ b/src/components/data-table/_data-table-core.scss
@@ -68,7 +68,7 @@
 
   .#{$prefix}--data-table tbody tr,
   .#{$prefix}--data-table tbody tr td {
-    transition: background-color $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
   .#{$prefix}--data-table tbody tr:hover {
@@ -101,6 +101,11 @@
     padding-left: $spacing-05;
   }
 
+  .#{$prefix}--data-table th:last-of-type {
+    position: relative;
+    width: auto;
+  }
+
   .#{$prefix}--data-table .#{$prefix}--table-header-label {
     display: block;
     padding: rem(14px) 0;
@@ -200,8 +205,11 @@
   }
 
   .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
+    position: relative;
+    background: $ui-03;
     padding: rem(12px) $spacing-03 0 $spacing-05;
     width: rem(44px); // 16px padding left + 8px padding right + 20px checkbox width
+    transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
   .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
diff --git a/src/components/data-table/_data-table-sort.scss b/src/components/data-table/_data-table-sort.scss
index 71b5811a37d6..8374d02cd4d2 100644
--- a/src/components/data-table/_data-table-sort.scss
+++ b/src/components/data-table/_data-table-sort.scss
@@ -37,6 +37,7 @@
   // Th > Button
   // -------------------------------------
   .#{$prefix}--table-sort {
+    @include focus-outline('reset');
     @include button-reset(false);
     position: relative;
     font: inherit;
@@ -47,6 +48,9 @@
     color: $text-01;
     padding: 0 $spacing-03;
     height: 100%;
+    background-color: $ui-03;
+    transition: background-color $duration--fast-01 motion(entrance, productive),
+      outline $duration--fast-01 motion(entrance, productive);
   }
 
   .#{$prefix}--table-sort:focus {
@@ -57,7 +61,6 @@
     background: $data-table-column-hover;
   }
 
-  // changes opacity when th is inactive (see line 161)
   .#{$prefix}--table-sort:focus svg,
   .#{$prefix}--table-sort:hover svg {
     opacity: 1;
@@ -84,6 +87,7 @@
     fill: $ui-05;
     width: auto;
     min-width: $layout-01;
+    transition: opacity $duration--fast-01 motion(entrance, productive);
   }
 
   // active icons
@@ -105,7 +109,6 @@
     left: rem(2px);
     margin-left: $spacing-03;
     margin-right: 0;
-    transition: transform $transition--base $carbon--standard-easing;
     transform: rotate(0);
     opacity: 0;
     fill: $ui-05;

From 02808ba76fa78da1ce92df9ca9edde654ed8239a Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 22 Apr 2019 13:41:48 -0700
Subject: [PATCH 14/18] fix(motion): clean up data table animations

---
 .../data-table/_data-table-action.scss          | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/data-table/_data-table-action.scss b/src/components/data-table/_data-table-action.scss
index 1c19517b8203..eb2f805f53e3 100644
--- a/src/components/data-table/_data-table-action.scss
+++ b/src/components/data-table/_data-table-action.scss
@@ -29,10 +29,10 @@
     height: $layout-04;
     width: 100%;
     justify-content: flex-end;
-    will-change: transform;
     transform: translate3d(0, 0, 0);
     visibility: visible;
-    transition: transform $duration--fast-01 motion(exit, productive);
+    transition: transform $duration--fast-01 motion(standard, productive),
+      visibility $duration--fast-01 motion(standard, productive);
     transition-delay: $duration--fast-01;
   }
 
@@ -87,7 +87,7 @@
   //-------------------------------------------------
   .#{$prefix}--toolbar-search-container-active {
     flex: auto;
-    transition: flex $transition--expansion $carbon--standard-easing;
+    transition: flex $duration--moderate-01 motion(standard, productive);
   }
 
   .#{$prefix}--toolbar-search-container-active .#{$prefix}--search {
@@ -185,7 +185,6 @@
     width: auto;
     max-width: $layout-01;
     fill: $ui-05;
-    transition: $transition--base;
   }
 
   //-------------------------------------------------
@@ -196,7 +195,6 @@
     height: $layout-04;
     opacity: 1;
     position: relative;
-    transition: opacity $transition--base;
   }
 
   .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--toolbar-content {
@@ -240,7 +238,8 @@
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
     visibility: hidden;
     transform: translate3d(0, 48px, 0);
-    transition: transform $duration--fast-01 motion(entrance, productive);
+    transition: transform $duration--fast-01 motion(standard, productive),
+      visibility $duration--fast-01 motion(standard, productive);
     transition-delay: 0;
   }
 
@@ -259,8 +258,8 @@
     height: 100%;
     will-change: transform;
     background-color: $brand-01;
-    transition: transform $duration--fast-01 motion(exit, productive), visibility $duration--fast-01 motion(exit, productive),
-      opacity $duration--fast-01 motion(exit, productive);
+    transition: transform $duration--fast-01 motion(standard, productive),
+      visibility $duration--fast-01 motion(standard, productive), opacity $duration--fast-01 motion(standard, productive);
     transform: translate3d(0, 48px, 0);
     transition-delay: 0;
     pointer-events: none;
@@ -344,11 +343,11 @@
     content: '';
     background-color: $ui-01;
     border: none;
+    transition: opacity $duration--fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
     opacity: 0;
-    transition: opacity $transition--base $carbon--standard-easing;
   }
 
   // cancel btn

From d31d2d4f13ed706eb3cc59b9ec6d25ea73f03ed8 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 22 Apr 2019 14:02:11 -0700
Subject: [PATCH 15/18] fix(motion): update input hover changes to fast-01

---
 src/components/dropdown/_dropdown.scss         | 8 ++++----
 src/components/number-input/_number-input.scss | 4 ++--
 src/components/select/_select.scss             | 3 ++-
 src/components/text-area/_text-area.scss       | 4 ++--
 src/components/text-input/_text-input.scss     | 4 ++--
 src/components/time-picker/_time-picker.scss   | 3 ++-
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
index b70f9f221fbf..c42030ffd8b5 100644
--- a/src/components/dropdown/_dropdown.scss
+++ b/src/components/dropdown/_dropdown.scss
@@ -55,7 +55,7 @@
     cursor: pointer;
     color: $text-01;
     outline: 2px solid transparent;
-    transition: background-color $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-01 motion(standard, productive);
 
     &:focus {
       @include focus-outline('outline');
@@ -152,8 +152,8 @@
   }
 
   .#{$prefix}--dropdown-item {
-    transition: opacity $duration--fast-02 motion(standard, productive),
-      background-color $duration--fast-02 motion(standard, productive);
+    transition: opacity $duration--fast-01 motion(standard, productive),
+      background-color $duration--fast-01 motion(standard, productive);
     opacity: 0;
 
     &:hover {
@@ -264,10 +264,10 @@
     justify-self: start;
     display: inline-block;
     border-bottom-color: transparent;
-    transition-property: none;
     width: auto;
     height: rem(32px);
     background-color: $field-02;
+    transition: background $duration--fast-01 motion(entrance, productive);
 
     &:hover {
       background-color: $hover-ui;
diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index 4e0b99640411..cef42f20f2e9 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -40,8 +40,8 @@
     border: none;
     border-radius: 0;
     border-bottom: 1px solid $ui-04;
-    transition: background-color $duration--fast-02 motion(standard, productive),
-      outline $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
 
     &:focus {
       @include focus-outline('outline');
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
index b943c6b3216a..6bc9c792791a 100644
--- a/src/components/select/_select.scss
+++ b/src/components/select/_select.scss
@@ -53,7 +53,8 @@
     border-bottom: 1px solid $ui-04;
     border-radius: 0;
     cursor: pointer;
-    transition: outline $duration--fast-01, background-color $duration--fast-01;
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
 
     &:hover {
       background-color: $hover-ui;
diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
index 8d97e3fdb1a1..74945f5eef57 100644
--- a/src/components/text-area/_text-area.scss
+++ b/src/components/text-area/_text-area.scss
@@ -35,8 +35,8 @@
     resize: vertical;
     border: none;
     border-bottom: 1px solid $ui-04;
-    transition: background-color $duration--fast-02 motion(standard, productive),
-      outline $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
 
     & ~ .#{$prefix}--form__helper-text {
       margin-top: 0;
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index 208e4aff0517..3689c730d555 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -30,8 +30,8 @@
     color: $text-01;
     border: none;
     border-bottom: 1px solid $ui-04;
-    transition: background-color $duration--fast-02 motion(standard, productive),
-      outline $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
 
     &:hover {
       background-color: $hover-field;
diff --git a/src/components/time-picker/_time-picker.scss b/src/components/time-picker/_time-picker.scss
index 2589f2933444..c00da5faddde 100644
--- a/src/components/time-picker/_time-picker.scss
+++ b/src/components/time-picker/_time-picker.scss
@@ -56,7 +56,8 @@
     align-items: center;
     width: 4.875rem;
     height: rem(40px);
-    transition: outline $duration--fast-01;
+    transition: outline $duration--fast-01 motion(standard, productive),
+      background-color $duration--fast-01 motion(standard, productive);
   }
 }
 

From 32d09126ffb9e543f8ef5e9b15d8d79fe4c3f719 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 24 Apr 2019 12:27:12 -0700
Subject: [PATCH 16/18] fix(motion): fix bugs in data table animation

---
 src/components/data-table/_data-table-action.scss     | 3 ++-
 src/components/data-table/_data-table-expandable.scss | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/data-table/_data-table-action.scss b/src/components/data-table/_data-table-action.scss
index eb2f805f53e3..71f5dc089007 100644
--- a/src/components/data-table/_data-table-action.scss
+++ b/src/components/data-table/_data-table-action.scss
@@ -58,6 +58,7 @@
     padding: $spacing-md;
     left: 0;
     cursor: pointer;
+    pointer-events: all;
     transition: background $duration--fast-01 motion(entrance, productive);
   }
 
@@ -257,7 +258,7 @@
     width: 100%;
     height: 100%;
     will-change: transform;
-    background-color: $brand-01;
+    background-color: $interactive-01;
     transition: transform $duration--fast-01 motion(standard, productive),
       visibility $duration--fast-01 motion(standard, productive), opacity $duration--fast-01 motion(standard, productive);
     transform: translate3d(0, 48px, 0);
diff --git a/src/components/data-table/_data-table-expandable.scss b/src/components/data-table/_data-table-expandable.scss
index 4d088939ca31..3b1309a2b797 100644
--- a/src/components/data-table/_data-table-expandable.scss
+++ b/src/components/data-table/_data-table-expandable.scss
@@ -13,6 +13,10 @@
 /// @access private
 /// @group data-table
 @mixin data-table-expandable {
+  .#{$prefix}--data-table thead tr .#{$prefix}--table-expand {
+    position: relative;
+  }
+
   //----------------------------------------------------------------------------
   // Parent row
   //----------------------------------------------------------------------------

From cfd5bbd51ed9a42357a11b6ebc107830b0286cf1 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 25 Apr 2019 10:09:23 -0700
Subject: [PATCH 17/18] fix(motion): small tweaks based on feedback

---
 .../data-table/_data-table-action.scss        | 22 ++++++++-----------
 src/components/form/_form.scss                |  1 +
 src/components/tabs/_tabs.scss                | 20 ++++++++---------
 src/components/toggle/_toggle.scss            |  6 ++---
 4 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/data-table/_data-table-action.scss b/src/components/data-table/_data-table-action.scss
index 71f5dc089007..fad54a423927 100644
--- a/src/components/data-table/_data-table-action.scss
+++ b/src/components/data-table/_data-table-action.scss
@@ -31,9 +31,8 @@
     justify-content: flex-end;
     transform: translate3d(0, 0, 0);
     visibility: visible;
-    transition: transform $duration--fast-01 motion(standard, productive),
-      visibility $duration--fast-01 motion(standard, productive);
-    transition-delay: $duration--fast-01;
+    transition: transform $duration--fast-02 motion(standard, productive),
+      visibility $duration--fast-02 motion(standard, productive);
   }
 
   //-------------------------------------------------
@@ -59,7 +58,7 @@
     left: 0;
     cursor: pointer;
     pointer-events: all;
-    transition: background $duration--fast-01 motion(entrance, productive);
+    transition: background $duration--fast-02 motion(entrance, productive);
   }
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-magnifier:focus {
@@ -144,7 +143,7 @@
     height: $layout-04;
     width: $layout-04;
     padding: $spacing-md;
-    transition: background $duration--fast-01 motion(entrance, productive);
+    transition: background $duration--fast-02 motion(entrance, productive);
   }
 
   .#{$prefix}--toolbar-action:hover:not([disabled]) {
@@ -239,9 +238,8 @@
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
     visibility: hidden;
     transform: translate3d(0, 48px, 0);
-    transition: transform $duration--fast-01 motion(standard, productive),
-      visibility $duration--fast-01 motion(standard, productive);
-    transition-delay: 0;
+    transition: transform $duration--fast-02 motion(standard, productive),
+      visibility $duration--fast-02 motion(standard, productive);
   }
 
   //-------------------------------------------------
@@ -259,10 +257,9 @@
     height: 100%;
     will-change: transform;
     background-color: $interactive-01;
-    transition: transform $duration--fast-01 motion(standard, productive),
-      visibility $duration--fast-01 motion(standard, productive), opacity $duration--fast-01 motion(standard, productive);
+    transition: transform $duration--fast-02 motion(standard, productive),
+      visibility $duration--fast-02 motion(standard, productive), opacity $duration--fast-02 motion(standard, productive);
     transform: translate3d(0, 48px, 0);
-    transition-delay: 0;
     pointer-events: none;
     visibility: hidden;
   }
@@ -275,7 +272,6 @@
     visibility: visible;
     pointer-events: all;
     transform: translate3d(0, 0, 0);
-    transition-delay: $duration--fast-01;
   }
 
   //btns container
@@ -344,7 +340,7 @@
     content: '';
     background-color: $ui-01;
     border: none;
-    transition: opacity $duration--fast-01 motion(standard, productive);
+    transition: opacity $duration--fast-02 motion(standard, productive);
   }
 
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
index 6180ae866b9d..9281ae61efc7 100644
--- a/src/components/form/_form.scss
+++ b/src/components/form/_form.scss
@@ -38,6 +38,7 @@
     vertical-align: baseline;
     margin-bottom: $carbon--spacing-03;
     line-height: rem(16px);
+    pointer-events: none;
   }
 
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index e7ce99e33003..fa7b3a55a5f9 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -56,13 +56,13 @@
     width: rem(12px);
     height: rem(7px);
     fill: $ui-05;
-    transition: transform $duration--moderate-01 motion(standard, productive);
+    transition: transform $duration--fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--tabs-trigger--open:focus,
   .#{$prefix}--tabs-trigger--open:active {
     @include focus-outline('reset');
-    transition: outline $duration--moderate-01 motion(standard, productive);
+    transition: outline $duration--fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--tabs-trigger--open {
@@ -70,7 +70,7 @@
   }
 
   .#{$prefix}--tabs-trigger--open svg {
-    @include rotate(-180deg, $duration--moderate-01, 50% 45%);
+    @include rotate(-180deg, $duration--fast-01, 50% 45%);
   }
 
   // There is only a difference in tab color when in mobile/dropdown view
@@ -103,7 +103,7 @@
     flex-direction: column;
     z-index: z('dropdown');
     background: $ui-01;
-    transition: max-height $duration--moderate-01 motion(standard, productive);
+    transition: max-height $duration--fast-01 motion(standard, productive);
     max-height: 600px;
     width: 100%;
 
@@ -119,7 +119,7 @@
   }
 
   .#{$prefix}--tabs__nav--hidden {
-    transition: max-height $duration--moderate-01 motion(standard, productive);
+    transition: max-height $duration--fast-01 motion(standard, productive);
     overflow: hidden;
     max-height: 0;
 
@@ -141,7 +141,7 @@
     cursor: pointer;
     width: 100%;
     height: rem(40px);
-    transition: background-color $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-01 motion(standard, productive);
 
     @include carbon--breakpoint(md) {
       background: transparent;
@@ -153,8 +153,8 @@
   }
 
   .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
-    transition: color $duration--fast-02 motion(standard, productive),
-      border-bottom-color $duration--fast-02 motion(standard, productive), outline $duration--fast-02 motion(standard, productive);
+    transition: color $duration--fast-01 motion(standard, productive),
+      border-bottom-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive);
   }
 
   //-----------------------------
@@ -190,7 +190,7 @@
   .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
     border: none;
     display: none;
-    transition: color $duration--fast-02 motion(standard, productive);
+    transition: color $duration--fast-01 motion(standard, productive);
 
     @include carbon--breakpoint(md) {
       display: flex;
@@ -226,7 +226,7 @@
     line-height: rem(16px);
     border-bottom: 1px solid $ui-03;
     overflow: hidden;
-    transition: border $duration--fast-02 motion(standard, productive), outline $duration--fast-02 motion(standard, productive);
+    transition: border $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive);
 
     &:focus,
     &:active {
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
index e0c458468300..f8be7ab3efb0 100644
--- a/src/components/toggle/_toggle.scss
+++ b/src/components/toggle/_toggle.scss
@@ -56,8 +56,8 @@
       top: 0;
       will-change: box-shadow;
       box-shadow: 0 0 0 2px transparent;
-      transition: box-shadow $duration--fast-02 motion(standard, productive),
-        background-color $duration--fast-02 motion(standard, productive);
+      transition: box-shadow $duration--fast-02 motion(exit, productive),
+        background-color $duration--fast-02 motion(exit, productive);
     }
 
     // Toggle circle
@@ -73,7 +73,7 @@
       background-color: $ui-03;
       border-radius: 50%;
       content: '';
-      transition: transform $duration--fast-02 motion(standard, productive);
+      transition: transform $duration--fast-02 motion(exit, productive);
     }
   }
 

From 84ebee2a5db0e2a472a05619d56e98a0c22a1db9 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 25 Apr 2019 13:00:02 -0700
Subject: [PATCH 18/18] fix(motion): update toggle values

---
 src/components/toggle/_toggle.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
index f8be7ab3efb0..e2470b2ac353 100644
--- a/src/components/toggle/_toggle.scss
+++ b/src/components/toggle/_toggle.scss
@@ -56,8 +56,8 @@
       top: 0;
       will-change: box-shadow;
       box-shadow: 0 0 0 2px transparent;
-      transition: box-shadow $duration--fast-02 motion(exit, productive),
-        background-color $duration--fast-02 motion(exit, productive);
+      transition: box-shadow $duration--fast-01 motion(exit, productive),
+        background-color $duration--fast-01 motion(exit, productive);
     }
 
     // Toggle circle
@@ -73,7 +73,7 @@
       background-color: $ui-03;
       border-radius: 50%;
       content: '';
-      transition: transform $duration--fast-02 motion(exit, productive);
+      transition: transform $duration--fast-01 motion(exit, productive);
     }
   }
 
@@ -103,7 +103,7 @@
     left: 6px;
     top: 6px;
     z-index: 1;
-    transition: $duration--fast-02 motion(exit, productive);
+    transition: $duration--fast-01 motion(exit, productive);
     transform: scale(0.2);
   }
 
@@ -191,7 +191,7 @@
     &:before,
     &:after {
       cursor: not-allowed;
-      transition: $duration--fast-02 motion(exit, productive);
+      transition: $duration--fast-01 motion(exit, productive);
     }
   }