feat(button): adding animation to button mousedown

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add bounce animation to button clicks in Teams theme @notandrew ([#1724](https://github.com/stardust-ui/react/pull/1724))
+
 <!--------------------------------[ v0.40.2 ]------------------------------- -->
 ## [v0.40.2](https://github.com/stardust-ui/react/tree/v0.40.2) (2019-10-30)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.40.1...v0.40.2)

packages/react/src/themes/teams/animations/scale.ts

@@ -93,6 +93,20 @@ const scaleAnimations = {
     timingFunction: easeIn,
     fillMode: 'forwards',
   },
+  scaleDownSoft: {
+    keyframe: {
+      '0%': {
+        transform: 'scale(1)',
+      },
+      '100%': {
+        transform: 'scale(.96)',
+      },
+    },
+    duration: '100ms',
+    timingFunction: 'cubic-bezier(.78, 0, .22, 1)',
+    fillMode: 'both',
+  },
+
   // Bounce in w/ fade --Useful for explicity grabbing the users attention.
   bounceEnterFast: {
     keyframe: {

packages/react/src/themes/teams/components/Button/buttonStyles.ts

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import { pxToRem } from '../../../../lib'
+import { pxToRem, createAnimationStyles } from '../../../../lib'
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types'
 import Loader from '../../../../components/Loader/Loader'
 import { ButtonProps } from '../../../../components/Button/Button'
@@ -8,7 +8,8 @@ import getBorderFocusStyles from '../../getBorderFocusStyles'
 import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
 
 const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> = {
-  root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => {
+  root: ({ props: p, variables: v, theme }): ICSSInJSStyle => {
+    const { siteVariables } = theme
     const { borderWidth } = siteVariables
 
     const borderFocusStyles = getBorderFocusStyles({
@@ -55,6 +56,7 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
         },
 
         ':active': {
+          ...createAnimationStyles('scaleDownSoft', theme),
           color: v.colorActive,
           backgroundColor: v.backgroundColorActive,
           borderColor: v.borderColorActive,
@@ -131,6 +133,7 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
           boxShadow: v.primaryBoxShadow,
 
           ':active': {
+            ...createAnimationStyles('scaleDownSoft', theme),
             backgroundColor: v.primaryBackgroundColorActive,
             boxShadow: 'none',
           },
@@ -154,6 +157,7 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonProps, ButtonVariables> =
         cursor: 'default',
         color: v.colorDisabled,
         boxShadow: 'none',
+        pointerEvents: 'none',
         ':hover': {
           color: v.colorDisabled,
         },