Skip to content

Commit bfd248c

Browse files
siriwatknpsiriwatknp
authored
[joy] Refine the default theme (#36843)
1 parent a0d2b0d commit bfd248c

File tree

801 files changed

+8490
-6223
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

801 files changed

+8490
-6223
lines changed

‎docs/data/joy/components/alert/AlertColors.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@ export default function AlertColors() {
2929
<Alert variant={variant} color="danger">
3030
Danger
3131
</Alert>
32-
<Alert variant={variant} color="info">
33-
Info
34-
</Alert>
3532
<Alert variant={variant} color="success">
3633
Success
3734
</Alert>
@@ -41,7 +38,7 @@ export default function AlertColors() {
4138
</Stack>
4239
<Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
4340
<Typography
44-
level="body2"
41+
level="body-sm"
4542
fontWeight="xl"
4643
id="variant-label"
4744
textColor="text.primary"

‎docs/data/joy/components/alert/AlertColors.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@ export default function AlertColors() {
2929
<Alert variant={variant} color="danger">
3030
Danger
3131
</Alert>
32-
<Alert variant={variant} color="info">
33-
Info
34-
</Alert>
3532
<Alert variant={variant} color="success">
3633
Success
3734
</Alert>
@@ -41,7 +38,7 @@ export default function AlertColors() {
4138
</Stack>
4239
<Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
4340
<Typography
44-
level="body2"
41+
level="body-sm"
4542
fontWeight="xl"
4643
id="variant-label"
4744
textColor="text.primary"

‎docs/data/joy/components/alert/AlertInvertedColors.js

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,12 @@ export default function AlertInvertedColors() {
4848
}
4949
sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
5050
>
51-
<Box>
52-
<Typography level="body1" fontWeight="lg">
53-
Success
54-
</Typography>
55-
<Typography level="body3">
51+
<div>
52+
<Typography level="title-lg">Success</Typography>
53+
<Typography level="body-sm">
5654
Success is walking from failure to failure with no loss of enthusiam.
5755
</Typography>
58-
</Box>
56+
</div>
5957
<LinearProgress
6058
variant="soft"
6159
value={40}
@@ -69,7 +67,6 @@ export default function AlertInvertedColors() {
6967
})}
7068
/>
7169
</Alert>
72-
7370
<Alert
7471
variant="soft"
7572
color="danger"
@@ -79,18 +76,19 @@ export default function AlertInvertedColors() {
7976
<Warning />
8077
</CircularProgress>
8178
}
82-
sx={{ alignItems: 'flex-start', '--Alert-gap': '1rem' }}
79+
sx={{ alignItems: 'flex-start', gap: '1rem' }}
8380
>
8481
<Box sx={{ flex: 1 }}>
85-
<Typography sx={{ mt: 1 }}>
86-
Network loss, please recheck your connection.
82+
<Typography level="title-md">Lost connection</Typography>
83+
<Typography level="body-md">
84+
Please verify your network connection and try again.
8785
</Typography>
8886
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
8987
<Button variant="outlined" size="sm">
90-
Open network setting
88+
Open network settings
9189
</Button>
92-
<Button variant="soft" size="sm">
93-
Okay
90+
<Button variant="solid" size="sm">
91+
Try again
9492
</Button>
9593
</Box>
9694
</Box>

‎docs/data/joy/components/alert/AlertInvertedColors.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,12 @@ export default function AlertInvertedColors() {
4848
}
4949
sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
5050
>
51-
<Box>
52-
<Typography level="body1" fontWeight="lg">
53-
Success
54-
</Typography>
55-
<Typography level="body3">
51+
<div>
52+
<Typography level="title-lg">Success</Typography>
53+
<Typography level="body-sm">
5654
Success is walking from failure to failure with no loss of enthusiam.
5755
</Typography>
58-
</Box>
56+
</div>
5957
<LinearProgress
6058
variant="soft"
6159
value={40}
@@ -69,7 +67,6 @@ export default function AlertInvertedColors() {
6967
})}
7068
/>
7169
</Alert>
72-
7370
<Alert
7471
variant="soft"
7572
color="danger"
@@ -79,18 +76,19 @@ export default function AlertInvertedColors() {
7976
<Warning />
8077
</CircularProgress>
8178
}
82-
sx={{ alignItems: 'flex-start', '--Alert-gap': '1rem' }}
79+
sx={{ alignItems: 'flex-start', gap: '1rem' }}
8380
>
8481
<Box sx={{ flex: 1 }}>
85-
<Typography sx={{ mt: 1 }}>
86-
Network loss, please recheck your connection.
82+
<Typography level="title-md">Lost connection</Typography>
83+
<Typography level="body-md">
84+
Please verify your network connection and try again.
8785
</Typography>
8886
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
8987
<Button variant="outlined" size="sm">
90-
Open network setting
88+
Open network settings
9189
</Button>
92-
<Button variant="soft" size="sm">
93-
Okay
90+
<Button variant="solid" size="sm">
91+
Try again
9492
</Button>
9593
</Box>
9694
</Box>

‎docs/data/joy/components/alert/AlertUsage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ export default function AlertUsage() {
1010
{
1111
propName: 'variant',
1212
knob: 'radio',
13-
defaultValue: 'soft',
13+
defaultValue: 'outlined',
1414
options: ['plain', 'outlined', 'soft', 'solid'],
1515
},
1616
{
1717
propName: 'color',
1818
knob: 'color',
19-
defaultValue: 'primary',
19+
defaultValue: 'neutral',
2020
},
2121
{
2222
propName: 'size',

‎docs/data/joy/components/alert/AlertVariousStates.js

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function AlertVariousStates() {
1414
{ title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
1515
{ title: 'Warning', color: 'warning', icon: <WarningIcon /> },
1616
{ title: 'Error', color: 'danger', icon: <ReportIcon /> },
17-
{ title: 'Info', color: 'info', icon: <InfoIcon /> },
17+
{ title: 'Neutral', color: 'neutral', icon: <InfoIcon /> },
1818
];
1919

2020
return (
@@ -23,23 +23,18 @@ export default function AlertVariousStates() {
2323
<Alert
2424
key={title}
2525
sx={{ alignItems: 'flex-start' }}
26-
startDecorator={React.cloneElement(icon, {
27-
sx: { mt: '2px', mx: '4px' },
28-
fontSize: 'xl2',
29-
})}
26+
startDecorator={icon}
3027
variant="soft"
3128
color={color}
3229
endDecorator={
33-
<IconButton variant="soft" size="sm" color={color}>
30+
<IconButton variant="soft" color={color}>
3431
<CloseRoundedIcon />
3532
</IconButton>
3633
}
3734
>
3835
<div>
39-
<Typography fontWeight="lg" mt={0.25}>
40-
{title}
41-
</Typography>
42-
<Typography fontSize="sm" sx={{ opacity: 0.8 }}>
36+
<div>{title}</div>
37+
<Typography level="body-sm" color={color}>
4338
This is a time-sensitive {title} Alert.
4439
</Typography>
4540
</div>

‎docs/data/joy/components/alert/AlertVariousStates.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,26 @@ export default function AlertVariousStates() {
1919
{ title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
2020
{ title: 'Warning', color: 'warning', icon: <WarningIcon /> },
2121
{ title: 'Error', color: 'danger', icon: <ReportIcon /> },
22-
{ title: 'Info', color: 'info', icon: <InfoIcon /> },
22+
{ title: 'Neutral', color: 'neutral', icon: <InfoIcon /> },
2323
];
2424
return (
2525
<Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
2626
{items.map(({ title, color, icon }) => (
2727
<Alert
2828
key={title}
2929
sx={{ alignItems: 'flex-start' }}
30-
startDecorator={React.cloneElement(icon, {
31-
sx: { mt: '2px', mx: '4px' },
32-
fontSize: 'xl2',
33-
})}
30+
startDecorator={icon}
3431
variant="soft"
3532
color={color}
3633
endDecorator={
37-
<IconButton variant="soft" size="sm" color={color}>
34+
<IconButton variant="soft" color={color}>
3835
<CloseRoundedIcon />
3936
</IconButton>
4037
}
4138
>
4239
<div>
43-
<Typography fontWeight="lg" mt={0.25}>
44-
{title}
45-
</Typography>
46-
<Typography fontSize="sm" sx={{ opacity: 0.8 }}>
40+
<div>{title}</div>
41+
<Typography level="body-sm" color={color}>
4742
This is a time-sensitive {title} Alert.
4843
</Typography>
4944
</div>

‎docs/data/joy/components/alert/AlertWithDangerState.js

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import * as React from 'react';
44
import Box from '@mui/joy/Box';
55
import Alert from '@mui/joy/Alert';
66
import IconButton from '@mui/joy/IconButton';
7-
import Typography from '@mui/joy/Typography';
87
import Button from '@mui/joy/Button';
98

109
export default function AlertWithDangerState() {
1110
return (
1211
<Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
1312
<Alert
14-
startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
13+
startDecorator={<WarningIcon />}
1514
variant="soft"
1615
color="danger"
1716
endDecorator={
@@ -25,12 +24,10 @@ export default function AlertWithDangerState() {
2524
</React.Fragment>
2625
}
2726
>
28-
<Typography color="danger" fontWeight="md">
29-
This file was successfully deleted
30-
</Typography>
27+
This file was successfully deleted
3128
</Alert>
3229
<Alert
33-
startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
30+
startDecorator={<WarningIcon />}
3431
variant="solid"
3532
color="danger"
3633
endDecorator={
@@ -44,13 +41,11 @@ export default function AlertWithDangerState() {
4441
</React.Fragment>
4542
}
4643
>
47-
<Typography sx={{ color: 'white' }} fontWeight="md">
48-
This file was successfully deleted
49-
</Typography>
44+
This file was successfully deleted
5045
</Alert>
5146

5247
<Alert
53-
startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
48+
startDecorator={<WarningIcon />}
5449
variant="outlined"
5550
color="danger"
5651
endDecorator={
@@ -64,9 +59,7 @@ export default function AlertWithDangerState() {
6459
</React.Fragment>
6560
}
6661
>
67-
<Typography color="danger" fontWeight="md">
68-
This file was successfully deleted
69-
</Typography>
62+
This file was successfully deleted
7063
</Alert>
7164
</Box>
7265
);

‎docs/data/joy/components/alert/AlertWithDangerState.tsx

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import * as React from 'react';
44
import Box from '@mui/joy/Box';
55
import Alert from '@mui/joy/Alert';
66
import IconButton from '@mui/joy/IconButton';
7-
import Typography from '@mui/joy/Typography';
87
import Button from '@mui/joy/Button';
98

109
export default function AlertWithDangerState() {
1110
return (
1211
<Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
1312
<Alert
14-
startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
13+
startDecorator={<WarningIcon />}
1514
variant="soft"
1615
color="danger"
1716
endDecorator={
@@ -25,12 +24,10 @@ export default function AlertWithDangerState() {
2524
</React.Fragment>
2625
}
2726
>
28-
<Typography color="danger" fontWeight="md">
29-
This file was successfully deleted
30-
</Typography>
27+
This file was successfully deleted
3128
</Alert>
3229
<Alert
33-
startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
30+
startDecorator={<WarningIcon />}
3431
variant="solid"
3532
color="danger"
3633
endDecorator={
@@ -44,13 +41,11 @@ export default function AlertWithDangerState() {
4441
</React.Fragment>
4542
}
4643
>
47-
<Typography sx={{ color: 'white' }} fontWeight="md">
48-
This file was successfully deleted
49-
</Typography>
44+
This file was successfully deleted
5045
</Alert>
5146

5247
<Alert
53-
startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
48+
startDecorator={<WarningIcon />}
5449
variant="outlined"
5550
color="danger"
5651
endDecorator={
@@ -64,9 +59,7 @@ export default function AlertWithDangerState() {
6459
</React.Fragment>
6560
}
6661
>
67-
<Typography color="danger" fontWeight="md">
68-
This file was successfully deleted
69-
</Typography>
62+
This file was successfully deleted
7063
</Alert>
7164
</Box>
7265
);

‎docs/data/joy/components/alert/AlertWithDecorators.js

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,7 @@ export default function AlertWithDecorators() {
1515
color="success"
1616
startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
1717
endDecorator={
18-
<Button
19-
size="sm"
20-
variant="outlined"
21-
color="success"
22-
sx={{
23-
textTransform: 'uppercase',
24-
fontSize: 'xs',
25-
fontWeight: 'xl',
26-
}}
27-
>
18+
<Button size="sm" variant="solid" color="success">
2819
Close
2920
</Button>
3021
}

‎docs/data/joy/components/alert/AlertWithDecorators.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,7 @@ export default function AlertWithDecorators() {
1515
color="success"
1616
startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
1717
endDecorator={
18-
<Button
19-
size="sm"
20-
variant="outlined"
21-
color="success"
22-
sx={{
23-
textTransform: 'uppercase',
24-
fontSize: 'xs',
25-
fontWeight: 'xl',
26-
}}
27-
>
18+
<Button size="sm" variant="solid" color="success">
2819
Close
2920
</Button>
3021
}

0 commit comments

Comments
 (0)