From 71432fa18eec4b7eab544d68a54bcf67bce3a885 Mon Sep 17 00:00:00 2001 From: Josh Buchea Date: Mon, 28 Apr 2025 09:40:46 -1000 Subject: [PATCH 1/3] add tab style prop --- src/components/Tabs/index.tsx | 62 +++++++++++++++++++---------------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index da80b5dca..16a8aa6a1 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { TabContext, TabList, TabPanel } from '@mui/lab'; -import { Box, Tab as MuiTab, useTheme } from '@mui/material'; +import { Box, Tab as MuiTab, SxProps, Theme, useTheme } from '@mui/material'; import { useDeviceInfo } from '../../utils'; import Icon from '../Icon/Icon'; import { IconName } from '../Icon/icons'; @@ -17,41 +17,45 @@ export type TabsProps = { tabs: Tab[]; onTabChange?: (tab: string) => void; activeTab?: string; + tabStyle?: SxProps; }; -const Tabs = ({ tabs, onTabChange, activeTab }: TabsProps): JSX.Element => { +const Tabs = ({ tabs, onTabChange, activeTab, tabStyle }: TabsProps): JSX.Element => { const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? ''); const theme = useTheme(); const { isMobile } = useDeviceInfo(); - const tabStyles = { - color: theme.palette.TwClrTxtSecondary as string, - fontSize: '16px', - fontWeight: 600, - lineHeight: '24px', - padding: theme.spacing(1, 2), - minHeight: theme.spacing(4.5), - textTransform: 'capitalize', - '&:hover': { - backgroundColor: theme.palette.TwClrBgHover as string, + const tabStyles = [ + { + color: theme.palette.TwClrTxtSecondary as string, + fontSize: '16px', + fontWeight: 600, + lineHeight: '24px', + padding: theme.spacing(1, 2), + minHeight: theme.spacing(4.5), + textTransform: 'capitalize', + '&:hover': { + backgroundColor: theme.palette.TwClrBgHover as string, + }, + '&.Mui-selected': { + color: theme.palette.TwClrTxtBrand as string, + }, + '&.MuiTab-labelIcon': { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + '& .MuiTab-iconWrapper': { + fill: theme.palette.TwClrIcnSecondary as string, + marginBottom: 0, + marginRight: theme.spacing(1), + }, + '&.Mui-selected .MuiTab-iconWrapper': { + fill: theme.palette.TwClrIcnBrand as string, + }, }, - '&.Mui-selected': { - color: theme.palette.TwClrTxtBrand as string, - }, - '&.MuiTab-labelIcon': { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - '& .MuiTab-iconWrapper': { - fill: theme.palette.TwClrIcnSecondary as string, - marginBottom: 0, - marginRight: theme.spacing(1), - }, - '&.Mui-selected .MuiTab-iconWrapper': { - fill: theme.palette.TwClrIcnBrand as string, - }, - }; + ...(Array.isArray(tabStyle) ? tabStyle : [tabStyle]), + ]; const tabHeaderProps = { borderBottom: 1, From a4212f200f345833322dc5b9629905983c01134a Mon Sep 17 00:00:00 2001 From: Josh Buchea Date: Mon, 28 Apr 2025 12:12:50 -1000 Subject: [PATCH 2/3] order props --- src/components/Tabs/index.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index 16a8aa6a1..38babfec6 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -6,21 +6,21 @@ import Icon from '../Icon/Icon'; import { IconName } from '../Icon/icons'; export type Tab = { + children: React.ReactNode; + disabled?: boolean; icon?: IconName; id: string; label: string; - children: React.ReactNode; - disabled?: boolean; }; export type TabsProps = { - tabs: Tab[]; - onTabChange?: (tab: string) => void; activeTab?: string; + onTabChange?: (tab: string) => void; + tabs: Tab[]; tabStyle?: SxProps; }; -const Tabs = ({ tabs, onTabChange, activeTab, tabStyle }: TabsProps): JSX.Element => { +const Tabs = ({ activeTab, onTabChange, tabs, tabStyle }: TabsProps): JSX.Element => { const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? ''); const theme = useTheme(); const { isMobile } = useDeviceInfo(); @@ -31,8 +31,8 @@ const Tabs = ({ tabs, onTabChange, activeTab, tabStyle }: TabsProps): JSX.Elemen fontSize: '16px', fontWeight: 600, lineHeight: '24px', - padding: theme.spacing(1, 2), minHeight: theme.spacing(4.5), + padding: theme.spacing(1, 2), textTransform: 'capitalize', '&:hover': { backgroundColor: theme.palette.TwClrBgHover as string, @@ -41,9 +41,9 @@ const Tabs = ({ tabs, onTabChange, activeTab, tabStyle }: TabsProps): JSX.Elemen color: theme.palette.TwClrTxtBrand as string, }, '&.MuiTab-labelIcon': { + alignItems: 'center', display: 'flex', flexDirection: 'row', - alignItems: 'center', }, '& .MuiTab-iconWrapper': { fill: theme.palette.TwClrIcnSecondary as string, @@ -86,30 +86,30 @@ const Tabs = ({ tabs, onTabChange, activeTab, tabStyle }: TabsProps): JSX.Elemen setTab(value)} + sx={{ minHeight: theme.spacing(4.5) }} TabIndicatorProps={{ style: { background: theme.palette.TwClrBgBrand, height: '4px', }, }} + variant='scrollable' > {tabs.map((tab, index) => ( : undefined} + key={index} label={tab.label} - value={tab.id} sx={tabStyles} - key={index} - disabled={tab.disabled} + value={tab.id} /> ))} {tabs.map((tab, index) => ( - + {tab.children} ))} From b3677192c5a5e2659bfe6dcf50fee74e86e2c32c Mon Sep 17 00:00:00 2001 From: Josh Buchea Date: Mon, 28 Apr 2025 12:13:31 -1000 Subject: [PATCH 3/3] order imports --- src/components/Tabs/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index 38babfec6..514dd8d35 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -1,6 +1,7 @@ -import React, { useEffect, useState } from 'react'; import { TabContext, TabList, TabPanel } from '@mui/lab'; import { Box, Tab as MuiTab, SxProps, Theme, useTheme } from '@mui/material'; +import React, { useEffect, useState } from 'react'; + import { useDeviceInfo } from '../../utils'; import Icon from '../Icon/Icon'; import { IconName } from '../Icon/icons';