[Joy] Add LinearProgress component (#34514)

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+
+export default function LinearProgressColors() {
+  const [variant, setVariant] = React.useState('soft');
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Stack spacing={2} sx={{ flex: 1 }}>
+        <LinearProgress color="primary" variant={variant} />
+        <LinearProgress color="neutral" variant={variant} />
+        <LinearProgress color="danger" variant={variant} />
+        <LinearProgress color="info" variant={variant} />
+        <LinearProgress color="success" variant={variant} />
+        <LinearProgress color="warning" variant={variant} />
+      </Stack>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import { VariantProp } from '@mui/joy/styles';
+
+export default function LinearProgressColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('soft');
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Stack spacing={2} sx={{ flex: 1 }}>
+        <LinearProgress color="primary" variant={variant} />
+        <LinearProgress color="neutral" variant={variant} />
+        <LinearProgress color="danger" variant={variant} />
+        <LinearProgress color="info" variant={variant} />
+        <LinearProgress color="success" variant={variant} />
+        <LinearProgress color="warning" variant={variant} />
+      </Stack>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressDeterminate() {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+    }, 800);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Stack spacing={2} sx={{ flex: 1 }}>
+      <LinearProgress determinate value={25} />
+      <LinearProgress determinate value={50} />
+      <LinearProgress determinate value={75} />
+      <LinearProgress determinate value={100} />
+      <LinearProgress determinate value={progress} />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressDeterminate() {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+    }, 800);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Stack spacing={2} sx={{ flex: 1 }}>
+      <LinearProgress determinate value={25} />
+      <LinearProgress determinate value={50} />
+      <LinearProgress determinate value={75} />
+      <LinearProgress determinate value={100} />
+      <LinearProgress determinate value={progress} />
+    </Stack>
+  );
+}

docs/data/joy/components/linear-progress/LinearProgressDeterminate.tsx.preview

@@ -0,0 +1,5 @@
+<LinearProgress determinate value={25} />
+<LinearProgress determinate value={50} />
+<LinearProgress determinate value={75} />
+<LinearProgress determinate value={100} />
+<LinearProgress determinate value={progress} />

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressColors() {
+  return (
+    <Stack spacing={2} sx={{ flex: 1 }}>
+      <LinearProgress size="sm" />
+      <LinearProgress size="md" />
+      <LinearProgress size="lg" />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressColors() {
+  return (
+    <Stack spacing={2} sx={{ flex: 1 }}>
+      <LinearProgress size="sm" />
+      <LinearProgress size="md" />
+      <LinearProgress size="lg" />
+    </Stack>
+  );
+}

docs/data/joy/components/linear-progress/LinearProgressSizes.tsx.preview

@@ -0,0 +1,3 @@
+<LinearProgress size="sm" />
+<LinearProgress size="md" />
+<LinearProgress size="lg" />

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressThickness() {
+  return <LinearProgress thickness={1} />;
+}

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressThickness() {
+  return <LinearProgress thickness={1} />;
+}

docs/data/joy/components/linear-progress/LinearProgressThickness.tsx.preview

@@ -0,0 +1 @@
+<LinearProgress thickness={1} />

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Box from '@mui/joy/Box';
+
+export default function LinearProgressUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="LinearProgress"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'soft',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'primary',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+        {
+          propName: 'determinate',
+          knob: 'switch',
+          defaultValue: false,
+        },
+        {
+          propName: 'value',
+          knob: 'number',
+          defaultValue: 25,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Box sx={{ width: 300 }}>
+          <LinearProgress {...props} />
+        </Box>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Box from '@mui/joy/Box';
+
+export default function LinearProgressVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="LinearProgress"
+      data={[
+        {
+          var: '--LinearProgress-thickness',
+          defaultValue: '6px',
+        },
+        {
+          var: '--LinearProgress-radius',
+          helperText: "Default to root's thickness",
+        },
+        {
+          var: '--LinearProgress-progressThickness',
+          helperText: "Default to root's thickness",
+        },
+        {
+          var: '--LinearProgress-progressRadius',
+          helperText: "Default to root's thickness",
+        },
+      ]}
+      renderDemo={(sx) => (
+        <Box sx={{ width: 300 }}>
+          <LinearProgress sx={sx} />
+        </Box>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Box from '@mui/joy/Box';
+
+export default function LinearProgressVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="LinearProgress"
+      data={[
+        {
+          var: '--LinearProgress-thickness',
+          defaultValue: '6px',
+        },
+        {
+          var: '--LinearProgress-radius',
+          helperText: "Default to root's thickness",
+        },
+        {
+          var: '--LinearProgress-progressThickness',
+          helperText: "Default to root's thickness",
+        },
+        {
+          var: '--LinearProgress-progressRadius',
+          helperText: "Default to root's thickness",
+        },
+      ]}
+      renderDemo={(sx) => (
+        <Box sx={{ width: 300 }}>
+          <LinearProgress sx={sx} />
+        </Box>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressVariants() {
+  return (
+    <Stack spacing={2} sx={{ flex: 1 }}>
+      <LinearProgress variant="solid" />
+      <LinearProgress variant="soft" />
+      <LinearProgress variant="outlined" />
+      <LinearProgress variant="plain" />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import LinearProgress from '@mui/joy/LinearProgress';
+
+export default function LinearProgressVariants() {
+  return (
+    <Stack spacing={2} sx={{ flex: 1 }}>
+      <LinearProgress variant="solid" />
+      <LinearProgress variant="soft" />
+      <LinearProgress variant="outlined" />
+      <LinearProgress variant="plain" />
+    </Stack>
+  );
+}

docs/data/joy/components/linear-progress/LinearProgressVariants.tsx.preview

@@ -0,0 +1,4 @@
+<LinearProgress variant="solid" />
+<LinearProgress variant="soft" />
+<LinearProgress variant="outlined" />
+<LinearProgress variant="plain" />