Skip to main content

Tab Migration Guide

Migrating to v13.0.0+​

Overview​

In v13 Chroma has update the <Tab /> component to use the MUI library. This change was made to improve the accessibility and usability of the tab component. In order to achieve this it was necessary to change the API of the component. This guide will help you migrate your code to the new version of the <Tab /> component.

Changes​

The current Tab API is as follows:

<Tab initial="tab1" data-testid="tabDefault" id="tabDefault">
  <TabItem
    id="tabItem1"
    data-testid="tabItem1"
    onShow={() => console.log("Default tab 1 shown")}
    onHide={() => console.log("Default tab 1 hidden")}
    tab={{
      component: <>Tab 1</>,
      name: "tab1",
    }}
    content={{
      component: <p>Tab one content</p>,
    }}
  />
</Tab>

The new API is as follows:

<Tab
  ariaLabel="Simple tabs example"
  data-testid="tabDefault"
  id="my tabs"
  initial="1"
>
  <TabItem
    data-testid="tabItem1"
    onShow={() => console.log("Default tab 1 shown")}
    onHide={() => console.log("Default tab 1 hidden")}
    label="Car Insurance"
  >
    <p>Imagine driving with complete confidence, knowing that you're protected against any unexpected bumps in the road. With comprehensive car insurance, you get top-notch coverage that ensures your vehicle is safeguarded from accidents, theft, and more.</p>
  </TabItem>
</Tab>

In order to simplify the API from the original MUI version the component has been consolidated into two components, Tab and TabItem as per old component however the interface is much cleaner and easier to understand. The tab prop has been replaced with a label prop. The content prop has been removed and the content is now passed as children to the TabItem component.

Block prop replacement​

In the previous version of the component the block prop was used to control the layout of the tabs on mobile to a stacked view. This prop has been removed in the new version. The tabs are now always displayed in a horizontal layout. If you need to display the tabs specifically for a mobile viewport there is a new variant prop which, when set to scrollable will allow you to scroll the tabs horizontally.