From a63789e3dcbe0b8cd5b50df4553231e1addcc490 Mon Sep 17 00:00:00 2001
From: Danial Soheili <33312687+ds1371dani@users.noreply.github.com>
Date: Wed, 4 Jan 2023 05:49:51 +0330
Subject: [PATCH] Bugfix/checkbox style (#39974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🎨 STYLE: fix indeterminate Checkbox style when disabled

* 📖 DOC: add indeterminate checkbox to disabled demo

* 🧪 TEST: update snapshots

* 🐞 FIX: don't change normal checkbox background

* 🐞 FIX: style selector
---
 .../__snapshots__/demo-extend.test.ts.snap     | 18 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap  | 18 ++++++++++++++++++
 components/checkbox/demo/disabled.tsx          |  2 ++
 components/checkbox/style/index.ts             |  4 ++++
 4 files changed, 42 insertions(+)

diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4f30001840..5f94a22b28 100644
--- a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -433,6 +433,24 @@ Array [
     </span>
   </label>,
   <br />,
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
+  >
+    <span
+      class="ant-checkbox ant-checkbox-indeterminate ant-checkbox-disabled"
+    >
+      <input
+        aria-checked="mixed"
+        class="ant-checkbox-input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <br />,
   <label
     class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
   >
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
index ac125a6401..0cf34ad60d 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -405,6 +405,24 @@ Array [
     </span>
   </label>,
   <br />,
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
+  >
+    <span
+      class="ant-checkbox ant-checkbox-indeterminate ant-checkbox-disabled"
+    >
+      <input
+        aria-checked="mixed"
+        class="ant-checkbox-input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <br />,
   <label
     class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
   >
diff --git a/components/checkbox/demo/disabled.tsx b/components/checkbox/demo/disabled.tsx
index 92dde3de04..aeb519fd2d 100644
--- a/components/checkbox/demo/disabled.tsx
+++ b/components/checkbox/demo/disabled.tsx
@@ -5,6 +5,8 @@ const App: React.FC = () => (
   <>
     <Checkbox defaultChecked={false} disabled />
     <br />
+    <Checkbox indeterminate disabled />
+    <br />
     <Checkbox defaultChecked disabled />
   </>
 );
diff --git a/components/checkbox/style/index.ts b/components/checkbox/style/index.ts
index 8c764b6826..f0d1360350 100644
--- a/components/checkbox/style/index.ts
+++ b/components/checkbox/style/index.ts
@@ -268,6 +268,10 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         '& + span': {
           color: token.colorTextDisabled,
         },
+
+        [`&${checkboxCls}-indeterminate ${checkboxCls}-inner::after`]: {
+          background: token.colorTextDisabled,
+        },
       },
     },
   ];