From 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Tue, 10 Aug 2021 19:04:54 +0200
Subject: feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
---
 packages/forms/src/button/index.tsx | 13 ++++++++++---
 packages/forms/src/select/index.tsx | 12 ++++++++++--
 packages/forms/src/toggle/index.tsx |  8 +++++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

(limited to 'packages/forms/src')

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index c08c4e97d..0aef04a6c 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -35,13 +35,21 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
+let buttonTransition: string = 'none';
+let loaderContainerTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'background .5s, opacity 0.3s';
+  loaderContainerTransition = 'all 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
     position: 'relative' as Property.Position,
-    transition: 'background .5s, opacity 0.3s',
+    transition: buttonTransition,
     textAlign: 'center' as Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
@@ -50,7 +58,6 @@ const styles = (theme: Theme) => ({
       (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
-    // height: theme.buttonHeight,
 
     '&:hover': {
       opacity: 0.8,
@@ -129,7 +136,7 @@ const styles = (theme: Theme) => ({
     width: (props: IProps): string => (!props.busy ? '0' : '40px'),
     height: 20,
     overflow: 'hidden',
-    transition: 'all 0.3s',
+    transition: loaderContainerTransition,
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
     position: (props: IProps): Property.Position =>
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 4a5775579..ef3e70ddb 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -46,6 +46,14 @@ interface IState {
   options: IOptions;
 }
 
+let popupTransition: string = 'none';
+let toggleTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  popupTransition = 'all 0.3s';
+  toggleTransition = 'transform 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   select: {
     background: theme.selectBackground,
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({
     overflowX: 'scroll',
     border: theme.selectBorder,
     borderTop: 0,
-    transition: 'all 0.3s',
+    transition: popupTransition,
   },
   open: {
     opacity: 1,
@@ -98,7 +106,7 @@ const styles = (theme: Theme) => ({
   toggle: {
     marginLeft: 'auto',
     fill: theme.selectToggleColor,
-    transition: 'transform 0.3s',
+    transition: toggleTransition,
   },
   toggleOpened: {
     transform: 'rotateZ(90deg)',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index a9970c8f1..e525d2906 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -17,6 +17,12 @@ interface IProps
   className?: string;
 }
 
+let buttonTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
+
 const styles = (theme: Theme) => ({
   toggle: {
     background: theme.toggleBackground,
@@ -34,7 +40,7 @@ const styles = (theme: Theme) => ({
     left: 1,
     top: 1,
     position: 'absolute' as Property.Position,
-    transition: 'all .5s',
+    transition: buttonTransition,
   },
   buttonActive: {
     background: theme.toggleButtonActive,
-- 
cgit v1.2.3-70-g09d2