-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TreeView] Fix alpha
usage with CSS variables
#14969
Conversation
Signed-off-by: Kilian <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for spotting this issue! 🙏
I've linked an example with an expected approach to such cases. 😉
@@ -24,26 +24,26 @@ 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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The correct solution can be found here:
mui-x/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx
Lines 84 to 86 in 3f12d3d
backgroundColor: theme.vars | |
? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` | |
: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), |
Would you be able to apply the necessary changes? 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
June noticed that in #14772, but nice to have it fixed independently 👌 |
alpha
usage with CSS variables
...theme.applyStyles('dark', { | ||
borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6), | ||
borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[900]} / ${0.6})` : alpha(theme.palette.grey[900], 0.6), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@flaviendelangle @noraleonte could you double check if this is not an error? 🤔
It seems that this should maybe use grey[100]
as in all other cases for the dark theme. 🤔
Now it does nothing... 🤷
packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
Outdated
Show resolved
Hide resolved
…DragAndDropOverlay.tsx Signed-off-by: Lukas Tyla <[email protected]>
Deploy preview: https://deploy-preview-14969--material-ui-x.netlify.app/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thank you for taking care of it. 👍
packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
Outdated
Show resolved
Hide resolved
packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
Outdated
Show resolved
Hide resolved
packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
Outdated
Show resolved
Hide resolved
Signed-off-by: Lukas Tyla <[email protected]>
Fixes #14349.