Button motion updates

package.json

@@ -34,6 +34,7 @@
     "npm": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
+    "@ibm/motion": "^0.2.1",
     "carbon-icons": "^6.0.4",
     "flatpickr": "2.6.3",
     "lodash.debounce": "^4.0.8"

src/components/button/_button.scss

@@ -54,15 +54,18 @@
     &:hover,
     &:focus {
       color: $inverse-01;
+
+      .bx--btn__icon {
+        fill: $inverse-01;
+      }
     }
 
     &:active {
       color: $brand-01;
-    }
 
-    &:hover > .bx--btn__icon,
-    &:focus > .bx--btn__icon {
-      fill: $inverse-01;
+      .bx--btn__icon {   // shix gives active state icon color
+        fill: $brand-01;
+      }
     }
 
     &:hover:disabled,
@@ -93,6 +96,17 @@
       margin-left: 0.275rem;
     }
 
+    // shix added active state: start
+
+    &:active {
+      color: $brand-01;
+    }
+    &:active > .bx--btn__icon {
+      fill: $brand-01;
+    }
+
+    // shix added active state: end
+
     &:hover:disabled,
     &:focus:disabled {
       color: $brand-01;
@@ -115,22 +129,38 @@
     &:hover {
       color: $inverse-01;
       border: $button-border-width solid transparent;
+
+      .bx--btn__icon {
+        fill: $inverse-01;
+      }
+
     }
 
     &:focus {
       color: $inverse-01;
+      .bx--btn__icon {
+        fill: $inverse-01;
+      }
+    }
+
+
+    // shix added active state: start
+
+    &:active {
+      color: $support-01;
+    }
+    &:active > .bx--btn__icon {
+      fill: $support-01;
     }
 
+    // shix added active state: end
+
+
     &:hover:disabled,
     &:focus:disabled {
       color: $ui-05;
       border: $button-border-width solid currentColor;
     }
-
-    &:hover > .bx--btn__icon,
-    &:focus > .bx--btn__icon {
-      fill: $inverse-01;
-    }
   }
 
   .bx--btn--sm {

src/components/button/_mixins.scss

@@ -15,8 +15,9 @@
   border-radius: $button-border-radius;
   text-align: center;
   text-decoration: none;
-  transition-duration: $transition--base;
-  transition-timing-function: ease-in;
+  //transition-duration: $transition--base;
+  transition-timing-function: $bx--ease-out;
+  transition-duration: $transition--fade;
   white-space: nowrap;
   line-height: 16px;
 
@@ -29,8 +30,9 @@
     width: rem(16px);
     height: rem(16px);
     margin-left: 0.5rem;
-    transition-duration: $transition--base;
-    transition-timing-function: ease-in;
+    //transition-duration: $transition--base;
+    transition-timing-function: $bx--ease-out;  //shix changes
+    transition-duration: .1s;  //shix changes
   }
 }
 

src/globals/js/misc/motion-generator.js

@@ -0,0 +1 @@
+export { default } from '@ibm/motion';

src/globals/js/misc/motion-getCurve.js

@@ -0,0 +1 @@
+export { default } from '@ibm/motion/dist/getCurve.js';

src/globals/js/misc/motion-getDuration.js

@@ -0,0 +1 @@
+export { default } from '@ibm/motion/dist/getDuration.js';

src/globals/scss/_vars.scss

@@ -1,15 +1,13 @@
 @import 'colors';
 
-$bx--ease-in: cubic-bezier(0.25, 0, 1, 1); // Used primarily for removing elements from the screen.
-$bx--ease-out: cubic-bezier(
-  0,
-  0,
-  0.25,
-  1
-); // Used for adding elements to the screen or changing on-screen states at a users's input.
-$bx--standard-easing: cubic-bezier(0.5, 0, 0.1, 1); // Used for the majority of animations.
-$transition--base: 250ms;
-$transition--expansion: 300ms;
+$bx--ease-in: cubic-bezier(0.2, 0, 1, 0.9); // Used primarily for removing elements from the screen.
+$bx--ease-out: cubic-bezier(0, 0, 0.38, 0.9); // Used for adding elements to the screen or changing on-screen states at a users's input.
+$bx--ease-in-out: cubic-bezier(0.2, 0.2, 0.38, 0.9); // Used for the majority of animations.
+$bx--standard-easing: $bx--ease-in-out; //proposing deprecating the term standard-easing
+$transition--base: 200ms;
+$transition--expansion: 150ms;
+$transition--fade: 100ms;
+$transition--delay-unit:200ms;
 
 // Color Theme Variables
 $brand-01: $color__blue-51 !default;

tests/axe/allHtml/a11y-html.json

@@ -2,7 +2,7 @@
   {
     "inapplicable": [],
     "incomplete": [],
-    "timestamp": 1505852198360,
+    "timestamp": 1508250108106,
     "url": "http://localhost:3000",
     "violations": [
       {
@@ -84,7 +84,7 @@
         ]
       }
     ],
-    "time": 342,
+    "time": 734,
     "status": 404
   }
-]
+]