From f946a39be4b58978c7c11ccc55ffc0ec3d3eab3e Mon Sep 17 00:00:00 2001 From: Kilian Date: Tue, 15 Oct 2024 15:28:35 +0800 Subject: [PATCH 1/6] [TreeView] Alpha not support css variables Signed-off-by: Kilian --- .../TreeItem2DragAndDropOverlay.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 52294d0cb180..4075ece74e87 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -24,16 +24,16 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', borderRadius: theme.shape.borderRadius, - backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15), + backgroundColor: alpha(theme.palette.primary.dark, 0.15), }, }, { props: { action: 'reorder-above' }, style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', - borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`, + borderTop: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6), + borderTopColor: alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -41,9 +41,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { props: { action: 'reorder-below' }, style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', - borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`, + borderBottom: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6), + borderBottomColor: alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -52,9 +52,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any, - borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`, + borderBottom: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6), + borderBottomColor: alpha(theme.palette.grey[900], 0.6), }), }, }, From 582212081852925a4423444807cc70c0f355ca0f Mon Sep 17 00:00:00 2001 From: wangkailang Date: Tue, 15 Oct 2024 16:11:35 +0800 Subject: [PATCH 2/6] [TreeView] Support vars --- .../TreeItem2DragAndDropOverlay.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 4075ece74e87..397e30042aad 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -24,16 +24,20 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', borderRadius: theme.shape.borderRadius, - backgroundColor: alpha(theme.palette.primary.dark, 0.15), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.primary.dark} / ${0.15}` + : alpha(theme.palette.primary.dark, 0.15), }, }, { props: { action: 'reorder-above' }, style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', - borderTop: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, + borderTop: theme.vars + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}` + : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderTopColor: alpha(theme.palette.grey[100], 0.6), + borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6}` : alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -41,9 +45,11 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { props: { action: 'reorder-below' }, style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', - borderBottom: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, + borderBottom: theme.vars + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}` + : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: alpha(theme.palette.grey[100], 0.6), + borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6}` : alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -52,9 +58,11 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any, - borderBottom: `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, + borderBottom: theme.vars + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}` + : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: alpha(theme.palette.grey[900], 0.6), + borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[900]} / ${0.6}` : alpha(theme.palette.grey[900], 0.6), }), }, }, From 8b2d2133237f3db490209f123f87e5aee97c6b0b Mon Sep 17 00:00:00 2001 From: wangkailang Date: Wed, 16 Oct 2024 14:11:28 +0800 Subject: [PATCH 3/6] [TreeView] match rgba format --- .../TreeItem2DragAndDropOverlay.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 397e30042aad..6e9541fc7ce5 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -25,7 +25,7 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', borderRadius: theme.shape.borderRadius, backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.primary.dark} / ${0.15}` + ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15), }, }, @@ -34,10 +34,10 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', borderTop: theme.vars - ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}` + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6}` : alpha(theme.palette.grey[100], 0.6), + borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -46,10 +46,10 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { style: { marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))', borderBottom: theme.vars - ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}` + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6}` : alpha(theme.palette.grey[100], 0.6), + borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -59,10 +59,10 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any, borderBottom: theme.vars - ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}` + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}))` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[900]} / ${0.6}` : alpha(theme.palette.grey[900], 0.6), + borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[900]} / ${0.6})` : alpha(theme.palette.grey[900], 0.6), }), }, }, From f70e026d31d71ca00d277bb9d53af8982490cfea Mon Sep 17 00:00:00 2001 From: wangkailang Date: Wed, 16 Oct 2024 14:14:31 +0800 Subject: [PATCH 4/6] [TreeView] fix --- .../TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 6e9541fc7ce5..2ba8876abfca 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -59,7 +59,7 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any, borderBottom: theme.vars - ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6}))` + ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[900]} / ${0.6})` : alpha(theme.palette.grey[900], 0.6), From 75ff5854026cd371d0e0ad8a3005cfcb7f15eac9 Mon Sep 17 00:00:00 2001 From: Lukas Tyla Date: Wed, 16 Oct 2024 11:49:15 +0300 Subject: [PATCH 5/6] Update packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx Signed-off-by: Lukas Tyla --- .../TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 2ba8876abfca..3bb1dfaca505 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -62,7 +62,7 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[900]} / ${0.6})` : alpha(theme.palette.grey[900], 0.6), + borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6), }), }, }, From 6edb383efe6d521a12510f98f2828bc63f7d09b1 Mon Sep 17 00:00:00 2001 From: Lukas Tyla Date: Wed, 16 Oct 2024 13:00:57 +0300 Subject: [PATCH 6/6] Apply suggestions from code review Signed-off-by: Lukas Tyla --- .../TreeItem2DragAndDropOverlay.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx index 3bb1dfaca505..db551010137a 100644 --- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx +++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx @@ -37,7 +37,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6), + borderTopColor: theme.vars + ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` + : alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -49,7 +51,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6), + borderBottomColor: theme.vars + ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` + : alpha(theme.palette.grey[100], 0.6), }), }, }, @@ -62,7 +66,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', { ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`, ...theme.applyStyles('dark', { - borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6), + borderBottomColor: theme.vars + ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` + : alpha(theme.palette.grey[100], 0.6), }), }, },