[joy-ui][Progress] Revamp Linear and Circular progress variants (#39492)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
mui · Oct 26, 2023 · edcb46b · edcb46b
1 parent 4b35e64
commit edcb46b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/docs/data/joy/components/alert/AlertInvertedColors.js b/docs/data/joy/components/alert/AlertInvertedColors.js
@@ -55,24 +55,24 @@ export default function AlertInvertedColors() {
           </Typography>
         </div>
         <LinearProgress
-          variant="soft"
+          variant="solid"
+          color="success"
           value={40}
-          sx={(theme) => ({
+          sx={{
             position: 'absolute',
             bottom: 0,
             left: 0,
             right: 0,
-            color: `rgb(${theme.vars.palette.success.lightChannel} / 0.72)`,
-            '--LinearProgress-radius': '0px',
-          })}
+            borderRadius: 0,
+          }}
         />
       </Alert>
       <Alert
         variant="soft"
         color="danger"
         invertedColors
         startDecorator={
-          <CircularProgress size="lg">
+          <CircularProgress size="lg" color="danger">
             <Warning />
           </CircularProgress>
         }

diff --git a/docs/data/joy/components/alert/AlertInvertedColors.tsx b/docs/data/joy/components/alert/AlertInvertedColors.tsx
@@ -55,24 +55,24 @@ export default function AlertInvertedColors() {
           </Typography>
         </div>
         <LinearProgress
-          variant="soft"
+          variant="solid"
+          color="success"
           value={40}
-          sx={(theme) => ({
+          sx={{
             position: 'absolute',
             bottom: 0,
             left: 0,
             right: 0,
-            color: `rgb(${theme.vars.palette.success.lightChannel} / 0.72)`,
-            '--LinearProgress-radius': '0px',
-          })}
+            borderRadius: 0,
+          }}
         />
       </Alert>
       <Alert
         variant="soft"
         color="danger"
         invertedColors
         startDecorator={
-          <CircularProgress size="lg">
+          <CircularProgress size="lg" color="danger">
             <Warning />
           </CircularProgress>
         }

diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -128,6 +128,15 @@ const CircularProgressRoot = styled('span', {
         ...rest,
       },
     }),
+    ...(ownerState.variant === 'soft' && {
+      '--CircularProgress-trackColor': theme.variants.soft.neutral.backgroundColor,
+      '--CircularProgress-progressColor': theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
+    ...(ownerState.variant === 'solid' && {
+      '--CircularProgress-trackColor':
+        theme.variants.softHover?.[ownerState.color!].backgroundColor,
+      '--CircularProgress-progressColor': theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
   };
 });
 

diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -113,6 +113,14 @@ const LinearProgressRoot = styled('div', {
       color: 'inherit',
       position: 'absolute', // required to make `left` animation works.
     },
+    ...(ownerState.variant === 'soft' && {
+      backgroundColor: theme.variants.soft.neutral.backgroundColor,
+      color: theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
+    ...(ownerState.variant === 'solid' && {
+      backgroundColor: theme.variants.softHover?.[ownerState.color!].backgroundColor,
+      color: theme.variants.solid?.[ownerState.color!].backgroundColor,
+    }),
   }),
   ({ ownerState }) =>
     ownerState.determinate