Tab group is displaying incorrect CSS

[alexwbbr]

Following the example from the tabgroup stotybook docs: https://main--6069a6f47f4b9f002171f8e1.chromatic.com/?path=/docs/dcxlibrary-tabs-documentation--docs, which also has some mistakes such as disabledClassTab and onClick not being properties, once this is rendered I am noticing two instances of "tab-class-name" on the tabs element.

I think this is coming from the Tab component className property.

follow this steps to create your branch:

git checkout release/1.0.0
git pull
git checkout -b 'but/tab-documentation'

[daniele-zurico]

in the example docs:

<TabGroup
  activeTabClassName="tab-active-class"
  id="tab-label-id"
  activeKey="tab label"
  disabledClassTab="disabled-class-name"   <----
  className="class-name"
  containerClassName="container-class-name"
  contentClassName="content-class-name"
  tabClassName="tab-class-name" <----
  onClick={onChangeHandler}  <----
>
  <Tab
    label="tab label"
    eventKey="tab-id"
    disabled={false}
    className="tab-class-name"
  >
    This the content for tab
  </Tab>
</TabGroup>

to:

<TabGroup
  activeTabClassName="tab-active-class"
  id="tab-label-id"
  activeKey="tab label"
  disabledClassName ="disabled-class-name"   <----
  className="class-name"
  containerClassName="container-class-name"
  contentClassName="content-class-name"
  tabClassName="common-tab-class" <----
  onSelect ={onChangeHandler}  <----
>
  <Tab
    label="tab label"
    eventKey="tab-id"
    disabled={false}
    className="tab-class-name"
  >
    This the content for tab
  </Tab>
</TabGroup>

[daniele-zurico]

closed by #569