Close menu on drag in primary menu

I've tested it. Works fine. I see other js errors in console. But seems unrelated.

This isn't the exact interaction I was thinking for the sidebar. The interaction pattern I was thinking was that we close the component menu after component has been added. This is what Figma and most page builders are doing today. This is because the most likely task after dragging the component in would be for the user to fill in content, and to adjust the styles.

This is because the most likely task after dragging the component in would be for the user to fill in content, and to adjust the styles.

I don't agree with this. While I don't think we can know this for sure either way, I want to suggest an alternative user flow that would be more logical to me if I was laying out a page. I think it's very possible (likely even) that both use cases are valid and very different depending on the persona using the page layout.

I think it's very likely that someone will want to drag on multiple components/sections one after the other to "block out" their layout before going in and making specific tweaks to the content and design. Picture rapidly dropping on a Hero component followed by some sections and then putting some cards into those sections in quick succession to get an idea of how a page will be structured before actually writing the specific copy into those components. Adding copy may even be someone else's job - e.g a designer doing the layout with lorem ipsum text, later being updated by a copywriter!

Any issue/MR changing the UI must include at least one screenshot (preferably screencast/GIF) to make it easier to scan and follow along for those interested but not writing XB code 🙏

I think it's very likely that someone will want to drag on multiple components/sections

This (#6) sounds better than closing a menu immediately after dragging in a single component (#6) … so @lauriii, why aren't you worried about annoying the user with this? 🤔

Discussed this with @Renee Lund, the UX designer from Acquia UX working on this.

We haven't done research with users on this, so this is based on our hypothesis which is informed by competitive analysis. We would be doing UX testing later which may result in us needing to revisit decisions like this.

There are two possible user flows:

Flow 1:

1. Add component/element to the page
2. Modify component/element contents/props
3. Add another component/element

Flow 2:

1. Add component/element to the page
2. Add another component/element
3. Modify component/element contents/props for component 1
4. Modify component/element contents/props for component 2

Our hypothesis is that the XB users would be following the flow 1 most of the time, and the UI is currently designed for that. This also seems to be the pattern that majority of different platforms are taking. If we find out that flow 2 is the more common scenario, we'd have to design for that and that may have implications to the design outside of this issue.

Aha — this closes only the deepest level, the menu that lists Default components and Custom components remains open. I thought #10 meant the entire thing should be closed? 🤔

Asking @lauriii to confirm.

Yes, the whole menu should close on drag.

Per #21.

Looking good! Did my best to review this, but I think it'd be good for @jessebaker to sign off on this. (He's already awake, Ben is not yet.)

Left some comments on the MR

@hooroomoo Can you please update that issue's summary then and once you've done that remove @larowlan's Needs followup tag from this issue? 🙏

Thank you! :)