diff --git a/src/components/Tabs/TabList.tsx b/src/components/Tabs/TabList.tsx index a194cc999..3a29912f2 100644 --- a/src/components/Tabs/TabList.tsx +++ b/src/components/Tabs/TabList.tsx @@ -1,19 +1,25 @@ import React from 'react'; +import classNames from 'classnames'; import { Tab } from './Tab'; + import './TabList.scss'; export type TabListProps = { tabs: Tab[]; onTabSelected(tabName: string): void; activePanel: string; + className?: string; }; -export const TabList: React.FC = ({ tabs, onTabSelected, activePanel }) => { - return ( -
- {tabs.map(tab => ( - - ))} -
- ); -}; +export const TabList: React.FC = ({ + tabs, + onTabSelected, + activePanel, + className +}) => ( +
+ {tabs.map(tab => ( + + ))} +
+); diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index f57c70fe2..5ef319723 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -10,6 +10,7 @@ export type TabsProps = React.HTMLAttributes & { onTabClicked?: (tabName: string) => void; defaultActiveTab?: string; activeTab?: string; + tabListClassName?: string; }; export const Tabs: React.FC = ({ @@ -18,6 +19,7 @@ export const Tabs: React.FC = ({ defaultActiveTab, activeTab, className, + tabListClassName, ...rest }) => { const [activePanel, setActivePanel] = useState(activeTab || defaultActiveTab || tabs[0].name); @@ -33,7 +35,12 @@ export const Tabs: React.FC = ({ return (
- +
);