Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Joy UI] Add CircularProgress component #33869

Merged
merged 109 commits into from
Sep 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
109 commits
Select commit Hold shift + click to select a range
40330e1
[CircularProgress][Joy] Initial implementation
hbjORbj Aug 9, 2022
064f20a
Add initial demo
hbjORbj Aug 9, 2022
6385fbd
Ensure color changes accordingly
hbjORbj Aug 9, 2022
91ae52c
Run prettier
hbjORbj Aug 9, 2022
b70371f
Add demos for size and color props respectively
hbjORbj Aug 9, 2022
2d52619
Change variant prop into determinate boolean prop
hbjORbj Aug 11, 2022
c79af9e
[CircularProgress][Joy] Initial implementation
hbjORbj Aug 9, 2022
3df46a7
Add initial demo
hbjORbj Aug 30, 2022
ef94a8b
Ensure color changes accordingly
hbjORbj Aug 9, 2022
a093f3a
Add demos for size and color props respectively
hbjORbj Aug 9, 2022
5ec8de6
Change variant prop into determinate boolean prop
hbjORbj Aug 11, 2022
06775fe
Add variant prop / change html structure / improve styles
hbjORbj Aug 26, 2022
a53c11b
Add demos for variant prop and improve demos
hbjORbj Aug 26, 2022
7527ab8
Add support for some css variables
hbjORbj Aug 26, 2022
b34bf67
Place children in the center and add demo
hbjORbj Aug 26, 2022
f1f40f3
Run scripts
hbjORbj Aug 26, 2022
a267c88
Run docs script
hbjORbj Aug 26, 2022
57991e6
Add CircularProgressOwnerState type
hbjORbj Aug 29, 2022
805d243
use svg and 2 circles for implementation
hbjORbj Aug 30, 2022
3380166
Delete demos unsupported
hbjORbj Aug 30, 2022
e33045b
Add to extendTheme typescript test
hbjORbj Aug 30, 2022
cd57397
Fix typescript test
hbjORbj Aug 30, 2022
26161d6
Support componentsProps prop
hbjORbj Aug 30, 2022
ecb1a3b
Refactor code
hbjORbj Aug 30, 2022
4bc720f
Add test
hbjORbj Aug 30, 2022
afe0296
Add typescript test
hbjORbj Aug 30, 2022
c4e512c
Run prettier
hbjORbj Aug 30, 2022
2bde664
Run proptypes script
hbjORbj Aug 30, 2022
0c6a902
Center children at center by default
hbjORbj Sep 7, 2022
8e96195
Add demo for components with children
hbjORbj Sep 7, 2022
60a4dc4
Add determinate switch to demo
hbjORbj Sep 7, 2022
6903d97
Mix Css min and max to the r properties of track and progress slots
hbjORbj Sep 7, 2022
9da641c
Improve styles
hbjORbj Sep 7, 2022
1a427a1
Add more demos (css variables, determinate prop)
hbjORbj Sep 7, 2022
e1ba68e
Merge branch 'joy/circular-progress' of https://github.com/hbjORbj/ma…
danilo-leal Sep 8, 2022
1c63d9b
tweak circular progress percent
danilo-leal Sep 8, 2022
5b7c72f
tweak the thickness a bit
danilo-leal Sep 8, 2022
41b532a
minor tweaks to the documentation
danilo-leal Sep 8, 2022
0bef93f
iterating a bit more and fixing a demo
danilo-leal Sep 8, 2022
ba2067d
typescript formatted
danilo-leal Sep 8, 2022
11ee6e0
fix starting point of the progress
siriwatknp Sep 8, 2022
a729060
nit: move react to the top of the file
siriwatknp Sep 8, 2022
f0a0363
follow convention
siriwatknp Sep 8, 2022
90c018d
use meaningful slot name
siriwatknp Sep 8, 2022
fabea43
[CircularProgress][Joy] Initial implementation
hbjORbj Aug 9, 2022
52ce742
Add initial demo
hbjORbj Aug 9, 2022
74671f8
Ensure color changes accordingly
hbjORbj Aug 9, 2022
8434415
Add demos for size and color props respectively
hbjORbj Aug 9, 2022
06d8f5b
Change variant prop into determinate boolean prop
hbjORbj Aug 11, 2022
9618ed6
[CircularProgress][Joy] Initial implementation
hbjORbj Aug 9, 2022
e3065f1
Add initial demo
hbjORbj Aug 30, 2022
33df129
Ensure color changes accordingly
hbjORbj Aug 9, 2022
fbe1c85
Add demos for size and color props respectively
hbjORbj Aug 9, 2022
9d8a145
Change variant prop into determinate boolean prop
hbjORbj Aug 11, 2022
e98e3a6
Add variant prop / change html structure / improve styles
hbjORbj Aug 26, 2022
a03b0fe
Add demos for variant prop and improve demos
hbjORbj Aug 26, 2022
8efcd97
Add support for some css variables
hbjORbj Aug 26, 2022
3a19edc
Place children in the center and add demo
hbjORbj Aug 26, 2022
52684b2
Run scripts
hbjORbj Aug 26, 2022
44a9773
Run docs script
hbjORbj Aug 26, 2022
02e5014
Add CircularProgressOwnerState type
hbjORbj Aug 29, 2022
4f25973
use svg and 2 circles for implementation
hbjORbj Aug 30, 2022
55a90eb
Delete demos unsupported
hbjORbj Aug 30, 2022
5d0012f
Add to extendTheme typescript test
hbjORbj Aug 30, 2022
f708037
Fix typescript test
hbjORbj Aug 30, 2022
b382aeb
Support componentsProps prop
hbjORbj Aug 30, 2022
d19f9ac
Refactor code
hbjORbj Aug 30, 2022
cc94525
Add test
hbjORbj Aug 30, 2022
97b4ae7
Add typescript test
hbjORbj Aug 30, 2022
4dbf96f
Run prettier
hbjORbj Aug 30, 2022
d97e3d8
Run proptypes script
hbjORbj Aug 30, 2022
9d6c958
Center children at center by default
hbjORbj Sep 7, 2022
43aff4a
Add demo for components with children
hbjORbj Sep 7, 2022
f479187
Add determinate switch to demo
hbjORbj Sep 7, 2022
5ec83d1
Mix Css min and max to the r properties of track and progress slots
hbjORbj Sep 7, 2022
1837285
Improve styles
hbjORbj Sep 7, 2022
d8e354c
Add more demos (css variables, determinate prop)
hbjORbj Sep 7, 2022
90787d9
tweak circular progress percent
danilo-leal Sep 8, 2022
578d91a
tweak the thickness a bit
danilo-leal Sep 8, 2022
38a8c8c
minor tweaks to the documentation
danilo-leal Sep 8, 2022
107b7c7
iterating a bit more and fixing a demo
danilo-leal Sep 8, 2022
5cf73de
typescript formatted
danilo-leal Sep 8, 2022
697d6ef
Add path for joy modal
hbjORbj Sep 8, 2022
5bfdc82
Place children at center correctly
hbjORbj Sep 8, 2022
f362909
Fix lint errors
hbjORbj Sep 8, 2022
4f8d6d8
adjust variables
siriwatknp Sep 8, 2022
94757ed
add knob number
siriwatknp Sep 8, 2022
fa6e5b5
Fix children prop
siriwatknp Sep 8, 2022
d9a4bda
remove unnecessary code
siriwatknp Sep 8, 2022
d7af328
Merge branch 'joy/circular-progress' of github.com:hbjORbj/material-u…
siriwatknp Sep 8, 2022
872014a
run proptypes
siriwatknp Sep 8, 2022
8bd5987
fix variables demo
siriwatknp Sep 8, 2022
c0ebb97
add animation variable
siriwatknp Sep 8, 2022
a91d5cc
Set default value to empty string for value prop in playground demo
hbjORbj Sep 8, 2022
7605177
Improve code for handling value prop
hbjORbj Sep 8, 2022
1c51342
Run prettier
hbjORbj Sep 8, 2022
4bc6832
add integration with Button and IconButton
siriwatknp Sep 8, 2022
8f2fcb2
simplify variable demo
siriwatknp Sep 8, 2022
e22cb51
add comment
siriwatknp Sep 8, 2022
2d18eb3
add thickness demo
siriwatknp Sep 8, 2022
b3430e7
add link integration
siriwatknp Sep 8, 2022
2ccd98e
run ts formatted
siriwatknp Sep 8, 2022
c6be606
Merge branch 'joy/circular-progress' of github.com:hbjORbj/material-u…
siriwatknp Sep 8, 2022
061e955
update content
siriwatknp Sep 9, 2022
068c9e0
fix tests
siriwatknp Sep 9, 2022
f8d171f
simplify variable
siriwatknp Sep 9, 2022
386c4c9
update content
siriwatknp Sep 10, 2022
911aec1
Update docs/data/joy/components/circular-progress/circular-progress.md
siriwatknp Sep 12, 2022
5807b80
Run prettier
hbjORbj Sep 12, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Link from '@mui/joy/Link';
import IconButton from '@mui/joy/IconButton';
import CircularProgress from '@mui/joy/CircularProgress';

export default function CircularProgressSizes() {
return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
Loading…
</Button>
<IconButton>
<CircularProgress thickness={2} />
</IconButton>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
component="button"
variant="outlined"
startDecorator={<CircularProgress variant="plain" thickness={2} />}
sx={{ p: 1 }}
>
Submitting...
</Link>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Link from '@mui/joy/Link';
import IconButton from '@mui/joy/IconButton';
import CircularProgress from '@mui/joy/CircularProgress';

export default function CircularProgressSizes() {
return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
Loading…
</Button>
<IconButton>
<CircularProgress thickness={2} />
</IconButton>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
component="button"
variant="outlined"
startDecorator={<CircularProgress variant="plain" thickness={2} />}
sx={{ p: 1 }}
>
Submitting...
</Link>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
Loading…
</Button>
<IconButton>
<CircularProgress thickness={2} />
</IconButton>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
component="button"
variant="outlined"
startDecorator={<CircularProgress variant="plain" thickness={2} />}
sx={{ p: 1 }}
>
Submitting...
</Link>
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';
import ReportIcon from '@mui/icons-material/Report';
import WarningIcon from '@mui/icons-material/Warning';

export default function CircularProgressChildren() {
return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<CircularProgress color="warning">
<WarningIcon color="warning" />
</CircularProgress>
<CircularProgress size="lg" determinate value={66.67}>
2 / 3
</CircularProgress>
<CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
<ReportIcon color="danger" />
</CircularProgress>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';
import ReportIcon from '@mui/icons-material/Report';
import WarningIcon from '@mui/icons-material/Warning';

export default function CircularProgressChildren() {
return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<CircularProgress color="warning">
<WarningIcon color="warning" />
</CircularProgress>
<CircularProgress size="lg" determinate value={66.67}>
2 / 3
</CircularProgress>
<CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
<ReportIcon color="danger" />
</CircularProgress>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<CircularProgress color="warning">
<WarningIcon color="warning" />
</CircularProgress>
<CircularProgress size="lg" determinate value={66.67}>
2 / 3
</CircularProgress>
<CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
<ReportIcon color="danger" />
</CircularProgress>
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import Typography from '@mui/joy/Typography';
import * as React from 'react';
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';

import Radio from '@mui/joy/Radio';
import RadioGroup from '@mui/joy/RadioGroup';
import Sheet from '@mui/joy/Sheet';

export default function CircularProgressColors() {
const [variant, setVariant] = React.useState('solid');
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 3,
}}
>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
gap: 1,
}}
>
<CircularProgress variant={variant} color="primary" />
<CircularProgress variant={variant} color="neutral" />
<CircularProgress variant={variant} color="danger" />
<CircularProgress variant={variant} color="info" />
<CircularProgress variant={variant} color="success" />
<CircularProgress variant={variant} color="warning" />
</Box>
<Sheet
sx={{
background: 'transparent',
pl: 4,
borderLeft: '1px solid',
borderColor: 'divider',
}}
>
<Typography
level="body2"
fontWeight="xl"
id="variant-label"
textColor="text.primary"
mb={1}
>
Variant:
</Typography>
<RadioGroup
size="sm"
aria-labelledby="variant-label"
name="variant"
value={variant}
onChange={(event) => setVariant(event.target.value)}
>
<Radio label="Solid" value="solid" />
<Radio label="Soft" value="soft" />
<Radio label="Outlined" value="outlined" />
<Radio label="Plain" value="plain" />
</RadioGroup>
</Sheet>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import Typography from '@mui/joy/Typography';
import * as React from 'react';
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';
import { VariantProp } from '@mui/joy';
import Radio from '@mui/joy/Radio';
import RadioGroup from '@mui/joy/RadioGroup';
import Sheet from '@mui/joy/Sheet';

export default function CircularProgressColors() {
const [variant, setVariant] = React.useState<VariantProp>('solid');
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 3,
}}
>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
gap: 1,
}}
>
<CircularProgress variant={variant} color="primary" />
<CircularProgress variant={variant} color="neutral" />
<CircularProgress variant={variant} color="danger" />
<CircularProgress variant={variant} color="info" />
<CircularProgress variant={variant} color="success" />
<CircularProgress variant={variant} color="warning" />
</Box>
<Sheet
sx={{
background: 'transparent',
pl: 4,
borderLeft: '1px solid',
borderColor: 'divider',
}}
>
<Typography
level="body2"
fontWeight="xl"
id="variant-label"
textColor="text.primary"
mb={1}
>
Variant:
</Typography>
<RadioGroup
size="sm"
aria-labelledby="variant-label"
name="variant"
value={variant}
onChange={(event) => setVariant(event.target.value as VariantProp)}
>
<Radio label="Solid" value="solid" />
<Radio label="Soft" value="soft" />
<Radio label="Outlined" value="outlined" />
<Radio label="Plain" value="plain" />
</RadioGroup>
</Sheet>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';
import * as React from 'react';

export default function CircularProgressDeterminate() {
const [progress, setProgress] = React.useState(0);

React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
}, 800);

return () => {
clearInterval(timer);
};
}, []);

return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<CircularProgress determinate value={25} />
<CircularProgress determinate value={50} />
<CircularProgress determinate value={75} />
<CircularProgress determinate value={100} />
<CircularProgress determinate value={progress} />
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';
import * as React from 'react';

export default function CircularProgressDeterminate() {
const [progress, setProgress] = React.useState(0);

React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
}, 800);

return () => {
clearInterval(timer);
};
}, []);

return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<CircularProgress determinate value={25} />
<CircularProgress determinate value={50} />
<CircularProgress determinate value={75} />
<CircularProgress determinate value={100} />
<CircularProgress determinate value={progress} />
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<CircularProgress determinate value={25} />
<CircularProgress determinate value={50} />
<CircularProgress determinate value={75} />
<CircularProgress determinate value={100} />
<CircularProgress determinate value={progress} />
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';

export default function CircularProgressSizes() {
return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<CircularProgress size="sm" />
<CircularProgress size="md" />
<CircularProgress size="lg" />
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import CircularProgress from '@mui/joy/CircularProgress';

export default function CircularProgressSizes() {
return (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
<CircularProgress size="sm" />
<CircularProgress size="md" />
<CircularProgress size="lg" />
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<CircularProgress size="sm" />
<CircularProgress size="md" />
<CircularProgress size="lg" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as React from 'react';
import CircularProgress from '@mui/joy/CircularProgress';

export default function CircularProgressThickness() {
return <CircularProgress thickness={1} />;
}
Loading