Merge branch 'master' into deprecate-composed-classes

headironc · Jan 9, 2025 · 3f3840f · 3f3840f
2 parents 5fadade + 04fc1fa
commit 3f3840f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 37 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>

diff --git a/docs/src/components/careers/CareersFaq.tsx b/docs/src/components/careers/CareersFaq.tsx
@@ -83,7 +83,7 @@ const faqData = [
 
   For those that chose the "employee":
 
-  - people in France are hired as full-time employees under the French [legal entity](https://www.infogreffe.com/entreprise-societe/852357748-material-ui-750119B189960000.html).
+  - people in France are hired as full-time employees under the French [legal entity](https://www.infogreffe.fr/entreprise-societe/852357748-material-ui-750119B189960000.html).
   - people outside of France are hired through an Employer of Record (EOR), for example, Deel: https://www.deel.com/.
 `,
   },

diff --git a/test/e2e/TestViewer.js b/test/e2e/TestViewer.js
@@ -13,11 +13,9 @@ function TestViewer(props) {
   }, []);
 
   return (
-    <React.Suspense fallback={<div aria-busy />}>
-      <div aria-busy={!ready} data-testid="testcase">
-        {children}
-      </div>
-    </React.Suspense>
+    <div aria-busy={!ready} data-testid="testcase">
+      {children}
+    </div>
   );
 }
 

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useFakeTimers } from 'sinon';
 import Box from '@mui/material/Box';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import JoyBox from '@mui/joy/Box';
@@ -29,13 +28,6 @@ function TestViewer(props) {
     document.fonts.addEventListener('loading', handleFontsEvent);
     document.fonts.addEventListener('loadingdone', handleFontsEvent);
 
-    // Use a "real timestamp" so that we see a useful date instead of "00:00"
-    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useFakeTimers is not a React hook
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- not a React hook
-    const clock = useFakeTimers({
-      now: new Date('Mon Aug 18 14:11:54 2014 -0500'),
-      toFake: ['Date'],
-    });
     // In case the child triggered font fetching we're not ready yet.
     // The fonts event handler will mark the test as ready on `loadingdone`
     if (document.fonts.status === 'loaded') {
@@ -45,7 +37,6 @@ function TestViewer(props) {
     return () => {
       document.fonts.removeEventListener('loading', handleFontsEvent);
       document.fonts.removeEventListener('loadingdone', handleFontsEvent);
-      clock.restore();
     };
   }, []);
 
@@ -76,29 +67,27 @@ function TestViewer(props) {
           },
         }}
       />
-      <React.Suspense fallback={<div aria-busy />}>
-        {window.location.pathname.startsWith('/docs-joy') ? (
-          <CssVarsProvider>
-            <JoyBox
-              aria-busy={!ready}
-              data-testid="testcase"
-              data-testpath={path}
-              sx={{ bgcolor: 'background.body', ...viewerBoxSx }}
-            >
-              {children}
-            </JoyBox>
-          </CssVarsProvider>
-        ) : (
-          <Box
+      {window.location.pathname.startsWith('/docs-joy') ? (
+        <CssVarsProvider>
+          <JoyBox
             aria-busy={!ready}
             data-testid="testcase"
             data-testpath={path}
-            sx={{ bgcolor: 'background.default', ...viewerBoxSx }}
+            sx={{ bgcolor: 'background.body', ...viewerBoxSx }}
           >
             {children}
-          </Box>
-        )}
-      </React.Suspense>
+          </JoyBox>
+        </CssVarsProvider>
+      ) : (
+        <Box
+          aria-busy={!ready}
+          data-testid="testcase"
+          data-testpath={path}
+          sx={{ bgcolor: 'background.default', ...viewerBoxSx }}
+        >
+          {children}
+        </Box>
+      )}
     </React.Fragment>
   );
 }