fix: the track's border color of the Switch component should be whi…

…te in light mode (#597) * fix: fix incorrect track border color in light mode * feat: change SVG attribute naming * chore: remove deprecated attributes
trendmicro-frontend · Jun 10, 2022 · 8fc0617 · 8fc0617
1 parent 3471107
commit 8fc0617
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/packages/react/src/switch/Switch.js b/packages/react/src/switch/Switch.js
@@ -56,33 +56,33 @@ const Switch = forwardRef((
       <ControlBox {...baseStyle}>
         <Box
           as="svg"
-          data-toggle-svg
+          data-switch
           {...switchSVGStyle}
         >
           <Box
             as="rect"
-            data-toggle-switch-track-halo
+            data-switch-track-halo
             x="0"
             y="0"
             {...switchTrackHaloStyle}
           />
           <Box
             as="rect"
-            data-toggle-switch-track-border
+            data-switch-track-border
             x="2"
             y="2"
             {...switchTrackBorderStyle}
           />
           <Box
             as="rect"
-            data-toggle-switch-track
+            data-switch-track
             x="3"
             y="3"
             {...switchTrackStyle}
           />
           <Box
             as="circle"
-            data-toggle-switch-thumb
+            data-switch-thumb
             {...switchThumbStyle}
           />
         </Box>

diff --git a/packages/react/src/switch/styles.js b/packages/react/src/switch/styles.js
@@ -31,46 +31,49 @@ const baseStyle = ({
     dark: `${variantColor}:60`,
     light: `${variantColor}:40`,
   }[colorMode];
-
   const checkedAndHoverColor = {
     dark: `${variantColor}:50`,
     light: `${variantColor}:30`,
   }[colorMode];
+  const trackBorderColor = {
+    dark: 'black',
+    light: 'white',
+  }[colorMode];
 
   return {
     width: switchMaxWidth,
     height: switchMaxHeight,
     _child: {
-      opacity: 1
+      opacity: 1,
     },
     _hover: {
-      '[data-toggle-svg] [data-toggle-switch-track]': {
-        fill: 'gray:50'
+      '[data-switch] [data-switch-track]': {
+        fill: 'gray:50',
       },
     },
     _focus: {
-      '[data-toggle-svg] [data-toggle-switch-track-halo]': {
-        fill: focusAndCheckedColor
+      '[data-switch] [data-switch-track-halo]': {
+        fill: focusAndCheckedColor,
       },
-      '[data-toggle-svg] [data-toggle-switch-track-border]': {
-        fill: 'black'
+      '[data-switch] [data-switch-track-border]': {
+        fill: trackBorderColor,
       }
     },
     _checked: {
-      '[data-toggle-svg] [data-toggle-switch-track]': {
-        fill: focusAndCheckedColor
+      '[data-switch] [data-switch-track]': {
+        fill: focusAndCheckedColor,
       },
-      '[data-toggle-svg] [data-toggle-switch-thumb]': {
-        transform: `translateX(${height}px)`
+      '[data-switch] [data-switch-thumb]': {
+        transform: `translateX(${height}px)`,
       },
     },
     _checkedAndHover: {
-      '[data-toggle-svg] [data-toggle-switch-track]': {
-        fill: checkedAndHoverColor
+      '[data-switch] [data-switch-track]': {
+        fill: checkedAndHoverColor,
       },
     },
     _disabled: {
-      opacity: 0.28
+      opacity: 0.28,
     }
   };
 };