Merge pull request #2399 from WTTJ/fix-toggle-icon-misalignment

fix: toggle icon misalignment
WTTJ · Feb 6, 2024 · b872272 · b872272
2 parents c0f74ba + 7d58f20
commit b872272
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts
@@ -91,17 +91,14 @@ export const getToggles = (theme: WuiTheme): ThemeToggles => {
     icon: {
       position: {
         xs: {
-          top: '5px',
           left: '2px',
           right: '2px',
         },
         sm: {
-          top: '1px',
           left: '4px',
           right: '4px',
         },
         md: {
-          top: '4px',
           left: '4px',
           right: '4px',
         },

diff --git a/packages/Toggle/src/index.tsx b/packages/Toggle/src/index.tsx
@@ -22,7 +22,7 @@ export const Toggle = forwardRef<'input', ToggleProps>(
     return (
       <S.Wrapper onClick={onClick}>
         {hasIcon && (
-          <S.IconWrapper checked={checked} size={size}>
+          <S.IconWrapper checked={checked} onClick={onClick} size={size}>
             {checked ? checkedIcon : uncheckedIcon}
           </S.IconWrapper>
         )}

diff --git a/packages/Toggle/src/styles.ts b/packages/Toggle/src/styles.ts
@@ -72,7 +72,10 @@ export const IconWrapper = styled.box.withConfig({ shouldForwardProp })<{
   ({ checked, size }) => css`
     position: absolute;
     z-index: 1;
-    top: ${th(`toggles.icon.position.${size}.top`)};
+    display: flex;
+    align-items: center;
+    height: ${th(`toggles.item.sizes.${size}.height`)};
+    bottom: 0;
 
     > svg,
     i {