Skip to content

Commit 1cb5663

Browse files
vinuganesanvinuganesan
authored
Merge pull request #170 from unicef/fix/styled-components
Replaced styled with sx
2 parents 11d8f0f + 4ed6e92 commit 1cb5663

9 files changed

Lines changed: 68 additions & 146 deletions

File tree

‎package-lock.json‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@unicef/material-ui",
3-
"version": "2.0.0",
3+
"version": "2.0.1",
44
"description": "UNICEF theme and components of material-ui for react",
55
"type": "module",
66
"main": "./lib/prod.cjs",
@@ -36,10 +36,10 @@
3636
"license": "GPL-3.0-or-later",
3737
"peerDependencies": {
3838
"@emotion/styled": "^11.14.1",
39-
"@mui/icons-material": "^7.3.5",
40-
"@mui/material": "^7.3.5",
41-
"react": "^19.0.0",
42-
"react-dom": "^19.0.0"
39+
"@mui/icons-material": "^7.3.6",
40+
"@mui/material": "^7.3.6",
41+
"react": "19.2.3",
42+
"react-dom": "19.2.3"
4343
},
4444
"bugs": {
4545
"url": "https://github.com/unicef/unicef-material-ui/issues"

‎src/components/UAriaHiddenText/UAriaHiddenText.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { Box } from '@mui/material'
4-
import { styled } from '@mui/material/styles'
5-
6-
const StyledBox = styled('div')(() => ({
7-
display: 'none',
8-
}))
94

105
/**
116
* This component is designed to inform the screen reader about hidden text, often linked with aria-describedby.
127
**/
138
export default function UAriaHiddenText({ id, text }) {
14-
return <StyledBox id={id}>{text}</StyledBox>
9+
return (
10+
<Box id={id} sx={{ display: 'none' }}>
11+
{text}
12+
</Box>
13+
)
1514
}
1615

1716
UAriaHiddenText.propTypes = {

‎src/components/UAriaLive/UAriaLive.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { Box } from '@mui/material'
4-
import { styled } from '@mui/material/styles'
5-
6-
const StyledBox = styled('div')(() => ({
7-
position: 'absolute',
8-
width: 1,
9-
height: 1,
10-
margin: -1,
11-
padding: 0,
12-
overflow: 'hidden',
13-
clip: 'rect(0, 0, 0, 0)',
14-
border: 0,
15-
}))
164

175
/**
186
* This component is intended to generate a wrapper with the aria-live property.
@@ -25,14 +13,24 @@ export default function UAriaLive({
2513
ariaAtomic = false,
2614
}) {
2715
return (
28-
<StyledBox
16+
<Box
2917
aria-live={type}
3018
aria-atomic={ariaAtomic}
3119
aria-relevant="additions text"
3220
role={role}
21+
sx={{
22+
position: 'absolute',
23+
width: 1,
24+
height: 1,
25+
margin: -1,
26+
padding: 0,
27+
overflow: 'hidden',
28+
clip: 'rect(0, 0, 0, 0)',
29+
border: 0,
30+
}}
3331
>
3432
{text}
35-
</StyledBox>
33+
</Box>
3634
)
3735
}
3836

‎src/components/UButton/UButton.js‎

Lines changed: 13 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,7 @@
11
import React from 'react'
2-
import { styled } from '@mui/material/styles'
32
import PropTypes from 'prop-types'
43
import { Box, Button, CircularProgress } from '@mui/material'
54

6-
const PREFIX = 'UButton'
7-
8-
const classes = {
9-
root: `${PREFIX}-root`,
10-
wrapper: `${PREFIX}-wrapper`,
11-
buttonProgress: `${PREFIX}-buttonProgress`,
12-
}
13-
14-
const StyledBox = styled(Box)(({ theme }) => ({
15-
[`&.${classes.root}`]: {
16-
display: 'flex',
17-
alignItems: 'center',
18-
},
19-
20-
[`& .${classes.wrapper}`]: {
21-
position: 'relative',
22-
},
23-
24-
[`& .${classes.buttonProgress}`]: {
25-
position: 'absolute',
26-
top: '50%',
27-
left: '50%',
28-
marginTop: -12,
29-
marginLeft: -12,
30-
},
31-
}))
32-
335
/**
346
* Custom advanced button with unicef colors and also it has spinning effect in the button
357
*
@@ -73,14 +45,23 @@ export default function UButton({
7345
return !spinButton ? (
7446
CustomButton
7547
) : (
76-
<StyledBox className={classes.root}>
77-
<Box className={classes.wrapper}>
48+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
49+
<Box sx={{ position: 'relative' }}>
7850
{CustomButton}
7951
{loading && (
80-
<CircularProgress size={24} className={classes.buttonProgress} />
52+
<CircularProgress
53+
size={24}
54+
sx={{
55+
position: 'absolute',
56+
top: '50%',
57+
left: '50%',
58+
marginTop: -12,
59+
marginLeft: -12,
60+
}}
61+
/>
8162
)}
8263
</Box>
83-
</StyledBox>
64+
</Box>
8465
)
8566
}
8667

‎src/components/UContent/UContent.js‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,17 @@ import { styled } from '@mui/material/styles'
33
import { Box } from '@mui/material'
44
import PropTypes from 'prop-types'
55

6-
const PREFIX = 'UContent'
7-
8-
const classes = {
9-
content: `${PREFIX}-content`,
10-
}
11-
12-
const Root = styled('main')(({ theme }) => ({
13-
[`&.${classes.content}`]: {
14-
flexGrow: 1,
15-
padding: theme.spacing(1),
16-
},
17-
}))
18-
196
/**
207
* * UContent is to display the main content of page.
218
* * Children under Ucontent will be display in the main content.
229
* * UContent must be wrapped inside the ULayout.
2310
*/
2411
export default function UContent({ headerHeight = 64, children }) {
2512
return (
26-
<Root className={classes.content}>
13+
<Box sx={{ flexGrow: 1, padding: 1 }}>
2714
<Box sx={{ minHeight: headerHeight }} />
2815
{children}
29-
</Root>
16+
</Box>
3017
)
3118
}
3219

‎src/components/ULayout/ULayout.js‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
11
import React from 'react'
2-
import { styled } from '@mui/material/styles'
32
import { Box } from '@mui/material'
4-
const PREFIX = 'ULayout'
5-
6-
const classes = {
7-
root: `${PREFIX}-root`,
8-
}
9-
10-
const StyledBox = styled('div')(({ theme }) => ({
11-
[`&.${classes.root}`]: {
12-
display: 'flex',
13-
},
14-
}))
153

164
/**
175
* ULayout is the Structured layout of the page, so that it contains side bar on the left and main content to the right.
@@ -21,6 +9,6 @@ const StyledBox = styled('div')(({ theme }) => ({
219
* * USideBar
2210
*/
2311

24-
export default function ULayout(props) {
25-
return <StyledBox className={classes.root}>{props.children}</StyledBox>
12+
export default function ULayout({ children }) {
13+
return <Box sx={{ display: 'flex' }}>{children}</Box>
2614
}

‎src/components/UPageLoadingProgress/UPageLoadingProgress.js‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
import React from 'react'
2-
import { styled } from '@mui/material/styles'
32
import { Box, CircularProgress, Typography } from '@mui/material'
43
import PropTypes from 'prop-types'
54

6-
const PREFIX = 'UPageLoadingProgress'
7-
8-
const classes = {
9-
pageLoadingProgress: `${PREFIX}-pageLoadingProgress`,
10-
}
11-
12-
const StyledBox = styled('div')(() => ({
13-
[`&.${classes.pageLoadingProgress}`]: {
14-
height: '50vh',
15-
flex: '1',
16-
},
17-
}))
18-
195
/**
206
* UPageLoadingProgress is a component to display page loading progress in the user screen
217
* It has two type of page loading information which is displayed in the center of the screen
@@ -24,19 +10,22 @@ const StyledBox = styled('div')(() => ({
2410
*/
2511
export default function UPageLoadingProgress({ text = '' }) {
2612
return (
27-
<StyledBox
28-
display="flex"
29-
justifyContent="center"
30-
alignItems="center"
31-
spacing={8}
32-
className={classes.pageLoadingProgress}
13+
<Box
14+
sx={{
15+
height: '50vh',
16+
flex: '1',
17+
display: 'flex',
18+
justifyContent: 'center',
19+
alignItems: 'center',
20+
spacing: 8,
21+
}}
3322
>
3423
{text ? (
3524
<Typography variant="h6">{text}</Typography>
3625
) : (
3726
<CircularProgress />
3827
)}
39-
</StyledBox>
28+
</Box>
4029
)
4130
}
4231

‎src/components/USideBar/USideBar.js‎

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
11
import React from 'react'
2-
import { styled } from '@mui/material/styles'
32
import { Box, Drawer } from '@mui/material'
43
import PropTypes from 'prop-types'
54

6-
const PREFIX = 'USideBar'
7-
8-
const classes = {
9-
drawer: `${PREFIX}-drawer`,
10-
drawerPaper: `${PREFIX}-drawerPaper`,
11-
}
12-
13-
const StyledBox = styled('div')(props => ({
14-
[`& .${classes.drawer}`]: {
15-
width: props.width,
16-
flexShrink: 0,
17-
},
18-
19-
[`& .${classes.drawerPaper}`]: {
20-
zIndex: 999,
21-
width: props.width,
22-
},
23-
}))
24-
255
/**
266
* USideBar is the custom material ui component to display the content in the side bar.
277
*
@@ -38,19 +18,19 @@ export default function USideBar({
3818
...others
3919
}) {
4020
return (
41-
<StyledBox display={{ xs: 'none', md: 'block' }} width={width}>
42-
<Drawer
43-
className={classes.drawer}
44-
variant="permanent"
45-
classes={{
46-
paper: classes.drawerPaper,
47-
}}
48-
{...others}
49-
>
50-
<Box sx={{ minHeight: headerHeight }} />
51-
{children}
52-
</Drawer>
53-
</StyledBox>
21+
<Drawer
22+
variant="permanent"
23+
sx={{ display: { xs: 'none', md: 'block' }, width, flexShrink: 0 }}
24+
slotProps={{
25+
paper: {
26+
sx: { zIndex: 999, width },
27+
},
28+
}}
29+
{...others}
30+
>
31+
<Box sx={{ minHeight: headerHeight }} />
32+
{children}
33+
</Drawer>
5434
)
5535
}
5636

0 commit comments

Comments
 (0)