@zendeskgarden/react-tabs

@zendeskgarden/react-tabs

This package includes several varieties of Tabs relating to the Garden Design System.

Installation

npm install @zendeskgarden/react-tabs

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

import React, { useState } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tabs } from '@zendeskgarden/react-tabs';

const Example = () => {
  const [selectedTab, setSelectedTab] = useState('tab-1');

  /**
   * Place a `ThemeProvider` at the root of your React application
   */
  return (
    <ThemeProvider>
      <Tabs selectedItem={selectedTab} onChange={setSelectedTab}>
        <Tabs.TabList>
          <Tabs.Tab item="tab-1">Tab 1</Tabs.Tab>
          <Tabs.Tab item="tab-2">Tab 2</Tabs.Tab>
          <Tabs.Tab disabled>Disabled Tab</Tabs.Tab>
          <Tabs.Tab item="tab-3">Tab 3</Tabs.Tab>
        </Tabs.TabList>
        <Tabs.TabPanel item="tab-1">Tab 1 content</Tabs.TabPanel>
        <Tabs.TabPanel item="tab-2">Tab 2 content</Tabs.TabPanel>
        <Tabs.TabPanel item="tab-3">Tab 3 content</Tabs.TabPanel>
      </Tabs>
    </ThemeProvider>
  );
};

Changelog

v9.0.0-next.4 (2024-03-07)

:boom: Breaking Change

• dropdowns
  • #1729 feat(dropdowns)!: replaces label prop with legend in OptGroup (@geotrev)

:rocket: New Feature

• tabs, tooltips
  • #1734 feat: adds subcomponent mapping to tabs and tooltips (@geotrev)
• chrome
  • #1736 feat(chrome): adds subcomponent mapping (@geotrev)
• tables
  • #1733 feat(tables): adds subcomponent mapping (@geotrev)

:bug: Bug Fix

• chrome
  • #1737 fix(chrome): use correct names in chrome subcomponents (@geotrev)
• datepickers, dropdowns, modals, tooltips
  • #1732 fix: adds rtl fix for floating ui implementations (@geotrev)

:seedling: Internal

• dropdowns
  • #1738 chore(next): updates from main (@jzempel)