[docs][joy-ui] Integrate a count-up feature to the Linear Progress (m…

…ui#38738)

docs/data/joy/components/linear-progress/LinearProgressCountUp.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Typography from '@mui/joy/Typography';
+import { useCountUp } from 'use-count-up';
+
+export default function LinearProgressCountUp() {
+  const { value } = useCountUp({
+    isCounting: true,
+    duration: 5,
+    easing: 'linear',
+    start: 0,
+    end: 75,
+    onComplete: () => ({
+      shouldRepeat: true,
+      delay: 2,
+    }),
+  });
+
+  return (
+    <LinearProgress
+      determinate
+      variant="outlined"
+      color="neutral"
+      size="sm"
+      thickness={24}
+      value={Number(value)}
+      sx={{
+        '--LinearProgress-radius': '20px',
+        '--LinearProgress-thickness': '24px',
+      }}
+    >
+      <Typography
+        level="body-xs"
+        fontWeight="xl"
+        textColor="common.white"
+        sx={{ mixBlendMode: 'difference' }}
+      >
+        LOADING… {`${Math.round(Number(value))}%`}
+      </Typography>
+    </LinearProgress>
+  );
+}

docs/data/joy/components/linear-progress/LinearProgressCountUp.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Typography from '@mui/joy/Typography';
+import { useCountUp } from 'use-count-up';
+
+export default function LinearProgressCountUp() {
+  const { value } = useCountUp({
+    isCounting: true,
+    duration: 5,
+    easing: 'linear',
+    start: 0,
+    end: 75,
+    onComplete: () => ({
+      shouldRepeat: true,
+      delay: 2,
+    }),
+  });
+
+  return (
+    <LinearProgress
+      determinate
+      variant="outlined"
+      color="neutral"
+      size="sm"
+      thickness={24}
+      value={Number(value!)}
+      sx={{
+        '--LinearProgress-radius': '20px',
+        '--LinearProgress-thickness': '24px',
+      }}
+    >
+      <Typography
+        level="body-xs"
+        fontWeight="xl"
+        textColor="common.white"
+        sx={{ mixBlendMode: 'difference' }}
+      >
+        LOADING… {`${Math.round(Number(value!))}%`}
+      </Typography>
+    </LinearProgress>
+  );
+}

docs/data/joy/components/linear-progress/linear-progress.md

@@ -69,6 +69,14 @@ Provides a number to `thickness` prop to control the bar's stroke width.
 
 {{"demo": "LinearProgressThickness.js"}}
 
+## 3rd-party integration
+
+### use-count-up
+
+Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "LinearProgressCountUp.js"}}
+
 ## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.

docs/package.json

@@ -119,7 +119,8 @@
     "stylis-plugin-rtl": "^2.1.1",
     "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0",
     "webfontloader": "^1.6.28",
-    "webpack-bundle-analyzer": "^4.9.0"
+    "webpack-bundle-analyzer": "^4.9.0",
+    "use-count-up": "^3.0.1"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.22.5",

packages/mui-joy/src/LinearProgress/LinearProgress.tsx

@@ -16,6 +16,7 @@ import {
   LinearProgressTypeMap,
 } from './LinearProgressProps';
 import useSlot from '../utils/useSlot';
+import { resolveSxValue } from '../styles/styleUtils';
 
 // TODO: replace `left` with `inset-inline-start` in the future to work with writing-mode. https://caniuse.com/?search=inset-inline-start
 //       replace `width` with `inline-size`, not sure why inline-size does not work with animation in Safari.
@@ -129,6 +130,16 @@ const LinearProgressRoot = styled('div', {
               var(--LinearProgress-circulation, 2.5s ease-in-out 0s infinite normal none running);
           }
         `,
+  ({ ownerState, theme }) => {
+    const { borderRadius, height } = resolveSxValue({ theme, ownerState }, [
+      'borderRadius',
+      'height',
+    ]);
+    return {
+      ...(borderRadius !== undefined && { '--LinearProgress-radius': borderRadius }),
+      ...(height !== undefined && { '--LinearProgress-thickness': height }),
+    };
+  },
 );
 
 /**

yarn.lock

@@ -16552,6 +16552,18 @@ [email protected]:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-count-up@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/use-count-up/-/use-count-up-3.0.1.tgz#315edf4e4be91ead94e6dd34444349d9b8c2c6c3"
+  integrity sha512-jlVsXJYje6jh+xwQaCEYrwHoB+nRyillNEmr21bhe9kw7tpRzyrSq9jQs9UOlo+8hCFkuOmjUihL3IjEK/piVg==
+  dependencies:
+    use-elapsed-time "3.0.2"
+
+[email protected]:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/use-elapsed-time/-/use-elapsed-time-3.0.2.tgz#ef22bf520e60f9873fd102925a2d5cbc5d4faaf5"
+  integrity sha512-2EY9lJ5DWbAvT8wWiEp6Ztnl46DjXz2j78uhWbXaz/bg3OfpbgVucCAlcN8Bih6hTJfFTdVYX9L6ySMn5py/wQ==
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"