From 137de4de26612e10253364b39153a621f7c1eade Mon Sep 17 00:00:00 2001
From: Rami GB <77512307+rami-pro@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:10:12 +0100
Subject: [PATCH 1/3] fix: make CheckBox styling respect the figma design

---
 .../src/components/Checkbox/Checkbox.tsx              | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/Checkbox/Checkbox.tsx b/packages/design-system/src/components/Checkbox/Checkbox.tsx
index 403ef66d4..50c11f5c2 100644
--- a/packages/design-system/src/components/Checkbox/Checkbox.tsx
+++ b/packages/design-system/src/components/Checkbox/Checkbox.tsx
@@ -40,7 +40,7 @@ interface CheckboxElProps extends Checkbox.CheckboxProps {}
 type CheckboxElement = HTMLButtonElement;
 
 const CheckboxEl = React.forwardRef<CheckboxElement, CheckboxElProps>(
-  ({ defaultChecked, checked: checkedProp, onCheckedChange, ...props }, forwardedRef) => {
+  ({ defaultChecked, disabled, checked: checkedProp, onCheckedChange, ...props }, forwardedRef) => {
     const checkboxRef = React.useRef<CheckboxElement>(null!);
     const [checked, setChecked] = useControllableState({
       defaultProp: defaultChecked,
@@ -51,10 +51,10 @@ const CheckboxEl = React.forwardRef<CheckboxElement, CheckboxElProps>(
     const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
 
     return (
-      <CheckboxRoot ref={composedRefs} checked={checked} onCheckedChange={setChecked} {...props}>
-        <CheckboxIndicator forceMount>
-          {checked === true ? <CheckIcon width="1.6rem" fill="neutral0" /> : null}
-          {checked === 'indeterminate' ? <Minus fill="neutral0" /> : null}
+      <CheckboxRoot ref={composedRefs} checked={checked} disabled={disabled} onCheckedChange={setChecked} {...props}>
+        <CheckboxIndicator style={{ display: 'inline-flex', pointerEvents: 'auto' }} forceMount>
+          {checked === true ? <CheckIcon width="1.6rem" fill={disabled ? 'neutral500' : 'neutral0'} /> : null}
+          {checked === 'indeterminate' ? <Minus fill={disabled ? 'neutral500' : 'neutral0'} /> : null}
         </CheckboxIndicator>
       </CheckboxRoot>
     );
@@ -82,6 +82,7 @@ const CheckboxRoot = styled(Checkbox.Root)`
   }
 
   &[data-disabled] {
+    border: 1px solid ${(props) => props.theme.colors.neutral400};
     background-color: ${(props) => props.theme.colors.neutral200};
   }
 

From dacec6e68a664eb51c300c2de0cc9e8ab65df22e Mon Sep 17 00:00:00 2001
From: Rami GB <77512307+rami-pro@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:15:14 +0100
Subject: [PATCH 2/3] chore: adding changeset to PR

---
 .changeset/mean-dragons-invent.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/mean-dragons-invent.md

diff --git a/.changeset/mean-dragons-invent.md b/.changeset/mean-dragons-invent.md
new file mode 100644
index 000000000..b330c536c
--- /dev/null
+++ b/.changeset/mean-dragons-invent.md
@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix checkbox behaviour when disabled respecting figma design

From 9d1e69adf6ed9c71f632b8c77e92cd75e0373687 Mon Sep 17 00:00:00 2001
From: Rami GB <77512307+rami-pro@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:49:39 +0100
Subject: [PATCH 3/3] feat: chage icon to not allowed when checkbox is disabled

---
 packages/design-system/src/components/Checkbox/Checkbox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/Checkbox/Checkbox.tsx b/packages/design-system/src/components/Checkbox/Checkbox.tsx
index 50c11f5c2..538b56f7c 100644
--- a/packages/design-system/src/components/Checkbox/Checkbox.tsx
+++ b/packages/design-system/src/components/Checkbox/Checkbox.tsx
@@ -52,7 +52,10 @@ const CheckboxEl = React.forwardRef<CheckboxElement, CheckboxElProps>(
 
     return (
       <CheckboxRoot ref={composedRefs} checked={checked} disabled={disabled} onCheckedChange={setChecked} {...props}>
-        <CheckboxIndicator style={{ display: 'inline-flex', pointerEvents: 'auto' }} forceMount>
+        <CheckboxIndicator
+          style={{ display: 'inline-flex', pointerEvents: 'auto', cursor: disabled ? 'not-allowed' : undefined }}
+          forceMount
+        >
           {checked === true ? <CheckIcon width="1.6rem" fill={disabled ? 'neutral500' : 'neutral0'} /> : null}
           {checked === 'indeterminate' ? <Minus fill={disabled ? 'neutral500' : 'neutral0'} /> : null}
         </CheckboxIndicator>