search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
290 stars 75 forks source link

List nested in shadow DOM loses drop zone styling #10636

Open nwhittaker opened 2 weeks ago

nwhittaker commented 2 weeks ago

Check existing issues

Actual Behavior

Given a drag-enabled <calcite-list> element nested inside a custom element's shadow DOM, drop zones appear unstyled when dragging a list item.

Screenshot 2024-10-28 at 1 18 22 PM

Expected Behavior

Drop zones retain their original styling.

Screenshot 2024-10-28 at 1 19 02 PM

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/bGXLQbN

Reproduction Steps

  1. Visit the code sample and drag an item in the list.
  2. Compare the drop zones with the expected vs. observed screen shots.

Reproduction Version

1.13.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Impact is towards how effectively a custom component can be encapsulated. When containing a draggable list, this issue essentially eliminates using the shadow DOM as an option when constructing the component. However, foregoing the shadow DOM increases the risk of id collisions and external styles/scripts negatively impacting the custom component's UI/UX.

Calcite package

Esri team

ArcGIS Field Apps

driskull commented 3 days ago

This is because the drag and drop styles are included in the global calcite.css file. Since that file isn't included in the shadow DOM of the shadowed component, they aren't displaying correctly.

The way to work around this would be to include the calcite.css file within that shadow DOM.

We can potentially move these styles to each component that needs them. It would require some testing. cc @jcfranco @geospatialem