Highlight slot with a border where component/section is about to be placed

Before

After

Overall looks good to me.Now it makes the UX for dragging much cleaner.
Can you please update the issue summary and attach the screenshots for before and after in the User interface changes section?

We could probably add further clarity by highlighting the slot where the component / section would be added.

This might be something to consider in a follow-up but I'm wondering if we could be opinionated about section templates and as a UX enhancement, only allow adding them to the main level. After the section has been added to the page, the user can drag the components to any shape they wish. Thoughts?

I also realized that I'm not seeing this striping on my environment at all; instead I'm seeing a button with the name of the component 🤔

RE #8 Have you tried a cache clear since checking out this branch? I think that is what I did to resolve the same issue.

In Site Studio's Visual Page Builder the target slot (or Dropzone to use their terminology) is highlighted with a dotted border when you are dragging and hovering over the slot. I think we should have something similar.

+1 for #10.

Clearing caches did resolve the issue from #8 👍

I opened #3469895: Retain the space consumed by a component when it's being dragged which is a related issue. We don't need to solve for that here but it's probably good to keep that goal in mind.

RE #7

I'm wondering if we could be opinionated about section templates and as a UX enhancement, only allow adding them to the main level.

I don't think this would be beneficial for two reasons

1) If the issue is that it is difficult with the current UI to accurately place the thing you are drag/dropping into nested slots then we will still need to solve that problem for components so just preventing sections from working in that way would just be a sticky plaster
2) Ultimately I don't think we need to restrict users in that way - As an example, a given user's particular page layout may be based around having a large layout component that has a slot for all the page content and they would want to place their sections inside that larger component.

Tested the MR from @DanielVeza manually and it seems like it's implements the border around slots from #7 which is a nice improvement. Thank you!! 🙏 We could open a follow-up issue to show the label of the slot.

Opened #3470973: Retain the placement of components within the preview when inserting a component which would help further improve this.

FYI this is a de facto blocker to #3471085, because this likely would solve that bug report too, per @lauriii at #3471085-6: Adding a component with slots does not register the slots as children.

#3470973: Retain the placement of components within the preview when inserting a component landed, let's land this next? 😄

Let's land #3472121: Mitigate class pollution from injected CSS first and adjust the CSS class names accordingly.

#3472121: Mitigate class pollution from injected CSS is in.

The MR is now ready for review. I adjusted the styling a bit to address a few things:

1. Use an outline instead of a border so components are not moving due to the size of outline;
2. Set a 100% height for the slots;
3. Increase the height of the ghost element — the blue line showing where something will be placed — and add some horizontal space to play better with the slot outline visually;
4. Introduce CSS variables to keep design tokens standardized.

Played around with this using some column components we created awhile ago. It seems to do what is intended (see video).

https://youtu.be/HtkEa8fp1kI

Components move out of the slots but that is due to this one I guess: #3471085: Adding a component with slots does not register the slots as children

Thanks for taking the time to test the changes, Kristen! And yes, that issue you linked to is going to address that problem very soon!

Just waiting for a final 👍🏻 from @jessebaker.

🎉 Merged!

Just tested with latest changes and it looks good, thanks!