diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx index 34e62772..c6cc4877 100644 --- a/lib/components/Tabs/TabTitle.tsx +++ b/lib/components/Tabs/TabTitle.tsx @@ -11,9 +11,10 @@ export type TabTitleProps = { className?: string; variant: 'primary' | 'secondary'; onChange?: () => void; + TitleFontSize?: React.ComponentProps['size']; }; -const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onChange }: TabTitleProps) => { +const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onChange, TitleFontSize }: TabTitleProps) => { const handleOnClick = useCallback((title: string) => { setSelectedTab(title); onChange?.(); @@ -32,7 +33,7 @@ const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,v onClick={()=>handleOnClick(title)} > {icon} - {title} + {title} ); }; diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx index ad1ce0c8..3621701b 100644 --- a/lib/components/Tabs/Tabs.tsx +++ b/lib/components/Tabs/Tabs.tsx @@ -1,5 +1,6 @@ import React, { ReactElement, useEffect, useState } from 'react'; import TabTitle, { TabTitleProps } from './TabTitle'; +import { Text } from '../Text'; import clsx from 'clsx'; import './Tabs.scss'; @@ -10,9 +11,10 @@ type TabsProps = { className?: string; variant?: 'primary' | 'secondary'; onChange?: (index: number) => void; + TitleFontSize?: React.ComponentProps['size']; }; -const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onChange }: TabsProps): JSX.Element => { +const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onChange, TitleFontSize }: TabsProps): JSX.Element => { const [selectedTab, setSelectedTab] = useState(activeTab || children[0].props.title); useEffect(() => { @@ -36,7 +38,7 @@ const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'pri variant={variant} onChange={()=>onChange?.(index)} className={item.props.className} - + TitleFontSize={TitleFontSize} /> ) })}