Polaris-react: [Tabs] Tabs gets inaccessible when the first tab name is longer than its container size

[tleunen]

Issue summary

Long tab name, in a fitted mode or node, don't render well. Only the first tab is visible and it's impossible to access and click the other tabs.

Expected behavior

The tab name should probably use an ellipsis to show the name has been cut off while showing all other tabs (or at least the special ... dropdown).

In a fitted mode, because of its narrow space, having a way to render the tabs one below the other would also be appreciated. Especially when the number of tabs is hardcoded and the amount is very small (1-3 I'd say)

Actual behavior

Currently, only the first tab is available, and we cannot read its full content.

Steps to reproduce the problem

1. Create a <Tabs> component where the first tab has a very long content.

Reduced test case

https://codesandbox.io/s/y75qy17yj

Specifications

• Polaris version number: latest
• Browser: Chrome Version 72.0.3626.109 (Official Build) (64-bit)
• Operating System: OSX Mojave

[dpersing]

I've removed the accessibility-related labels since this issue affects all users by making the controls unavailable.

[ry5n]

This needs some design exploration to determine how to treat it. Long tab names should be avoided in favor of clear language, but long tab names shouldn’t break as they do now.

• Should each tab have max-width, or do we let them them overflow into menu?
• Should content in the tabs wrap? (2 lines should be the maximum, but this is hard to build on the web)

I can rule out stacked tabs—in this configuration they’re no longer recognizable as tabs. If you need tabs to work this way, an accordion might be a better approach. (An accordion can be built in Polaris with a set of <Collapsible> components.)

[tleunen]

Yup, the stackable approach was just an idea to solve the issue, but I understand your point.

The idea here is to find a way to render the tabs correctly in a narrow space. Let's say you have a 300px column in which you want 2 or 3 tabs. They might render well in most cases, in English, French, Spanish. But what about German which usually have way longer names? So even if I agree that tab name should usually be concise. It's not always easy to control this in foreign languages.

I also don't think using a DisclosureTab in this case would be a good idea for a narrow container. But I like the idea of having the name on 2 lines.
How would max-width work when the Tabs are fitted?

[ry5n]

The idea here is to find a way to render the tabs correctly in a narrow space

Exactly; it shouldn’t break with languages that tend to have longer strings. On the other hand, there’s only so much the component can do. Wrapping to 2 lines makes a lot of sense, but wrapping with an ellipsis is notoriously difficult in CSS, so we might need to compromise. If we have to compromise, I’m OK with simply fixing the existing behavior (rolling up any tabs that don’t fit into the disclosure menu)—even if it’s not great in German.

max-width would have to be ignored when fitted is on.

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

[chloerice]

The UX of the tabs component will be changing in the coming months to scroll instead of roll up into a popover. I'm reopening this since it is still an issue until the design is updated.

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.