feat: Adding subtle transition between states on Button components (m…

…icrosoft#25106) * feat: Adding subtle transition between states on Button components. * Adding change file. Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>
NotWoods · Nov 18, 2022 · ff38dc7 · ff38dc7
1 parent 6b570d2
commit ff38dc7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/change/@fluentui-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json b/change/@fluentui-react-button-eeea86af-7338-4688-ace7-75aa8d2fb347.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Adding subtle transition between states on Button components.",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -66,6 +66,17 @@ const useRootStyles = makeStyles({
     },
   },
 
+  // Transition styles
+  transition: {
+    transitionDuration: '100ms',
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
+
+    '@media screen and (prefers-reduced-motion: reduce)': {
+      transitionDuration: '0.01ms',
+    },
+  },
+
   // High contrast styles
   highContrast: {
     '@media (forced-colors: active)': {
@@ -450,6 +461,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
 
     // Root styles
     rootStyles.base,
+    rootStyles.transition,
     rootStyles.highContrast,
     appearance && rootStyles[appearance],
     rootStyles[size],