Enhancement tab component padding

[marion-bruells]

Title line template:

Enhancement tab component padding

What package(s) are you using?

carbon-components-react

Detailed description

The current tab component doesn't adjust the spacing according to the text. Instead, the tabs are rendered with unequal width. When we have short or long names in the tabs this can lead to unequal spacing. Especially in foreign languages (Chinese,...)
Here is an example:
https://github.ibm.com/wdp-gov/tracker/issues/37720

Unequal spacing in tabs doesn’t look professional for customers. Equal spacing can improve legibility and helps customers better to navigate. We always try to use short and precise labels, but we have to consider languages that can require more characters and less characters. We want to avoid overrides or custom CSS to the tab component and hope this can be addressed and fixed by Carbon so more teams can benefit from.

Is this issue related to a specific component?
Tabs

What did you expect to happen? What happened instead? What would you like to see changed?
We did different explorations and wanted to allow the users to have equal spacing (48 px) to the left of the text.
Our proposal is to use 48 px always as fix padding between name and next tab – regardless if it is a short or long name.

Currently our development can only solve this by custom CSS which shouldn’t be the case and we want to avoid overrides.

What browser are you working in?
Firefox/Chrome

What version of the Carbon Design System are you using?
v10.27.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
Offering: Watson Knowledge Catalog
Note: This issue is reflected in many services in Cloud Pak for Data and brought up by other teams in the platform too.
It would be great to get this fixed for one of our upcoming patches/release.
February update GA: 02/16/21
March update GA: 03/16/21

[marion-bruells]

Found this related issue: #5783

[emyarod]

here are some other related tickets on this #4973 #6903

until we are able to drop support for IE and legacy Edge we cannot implement this at the Carbon level. but if your application does not need to support these browsers, this can be resolved by using width: fit-content

[andreancardona]

@johnbister @thyhmdo hey you two!

Not sure if this is the best way to get yall's attention - but wanted a design / visual review on this and input before moving forward. Thank you!

[thyhmdo]

Taking a look at this. Thanks @andreancardona

[johnbister]

hey! @andreancardona

From my understanding, Carbon is pretty set on tabs having equal widths. If setting a min-width and allowing tabs to grow as large as the the longest string of text (but keeping all tab widths equal) isn’t a viable solution, then I think this would have to be built custom.

Is that still the stance Carbon is taking @aagonzales ?

[thyhmdo]

Talked with Lauren. So John is correct. All tab lengths in the group should follow the length of the tab with the longest word. We don't recommend and can't support that because it's against our guidance. However, the team should feel free to customize or override things on their end.

[thyhmdo]

If the translation becomes too long, the text can have the ellipses (and the tooltip content to support that missing text) but the tabs should remain equal in length..

[marion-bruells]

Thanks for all your responses. Just to summarise and make sure I understand correctly I sketched this again:

The above example is how Carbon recommends to use tabs. The one below is our proposal.
Are you saying our proposal (following equal padding) is not what Carbon recommends? Can you explain a bit why Carbon decided for the same length of tabs? Usually equal spacing between text elements brings more clarity and supports legibility rather than having unequal spacings between elements – which might create some noise. I would like to avoid overrides for our developers - so if this is what Carbon recommends, we will follow. I just want to understand the reasoning for this intent better.

[andreancardona]

@thyhmdo @johnbister Thank you both so much!!

@marion-bruells going to close this issue for now. :)

[thyhmdo]

thanks @marion-bruells There are a few things here.

1. You probably tried your best with the labels but some of them exceed the amount of words we suggested in our guidance (no more than two words).
2. The right padding should also be 16px, the code and design kit should have the 16px padding on both sides. This probably helps with the huge padding you have on the right..
   
3. As for having equal length tabs, this is a principle derived by the design language which we inherited with our v10 components. Mike Abbink can help if you're still not satisfied with the answer.

Hope this helps.

[thyhmdo]

@marion-bruells another case which we don't adjust the size is button. components stay consistent with that rule. If there is a group of buttons, each button has an equal size based off of the button with the longest word.

[marion-bruells]

Thanks so much for explaining and also guiding on the 16 px rather than 48 px :)
Seeing this in context of the container tabs and buttons helps to understand the decision. Having unequal container tab sizes wouldn’t be ideal and look ”wrong” in the UI. I understand that you wanted to have consistent behaviour here for the tab component and leverage this principle. 👍

I still think that the default tabs don’t have this “optical border” like containers or buttons have. The unequal white space between text is visually more dominant, because the tab line below has less visual contrast. But I see your point of consistency.

Would it be an option to give teams a choice only for the default tabs? Rather than doing overrides?
Option 1: Equal tab length (as default)
Option 2: Equal padding (16px)

We don’t want to have overrides and rather want to stick what Carbon has out-of-the box. If you think consistency is more important here, I can understand and we go with that. But I think you Carbon would do many teams a favour providing that 2nd option in the component.

[marion-bruells]

I also found this example on the Carbon website which shows resized tabs:
https://www.carbondesignsystem.com/guidelines/motion/overview

[thyhmdo]

Yes, the consistency is important to us. You can override it for now. We'd definitely look into it when we update the guidance for Tabs, thanks for the feedback!