Skip to content

Commit 4dcfeeb

Browse files
buberddsbuberdds
authored
Merge pull request #2122 from oasisprotocol/mz/uil-tabs
Replace MUI tabs with Oasis UI Library component
2 parents a8d1ef4 + dddbc8e commit 4dcfeeb

8 files changed

Lines changed: 77 additions & 93 deletions

File tree

‎.changelog/2122.internal.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Remove usage of MUI Tabs component

‎src/app/components/DurationPills/index.tsx‎

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { styled } from '@mui/material/styles'
4-
import Box from '@mui/material/Box'
5-
import Chip from '@mui/material/Chip'
6-
import Typography from '@mui/material/Typography'
73
import { ChartDuration } from '../../utils/chart-utils'
8-
import { COLORS } from '../../../styles/theme/colors'
9-
10-
export const StyledBox = styled(Box)(({ theme }) => ({
11-
backgroundColor: COLORS.brandDark,
12-
width: 14,
13-
height: 14,
14-
marginRight: theme.spacing(3),
15-
borderRadius: 4,
16-
}))
4+
import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
175

186
type DurationPillsProps = {
197
handleChange: (duration: ChartDuration) => void
@@ -38,25 +26,15 @@ export const DurationPills: FC<DurationPillsProps> = ({ handleChange, value }) =
3826
]
3927

4028
return (
41-
<>
42-
{options.map(option => (
43-
<Chip
44-
key={option.value}
45-
onClick={() => handleChange(option.value)}
46-
clickable
47-
color="secondary"
48-
label={
49-
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
50-
<StyledBox />
51-
<Typography component="span" sx={{ fontSize: 12 }}>
52-
{option.label}
53-
</Typography>
54-
</Box>
55-
}
56-
sx={{ mr: 2 }}
57-
variant={value === option.value ? 'outlined-selected' : 'outlined'}
58-
/>
59-
))}
60-
</>
29+
// Mobile margin prevents overflow Recharts
30+
<Tabs defaultValue={value} className="my-2 lg:my-0">
31+
<TabsList className="ml-auto w-full lg:w-auto">
32+
{options.map(option => (
33+
<TabsTrigger key={option.value} value={option.value} onClick={() => handleChange(option.value)}>
34+
{option.label}
35+
</TabsTrigger>
36+
))}
37+
</TabsList>
38+
</Tabs>
6139
)
6240
}

‎src/app/components/FilterButtons/index.tsx‎

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import Box from '@mui/material/Box'
2-
import Chip from '@mui/material/Chip'
3-
import CheckIcon from '@mui/icons-material/Check'
4-
import { COLORS } from '../../../styles/theme/colors'
1+
import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
52

63
type FilterButtonsProps<T extends string> = {
74
options: { label: string; value: T }[]
@@ -11,27 +8,14 @@ type FilterButtonsProps<T extends string> = {
118

129
export const FilterButtons = <T extends string>({ options, onSelect, value }: FilterButtonsProps<T>) => {
1310
return (
14-
<Box component="span" fontSize={25}>
15-
{options.map(option => {
16-
const selected = option.value === value
17-
return (
18-
<Chip
19-
key={option.value}
20-
onClick={() => onSelect(option.value)}
21-
clickable
22-
color="secondary"
23-
icon={selected ? <CheckIcon /> : undefined}
24-
label={option.label}
25-
sx={{
26-
mr: 3,
27-
borderColor: COLORS.brandMedium,
28-
backgroundColor: selected ? COLORS.brandMedium : COLORS.brandMedium15,
29-
color: selected ? COLORS.white : COLORS.grayExtraDark,
30-
}}
31-
variant={selected ? 'outlined-selected' : 'outlined'}
32-
/>
33-
)
34-
})}
35-
</Box>
11+
<Tabs defaultValue={value} className="inline-flex w-auto">
12+
<TabsList>
13+
{options.map(option => (
14+
<TabsTrigger key={option.value} value={option.value} onClick={() => onSelect(option.value)}>
15+
{option.label}
16+
</TabsTrigger>
17+
))}
18+
</TabsList>
19+
</Tabs>
3620
)
3721
}

‎src/app/components/LinkableCardLayout/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ type LinkableCardLayoutProps = {
1313
}
1414
export const LinkableCardLayout: FC<LinkableCardLayoutProps> = ({ children, containerId, title, action }) => {
1515
return (
16-
<Card>
16+
<Card
17+
sx={{
18+
borderTopRightRadius: 0,
19+
borderTopLeftRadius: 0,
20+
borderTop: 'none',
21+
}}
22+
>
1723
<LinkableDiv id={containerId}>
1824
<CardHeader disableTypography component="h3" title={title} action={action} />
1925
</LinkableDiv>

‎src/app/components/RouterTabs/index.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useLocation, Outlet, useMatches } from 'react-router-dom'
22
import { NonScrollingRouterLink } from '../NonScrollingRouterLink'
3-
import Tabs from '@mui/material/Tabs'
4-
import Tab from '@mui/material/Tab'
3+
import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
54

65
type RouterTabsProps<Context> = {
76
tabs: {
@@ -29,18 +28,18 @@ export function RouterTabs<Context>({ tabs, context }: RouterTabsProps<Context>)
2928

3029
return (
3130
<>
32-
<Tabs value={targetTab?.to} variant="scrollable" scrollButtons={false}>
33-
{tabs
34-
.filter(tab => tab === targetTab || tab.visible !== false)
35-
.map(tab => (
36-
<Tab
37-
key={tab.to}
38-
component={NonScrollingRouterLink}
39-
value={tab.to}
40-
label={tab.label}
41-
to={tab.to}
42-
/>
43-
))}
31+
<Tabs value={targetTab?.to}>
32+
<TabsList variant="layout">
33+
{tabs
34+
.filter(tab => tab === targetTab || tab.visible !== false)
35+
.map(tab => (
36+
<TabsTrigger key={tab.to} value={tab.to} asChild>
37+
<NonScrollingRouterLink to={tab.to} className="flex items-center">
38+
{tab.label}
39+
</NonScrollingRouterLink>
40+
</TabsTrigger>
41+
))}
42+
</TabsList>
4443
</Tabs>
4544
<Outlet context={context} />
4645
</>

‎src/app/pages/ConsensusAccountDetailsPage/Staking.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { FC, useState } from 'react'
1+
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import Box from '@mui/material/Box'
43
import Card from '@mui/material/Card'
54
import CardContent from '@mui/material/CardContent'
65
import Link from '@mui/material/Link'
76
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
8-
import Tabs from '@mui/material/Tabs'
9-
import Tab from '@mui/material/Tab'
7+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
108
import { styled } from '@mui/material/styles'
119
import {
1210
Account,
@@ -25,6 +23,9 @@ import { tableCellClasses } from '@mui/material/TableCell'
2523

2624
export const StyledCard = styled(Card)(({ theme }) => ({
2725
flex: 1,
26+
borderTopRightRadius: 0,
27+
borderTopLeftRadius: 0,
28+
borderTop: 'none',
2829
'&': {
2930
padding: `0 ${theme.spacing(4)}`,
3031
marginBottom: 0,
@@ -41,22 +42,31 @@ type StakingProps = {
4142

4243
export const Staking: FC<StakingProps> = ({ account, isLoading }) => {
4344
const { t } = useTranslation()
44-
const [tab, setTabValue] = useState(0)
4545

4646
return (
47-
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
48-
<Tabs value={tab} onChange={(event, tab) => setTabValue(tab)} aria-label={t('validator.delegations')}>
49-
<Tab label={t('common.staked')} />
50-
<Tab label={t('common.debonding')} />
47+
<div className="flex flex-col h-full">
48+
<Tabs defaultValue="staked" className="h-full" aria-label={t('validator.delegations')}>
49+
<TabsList variant="layout">
50+
<TabsTrigger value="staked">{t('common.staked')}</TabsTrigger>
51+
<TabsTrigger value="debonding">{t('common.debonding')}</TabsTrigger>
52+
</TabsList>
53+
<StyledCard>
54+
<CardContent>
55+
{isLoading && <Skeleton className="h-[300px] mt-8" />}
56+
{!isLoading && account && (
57+
<>
58+
<TabsContent value="staked">
59+
<ActiveDelegations address={account?.address} />
60+
</TabsContent>
61+
<TabsContent value="debonding">
62+
<DebondingDelegations address={account?.address} />
63+
</TabsContent>
64+
</>
65+
)}
66+
</CardContent>
67+
</StyledCard>
5168
</Tabs>
52-
<StyledCard>
53-
<CardContent>
54-
{isLoading && <Skeleton className="h-[300px] mt-8" />}
55-
{account && tab === 0 && <ActiveDelegations address={account?.address} />}
56-
{account && tab === 1 && <DebondingDelegations address={account?.address} />}
57-
</CardContent>
58-
</StyledCard>
59-
</Box>
69+
</div>
6070
)
6171
}
6272

‎src/app/pages/RuntimeAccountDetailsPage/ContractCodeCard.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ export const ContractCodeCard: FC<TokenDashboardContext> = ({ scope, address })
3030
.sort((a, b) => b.path.endsWith(entryFilePath) - a.path.endsWith(entryFilePath))
3131

3232
return (
33-
<Card>
33+
<Card
34+
sx={{
35+
borderTopRightRadius: 0,
36+
borderTopLeftRadius: 0,
37+
borderTop: 'none',
38+
}}
39+
>
3440
{noCode && <CardEmptyState label={t('contract.noCode')} />}
3541
{contract && (contract.creation_bytecode || contract.runtime_bytecode) && (
3642
<CardContent>

‎ui-library‎

0 commit comments

Comments
 (0)