Tabs do not seem to be getting the .react-tabs__tab class applied

[rohan-deshpande]

I upgraded recently and have found that tabs don't seem to be getting the .react-tabs__tab base class applied.

Like if I look at the code I can see that you're just concatenating --selected or --disabled to DEFAULT_CLASS but is this correct? Shouldn't you be adding a class?

const DEFAULT_CLASS = 'react-tabs__tab';

export default class Tab extends Component {
  static defaultProps = {
    className: DEFAULT_CLASS,
    disabledClassName: `${DEFAULT_CLASS}--disabled`,
    focus: false,
    id: null,
    panelId: null,
    selected: false,
    selectedClassName: `${DEFAULT_CLASS}--selected`,
  };
...

In the css

.react-tabs__tab {
  display: inline-block;
  border: 1px solid transparent;
  border-bottom: none;
  bottom: -1px;
  position: relative;
  list-style: none;
  padding: 6px 12px;
  cursor: pointer;
}

.react-tabs__tab--selected {
  background: #fff;
  border-color: #aaa;
  color: black;
  border-radius: 5px 5px 0 0;
}

If you don't add .react-tabs__tab--selected or .react-tabs__tab--disabled as an extra class, then none of the tabs will get .react-tabs__tab and the tab styling will not be applied.

Not sure if this is a mistake or if this is the intention?

Update: hmm I guess cx is supposed to be applying all of them?

        className={cx(className, {
          [selectedClassName]: selected,
          [disabledClassName]: disabled,
        })}

It doesn't seem to be happening for me though, here's an example of a rendered tab

<li class="tab-subtasks react-tabs__tab--selected" role="tab" id="react-tabs-0" aria-selected="true" aria-disabled="false" aria-controls="react-tabs-1" tabindex="0">
  <i class="fa fa-check-circle"></i> <span class="tab-title">Subtasks</span> 
</li>

class="tab-subtasks react-tabs__tab--selected" notice how the .react-tabs__tab default class is not being added

[rohan-deshpande]

Okay I know why this is happening, it's because I am providing a className to the component and therefore it's overriding DEFAULT_CLASS.

I find this a little strange, I think custom classes should be applied on top of the base class because you have the base class setting up the core styling for the component.

I want the base styling, but I also want to add a custom class. As a workaround, I'll add an array of classes and add the default class back in there.

[joepvl]

This is the intended behaviour and use. If you want custom classNames in addition to the default, you add the default ones manually. This is mainly to ensure it's easy to remove the default classNames if you're not using them, which is a common use case — before v2 this worked differently, and the original classes hanging around in the DOM even if you weren't using them was a common complaint.

I'm closing this now. Thanks for writing out your issue and posting your solution as well!

[rohan-deshpande]

Fair enough! That's cool, at least now I know why :)