Skip to content

Commit

Permalink
[material-ui] Convert CircularProgress to support Pigment CSS (#41776)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp authored Apr 11, 2024
1 parent ae45647 commit 01aa929
Show file tree
Hide file tree
Showing 5 changed files with 282 additions and 61 deletions.
100 changes: 100 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-progress/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
'use client';
import * as React from 'react';
import CircularColor from '../../../../../../docs/data/material/components/progress/CircularColor';
import CircularDeterminate from '../../../../../../docs/data/material/components/progress/CircularDeterminate';
import CircularIndeterminate from '../../../../../../docs/data/material/components/progress/CircularIndeterminate';
import CircularIntegration from '../../../../../../docs/data/material/components/progress/CircularIntegration';
import CircularUnderLoad from '../../../../../../docs/data/material/components/progress/CircularUnderLoad';
import CircularWithValueLabel from '../../../../../../docs/data/material/components/progress/CircularWithValueLabel';
import CustomizedProgressBars from '../../../../../../docs/data/material/components/progress/CustomizedProgressBars';
import DelayingAppearance from '../../../../../../docs/data/material/components/progress/DelayingAppearance';
import LinearBuffer from '../../../../../../docs/data/material/components/progress/LinearBuffer';
import LinearColor from '../../../../../../docs/data/material/components/progress/LinearColor';
import LinearDeterminate from '../../../../../../docs/data/material/components/progress/LinearDeterminate';
import LinearIndeterminate from '../../../../../../docs/data/material/components/progress/LinearIndeterminate';
import LinearWithValueLabel from '../../../../../../docs/data/material/components/progress/LinearWithValueLabel';

export default function Progress() {
return (
<React.Fragment>
<section>
<h2> Circular Color</h2>
<div className="demo-container">
<CircularColor />
</div>
</section>
<section>
<h2> Circular Determinate</h2>
<div className="demo-container">
<CircularDeterminate />
</div>
</section>
<section>
<h2> Circular Indeterminate</h2>
<div className="demo-container">
<CircularIndeterminate />
</div>
</section>
<section>
<h2> Circular Integration</h2>
<div className="demo-container">
<CircularIntegration />
</div>
</section>
<section>
<h2> Circular Under Load</h2>
<div className="demo-container">
<CircularUnderLoad />
</div>
</section>
<section>
<h2> Circular With Value Label</h2>
<div className="demo-container">
<CircularWithValueLabel />
</div>
</section>
<section>
<h2> Customized Progress Bars</h2>
<div className="demo-container">
<CustomizedProgressBars />
</div>
</section>
<section>
<h2> Delaying Appearance</h2>
<div className="demo-container">
<DelayingAppearance />
</div>
</section>
<section>
<h2> Linear Buffer</h2>
<div className="demo-container">
<LinearBuffer />
</div>
</section>
<section>
<h2> Linear Color</h2>
<div className="demo-container">
<LinearColor />
</div>
</section>
<section>
<h2> Linear Determinate</h2>
<div className="demo-container">
<LinearDeterminate />
</div>
</section>
<section>
<h2> Linear Indeterminate</h2>
<div className="demo-container">
<LinearIndeterminate />
</div>
</section>
<section>
<h2> Linear With Value Label</h2>
<div className="demo-container">
<LinearWithValueLabel />
</div>
</section>
</React.Fragment>
);
}
101 changes: 101 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import CircularColor from '../../../../../docs/data/material/components/progress/CircularColor.tsx';
import CircularDeterminate from '../../../../../docs/data/material/components/progress/CircularDeterminate.tsx';
import CircularIndeterminate from '../../../../../docs/data/material/components/progress/CircularIndeterminate.tsx';
import CircularIntegration from '../../../../../docs/data/material/components/progress/CircularIntegration.tsx';
import CircularUnderLoad from '../../../../../docs/data/material/components/progress/CircularUnderLoad.tsx';
import CircularWithValueLabel from '../../../../../docs/data/material/components/progress/CircularWithValueLabel.tsx';
import CustomizedProgressBars from '../../../../../docs/data/material/components/progress/CustomizedProgressBars.tsx';
import DelayingAppearance from '../../../../../docs/data/material/components/progress/DelayingAppearance.tsx';
import LinearBuffer from '../../../../../docs/data/material/components/progress/LinearBuffer.tsx';
import LinearColor from '../../../../../docs/data/material/components/progress/LinearColor.tsx';
import LinearDeterminate from '../../../../../docs/data/material/components/progress/LinearDeterminate.tsx';
import LinearIndeterminate from '../../../../../docs/data/material/components/progress/LinearIndeterminate.tsx';
import LinearWithValueLabel from '../../../../../docs/data/material/components/progress/LinearWithValueLabel.tsx';

export default function Progress() {
return (
<MaterialUILayout>
<h1>Progress</h1>
<section>
<h2> Circular Color</h2>
<div className="demo-container">
<CircularColor />
</div>
</section>
<section>
<h2> Circular Determinate</h2>
<div className="demo-container">
<CircularDeterminate />
</div>
</section>
<section>
<h2> Circular Indeterminate</h2>
<div className="demo-container">
<CircularIndeterminate />
</div>
</section>
<section>
<h2> Circular Integration</h2>
<div className="demo-container">
<CircularIntegration />
</div>
</section>
<section>
<h2> Circular Under Load</h2>
<div className="demo-container">
<CircularUnderLoad />
</div>
</section>
<section>
<h2> Circular With Value Label</h2>
<div className="demo-container">
<CircularWithValueLabel />
</div>
</section>
<section>
<h2> Customized Progress Bars</h2>
<div className="demo-container">
<CustomizedProgressBars />
</div>
</section>
<section>
<h2> Delaying Appearance</h2>
<div className="demo-container">
<DelayingAppearance />
</div>
</section>
<section>
<h2> Linear Buffer</h2>
<div className="demo-container">
<LinearBuffer />
</div>
</section>
<section>
<h2> Linear Color</h2>
<div className="demo-container">
<LinearColor />
</div>
</section>
<section>
<h2> Linear Determinate</h2>
<div className="demo-container">
<LinearDeterminate />
</div>
</section>
<section>
<h2> Linear Indeterminate</h2>
<div className="demo-container">
<LinearIndeterminate />
</div>
</section>
<section>
<h2> Linear With Value Label</h2>
<div className="demo-container">
<LinearWithValueLabel />
</div>
</section>
</MaterialUILayout>
);
}
118 changes: 78 additions & 40 deletions packages/mui-material/src/CircularProgress/CircularProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import chainPropTypes from '@mui/utils/chainPropTypes';
import composeClasses from '@mui/utils/composeClasses';
import { keyframes, css } from '@mui/system';
import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
import capitalize from '../utils/capitalize';
import useThemeProps from '../styles/useThemeProps';
import styled from '../styles/styled';
import { getCircularProgressUtilityClass } from './circularProgressClasses';

const useThemeProps = createUseThemeProps('MuiCircularProgress');

const SIZE = 44;

const circularRotateKeyframe = keyframes`
Expand Down Expand Up @@ -39,6 +39,14 @@ const circularDashKeyframe = keyframes`
}
`;

const rotateAnimation = css`
animation: ${circularRotateKeyframe} 1.4s linear infinite;
`;

const dashAnimation = css`
animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
`;

const useUtilityClasses = (ownerState) => {
const { classes, variant, color, disableShrink } = ownerState;

Expand All @@ -63,22 +71,39 @@ const CircularProgressRoot = styled('span', {
styles[`color${capitalize(ownerState.color)}`],
];
},
})(
({ ownerState, theme }) => ({
display: 'inline-block',
...(ownerState.variant === 'determinate' && {
transition: theme.transitions.create('transform'),
}),
...(ownerState.color !== 'inherit' && {
color: (theme.vars || theme).palette[ownerState.color].main,
}),
}),
({ ownerState }) =>
ownerState.variant === 'indeterminate' &&
css`
animation: ${circularRotateKeyframe} 1.4s linear infinite;
`,
);
})(({ theme }) => ({
display: 'inline-block',
variants: [
{
props: {
variant: 'determinate',
},
style: {
transition: theme.transitions.create('transform'),
},
},
{
props: {
variant: 'indeterminate',
},
style:
// For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12
rotateAnimation !== 'string'
? rotateAnimation
: {
animation: `${circularRotateKeyframe} 1.4s linear infinite`,
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.map(([color]) => ({
props: { color },
style: {
color: (theme.vars || theme).palette[color].main,
},
})),
],
}));

const CircularProgressSVG = styled('svg', {
name: 'MuiCircularProgress',
Expand All @@ -100,27 +125,40 @@ const CircularProgressCircle = styled('circle', {
ownerState.disableShrink && styles.circleDisableShrink,
];
},
})(
({ ownerState, theme }) => ({
stroke: 'currentColor',
// Use butt to follow the specification, by chance, it's already the default CSS value.
// strokeLinecap: 'butt',
...(ownerState.variant === 'determinate' && {
transition: theme.transitions.create('stroke-dashoffset'),
}),
...(ownerState.variant === 'indeterminate' && {
// Some default value that looks fine waiting for the animation to kicks in.
strokeDasharray: '80px, 200px',
strokeDashoffset: 0, // Add the unit to fix a Edge 16 and below bug.
}),
}),
({ ownerState }) =>
ownerState.variant === 'indeterminate' &&
!ownerState.disableShrink &&
css`
animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
`,
);
})(({ theme }) => ({
stroke: 'currentColor',
variants: [
{
props: {
variant: 'determinate',
},
style: {
transition: theme.transitions.create('stroke-dashoffset'),
},
},
{
props: {
variant: 'indeterminate',
},
style: {
// Some default value that looks fine waiting for the animation to kicks in.
strokeDasharray: '80px, 200px',
strokeDashoffset: 0, // Add the unit to fix a Edge 16 and below bug.
},
},
{
// For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12
props: ({ ownerState }) =>
ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
style:
typeof dashAnimation !== 'string'
? dashAnimation
: {
animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
},
},
],
}));

/**
* ## ARIA
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/zero-styled/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import useThemeProps from '../styles/useThemeProps';

export { keyframes } from '@mui/system';
export { css, keyframes } from '@mui/system';

export { default as styled } from '../styles/styled';

Expand Down
22 changes: 2 additions & 20 deletions packages/pigment-css-react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,26 +127,8 @@
"require": "./utils/index.js",
"default": "./utils/index.js"
},
"./exports/generateAtomics": {
"default": "./exports/generateAtomics.js"
},
"./exports/keyframes": {
"default": "./exports/keyframes.js"
},
"./exports/styled": {
"default": "./exports/styled.js"
},
"./exports/sx-plugin": {
"default": "./exports/sx-plugin.js"
},
"./exports/remove-prop-types-plugin": {
"default": "./exports/remove-prop-types-plugin.js"
},
"./exports/sx": {
"default": "./exports/sx.js"
},
"./exports/createUseThemeProps": {
"default": "./exports/createUseThemeProps.js"
"./exports/*": {
"default": "./exports/*.js"
},
"./Box": {
"types": "./build/Box.d.ts",
Expand Down

0 comments on commit 01aa929

Please sign in to comment.