Button motion updates

[wonilsuh]

Overview

Updates to the button motion with the System 360 Motion specs, which defines shorter duration and a set of new curves.

• resubmitting after rebase fixes

Added

• A new$bx-- ease-in-out variable was added in src/globals/scss/_vars.scss

• @ibm/motion was added as a dev dependency.

• proxies for the @ibm/motion methods were added:

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

Changed

The following variables were updated:

$bx--ease-in
$bx--ease-out
$bx--standard-easing
$transition--base
$transition-expansion

Testing / Reviewing

Run $ npm run test and look under button unit test.

Staging URL:

http://carbon-dev-environment-bracteate-akvavit.w3ibm.mybluemix.net/demo/primary-button

[aagonzales]

👀 👍 ✅
I don't know a whole lot about motion so I'll defer to Tayler's final say but I think this one feels pretty good and natural. It behaved as I would have expected to behave. I like the transition across the sets.

[tay-aitken]

👍 ✅
This motion is snappy and at the appropriate speed for the component. A good improvement on the more delayed motion we had on the hover color change before. Good work on this one @wonilsuh!

[marijohannessen]

Hey @wonilsuh ! We're unfortunately going to close these PR's as they are a bit out of date right now, and we want to make sure we add Duo motion in when we're ready to add it to all of our components. Thank you for taking the time to explore motion with our components, and we look forward to continuing this work later this year! 🙂