fix: make toggle button non-layout

nulogy · Dec 22, 2023 · 1e34640 · 1e34640
1 parent fb0dc07
commit 1e34640
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx
@@ -7,11 +7,11 @@ import { Box } from "../Box";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { Field } from "../Form";
 import { Text } from "../Type";
+import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import { ClickInputLabel } from "../utils";
 import { DefaultNDSThemeType } from "../theme.type";
 import { getSubset, omitSubset } from "../utils/subset";
 import ToggleButton from "./ToggleButton";
-import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 
 const labelTextStyles = (theme: DefaultNDSThemeType) => ({
   fontSize: theme.fontSizes.small,
@@ -25,7 +25,6 @@ type MaybeToggleTitleProps = React.ComponentPropsWithRef<"div"> & {
   helpText?: string;
   children?: any;
 };
-
 const MaybeToggleTitle: React.FC<MaybeToggleTitleProps> = ({
   labelText,
   requirementText,

diff --git a/src/Toggle/ToggleButton.tsx b/src/Toggle/ToggleButton.tsx
@@ -51,16 +51,15 @@ const animationConfig: AnimationConfig = {
 const Switch: React.FC<SwitchProps> = ({ children, disabled, toggled, onClick }) => (
   <AnimatedBox
     position="relative"
-    display="flex"
-    alignItems="center"
-    justifyContent={toggled ? "flex-end" : "flex-start"}
     height="24px"
     width="48px"
     bg={disabled ? "grey" : getSwitchBackground(toggled)}
     borderRadius="20px"
     padding="2px"
     boxShadow="small"
-    whileHover="hover"
+    animate={toggled ? "toggled" : "initial"}
+    whileHover="active"
+    whileFocus="active"
     onClick={onClick}
   >
     {children}
@@ -70,18 +69,20 @@ const Switch: React.FC<SwitchProps> = ({ children, disabled, toggled, onClick })
 const Slider: React.FC<SliderProps> = ({ disabled, children }) => (
   <motion.div
     className="slider"
-    layout
+    initial={false}
     variants={{
-      hover: {
+      active: {
         boxShadow: disabled ? undefined : theme.shadows.focus,
         scale: disabled ? undefined : animationConfig.scale,
       },
+      toggled: {
+        marginLeft: theme.space.x3,
+      },
+      initial: {
+        marginLeft: theme.space.none,
+      },
     }}
     transition={animationConfig.transition}
-    whileFocus={{
-      boxShadow: disabled ? undefined : theme.shadows.focus,
-      scale: disabled ? undefined : animationConfig.scale,
-    }}
     style={{
       height: "20px",
       width: "20px",
@@ -106,7 +107,7 @@ const ToggleInput = styled.input(
       transform: disabled ? null : `scale(${animationConfig.scale})`,
       boxShadow: disabled ? undefined : theme.shadows.focus,
     },
-  })
+  }),
 );
 
 const ToggleButton: React.FC<ToggleButtonProps> = React.forwardRef((props, ref) => {