Carbon: proposal(tabs): automatic tab width

[metonym]

Summary

Permit me to propose an "auto tab width" property (false by default) that sets the width property of tab items to be "auto," instead of having a maximum width of 10rem.

Justification

The main use case is for using the Tabs component in a narrow column (i.e. 4 columns or fewer). In the screenshot below, the tabs are contained in "4 columns".

Auto tab width with Carbon grid overlaid using the Carbon devtools Chrome extension:

Desired UX and success metrics

This feature would work best with 3 or fewer tabs, or with tabs with short labels.

Desired UX would be to have an autoWidth prop in the React library:

<Tabs>
  <Tab autoWidth label="Tab item 1" />
  ...
</Tabs>

[emyarod]

some related discussion here https://github.com/carbon-design-system/carbon/issues/4973

[metonym]

@emyarod Interesting. So the aesthetic reason for fixed widths is horizontal alignment.

But for auto widths, the tabs can still be aligned on its left side.

I like the suggestion by @aagonzales of having the minimum tab width be determined by the longest tab name – and perhaps rounding up to the nearest mini unit/spacer.

[metonym]

I suppose that if fixed tab widths is a purposeful design decision, then Tabs should not be used in narrow columns?

[emyarod]

I think that conclusion is logical but cc @aagonzales for some additional insight into Tabs usage guidelines!

[asudoh]

Weighing in; IIRC the design decision was that "every tab should have the same width", instead of "every tab's width should be _n_ em". Given "every tab should have the same width" cannot be implemented for the width of arbitrary content, we set a specific width by default and let application override our style to set the width that accommodates their contents.