Implement scrollable tabs in GlTabs
GlTabs
should automatically make tabs horizontally scrollable when there isn't enough space.
Background
The design system specifies that when there's not enough room, tabs should scroll:
Overflow indicator: Chevron that dynamically appears on either side of the tab group when the combined tab width is greater than the tab group width. Enables scrolling to view tabs that aren't immediately visible.
But at the moment, GlTabs
wraps tabs to new lines when there isn't enough horizontal space,
In !2067 (merged) a separate GlScrollableTabs
component was added which implemented the scrolling behaviour. There are a few problems with this:
- As a separate component, engineers need to choose to use it (and therefore comply with the design system), instead of just getting the behaviour automatically. (To date, that component is used in only one place: ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue#L161-169).
- Its scrolling mechanism has technical and UX issues:
- It triggers a bug in Safari such that the scrolling is either broken or not smooth: gitlab#369237 (closed)
- Touchpad gestures can't be used to scroll the tabs, which is surprising. Users have to press the scroll indicator buttons, or press the left/right keyboard keys to activate previous/next tabs.
- It's inconsistent with how HAML scroll tabs are implemented (see below).
Difference between GlScrollableTabs and HAML tabs
In HAML, scrollable tabs is implemented using app/assets/javascripts/layout_nav.js#L38. However, these two implementations function differently:
GlTabs
component
GitLab UI Can't scroll left and right, must click the arrows.
HAML version
Can scroll left and right.
Implementation plan
GlTabs
should be updated to automatically (or perhaps opt-in via prop?) make tabs horizontally scrollable when there isn't enough space. It should use the current HAML UX style of scrolling: a regular scrollable element that allows "natural" scrolling. The scrolling indicators can be clickable buttons that trigger scrolling, but it's not essential to be implemented that way.
See also
- Original issue: gitlab#351236 (moved) (see gitlab#351236 (comment 1056864757) for reason for move)
- Comment which led to this: gitlab#369237 (comment 1051982044).
- TODO: issue for deprecating/removing
GlScrollableTabs
- Related issue: gitlab#345699