carbon
carbon copied to clipboard
Sage
Tabs cannot be horizontally scrolled
Current behaviour
When I have a Tabs component with more tabs on it than can be fit in the horizontal space that I have on the page, they overflow the bounds of what they are placed in. This can cause smaller devices to get a horizontal scrollbar or the tabs overhang unlike all other components on the page.
Expected behaviour
Material UI scrollable tabs can be horizontally scrolled by arrows, or when using a touch screen device may be swiped to scroll through them. Ant Design tabs shows a ... button when there are more tabs than can be fit on the screen, which drops down a list of all the tabs which can be picked from and can be swiped to scroll through them when on a touch screen device.
Reproducible example
https://codesandbox.io/s/vigorous-hooks-p91q7?file=/src/index.js This doesn't help to illustrate the problem so well since I am only using short 5 characters long "Tab x" titles to the tabs, so you really have to reduce your screen fairly small for it to be a problem with 10 tabs. But in a real environment with longer tab titles and no wrapping, it can really start to chug up some horizontal space.
Your environment
| Software | Version(s) |
|---|---|
| carbon-react | all |
@harpalsingh - Is this a feature that UX would like to implement? If so, could UX provide designs please.
From the DS team: As far as I am aware this hasn't been requested by other products yet, so I'm afraid we can't advise on this as we haven't considered this topic yet. However it is possible that we will enhance Tabs for the rebrand, so please keep me in the loop with your research and conclusions.
@clairedenning can you provide more information about when you will consider this?
@clairedenning @harpalsingh are we okay with adding horizontal scroll to tabs or is this something we want to discourage? Looking at the DS docs there doesn't seem to be any guidance regarding this.
We have been looking at this recently and have a ticket coming up to investigate solutions. An alternative suggestion from a product designer is a tab labelled "More" on the right, with options appearing below when you click on it.
@benwilsonsage FYI - i know there's some SBS designers looking into this currently which could unblock this issue.
Hi @ljemmo, looking at the DS docs for Tab it looks like this is still not supported. Are you aware of any findings the SBS designers you mentioned were able to get to?
@Parsium i have a design from harpal now. We just need to review and implement in our figma library and ZH. The ticket number is FT-8.
