proposal(tabs): automatic tab width

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>

[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.

[emyarod]

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