From 2a21f7ba884ad7c2506fe7732068a83428cde009 Mon Sep 17 00:00:00 2001
From: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Date: Thu, 2 Jan 2025 11:06:35 +0800
Subject: [PATCH] feat:[Tree] selected background color is gray when the node
 is disabled (#52173)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:[Tree]对不可check的文本，select时候背景色改为灰色

* feat:[Tree] 修改disabled 选中的文本背景颜色

* feat: 对整行disable 的文本调整select背景色

* fix:恢复误改内容

* feat:删除不需要的多增加的注释内容

* feat：合并css选择器

* feat:更新 Tree snapshot

* feat：删除不需要的提交

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 .../__tests__/__snapshots__/demo-extend.test.ts.snap | 12 ++++++------
 .../tree/__tests__/__snapshots__/demo.test.ts.snap   | 12 ++++++------
 components/tree/demo/basic.tsx                       |  2 +-
 components/tree/demo/component-token.tsx             |  2 +-
 components/tree/demo/directory-debug.tsx             |  6 +++---
 components/tree/demo/multiple-line.tsx               |  2 +-
 components/tree/style/index.ts                       |  7 ++++++-
 7 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4ce730ac2af6..0932e06cc479 100644
--- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -90,7 +90,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -218,7 +218,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -260,7 +260,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span
@@ -4120,7 +4120,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -4248,7 +4248,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -4290,7 +4290,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span
diff --git a/components/tree/__tests__/__snapshots__/demo.test.ts.snap b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
index 0e66f3f9ebf6..c88b9a28fc7e 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
@@ -90,7 +90,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -218,7 +218,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -260,7 +260,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span
@@ -4005,7 +4005,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -4133,7 +4133,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -4175,7 +4175,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span
diff --git a/components/tree/demo/basic.tsx b/components/tree/demo/basic.tsx
index 533304856023..dc6ba65c8e29 100644
--- a/components/tree/demo/basic.tsx
+++ b/components/tree/demo/basic.tsx
@@ -45,7 +45,7 @@ const App: React.FC = () => {
     <Tree
       checkable
       defaultExpandedKeys={['0-0-0', '0-0-1']}
-      defaultSelectedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-1']}
       defaultCheckedKeys={['0-0-0', '0-0-1']}
       onSelect={onSelect}
       onCheck={onCheck}
diff --git a/components/tree/demo/component-token.tsx b/components/tree/demo/component-token.tsx
index 0d2ec2694938..975f5b11dabc 100644
--- a/components/tree/demo/component-token.tsx
+++ b/components/tree/demo/component-token.tsx
@@ -58,7 +58,7 @@ const App: React.FC = () => {
       <Tree
         checkable
         defaultExpandedKeys={['0-0-0', '0-0-1']}
-        defaultSelectedKeys={['0-0-0', '0-0-1']}
+        defaultSelectedKeys={['0-0-1']}
         defaultCheckedKeys={['0-0-0', '0-0-1']}
         onSelect={onSelect}
         onCheck={onCheck}
diff --git a/components/tree/demo/directory-debug.tsx b/components/tree/demo/directory-debug.tsx
index 24182ae9ff6b..f8351f4eca15 100644
--- a/components/tree/demo/directory-debug.tsx
+++ b/components/tree/demo/directory-debug.tsx
@@ -9,8 +9,8 @@ const treeData: TreeDataNode[] = [
     title: 'parent 0',
     key: '0-0',
     children: [
-      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
-      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
+      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true, disabled: true },
+      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true, disableCheckbox: true },
     ],
   },
   {
@@ -46,7 +46,7 @@ const BasicDemo = () => <DirectoryTree {...sharedProps} multiple treeData={treeD
 
 const NormalDemo = () => <Tree {...sharedProps} defaultSelectedKeys={['0-1']} />;
 
-const NormalCheckDemo = () => <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1']} />;
+const NormalCheckDemo = () => <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1','0-0-0', '0-0-1','0-1-1']} />;
 
 const NormalDragDemo = () => <Tree {...sharedProps} draggable defaultSelectedKeys={['0-1-0']} />;
 
diff --git a/components/tree/demo/multiple-line.tsx b/components/tree/demo/multiple-line.tsx
index d7db44abf9a9..4c7c8518c65e 100644
--- a/components/tree/demo/multiple-line.tsx
+++ b/components/tree/demo/multiple-line.tsx
@@ -45,7 +45,7 @@ const App: React.FC = () => {
     <Tree
       checkable
       defaultExpandedKeys={['0-0-0', '0-0-1']}
-      defaultSelectedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-1']}
       defaultCheckedKeys={['0-0-0', '0-0-1']}
       onSelect={onSelect}
       onCheck={onCheck}
diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts
index eac80ab30774..ef694ac5ff34 100644
--- a/components/tree/style/index.ts
+++ b/components/tree/style/index.ts
@@ -119,8 +119,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
     nodeSelectedBg,
     nodeHoverBg,
     colorTextQuaternary,
+    controlItemBgActiveDisabled,
   } = token;
-
   return {
     [treeCls]: {
       ...resetComponent(token),
@@ -199,6 +199,11 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
           },
         },
 
+        [`${treeCls}-checkbox-disabled + ${treeCls}-node-selected,&${treeNodeCls}-disabled${treeNodeCls}-selected ${treeCls}-node-content-wrapper`]:
+          {
+            backgroundColor: controlItemBgActiveDisabled,
+          },
+
         // not disable
         [`&:not(${treeNodeCls}-disabled)`]: {
           // >>> Title