Carbon: Tab/ProgressIndicator items has max-width specified even when space is available

[prince737]

What package(s) are you using?

"carbon-components": "10.9.0",
"carbon-components-react": "7.9.0"

through Cloud Pal: 1.40.8

Detailed description

Tab/ProgressIndicator component has max-width specified for its items, which makes it difficult for the user to know what the entire string is. It is worse in multilingual environments (eg: German). Ideally, it should show the entire title or at least provide a way for the user to view the entire title. Our tabs are two words in total, it makes sense and is reasonable to support this

Component affected

Tabs, ProgressIndicator

What did you expect to happen? What happened instead? What would you like to
Entire tab/progress indicator name to be visible when the width is available

Additional information

• Screenshots or code
  

[emyarod]

will need design input on what the default tab widths should be, but a temp fix would be to add width: 100% to .bx--tabs__nav-link (not sure if this is the same selector for v9)

[prince737]

Just noticed the same behaviour with ProgressIndicator component. Updated the issue accordingly.

[aagonzales]

In the new design language each tab (or section of progress indicator) is an equal width with 16px padding on the left and right. To incorporate more room for text the tabs need to be made wider.

The progress indicator can be stretched to fill a wider area and that will help give the text more room to display.

[prince737]

@aagonzales Got it. But the question is will carbon support wider tabs, or we need to override?

[aagonzales]

What if we have the min-width set at 120 but enabled tabs to grow larger as long as each tab in the set have equal widths? I have no clue how to technically achieve this. @emyarod do you have any ideas?

[alon24]

I too in appid dashboard suffer from this, we need this to handle our informative tab/progress bar labels.
the idea to have the same length as the longest is fine by me.

We should also remember that in localizations, often text changes length and so this need to be responsive, we cannot account for text size in advance

[emyarod]

What if we have the min-width set at 120 but enabled tabs to grow larger as long as each tab in the set have equal widths?

@aagonzales this is feasible, but how strongly are we tied to the requirement that all tabs are the same width?

[alon24]

why do you realy need all tabs to be the same size? i mean just fit content and size it,.

[aagonzales]

@alon24 It is an aesthetic choice made for brand vision. It helps with alignment and layout structure. We want to keep equal width tabs.

Its not an uncommon pattern. Chrome browser tabs do this (i'm looking at them right now).

[alon24]

Any thoughts about when this will be fixed, we can't realy deploy to production like this.

[henshkedi]

@aagonzales The case of Chrome and ours is different.
Chrome is about navigating between different sites. So the focus is on one site.
In our case, it is a control of the same screen so the tabs exchange different views for the same object.
I think you want to compare it with a Google product. you should compare it to the results page (different view for the same thing).

using Polsky language emphasize that

[aagonzales]

This was an aesthetic band decision that was made. We'd have to consult to @mjabbink about changing it but the tabs being equal sizes is the original intended design aesthetic. The equal sizing offers alignment on the page and create an equal visual weight among tabs, this is especially important for the container tabs. I think the style of our tabs being left alignment and not centered like the google product example also benefits from the equal tab sizes.

[aagonzales]

For now we can do what I proposed in this comment: https://github.com/carbon-design-system/carbon/issues/4973#issuecomment-574359895. And set a min-width but no max width. That is all I'm comfortable with changing at the moment.

[alon24]

@aagonzales will this allow me to put texts or varient sizes? meaning if internalization text is bigger it will show ok?
If so please do this, we are waiting

[aagonzales]

The size of the tabs should be based off the longest string of text.

[aagonzales]

@alon24 You are welcomed to make a PR that fixes this if you are waiting. Otherwise when it gets done is up to our team. Carbon should not be a blocker for you. If you need to build something custom in the mean time then you are welcomed to.