style(inputcheckbox): fix checkbox border in dark mode and removed th…

…e extra background
chanzuckerberg · Nov 26, 2024 · f56d18d · f56d18d
1 parent 5bf2edf
commit f56d18d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
 <label
-  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-1kfx8au-MuiFormControlLabel-root"
+  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-175tvrr-MuiFormControlLabel-root"
 >
   <span
-    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium css-bbyvzn-MuiButtonBase-root-MuiCheckbox-root"
+    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium css-5zzv6g-MuiButtonBase-root-MuiCheckbox-root"
     intent="default"
   >
     <input

diff --git a/packages/components/src/core/InputCheckbox/styles.ts b/packages/components/src/core/InputCheckbox/styles.ts
@@ -59,7 +59,6 @@ export const StyledCheckboxDefaultIcon = styled("span")`
 export const StyledCheckboxCheckedIcon = styled("div")`
   ${(props: CheckboxExtraProps) => {
     const iconSizes = getIconSizes(props);
-    const borders = getBorders(props);
     const semanticColors = getSemanticColors(props);
 
     return `
@@ -68,13 +67,16 @@ export const StyledCheckboxCheckedIcon = styled("div")`
       justify-content: center;
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
-      border: ${borders?.accent?.default};
       border-radius: 2px;
       background-color: ${semanticColors?.accent?.fillPrimary};
 
       ${StyledIcon} {
         fill: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
+
+      &:hover {
+        background-color: red;
+      }
     `;
   }}
 `;
@@ -86,9 +88,14 @@ export const StyledCheckbox = styled(RawCheckbox)`
     return `
       &.${checkboxClasses.root} {
         ${focusVisibleA11yStyle(props)}
+        
         padding: 0;
         margin-right: ${spaces?.s}px;
         border-radius: 0;
+
+        &:hover {
+          background-color: transparent;
+        }
       }
     `;
   }}
@@ -136,7 +143,6 @@ const disabledStyles = (props: CheckboxExtraProps) => {
     }
 
     ${StyledCheckboxCheckedIcon} {
-      border: ${borders?.base?.disabled};
       background-color: ${semanticColors?.base?.ornamentDisabled};
     }
 
@@ -150,7 +156,6 @@ const disabledStyles = (props: CheckboxExtraProps) => {
       }
 
       ${StyledCheckboxCheckedIcon} {
-        border: ${borders?.base?.disabled};
         background-color: ${semanticColors?.base?.ornamentDisabled};
       }
     }
@@ -178,7 +183,6 @@ export const StyledFormControlLabel = styled(FormControlLabel)`
         }
 
         ${StyledCheckboxCheckedIcon} {
-          border: ${borders?.accent?.hover};
           background-color: ${semanticColors?.accent?.fillHover};
         }
       }
@@ -189,7 +193,6 @@ export const StyledFormControlLabel = styled(FormControlLabel)`
         }
 
         ${StyledCheckboxCheckedIcon} {
-          border: ${borders?.accent?.pressed};
           background-color: ${semanticColors?.accent?.fillPressed};
         }
       }