Drag & Drop X Tabs

[ThomThomson]

The Presentation team is building a tabs system for Dashboard. This will involve allowing dashboard authors to create, edit, and delete a collection of tabs.

One feature which is missing currently, and could help immensely with our UX is the ability for users to drag and drop to rearrange tabs. If we implement tabs without this feature, we may have to add a separate management flyout to allow the users to rearrange.

[elizabetdev]

Hi @ThomThomson,

Do you have any designs for this? Or is there any implementation of the tabs system for Dashboard that we can take a look at?

[ThomThomson]

Hi @miukimiu, there isn't an implementation quite yet, but we do have some designs that @andreadelrio put together in figma.

Screen.Recording.2022-07-19.at.1.14.23.PM.mov

Something to note that isn't completely reflected in this early design is that we'd like to have as much of the behaviour inline as possible. As in, the naming / editing of tabs, rearranging, deleting etc.

[elizabetdev]

Thanks, @ThomThomson I'll chat with @andreadelrio and we can see how we can support those inline and drag and drop features.

[chandlerprall]

EUI's drag&drop components are a thin wrapper on top of react-beautiful-dnd, which has some limitations for dragging interactive content like buttons and links.

Depending on design requirements, this may be implementable today. I threw a quick code sandbox together merging EUI's tabs & drag&drop->Interactive elements examples; I found that tabs with an href (renders as an anchor instead of button) are draggable without a custom handle, but the better pattern here is probably having the drag handle in all cases.

[elizabetdev]

Looks great @chandlerprall! 😍

@andreadelrio and @ThomThomson it would be great if you could then share your final design/implementation so we can consider adding to our Tabs docs as a complex pattern.

[chandlerprall]

Un-answered this as there are some accessibility issues to account for, I'll bring this up at the team sync tomorrow.

[daveyholler]

Just wanted to jump in here and provide some assistance on helping folks re-order their tabs. @ThomThomson would you be able to share your current designs and/or implementation of this?

[ThomThomson]

Hi @daveyholler, we actually don't have any current designs beyond what I shared back in July. The initiative to add Tabs to Dashboard has been postponed for the moment.

The code sandbox that @chandlerprall shows looks and works great for our use case, though I understand that there are some accessibility issues with that design.

In short, there is no urgency at the moment to get this draggable tabs system into Dashboards. The team will be in touch again if this becomes a priority again in the future.

[daveyholler]

Thanks for the update @ThomThomson. In an effort to keep our backlog groomed, I'm going to close this issue for the time being. Feel free to reopen in the future should the need arise.