Tabs: Add scrollable option to TabList

[scottlovegrove]

🚀 Feature request

Motivation

I wanted to be able to have my tabs in a line, but scrollable when on mobile and there were enough to go off the screen. I didn't want them to wrap, but TabList offers no way of being able to do this.

Example

In the end, once I discovered that TabList wasn't actually required, I was able to to have the following inside my Tabs tag

<Box
    paddingY="xlarge"
    paddingLeft={{
        desktop: 'xlarge',
        mobile: 'medium',
    }}
    overflow="auto"
    style={{
        whiteSpace: 'nowrap',
        overflowY: 'hidden',
    }}
    className="tabs-scroller"
>
    {availableDates.map((date) => (
        <Tab id={String(date.index)} key={date.index}>
            {date.formattedDate}
        </Tab>
    ))}
</Box>

Video of what I'm looking for

Screen.Recording.2021-11-15.at.01.00.39.93.PM.mp4

[gnapse]

This is the current implementation of TabList:

    return (
        <ReakitTabList {...props} {...tabState}>
            <Inline space={space}>{children}</Inline>
        </ReakitTabList>
    )

First, I'm surprised by the fact that the TabList wrapper seems to not be needed according to your experience. I would have assumed that it exists in Reakit for some reason. But anyway.

Second, and more importantly, I agree that probably the tab list has to either (A) not have an opinion on how you lay out the tabs (that is, not render that Inline wrapper at all), or (B) have props that would control if you want the Inline behaviour vs. a scrollable behaviour like you want. Maybe there's even a (C) option: make it scrollable all the time when there's not enough horizontal space, removing the need for an extra prop.

There's a bit of a design question here. Maybe @frankieyan (who originally authored the tabs from our design team's specs) can chime in.

[frankieyan]

Not using the tablist "works", but you'll be missing this element:

I think having the tablist stretched to its parent's full width and allowing for overflow could be a common pattern, although horizontal scrolling always sucks for those without a trackpad or mouse that supports it easily. For tablists with a known number of tabs, I can see us preferring to wrap for smaller viewports as well.

I'd go with using a prop to add the scrollable behaviour so we can continue to limit the supported use cases here. We will still need a component to control the space between elements - maybe the scrollable option can be something that's added to <Inline>?

cc. @Doist/design-hero: it would be awesome if the product library could document these supported use cases in Figma. For example, we might want to limit the spacing options we allow between tabs, and specifically define when a set of tabs should wrap vs allowed to scroll.