feat(switches): adjust switches to current designs

Sage · Oct 13, 2021 · 6c64089 · 6c64089
1 parent ab970cc
commit 6c64089
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 51 deletions.
diff --git a/src/components/switch/__internal__/__snapshots__/switch-slider.spec.js.snap b/src/components/switch/__internal__/__snapshots__/switch-slider.spec.js.snap
@@ -36,57 +36,43 @@ exports[`SwitchSlider base theme renders as expected 1`] = `
   top: 0;
   width: 60px;
   z-index: 2;
+  border-radius: 90px;
 }
 
 .c0::before {
   background-color: #FFFFFF;
-  bottom: 2px;
+  bottom: 4px;
   box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
   content: "";
-  height: 20px;
+  height: 16px;
   position: absolute;
-  left: 2px;
+  left: 4px;
   -webkit-transition: -webkit-transform 0.4s;
   -webkit-transition: transform 0.4s;
   transition: transform 0.4s;
-  width: 20px;
+  width: 16px;
   z-index: 1;
+  border-radius: 50%;
 }
 
-.c0 .c7 {
+.c0 .c5 {
   position: absolute;
   right: -30px;
   height: 100%;
 }
 
 .c3 .c1 {
-  color: rgba(0,0,0,0.55);
+  color: rgba(0,0,0,0.30);
 }
 
 .c4 .c1 {
-  color: rgba(0,0,0,0.55);
+  color: rgba(0,0,0,0.30);
 }
 
 .c4 .c1 {
   color: #FFFFFF;
 }
 
-.c5 .c1 {
-  color: rgba(0,0,0,0.55);
-}
-
-.c5 .c1 {
-  color: #FFFFFF;
-}
-
-.c6 .c1 {
-  color: rgba(0,0,0,0.55);
-}
-
-.c6 .c1 {
-  color: #FFFFFF;
-}
-
 <span
   className="c0"
 >

diff --git a/src/components/switch/__internal__/switch-slider.spec.js b/src/components/switch/__internal__/switch-slider.spec.js
@@ -65,7 +65,7 @@ describe("SwitchSlider", () => {
       it("applies the correct base styles", () => {
         assertStyleMatch(
           {
-            backgroundColor: baseTheme.colors.primary,
+            backgroundColor: baseTheme.switch.on,
           },
           wrapper
         );
@@ -107,7 +107,7 @@ describe("SwitchSlider", () => {
       it("applies the correct SwitchSliderPanel styles", () => {
         assertStyleMatch(
           {
-            color: baseTheme.disabled.disabled,
+            color: baseTheme.switch.disabledFontColor,
           },
           wrapper,
           {
@@ -141,11 +141,20 @@ describe("SwitchSlider", () => {
       describe("default", () => {
         const wrapper = render({ size: "large" }).toJSON();
 
+        it("applies the correct border-radius", () => {
+          assertStyleMatch(
+            {
+              borderRadius: "30px",
+            },
+            wrapper
+          );
+        });
+
         it("applies the correct ::before styles", () => {
           assertStyleMatch(
             {
-              height: "36px",
-              width: "36px",
+              height: "32px",
+              width: "32px",
             },
             wrapper,
             { modifier: "::before" }
@@ -201,7 +210,7 @@ describe("SwitchSlider", () => {
         it("applies the correct base styles", () => {
           assertStyleMatch(
             {
-              backgroundColor: theme.colors.primary,
+              backgroundColor: theme.switch.on,
             },
             wrapper
           );
@@ -223,7 +232,7 @@ describe("SwitchSlider", () => {
         it("applies the correct SwitchSliderPanel styles", () => {
           assertStyleMatch(
             {
-              color: theme.disabled.disabled,
+              color: theme.switch.disabledFontColor,
             },
             wrapper,
             {
@@ -244,7 +253,7 @@ describe("SwitchSlider", () => {
         it("applies the correct base styles", () => {
           assertStyleMatch(
             {
-              backgroundColor: theme.colors.disabled,
+              backgroundColor: theme.switch.onDisabled,
             },
             wrapper
           );

diff --git a/src/components/switch/__internal__/switch-slider.style.js b/src/components/switch/__internal__/switch-slider.style.js
@@ -19,42 +19,41 @@ const StyledSwitchSlider = styled.span`
     top: 0;
     width: 60px;
     z-index: 2;
+    border-radius: 90px;
 
     ${info &&
     !disabled &&
     css`
-      box-shadow: inset 1px 1px 0 ${theme.colors.info},
-        inset -1px -1px 0 ${theme.colors.info};
+      box-shadow: inset 0px 0px 0px 1px ${theme.colors.info};
     `}
     ${warning &&
     !disabled &&
     css`
-      box-shadow: inset 1px 1px 0 ${theme.colors.warning},
-        inset -1px -1px 0 ${theme.colors.warning};
+      box-shadow: inset 0px 0px 0px 1px ${theme.colors.warning};
     `}
       ${error &&
     !disabled &&
     css`
-      box-shadow: inset 2px 2px 0 ${theme.colors.error},
-        inset -2px -2px 0 ${theme.colors.error};
+      box-shadow: inset 0px 0px 0px 2px ${theme.colors.error};
     `}
 
     &::before {
       background-color: ${theme.colors.white};
-      bottom: 2px;
+      bottom: 4px;
       box-shadow: ${theme.shadows.cards};
       content: "";
-      height: 20px;
+      height: 16px;
       position: absolute;
-      left: 2px;
+      left: 4px;
       transition: transform 0.4s;
-      width: 20px;
+      width: 16px;
       z-index: 1;
+      border-radius: 50%;
     }
 
     ${checked &&
     `
-      background-color: ${theme.colors.primary};
+      background-color: ${theme.switch.on};
 
       &::before {
         transform: translateX(36px);
@@ -63,29 +62,30 @@ const StyledSwitchSlider = styled.span`
 
     ${disabled &&
     css`
-      background-color: ${theme.disabled.background};
+      background-color: ${theme.switch.offDisabled};
 
       &::before {
         opacity: 0.8;
       }
 
       ${SwitchSliderPanel} {
-        color: ${theme.disabled.disabled};
+        color: ${theme.switch.disabledFontColor};
       }
 
       ${checked &&
       `
-        background-color: ${theme.colors.disabled};
+        background-color: ${theme.switch.onDisabled};
 
         ${SwitchSliderPanel} { color: ${theme.colors.white}; }
       `}
     `}
 
     ${size === "large" &&
     css`
+      border-radius: 30px;
       &::before {
-        height: 36px;
-        width: 36px;
+        height: 32px;
+        width: 32px;
 
         ${checked &&
         `

diff --git a/src/components/switch/switch.spec.js b/src/components/switch/switch.spec.js
@@ -461,8 +461,7 @@ describe("Switch", () => {
         const shadowWidth = type === "error" ? 2 : 1;
         assertStyleMatch(
           {
-            // eslint-disable-next-line max-len
-            boxShadow: `inset ${shadowWidth}px ${shadowWidth}px 0 ${baseTheme.colors[type]}, inset -${shadowWidth}px -${shadowWidth}px 0 ${baseTheme.colors[type]}`,
+            boxShadow: `inset 0px 0px 0px ${shadowWidth}px ${baseTheme.colors[type]}`,
           },
           wrapper.find(StyledSwitchSlider)
         );
@@ -487,8 +486,7 @@ describe("Switch", () => {
           const shadowWidth = type === "error" ? 2 : 1;
           assertStyleMatch(
             {
-              // eslint-disable-next-line max-len
-              boxShadow: `inset ${shadowWidth}px ${shadowWidth}px 0 ${baseTheme.colors[type]}, inset -${shadowWidth}px -${shadowWidth}px 0 ${baseTheme.colors[type]}`,
+              boxShadow: `inset 0px 0px 0px ${shadowWidth}px ${baseTheme.colors[type]}`,
             },
             wrapper.find(StyledSwitchSlider)
           );

diff --git a/src/components/switch/switch.stories.mdx b/src/components/switch/switch.stories.mdx
@@ -90,6 +90,7 @@ The switch component uses `switch.on` and `switch.off` to retrieve the translati
 <Preview>
   <Story name="disabled">
     <Switch label="Disabled switch" disabled />
+    <Switch label="Disabled switch" disabled checked mt={2} />
   </Story>
 </Preview>
 
@@ -131,6 +132,25 @@ You can use the `required` prop to indicate if the field is mandatory.
   </Story>
 </Preview>
 
+### Loading
+
+<Preview>
+  <Story name="loading">
+    {['small.on', 'small.off', 'large.on', 'large.off'].map(variant => {
+      const [setIsChecked] = useState(false);
+      const [size, checked] = variant.split('.');
+      return (
+        <Switch
+          label={variant.replace('.', ' ')}
+          size={size}
+          loading="loading"
+          checked={checked === 'on' ? 'checked' : ''}
+          onChange={(e) => setIsChecked((state) => !state)}
+        />);
+    })};
+  </Story>
+</Preview>
+
 ### With labelInline
 
 <Preview>

diff --git a/src/components/switch/switch.style.js b/src/components/switch/switch.style.js
@@ -42,7 +42,7 @@ const StyledSwitch = styled.div`
 
       &:hover + ${StyledSwitchSlider} {
         background-color: ${checked
-          ? theme.colors.secondary
+          ? theme.switch.onHover
           : theme.switch.offHover};
       }
     }

diff --git a/src/style/themes/base/base-theme.config.js b/src/style/themes/base/base-theme.config.js
@@ -346,7 +346,12 @@ export default (palette) => {
 
     switch: {
       off: palette.slateTint(80),
+      offDisabled: palette.slateTint(90),
       offHover: palette.slateTint(60),
+      on: palette.slateTint(20),
+      onDisabled: palette.slateTint(60),
+      onHover: palette.slateTint(0),
+      disabledFontColor: "rgba(0,0,0,0.30)",
     },
 
     tile: {