From 272d50dbba3d00c9d80a625b4235bc79f639fa51 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:19:09 +0100
Subject: [PATCH] [code-infra] Stabilize flaky pigment progressbar tests
 (#44969)

---
 .../src/pages/material-ui/react-progress.tsx  | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 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..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';
@@ -9,9 +12,23 @@ 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';
+
+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 (
@@ -65,6 +82,14 @@ 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">
@@ -74,7 +99,9 @@ export default function Progress() {
       <section>
         <h2> Linear Determinate</h2>
         <div className="demo-container">
-          <LinearDeterminate />
+          <Box sx={{ width: '100%' }}>
+            <LinearProgress variant="determinate" value={10} />
+          </Box>
         </div>
       </section>
       <section>
@@ -86,7 +113,9 @@ export default function Progress() {
       <section>
         <h2> Linear With Value Label</h2>
         <div className="demo-container">
-          <LinearWithValueLabel />
+          <Box sx={{ width: '100%' }}>
+            <LinearProgressWithLabel value={10} />
+          </Box>
         </div>
       </section>
     </MaterialUILayout>