Skip to content
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] TreeItem2DragAndDropOverlay has no border/background style #15017

Closed
kzimins-arvatosystems opened this issue Oct 18, 2024 · 10 comments · Fixed by #15042
Closed

[TreeView] TreeItem2DragAndDropOverlay has no border/background style #15017

kzimins-arvatosystems opened this issue Oct 18, 2024 · 10 comments · Fixed by #15042
Assignees
Labels
bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@kzimins-arvatosystems
Copy link

kzimins-arvatosystems commented Oct 18, 2024

Steps to reproduce

Related to #14969

css definition of border style is wrong
image
correct rgba syntax is rgba(red, green, blue, alpha)
image

Same for action make-child
image

Current behavior

css is wrong

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: treeview, cssvars
Order ID: 80084

@kzimins-arvatosystems kzimins-arvatosystems added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 18, 2024
@kzimins-arvatosystems kzimins-arvatosystems changed the title TreeItem2DragAndDropOverlay has no border TreeItem2DragAndDropOverlay has no border/background style Oct 18, 2024
@github-actions github-actions bot added the support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ label Oct 18, 2024
@LukasTy LukasTy self-assigned this Oct 18, 2024
@LukasTy
Copy link
Member

LukasTy commented Oct 18, 2024

Thank you for opening this issue @kzimins-arvatosystems 🙏
It is our oversight. 🙈
For any rgba calls only <color>Channel can be used.

@LukasTy LukasTy added component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 18, 2024
@LukasTy LukasTy changed the title TreeItem2DragAndDropOverlay has no border/background style [TreeView] TreeItem2DragAndDropOverlay has no border/background style Oct 18, 2024
@wangkailang
Copy link
Contributor

wangkailang commented Oct 21, 2024

It seems to be an issue with the use of RGB variables. The format for RGB in CSS variables should be three comma-separated numbers, representing the red, green, and blue channels (values ranging from 0 to 255), such as 0, 72, 118.
ex:
image
rgb(var(--dc01-rgb) / 0.15) is valid

Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@kzimins-arvatosystems How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@kzimins-arvatosystems
Copy link
Author

kzimins-arvatosystems commented Oct 25, 2024

@LukasTy Hi!

After today's release, I'm still experiencing issues with styles. rgba(hex / opacity) and rgba(rgb / opacity) doesn't seem to be valid syntax, probably must be rgb, so right syntax may be:
image

but got
image
image

Also, TreeItem2DragAndDropOverlay is not exported from the pro package. I'm importing everything else from the pro package, so could this be the cause of the issue?

image

@LukasTy
Copy link
Member

LukasTy commented Oct 28, 2024

Hello @kzimins-arvatosystems
I'm sorry to hear you are still experiencing issues with this. 🙈
That's my bad, I applied the fix on the master branch but forgot to cherry-pick it to the current stable release.
Is it blocking you, or can you wait for the next release this Thursday? 🤔

Also, TreeItem2DragAndDropOverlay is not exported from the pro package. I'm importing everything else from the pro package, so could this be the cause of the issue?

It is re-exported from @mui/x-tree-view-pro root. We do not re-create the folder structure on the commercial packages to re-export files from community package with the same path.
The import path shouldn't change anything, but feel free to import it from the pro package with the following line:

import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view-pro';

@kzimins-arvatosystems
Copy link
Author

Is it blocking you, or can you wait for the next release this Thursday? 🤔

No problem, I can wait, thanks for the reply!

import { TreeItem2DragAndDropOverlay } from '@mui/x-tree-view-pro';

I tried, but got

image
Using latest version
image

@LukasTy
Copy link
Member

LukasTy commented Oct 28, 2024

I tried, but got

Once again, I'm sorry for causing confusion in this transition state, where we are preparing the master branch for v8.
The renamed TreeItemDragAndDropOverlay is exported from @mui/x-tree-view-pro:

export * from '@mui/x-tree-view/TreeItemDragAndDropOverlay';

@flaviendelangle have we forgotten to export TreeItem2DrangAndDropOverlay from the pro package?
Should we fix it for v7? 🤔

@flaviendelangle
Copy link
Member

Sure
We need to fix 1-2 things regarding doc gen but it's totally doable

@LukasTy
Copy link
Member

LukasTy commented Oct 28, 2024

We need to fix 1-2 things regarding doc gen but it's totally doable

Will you take up this effort?
Or should I do it?

@flaviendelangle
Copy link
Member

I can take care of it if you want

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants