From fb52fbbfd021220ef48629f8ad4ef2d88ad7cb20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Mon, 18 Nov 2024 11:03:58 +0800 Subject: [PATCH] style: Improve style z-order to fix some errors (#51448) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: IsKaros Co-authored-by: ​ <​> --- components/tree/__tests__/demo-extend.test.ts | 4 +- components/tree/__tests__/demo.test.ts | 4 +- components/tree/demo/directory-debug.md | 7 ++ components/tree/demo/directory-debug.tsx | 65 +++++++++++++++++++ components/tree/index.en-US.md | 1 + components/tree/index.zh-CN.md | 1 + components/tree/style/directory.ts | 5 +- components/tree/style/index.ts | 22 +++---- 8 files changed, 90 insertions(+), 19 deletions(-) create mode 100644 components/tree/demo/directory-debug.md create mode 100644 components/tree/demo/directory-debug.tsx diff --git a/components/tree/__tests__/demo-extend.test.ts b/components/tree/__tests__/demo-extend.test.ts index ad3af91aff..fba75b8bc5 100644 --- a/components/tree/__tests__/demo-extend.test.ts +++ b/components/tree/__tests__/demo-extend.test.ts @@ -1,3 +1,5 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] }); +extendTest('tree', { + skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx', 'directory-debug.tsx'], +}); diff --git a/components/tree/__tests__/demo.test.ts b/components/tree/__tests__/demo.test.ts index 9d0466c44d..4a85b5f156 100644 --- a/components/tree/__tests__/demo.test.ts +++ b/components/tree/__tests__/demo.test.ts @@ -1,3 +1,5 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] }); +demoTest('tree', { + skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx', 'directory-debug.tsx'], +}); diff --git a/components/tree/demo/directory-debug.md b/components/tree/demo/directory-debug.md new file mode 100644 index 0000000000..5fccd6311a --- /dev/null +++ b/components/tree/demo/directory-debug.md @@ -0,0 +1,7 @@ +## zh-CN + +调试 [#51210](https://github.com/ant-design/ant-design/pull/51210), [#51448](https://github.com/ant-design/ant-design/pull/51448#issuecomment-2449144872) + +## en-US + +Debugging [#51210](https://github.com/ant-design/ant-design/pull/51210), [#51448](https://github.com/ant-design/ant-design/pull/51448#issuecomment-2449144872) diff --git a/components/tree/demo/directory-debug.tsx b/components/tree/demo/directory-debug.tsx new file mode 100644 index 0000000000..24182ae9ff --- /dev/null +++ b/components/tree/demo/directory-debug.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { Flex, Tree } from 'antd'; +import type { GetProps, TreeDataNode } from 'antd'; + +const { DirectoryTree } = Tree; + +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: 'parent 1', + key: '0-1', + children: [ + { title: 'leaf 1-0', key: '0-1-0', isLeaf: true }, + { title: 'leaf 1-1', key: '0-1-1', isLeaf: true }, + ], + }, +]; + +const sharedProps: GetProps = { + treeData, + defaultExpandAll: true, + onSelect: (keys, info) => { + console.log('Trigger Select', keys, info); + }, + onExpand: (keys, info) => { + console.log('Trigger Expand', keys, info); + }, +}; + +const DemoOne = () => ; + +const DemoTwo = () => ; + +const DemoThree = () => ( + +); + +const BasicDemo = () => ; + +const NormalDemo = () => ; + +const NormalCheckDemo = () => ; + +const NormalDragDemo = () => ; + +const App = () => ( + + + + + + + + + +); + +export default App; diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index f677738e6d..f3a40d0543 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -24,6 +24,7 @@ Almost anything can be represented in a tree structure. Examples include directo Tree with line Customize Icon directory +Directory Debug Customize collapse/expand icon Virtual scroll Drag Debug diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 35d90e40e5..df9cdb2b86 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -25,6 +25,7 @@ demo: 连接线 自定义图标 目录 +目录 Debug 自定义展开/折叠图标 虚拟滚动 Drag Debug diff --git a/components/tree/style/directory.ts b/components/tree/style/directory.ts index fd099f6861..a8ee02b592 100644 --- a/components/tree/style/directory.ts +++ b/components/tree/style/directory.ts @@ -38,15 +38,14 @@ export const genDirectoryStyle = ({ }, }, - [`${treeCls}-switcher`]: { - marginInlineEnd: 0, + [`${treeCls}-switcher, ${treeCls}-checkbox, ${treeCls}-draggable-icon`]: { + zIndex: 1, }, // ============= Selected ============= '&-selected': { [`${treeCls}-switcher, ${treeCls}-draggable-icon`]: { color: directoryNodeSelectedColor, - zIndex: 1, }, // >>> Title diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts index 9f0b350b8e..eac80ab307 100644 --- a/components/tree/style/index.ts +++ b/components/tree/style/index.ts @@ -120,7 +120,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => nodeHoverBg, colorTextQuaternary, } = token; - const treeCheckBoxMarginHorizontal = token.marginXXS; return { [treeCls]: { @@ -253,6 +252,14 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => visibility: 'hidden', }, + // Switcher / Checkbox + [`${treeCls}-switcher, ${treeCls}-checkbox`]: { + marginInlineEnd: token + .calc(token.calc(titleHeight).sub(token.controlInteractiveSize)) + .div(2) + .equal(), + }, + // >>> Switcher [`${treeCls}-switcher`]: { ...getSwitchStyle(prefixCls, token), @@ -260,15 +267,10 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => flex: 'none', alignSelf: 'stretch', width: titleHeight, - margin: 0, textAlign: 'center', cursor: 'pointer', userSelect: 'none', transition: `all ${token.motionDurationSlow}`, - marginInlineEnd: token - .calc(token.calc(titleHeight).sub(token.controlInteractiveSize)) - .div(2) - .equal(), '&-noop': { cursor: 'unset', @@ -329,14 +331,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => }, }, - // >>> Checkbox - [`${treeCls}-checkbox`]: { - top: 'initial', - marginInlineEnd: treeCheckBoxMarginHorizontal, - alignSelf: 'flex-start', - marginTop: token.marginXXS, - }, - // >>> Title // add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span` [`${treeCls}-node-content-wrapper`]: {