From 10e5fb86762af01111e37897a2bee17c9f11f437 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 7 Jan 2025 18:29:28 +0100
Subject: [PATCH 1/3] Remove flaky demo

---
 .../src/pages/material-ui/react-progress.tsx               | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
index badcc6a712d49c..0a793cae9947d7 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
@@ -9,7 +9,6 @@ import CircularWithValueLabel from '../../../../../docs/data/material/components
 import CustomizedProgressBars from '../../../../../docs/data/material/components/progress/CustomizedProgressBars.tsx';
 import DelayingAppearance from '../../../../../docs/data/material/components/progress/DelayingAppearance.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';
 
@@ -71,12 +70,6 @@ export default function Progress() {
           <LinearColor />
         </div>
       </section>
-      <section>
-        <h2> Linear Determinate</h2>
-        <div className="demo-container">
-          <LinearDeterminate />
-        </div>
-      </section>
       <section>
         <h2> Linear Indeterminate</h2>
         <div className="demo-container">

From 13d7b8ba1e42db3fff5c31449ca90f0128d49098 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 7 Jan 2025 18:32:06 +0100
Subject: [PATCH 2/3] Update react-progress.tsx

---
 .../src/pages/material-ui/react-progress.tsx               | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
index 0a793cae9947d7..36fda6bd34d921 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
@@ -10,7 +10,6 @@ import CustomizedProgressBars from '../../../../../docs/data/material/components
 import DelayingAppearance from '../../../../../docs/data/material/components/progress/DelayingAppearance.tsx';
 import LinearColor from '../../../../../docs/data/material/components/progress/LinearColor.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 (
@@ -76,12 +75,6 @@ export default function Progress() {
           <LinearIndeterminate />
         </div>
       </section>
-      <section>
-        <h2> Linear With Value Label</h2>
-        <div className="demo-container">
-          <LinearWithValueLabel />
-        </div>
-      </section>
     </MaterialUILayout>
   );
 }

From a9465c78e0b7d4d6720f7a4db24066ecba7b0ecf Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 7 Jan 2025 18:45:09 +0100
Subject: [PATCH 3/3] Update react-progress.tsx

---
 .../src/pages/material-ui/react-progress.tsx  | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
index 36fda6bd34d921..b597deeddb8f6a 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
@@ -1,4 +1,7 @@
 import * as React from 'react';
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 import MaterialUILayout from '../../Layout';
 import CircularColor from '../../../../../docs/data/material/components/progress/CircularColor.tsx';
 import CircularDeterminate from '../../../../../docs/data/material/components/progress/CircularDeterminate.tsx';
@@ -11,6 +14,22 @@ import DelayingAppearance from '../../../../../docs/data/material/components/pro
 import LinearColor from '../../../../../docs/data/material/components/progress/LinearColor.tsx';
 import LinearIndeterminate from '../../../../../docs/data/material/components/progress/LinearIndeterminate.tsx';
 
+function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography
+          variant="body2"
+          sx={{ color: 'text.secondary' }}
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
 export default function Progress() {
   return (
     <MaterialUILayout>
@@ -63,18 +82,42 @@ export default function Progress() {
           <DelayingAppearance />
         </div>
       </section>
+      <section>
+        <h2> Linear Buffer</h2>
+        <div className="demo-container">
+          <Box sx={{ width: '100%' }}>
+            <LinearProgress variant="buffer" value={10} valueBuffer={30} />
+          </Box>
+        </div>
+      </section>
       <section>
         <h2> Linear Color</h2>
         <div className="demo-container">
           <LinearColor />
         </div>
       </section>
+      <section>
+        <h2> Linear Determinate</h2>
+        <div className="demo-container">
+          <Box sx={{ width: '100%' }}>
+            <LinearProgress variant="determinate" value={10} />
+          </Box>
+        </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">
+          <Box sx={{ width: '100%' }}>
+            <LinearProgressWithLabel value={10} />
+          </Box>
+        </div>
+      </section>
     </MaterialUILayout>
   );
 }