chore(community-toggle-switch): fix styles

- Support reduced motion and adaptive sizes using rem units. Change docs examples to have scoped components to not interfere with each other on styleguidist. - Update snapshot
telus · Nov 22, 2019 · 5cee7b5 · 5cee7b5
1 parent aede814
commit 5cee7b5
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 35 deletions.
diff --git a/packages/ToggleSwitch/ToggleSwitch.jsx b/packages/ToggleSwitch/ToggleSwitch.jsx
@@ -37,9 +37,14 @@ const ToggleSwitch = React.forwardRef(
 
     const _onClick = event => {
       _setIsChecked(!_isChecked)
-      setTimeout(() => {
+
+      if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
         onClick(event)
-      }, 250)
+      } else {
+        setTimeout(() => {
+          onClick(event)
+        }, 250)
+      }
     }
 
     /* The purpose of this hook is to allow the parent

diff --git a/packages/ToggleSwitch/ToggleSwitch.md b/packages/ToggleSwitch/ToggleSwitch.md
@@ -22,7 +22,7 @@ Toggle switches are digital on/off switches. They prompt users to choose between
 **Basic usage**
 
 ```jsx
-const App = () => {
+const BasicApp = () => {
   const [isChecked, setIsChecked] = React.useState(false)
   const toggleRef = React.useRef()
 
@@ -50,13 +50,13 @@ const App = () => {
   )
 }
 
-;<App />
+;<BasicApp />
 ```
 
 **Asynchoronous usage**
 
 ```jsx
-const App = () => {
+const AsyncApp = () => {
   const [isChecked, setIsChecked] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(false)
   const toggleRef = React.useRef()
@@ -93,7 +93,7 @@ const App = () => {
   )
 }
 
-;<App />
+;<AsyncApp />
 ```
 
 **Complete example with async first-time load, async toggle, and error handling**
@@ -110,7 +110,7 @@ A typical example with the following steps:
 Note: you can focus on most HTML elements by providing a `tabIndex="-1"` attribute, setting a `ref` value, and then calling `yourRef.current.focus()`. You can learn more about refs and forwarding refs on the [React documentation](https://reactjs.org/docs/refs-and-the-dom.html).
 
 ```jsx
-const App = () => {
+const CompleteApp = () => {
   const [isRouted, setIsRouted] = React.useState(false)
   const [appIsLoaded, setAppIsLoaded] = React.useState(false)
   const [showFeedbackText, setShowFeedbackText] = React.useState(false)
@@ -208,5 +208,5 @@ const App = () => {
   )
 }
 
-;<App />
+;<CompleteApp />
 ```
diff --git a/packages/ToggleSwitch/__tests__/__snapshots__/ToggleSwitch.spec.jsx.snap b/packages/ToggleSwitch/__tests__/__snapshots__/ToggleSwitch.spec.jsx.snap
@@ -21,16 +21,16 @@ exports[`ToggleSwitch renders 1`] = `
   position: relative;
   border: none;
   padding: 0;
-  width: 40px;
-  height: 24px;
-  border-radius: 24px;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: 1.5rem;
   background-color: #d8d8d8;
 }
 
 .c2:focus {
   outline-style: solid;
   outline-color: rgb(59,153,252);
-  outline-width: 5px;
+  outline-width: 0.3125rem;
 }
 
 .c2:focus::-moz-focus-inner {
@@ -39,11 +39,11 @@ exports[`ToggleSwitch renders 1`] = `
 
 .c3 {
   position: absolute;
-  width: 18px;
-  height: 18px;
-  top: 3px;
-  left: 3px;
-  border-radius: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  border-radius: 1.125rem;
   background-color: white;
   -webkit-transition: left 0.25s;
   transition: left 0.25s;
@@ -61,6 +61,13 @@ exports[`ToggleSwitch renders 1`] = `
   justify-content: center;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c3 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
 <ToggleSwitch
   checked={false}
   id="my-id-123"
@@ -217,16 +224,16 @@ exports[`ToggleSwitch renders 1`] = `
   position: relative;
   border: none;
   padding: 0;
-  width: 40px;
-  height: 24px;
-  border-radius: 24px;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: 1.5rem;
   background-color: #d8d8d8;
 }
 
 .c0:focus {
   outline-style: solid;
   outline-color: rgb(59,153,252);
-  outline-width: 5px;
+  outline-width: 0.3125rem;
 }
 
 .c0:focus::-moz-focus-inner {
@@ -235,17 +242,24 @@ exports[`ToggleSwitch renders 1`] = `
 
 .c1 {
   position: absolute;
-  width: 18px;
-  height: 18px;
-  top: 3px;
-  left: 3px;
-  border-radius: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  border-radius: 1.125rem;
   background-color: white;
   -webkit-transition: left 0.25s;
   transition: left 0.25s;
   box-shadow: 0 0 2px 0 #000;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c1 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
 <button
                           aria-checked="false"
                           aria-labelledby="my-id-123-label"

diff --git a/packages/ToggleSwitch/styles.jsx b/packages/ToggleSwitch/styles.jsx
@@ -19,14 +19,15 @@ export const Button = styled.button(props => ({
   position: 'relative',
   border: 'none',
   padding: '0',
-  width: '40px',
-  height: '24px',
-  borderRadius: '24px',
+  width: '2.5rem',
+  height: '1.5rem',
+  borderRadius: '1.5rem',
   backgroundColor: props['aria-checked'] ? colorAccessibleGreen : colorGainsboro,
   '&:focus': {
+    // this is explicitly defined as 'solid' for IE11 compatibility
     outlineStyle: props.isLoading ? 'none' : 'solid',
     outlineColor: 'rgb(59, 153, 252)',
-    outlineWidth: '5px',
+    outlineWidth: '0.3125rem',
   },
   '&:focus::-moz-focus-inner': {
     border: 0,
@@ -35,14 +36,18 @@ export const Button = styled.button(props => ({
 
 export const Slider = styled.span(props => ({
   position: 'absolute',
-  width: '18px',
-  height: '18px',
-  top: '3px',
-  left: props.pressed ? '20px' : '3px',
-  borderRadius: '18px',
+  width: '1.125rem',
+  height: '1.125rem',
+  top: '0.1875rem',
+  left: props.pressed ? '1.25rem' : '0.1875rem',
+  borderRadius: '1.125rem',
   backgroundColor: 'white',
   transition: 'left 0.25s',
   boxShadow: '0 0 2px 0 #000',
+
+  '@media (prefers-reduced-motion: reduce)': {
+    transition: 'none !important',
+  },
 }))
 
 export const InputSwitchWrapper = styled.div({