Describe the issue. What is the expected and unexpected behavior?
Droppable(here) and Draggable (here) overwrites children classname and so the classname is being ignored.
Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
<DragDrop onDrop={onDrop}>
<Droppable hasNoWrapper>
<DataList className="rca-notifications-list" aria-label="draggable data list example" isCompact>
{notifications.map((notification) => (
<NotificationItem key={notification.id} id={notification.id} notification={notification} />
))}
</DataList>
</Droppable>
</DragDrop>
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug 🐛
Workaround - pass classname to Droppable/Draggable instead of the child.
<DragDrop onDrop={onDrop}>
- <Droppable hasNoWrapper>
+ <Droppable className="rca-notifications-list" hasNoWrapper>
- <DataList className="rca-notifications-list" aria-label="draggable data list example" isCompact>
+ <DataList aria-label="draggable data list example" isCompact>
{notifications.map((notification) => (
<NotificationItem key={notification.id} id={notification.id} notification={notification} />
))}
</DataList>
</Droppable>
</DragDrop>
What is your product and what release version are you targeting?
WEB-RCA-UI (internal Red Hat tool)
Describe the issue. What is the expected and unexpected behavior?
Droppable(here) andDraggable(here) overwrites childrenclassnameand so the classname is being ignored.Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug 🐛
Workaround - pass
classnameto Droppable/Draggable instead of the child.<DragDrop onDrop={onDrop}> - <Droppable hasNoWrapper> + <Droppable className="rca-notifications-list" hasNoWrapper> - <DataList className="rca-notifications-list" aria-label="draggable data list example" isCompact> + <DataList aria-label="draggable data list example" isCompact> {notifications.map((notification) => ( <NotificationItem key={notification.id} id={notification.id} notification={notification} /> ))} </DataList> </Droppable> </DragDrop>What is your product and what release version are you targeting?
WEB-RCA-UI (internal Red Hat tool)