Prop to control tablist container class

[codeasashu]

Environment

• Package version(s): 3.40.0
• Browser and OS versions: Brave v1.26.77, MacOS Big Sur 11.3

Feature request

Currently, I am limited to using Tabs components with only className prop, which only allows to
set the classes for parent container (containing both the list items and the panel containers).

I wish to be able to set classes for only the list container but not the panel containers.

Examples

<Tabs classNames="abc" tabListClasses="def ghi">
  <Tab className="my-tab-1" title="Tab 1" panel={<div>Panel 1</div>} />
  <Tab className="my-tab-2" title="Tab 2" panel={<div>Panel 2</div>} />
  <Tab className="my-tab-3" title="Tab 3" panel={<div>Panel 3</div>} />
</Tabs>

should be rendered as:

<div class="bp3-tabs abc">
  <div class="bp3-tab-list def ghi" role="tablist">
    <div class="bp3-tab-indicator-wrapper">..</div>
    <div class="bp3-tab my-tab-1"...></div>
    <div class="bp3-tab my-tab-2"...></div>
    <div class="bp3-tab my-tab-3"...></div>
  </div>
  <div class="bp3-tab-panel">...</div>
  <div class="bp3-tab-panel">...</div>
  <div class="bp3-tab-panel">...</div>
</div>

[adidahiya]

Why? Are you using this for styling? Can you instead use the selector:

.abc .bp3-tab-list { }

[codeasashu]

@adidahiya Because:

1. It's intuitive. It simply gives me more control over each element separately (For this reason, I am more inclined towards react-tabs.
2. I wouldn't have to bring in SASS/LESS variables, while I can simply set a class from a framework containing those
3. I would then have to learn a tons of css rules, keeping in mind I am not overwriting any others

[adidahiya]

Sure, but we also like to be prescriptive about certain parts of the design system, for consistency's sake. We don't want everything to be endlessly customizable. Every new component prop adds a maintenance burden.

Can you explain what kind of styling you're trying to achieve? What will you do with your custom class after you apply it to the tab list container?

[shriq011]

One of the use-case could be when we have to show a long list of tabs in a limited space, I would want the tabs list to be scrollable but the panel should not scroll along. for this i will have to change the css for .bp4-tab-list

[adidahiya]

You don't need a new prop to do this. Just style it with a descendant CSS selector like this: https://codesandbox.io/s/busy-faraday-nqdv6p?file=/src/app.css