fix(motion) update motion in components

demo/scss/_layout.scss

@@ -76,7 +76,3 @@ a {
 svg {
   transition: fill 250ms;
 }
-
-.bx--tabs__nav-item {
-  transition: background-color 250ms;
-}

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-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: $duration--fast-01 motion(entrance, productive);
+    transition: all $duration--fast-01 motion(entrance, 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 {

src/components/data-table/_data-table-action.scss

@@ -29,6 +29,10 @@
     height: $layout-04;
     width: 100%;
     justify-content: flex-end;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+    transition: transform $duration--fast-02 motion(standard, productive),
+      visibility $duration--fast-02 motion(standard, productive);
   }
 
   //-------------------------------------------------
@@ -52,6 +56,9 @@
     width: $layout-04;
     padding: $spacing-md;
     left: 0;
+    cursor: pointer;
+    pointer-events: all;
+    transition: background $duration--fast-02 motion(entrance, productive);
   }
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-magnifier:focus {
@@ -80,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 {
@@ -136,6 +143,7 @@
     height: $layout-04;
     width: $layout-04;
     padding: $spacing-md;
+    transition: background $duration--fast-02 motion(entrance, productive);
   }
 
   .#{$prefix}--toolbar-action:hover:not([disabled]) {
@@ -177,7 +185,6 @@
     width: auto;
     max-width: $layout-01;
     fill: $ui-05;
-    transition: $transition--base;
   }
 
   //-------------------------------------------------
@@ -188,7 +195,6 @@
     height: $layout-04;
     opacity: 1;
     position: relative;
-    transition: opacity $transition--base;
   }
 
   .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--toolbar-content {
@@ -230,7 +236,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-02 motion(standard, productive),
+      visibility $duration--fast-02 motion(standard, productive);
   }
 
   //-------------------------------------------------
@@ -242,14 +251,15 @@
     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: $interactive-01;
+    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);
     pointer-events: none;
     visibility: hidden;
   }
@@ -260,10 +270,8 @@
 
   .#{$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);
   }
 
   //btns container
@@ -332,11 +340,11 @@
     content: '';
     background-color: $ui-01;
     border: none;
+    transition: opacity $duration--fast-02 motion(standard, productive);
   }
 
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
     opacity: 0;
-    transition: opacity $transition--base $carbon--standard-easing;
   }
 
   // cancel btn

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-01 motion(entrance, productive);
+  }
+
   .#{$prefix}--data-table tbody tr:hover {
     background: $hover-field;
   }
@@ -96,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;
@@ -195,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 {

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
   //----------------------------------------------------------------------------
@@ -34,16 +38,16 @@
   //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 {
     padding-top: 0;
     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 +57,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 +87,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 +163,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 +185,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 {

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;

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-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 {
@@ -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;
@@ -263,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;

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 {