refactor

mui · Sep 19, 2023 · 465ec51 · 465ec51
1 parent fce5729
commit 465ec51
Showing 1 changed file with 16 additions and 17 deletions.
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -48,7 +48,7 @@ const useUtilityClasses = (ownerState: CircularProgressOwnerState) => {
 };
 
 function getThickness(slot: 'track' | 'progress', defaultValue: string) {
-  return `var(--CircularProgress-${slot}Thickness, var(${cssVars.thickness}, ${defaultValue}))`;
+  return `var(${cssVars[`${slot}Thickness`]}, var(${cssVars.thickness}, ${defaultValue}))`;
 }
 
 const CircularProgressRoot = styled('span', {
@@ -64,31 +64,31 @@ const CircularProgressRoot = styled('span', {
     // public variables
     [cssVars.trackColor]: backgroundColor,
     [cssVars.progressColor]: color,
-    '--CircularProgress-percent': ownerState.value, // 0 - 100
-    '--CircularProgress-linecap': 'round',
+    [cssVars.percent]: ownerState.value, // 0 - 100
+    [cssVars.linecap]: 'round',
     ...(ownerState.size === 'sm' && {
-      '--_root-size': 'var(--CircularProgress-size, 24px)', // use --_root-size to let other components overrides via --CircularProgress-size
+      '--_root-size': `var(${cssVars.size}, 24px)`, // use --_root-size to let other components overrides via --CircularProgress-size
       '--_track-thickness': getThickness('track', '3px'),
       '--_progress-thickness': getThickness('progress', '3px'),
     }),
     ...(ownerState.instanceSize === 'sm' && {
-      '--CircularProgress-size': '24px',
+      [cssVars.size]: '24px',
     }),
     ...(ownerState.size === 'md' && {
       '--_track-thickness': getThickness('track', '6px'),
       '--_progress-thickness': getThickness('progress', '6px'),
-      '--_root-size': 'var(--CircularProgress-size, 40px)',
+      '--_root-size': `var(${cssVars.size}, 40px)`,
     }),
     ...(ownerState.instanceSize === 'md' && {
-      '--CircularProgress-size': '40px',
+      [cssVars.size]: '40px',
     }),
     ...(ownerState.size === 'lg' && {
       '--_track-thickness': getThickness('track', '8px'),
       '--_progress-thickness': getThickness('progress', '8px'),
-      '--_root-size': 'var(--CircularProgress-size, 64px)',
+      '--_root-size': `var(${cssVars.size}, 64px)`,
     }),
     ...(ownerState.instanceSize === 'lg' && {
-      '--CircularProgress-size': '64px',
+      [cssVars.size]: '64px',
     }),
     ...(ownerState.thickness && {
       '--_track-thickness': `${ownerState.thickness}px`,
@@ -101,7 +101,7 @@ const CircularProgressRoot = styled('span', {
     width: 'var(--_root-size)',
     height: 'var(--_root-size)',
     borderRadius: 'var(--_root-size)',
-    margin: 'var(--CircularProgress-margin)',
+    margin: `var(${cssVars.margin})`,
     boxSizing: 'border-box',
     display: 'inline-flex',
     justifyContent: 'center',
@@ -157,7 +157,7 @@ const CircularProgressTrack = styled('circle', {
   r: 'calc(var(--_inner-size) / 2 - var(--_track-thickness) / 2 + min(0px, var(--_thickness-diff) / 2))',
   fill: 'transparent',
   strokeWidth: 'var(--_track-thickness)',
-  stroke: 'var(--CircularProgress-trackColor)',
+  stroke: `var(${cssVars.trackColor}})`,
 });
 
 const CircularProgressProgress = styled('circle', {
@@ -174,18 +174,17 @@ const CircularProgressProgress = styled('circle', {
     r: 'var(--_progress-radius)',
     fill: 'transparent',
     strokeWidth: 'var(--_progress-thickness)',
-    stroke: 'var(--CircularProgress-progressColor)',
-    strokeLinecap: 'var(--CircularProgress-linecap, round)' as 'round', // can't use CSS variable directly, need to cast type.
+    stroke: `var(${cssVars.progressColor})`,
+    strokeLinecap: `var(${cssVars.linecap}, round)` as 'round', // can't use CSS variable directly, need to cast type.
     strokeDasharray: 'var(--_progress-length)',
-    strokeDashoffset:
-      'calc(var(--_progress-length) - var(--CircularProgress-percent) * var(--_progress-length) / 100)',
+    strokeDashoffset: `calc(var(--_progress-length) - var(${cssVars.percent}) * var(--_progress-length) / 100)`,
     transformOrigin: 'center',
     transform: 'rotate(-90deg)', // to initially appear at the top-center of the circle.
   },
   ({ ownerState }) =>
     !ownerState.determinate &&
     css`
-      animation: var(--CircularProgress-circulation, 0.8s linear 0s infinite normal none running)
+      animation: var(${cssVars.circulation}, 0.8s linear 0s infinite normal none running)
         ${circulate};
     `,
 );
@@ -254,7 +253,7 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
         // Setting this CSS variable via inline-style
         // prevents the generation of new CSS every time
         // `value` prop updates
-        '--CircularProgress-percent': value,
+        [cssVars.percent]: value,
       },
       ...(value &&
         determinate && {