Repository: uber-web/baseui
Pull request #916 (2019-02-20 19:17:10)

fix(checkbox): fix toggle in ie 11
#### Description

toggle ui was not rendered in IE. looks to be that it's not rendering SVGs we have. i've replaced the svg with plain html + css.

may want to call it a minor since there is new `overrides` api for the toggle components.

#### Scope

- [x] Patch: Bug Fix
- [x] Minor: New Feature
- [ ] Major: Breaking Change



Patch:
diff --git a/documentation-site/pages/components/checkbox.mdx b/documentation-site/pages/components/checkbox.mdx
index 235d1b510..b41b322a5 100644
--- a/documentation-site/pages/components/checkbox.mdx
+++ b/documentation-site/pages/components/checkbox.mdx
@@ -21,7 +21,8 @@ import Focus from 'examples/checkbox/focus.js';
 import Toggle from 'examples/checkbox/toggle.js';
 
 import Overrides from '../../components/overrides';
-import {StatefulCheckbox} from 'baseui/checkbox';
+import {Block} from 'baseui/block';
+import {StatefulCheckbox, STYLE_TYPE} from 'baseui/checkbox';
 import * as CheckboxExports from 'baseui/checkbox';
 
 export default Layout;
@@ -46,7 +47,10 @@ options. When engaged (on), Base UI toggles are colored and when disengaged (off
   <Basic />
 </Example>
 
-<Example title="Checkbox multiline example" path="examples/checkbox/multiline.js">
+<Example
+  title="Checkbox multiline example"
+  path="examples/checkbox/multiline.js"
+>
   <Multiline />
 </Example>
 
@@ -54,7 +58,10 @@ options. When engaged (on), Base UI toggles are colored and when disengaged (off
   <Error />
 </Example>
 
-<Example title="Checkbox indeterminate state" path="examples/checkbox/indeterminate.js">
+<Example
+  title="Checkbox indeterminate state"
+  path="examples/checkbox/indeterminate.js"
+>
   <Indeterminate />
 </Example>
 
@@ -62,7 +69,10 @@ options. When engaged (on), Base UI toggles are colored and when disengaged (off
   <Disabled />
 </Example>
 
-<Example title="Checkbox alignment example" path="examples/checkbox/alignment.js">
+<Example
+  title="Checkbox alignment example"
+  path="examples/checkbox/alignment.js"
+>
   <Alignment />
 </Example>
 
@@ -91,9 +101,18 @@ options. When engaged (on), Base UI toggles are colored and when disengaged (off
   name="Checkbox"
   component={CheckboxExports}
   renderExample={props => (
-    <StatefulCheckbox onChange={console.log} overrides={props.overrides}>
-      Label
-    </StatefulCheckbox>
+    <Block width="200px" marginTop="scale400">
+      <StatefulCheckbox onChange={console.log} overrides={props.overrides}>
+        Check Label
+      </StatefulCheckbox>
+      <br />
+      <StatefulCheckbox
+        checkmarkType={STYLE_TYPE.toggle}
+        overrides={props.overrides}
+      >
+        Toggle Label
+      </StatefulCheckbox>
+    </Block>
   )}
 />
 
diff --git a/documentation-site/static/examples/checkbox/toggle.js b/documentation-site/static/examples/checkbox/toggle.js
index 6c260f7d6..a98e4ece2 100644
--- a/documentation-site/static/examples/checkbox/toggle.js
+++ b/documentation-site/static/examples/checkbox/toggle.js
@@ -6,6 +6,7 @@ export default () => (
     <StatefulCheckbox onChange={console.log} checkmarkType={STYLE_TYPE.toggle}>
       toggle me
     </StatefulCheckbox>
+    <br />
     <StatefulCheckbox
       disabled
       onChange={console.log}
diff --git a/src/checkbox/checkbox.js b/src/checkbox/checkbox.js
index e91943403..8e9163632 100644
--- a/src/checkbox/checkbox.js
+++ b/src/checkbox/checkbox.js
@@ -13,6 +13,9 @@ import {
   Input as StyledInput,
   Label as StyledLabel,
   Root as StyledRoot,
+  Toggle as StyledToggle,
+  ToggleInner as StyledToggleInner,
+  ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
 import {STYLE_TYPE} from './constants.js';
 
@@ -102,12 +105,18 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       Checkmark: CheckmarkOverride,
       Label: LabelOverride,
       Input: InputOverride,
+      Toggle: ToggleOverride,
+      ToggleInner: ToggleInnerOverride,
+      ToggleTrack: ToggleTrackOverride,
     } = overrides;
 
     const Root = getOverride(RootOverride) || StyledRoot;
     const Checkmark = getOverride(CheckmarkOverride) || StyledCheckmark;
     const Label = getOverride(LabelOverride) || StyledLabel;
     const Input = getOverride(InputOverride) || StyledInput;
+    const Toggle = getOverride(ToggleOverride) || StyledToggle;
+    const ToggleInner = getOverride(ToggleInnerOverride) || StyledToggleInner;
+    const ToggleTrack = getOverride(ToggleTrackOverride) || StyledToggleTrack;
 
     const inputEvents = {
       onChange,
@@ -149,11 +158,25 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         {...getOverrideProps(RootOverride)}
       >
         {(labelPlacement === 'top' || labelPlacement === 'left') && labelComp}
-        <Checkmark
-          checked={checked}
-          {...sharedProps}
-          {...getOverrideProps(CheckmarkOverride)}
-        />
+        {checkmarkType === STYLE_TYPE.toggle ? (
+          <ToggleTrack
+            {...sharedProps}
+            {...getOverrideProps(ToggleTrackOverride)}
+          >
+            <Toggle {...sharedProps} {...getOverrideProps(ToggleOverride)}>
+              <ToggleInner
+                {...sharedProps}
+                {...getOverrideProps(ToggleInnerOverride)}
+              />
+            </Toggle>
+          </ToggleTrack>
+        ) : (
+          <Checkmark
+            checked={checked}
+            {...sharedProps}
+            {...getOverrideProps(CheckmarkOverride)}
+          />
+        )}
         <Input
           value={value}
           name={name}
diff --git a/src/checkbox/index.js b/src/checkbox/index.js
index e5dd701a1..0bb766b14 100644
--- a/src/checkbox/index.js
+++ b/src/checkbox/index.js
@@ -15,6 +15,9 @@ export {
   Checkmark as StyledCheckmark,
   Label as StyledLabel,
   Input as StyledInput,
+  Toggle as StyledToggle,
+  ToggleInner as StyledToggleInner,
+  ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
 
 export {STATE_TYPE, STYLE_TYPE} from './constants.js';
diff --git a/src/checkbox/styled-components.js b/src/checkbox/styled-components.js
index ce92278c5..b457786e6 100644
--- a/src/checkbox/styled-components.js
+++ b/src/checkbox/styled-components.js
@@ -84,12 +84,6 @@ function getBackgroundColor(props) {
   }
 }
 
-function getCheckBackgroundColor(props) {
-  const {$disabled, $theme} = props;
-  const {colors} = $theme;
-  return $disabled ? colors.mono600 : colors.tickMarkFill;
-}
-
 function getLabelColor(props) {
   const {$disabled, $theme} = props;
   const {colors} = $theme;
@@ -113,79 +107,40 @@ export const Root = styled('label', props => {
   };
 });
 
-function getToggleThumbColor(props) {
-  const {
-    $disabled,
-    $isFocused,
-    $isError,
-    $isHovered,
-    $isActive,
-    $theme,
-  } = props;
-  const {colors} = $theme;
-  if ($disabled) {
-    return colors.sliderBorderDisabled;
-  } else if ($isActive || $isFocused || $isHovered) {
-    return colors.sliderBorderHover;
-  } else if ($isError) {
-    if ($isActive || $isFocused) {
-      return colors.negative200;
-    } else if ($isHovered) {
-      return colors.negative100;
-    } else {
-      return colors.negative50;
-    }
-  } else {
-    return colors.sliderBorder;
-  }
-}
+export const Checkmark = styled('span', props => {
+  const {$checked, $disabled, $isIndeterminate, $theme} = props;
+  const {sizing, animation} = $theme;
 
-const getToggleCheckMarkStyles = props => {
-  const {$checked, $theme, $disabled} = props;
-  const {animation, colors} = $theme;
-  const backgroundColor = $disabled
-    ? colors.sliderHandleFillDisabled
-    : colors.sliderHandleFill;
-  const toggleThumbColor = getToggleThumbColor(props);
-  const toggleSVG =
-    `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_d)"><rect x="4" y="3" width="24" height="24" rx="4" fill="` +
-    `${encodeURIComponent(backgroundColor)}` +
-    `"/><rect width="2" height="8"  x="15" y="11" rx="1" fill="` +
-    `${encodeURIComponent(toggleThumbColor)}` +
-    `"/></g><defs><filter id="filter0_d" x="0" y="0" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>`;
-  return {
-    position: 'relative',
-    flex: '0 0 auto',
-    borderRadius: $theme.borders.useRoundedCorners
-      ? $theme.borders.radius200
-      : null,
-    display: 'inline-block',
-    backgroundColor: getBackgroundColor(props),
-    transitionDuration: animation.timing100,
-    transitionTimingFunction: animation.easeOutCurve,
-    transitionProperty: 'background-color',
-    width: '40px',
-    height: '16px',
-    marginTop: '4px',
-    marginBottom: '4px',
-    marginLeft: '4px',
-    marginRight: '4px',
-    ':after': {
-      position: 'absolute',
-      top: '-8px',
-      transitionProperty: 'margin-left',
-      transitionDuration: animation.timing400,
-      transitionTimingFunction: animation.easeOutCurve,
-      marginLeft: $checked ? '16px' : '-4px',
-      content: `url('data:image/svg+xml;utf8,` + toggleSVG + `')`,
-      color: 'black',
-    },
-  };
-};
+  const tickColor = $disabled
+    ? $theme.colors.mono600
+    : $theme.colors.tickMarkFill;
+
+  const indeterminate = encodeURIComponent(`
+    <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line
+      x1="1"
+      y1="-1"
+      x2="11"
+      y2="-1"
+      transform="translate(0 2)"
+      stroke="${tickColor}"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    </svg>
+  `);
+
+  const check = encodeURIComponent(`
+    <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z"
+        fill="${tickColor}"
+      />
+    </svg>
+  `);
 
-const getDefaultCheckMarkStyles = props => {
-  const {$checked, $isIndeterminate, $theme} = props;
-  const {sizing, animation} = $theme;
   return {
     flex: '0 0 auto',
     transitionDuration: animation.timing100,
@@ -204,13 +159,9 @@ const getDefaultCheckMarkStyles = props => {
     display: 'inline-block',
     verticalAlign: 'middle',
     backgroundImage: $isIndeterminate
-      ? `url('data:image/svg+xml;utf8,<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="-1" x2="11" y2="-1" transform="translate(0 2)" stroke="${encodeURIComponent(
-          getCheckBackgroundColor(props),
-        )}" stroke-width="2" stroke-linecap="round"/></svg>');`
+      ? `url('data:image/svg+xml;charset=utf8,${indeterminate}');`
       : $checked
-        ? `url('data:image/svg+xml;utf8,<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z" fill="${encodeURIComponent(
-            getCheckBackgroundColor(props),
-          )}"/></svg>');`
+        ? `url('data:image/svg+xml;charset=utf8,${check}');`
         : null,
     backgroundColor: getBackgroundColor(props),
     backgroundRepeat: 'no-repeat',
@@ -220,13 +171,6 @@ const getDefaultCheckMarkStyles = props => {
     marginLeft: $theme.sizing.scale200,
     marginRight: $theme.sizing.scale200,
   };
-};
-
-export const Checkmark = styled('span', props => {
-  const {$checkmarkType} = props;
-  return $checkmarkType === STYLE_TYPE.toggle
-    ? getToggleCheckMarkStyles(props)
-    : getDefaultCheckMarkStyles(props);
 });
 
 export const Label = styled('div', props => {
@@ -251,3 +195,50 @@ export const Input = styled('input', {
   margin: 0,
   padding: 0,
 });
+
+export const Toggle = styled('div', props => ({
+  ...props.$theme.borders.border300,
+  alignItems: 'center',
+  backgroundColor: props.$theme.colors.mono100,
+  borderRadius: props.$theme.borders.useRoundedCorners
+    ? props.$theme.borders.radius200
+    : null,
+  boxShadow: props.$theme.lighting.shadow400,
+  display: 'flex',
+  justifyContent: 'center',
+  height: props.$theme.sizing.scale800,
+  width: props.$theme.sizing.scale800,
+}));
+
+export const ToggleInner = styled('div', props => {
+  function backgroundColor($theme) {
+    if (props.$disabled) return props.$theme.colors.mono400;
+    if (props.$isActive) return props.$theme.colors.primary500;
+    if (props.$isHovered || props.$checked) return props.$theme.colors.primary;
+
+    return props.$theme.colors.mono600;
+  }
+
+  return {
+    height: props.$theme.sizing.scale300,
+    width: props.$theme.sizing.scale0,
+    borderRadius: props.$theme.borders.radius100,
+    backgroundColor: backgroundColor(),
+  };
+});
+
+export const ToggleTrack = styled('div', props => ({
+  alignItems: 'center',
+  backgroundColor: getBackgroundColor(props),
+  borderRadius: props.$theme.borders.useRoundedCorners
+    ? props.$theme.borders.radius200
+    : null,
+  display: 'flex',
+  height: props.$theme.sizing.scale600,
+  justifyContent: props.$checked ? 'flex-end' : 'flex-start',
+  marginTop: props.$theme.sizing.scale100,
+  marginBottom: props.$theme.sizing.scale100,
+  marginLeft: props.$theme.sizing.scale100,
+  marginRight: props.$theme.sizing.scale100,
+  width: props.$theme.sizing.scale1000,
+}));
diff --git a/src/checkbox/types.js b/src/checkbox/types.js
index 3d4f6139f..8a196803f 100644
--- a/src/checkbox/types.js
+++ b/src/checkbox/types.js
@@ -17,6 +17,9 @@ export type OverridesT = {
   Label?: OverrideT<*>,
   Root?: OverrideT<*>,
   Input?: OverrideT<*>,
+  Toggle?: OverrideT<*>,
+  ToggleInner?: OverrideT<*>,
+  ToggleTrack?: OverrideT<*>,
 };
 
 export type DefaultPropsT = {


Test patch:
diff --git a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
index 9f861dabc..09bbff943 100644
--- a/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/checkbox/__tests__/__snapshots__/styled-components.test.js.snap
@@ -30,7 +30,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked $isActive 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -57,7 +57,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked $isFocused 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -84,7 +84,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked $isHovered 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary500",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -111,7 +111,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $checked 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary400",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -138,7 +138,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $disabled $checked 1`] = `
 Object {
   "backgroundColor": "$theme.colors.tickFillDisabled",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.mono600\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.mono600%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "$theme.colors.tickFillDisabled",
@@ -219,7 +219,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked $isActive 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -246,7 +246,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked $isFocused 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative600",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -273,7 +273,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked $isHovered 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative500",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -300,7 +300,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isError $checked 1`] = `
 Object {
   "backgroundColor": "$theme.colors.negative400",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"11\\" height=\\"10\\" viewBox=\\"0 0 11 10\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.6 0.200059C11.0418 0.53143 11.1314 1.15823 10.8 1.60006L4.8 9.60006C4.62607 9.83197 4.36005 9.97699 4.07089 9.99754C3.78173 10.0181 3.49788 9.91215 3.29289 9.70717L0.292893 6.70717C-0.0976311 6.31664 -0.0976311 5.68348 0.292893 5.29295C0.683417 4.90243 1.31658 4.90243 1.70711 5.29295L3.89181 7.47765L9.2 0.400059C9.53137 -0.0417689 10.1582 -0.131312 10.6 0.200059Z\\" fill=\\"%24theme.colors.tickMarkFill\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2211%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20%20%20d%3D%22M10.6%200.200059C11.0418%200.53143%2011.1314%201.15823%2010.8%201.60006L4.8%209.60006C4.62607%209.83197%204.36005%209.97699%204.07089%209.99754C3.78173%2010.0181%203.49788%209.91215%203.29289%209.70717L0.292893%206.70717C-0.0976311%206.31664%20-0.0976311%205.68348%200.292893%205.29295C0.683417%204.90243%201.31658%204.90243%201.70711%205.29295L3.89181%207.47765L9.2%200.400059C9.53137%20-0.0417689%2010.1582%20-0.131312%2010.6%200.200059Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -489,7 +489,7 @@ Object {
 exports[`Checkbox styled components StyledCheckmark : has correct styles when $isIndeterminate 1`] = `
 Object {
   "backgroundColor": "$theme.colors.primary400",
-  "backgroundImage": "url('data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"2\\" viewBox=\\"0 0 12 2\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><line x1=\\"1\\" y1=\\"-1\\" x2=\\"11\\" y2=\\"-1\\" transform=\\"translate(0 2)\\" stroke=\\"%24theme.colors.tickMarkFill\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>');",
+  "backgroundImage": "url('data:image/svg+xml;charset=utf8,%0A%20%20%20%20%3Csvg%20width%3D%2212%22%20height%3D%222%22%20viewBox%3D%220%200%2012%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cline%0A%20%20%20%20%20%20x1%3D%221%22%0A%20%20%20%20%20%20y1%3D%22-1%22%0A%20%20%20%20%20%20x2%3D%2211%22%0A%20%20%20%20%20%20y2%3D%22-1%22%0A%20%20%20%20%20%20transform%3D%22translate(0%202)%22%0A%20%20%20%20%20%20stroke%3D%22%24theme.colors.tickMarkFill%22%0A%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20');",
   "backgroundPosition": "center",
   "backgroundRepeat": "no-repeat",
   "borderColor": "transparent",
@@ -664,3 +664,44 @@ Object {
   "userSelect": "none",
 }
 `;
+
+exports[`Checkbox styled components StyledToggle StyledToggle snap: StyledToggle has correct default styles 1`] = `
+Object {
+  "alignItems": "center",
+  "backgroundColor": "$theme.colors.mono100",
+  "borderColor": "$theme.borders.border300.borderColor",
+  "borderRadius": "$theme.borders.radius200",
+  "borderStyle": "$theme.borders.border300.borderStyle",
+  "borderWidth": "$theme.borders.border300.borderWidth",
+  "boxShadow": "$theme.lighting.shadow400",
+  "display": "flex",
+  "height": "$theme.sizing.scale800",
+  "justifyContent": "center",
+  "width": "$theme.sizing.scale800",
+}
+`;
+
+exports[`Checkbox styled components StyledToggleInner StyledToggleInner snap: StyledToggleInner has correct default styles 1`] = `
+Object {
+  "backgroundColor": "$theme.colors.mono600",
+  "borderRadius": "$theme.borders.radius100",
+  "height": "$theme.sizing.scale300",
+  "width": "$theme.sizing.scale0",
+}
+`;
+
+exports[`Checkbox styled components StyledToggleTrack StyledToggleTrack snap: StyledToggleTrack has correct default styles 1`] = `
+Object {
+  "alignItems": "center",
+  "backgroundColor": "$theme.colors.tickFill",
+  "borderRadius": "$theme.borders.radius200",
+  "display": "flex",
+  "height": "$theme.sizing.scale600",
+  "justifyContent": "flex-start",
+  "marginBottom": "$theme.sizing.scale100",
+  "marginLeft": "$theme.sizing.scale100",
+  "marginRight": "$theme.sizing.scale100",
+  "marginTop": "$theme.sizing.scale100",
+  "width": "$theme.sizing.scale1000",
+}
+`;
diff --git a/src/checkbox/__tests__/styled-components.test.js b/src/checkbox/__tests__/styled-components.test.js
index 3e6416aaa..f058ac50b 100644
--- a/src/checkbox/__tests__/styled-components.test.js
+++ b/src/checkbox/__tests__/styled-components.test.js
@@ -12,6 +12,9 @@ import {
   StyledLabel,
   StyledCheckmark,
   StyledInput,
+  StyledToggle,
+  StyledToggleInner,
+  StyledToggleTrack,
 } from '../index.js';
 
 describe('Checkbox styled components', () => {
@@ -122,4 +125,31 @@ describe('Checkbox styled components', () => {
       );
     });
   });
+
+  describe('StyledToggle', () => {
+    test('StyledToggle snap', () => {
+      const component = shallow(<StyledToggle />);
+      expect(component.instance().getStyles()).toMatchSnapshot(
+        'StyledToggle has correct default styles',
+      );
+    });
+  });
+
+  describe('StyledToggleInner', () => {
+    test('StyledToggleInner snap', () => {
+      const component = shallow(<StyledToggleInner />);
+      expect(component.instance().getStyles()).toMatchSnapshot(
+        'StyledToggleInner has correct default styles',
+      );
+    });
+  });
+
+  describe('StyledToggleTrack', () => {
+    test('StyledToggleTrack snap', () => {
+      const component = shallow(<StyledToggleTrack />);
+      expect(component.instance().getStyles()).toMatchSnapshot(
+        'StyledToggleTrack has correct default styles',
+      );
+    });
+  });
 });