Merge branch 'main' into feature/new-check-circle-empty-icon

strapi · Nov 27, 2024 · 05e3baa · 05e3baa
2 parents 199ae30 + 0693ce9
commit 05e3baa
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/.changeset/purple-rivers-divide.md b/.changeset/purple-rivers-divide.md
@@ -0,0 +1,36 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: Checkbox Item Not Centered
+
+Added justify-content: center and align-items: center to Checkbox Indicator component
+
+Original:
+
+const CheckboxIndicator = styled(Checkbox.Indicator)`  width: 100%;
+  height: 100%;
+  cursor: pointer;`;
+
+Updated:
+
+const CheckboxIndicator = styled(Checkbox.Indicator)`
+
+- display: inline-flex;
+- pointer-events: auto !important;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+- justify-content: center;
+- align-items: center;
+  `;
+
+Refactored inline styling and added it to checkbox indicator stype component
+
+Original:
+
+      <CheckboxIndicator style={{ display: 'inline-flex', pointerEvents: 'auto'}} forceMount>
+
+Updated:
+
+      <CheckboxIndicator forceMount>
diff --git a/packages/design-system/src/components/Checkbox/Checkbox.tsx b/packages/design-system/src/components/Checkbox/Checkbox.tsx
@@ -52,7 +52,7 @@ const CheckboxEl = React.forwardRef<CheckboxElement, CheckboxElProps>(
 
     return (
       <CheckboxRoot ref={composedRefs} checked={checked} onCheckedChange={setChecked} {...props}>
-        <CheckboxIndicator style={{ display: 'inline-flex', pointerEvents: 'auto' }} forceMount>
+        <CheckboxIndicator forceMount>
           {checked === true ? <CheckIcon width="1.6rem" fill="neutral0" /> : null}
           {checked === 'indeterminate' ? <Minus fill="neutral0" /> : null}
         </CheckboxIndicator>
@@ -101,9 +101,13 @@ const CheckboxRoot = styled(Checkbox.Root)`
 `;
 
 const CheckboxIndicator = styled(Checkbox.Indicator)`
+  display: inline-flex;
+  pointer-events: auto !important;
   width: 100%;
   height: 100%;
   cursor: pointer;
+  justify-content: center;
+  align-items: center;
 `;
 
 /* -------------------------------------------------------------------------------------------------