From 0693ce92f711bbff280dcd21d952bdc8a423892c Mon Sep 17 00:00:00 2001
From: PlanckConst <brandonchin.dev@gmail.com>
Date: Wed, 27 Nov 2024 03:18:06 -0500
Subject: [PATCH] fix(Checkbox): center checkbox icon (#1821)

Co-authored-by: Chitangchin <chitangb.chin@gmail.com>
---
 .changeset/purple-rivers-divide.md            | 36 +++++++++++++++++++
 .../src/components/Checkbox/Checkbox.tsx      |  6 +++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/purple-rivers-divide.md

diff --git a/.changeset/purple-rivers-divide.md b/.changeset/purple-rivers-divide.md
new file mode 100644
index 000000000..3dee0aa79
--- /dev/null
+++ 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
index 4f0b6a40e..403ef66d4 100644
--- 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;
 `;
 
 /* -------------------------------------------------------------------------------------------------