[code-infra] Stabilize flaky pigment progressbar tests (mui#44969)

samuelsycamore · Jan 8, 2025 · 272d50d · 272d50d
1 parent 0332535
commit 272d50d
Showing 1 changed file with 33 additions and 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
@@ -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>