CircularProgress & LinearProgress visual styling

.changeset/sweet-months-cross.md

@@ -0,0 +1,5 @@
+---
+"@stratakit/mui": patch
+---
+
+Styled `LinearProgress` to match the Strata visual design language.

.changeset/thirty-trains-cross.md

@@ -0,0 +1,5 @@
+---
+"@stratakit/mui": patch
+---
+
+Styled `CircularProgress` to match the Strata visual design language.

apps/test-app/app/mui/CircularProgress.showcase.tsx

@@ -2,20 +2,16 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import Stack from "@mui/material/Stack";
-import CircularProgressColors_ from "examples/mui/CircularProgress._colors.tsx";
+import CircularProgressColors from "examples/mui/CircularProgress.colors.tsx";
 import CircularProgressDefault from "examples/mui/CircularProgress.default.tsx";
-import { isProduction } from "~/~utils.tsx";
+import CircularProgressDeterminate from "examples/mui/CircularProgress.determinate.tsx";
 
 export default function CircularProgressExamples() {
 	return (
 		<>
 			<CircularProgressDefault />
-			{!isProduction && (
-				<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
-					<CircularProgressColors_ />
-				</Stack>
-			)}
+			<CircularProgressColors />
+			<CircularProgressDeterminate />
 		</>
 	);
 }

apps/test-app/app/mui/LinearProgress.showcase.tsx

@@ -3,15 +3,18 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import Stack from "@mui/material/Stack";
-import LinearProgressColors_ from "examples/mui/LinearProgress._colors.tsx";
+import LinearProgressBuffer from "examples/mui/LinearProgress.buffer.tsx";
+import LinearProgressColors from "examples/mui/LinearProgress.colors.tsx";
 import LinearProgressDefault from "examples/mui/LinearProgress.default.tsx";
-import { isProduction } from "~/~utils.tsx";
+import LinearProgressDeterminate from "examples/mui/LinearProgress.determinate.tsx";
 
 export default function LinearProgressExamples() {
 	return (
 		<Stack spacing={1} sx={{ alignSelf: "stretch" }}>
 			<LinearProgressDefault />
-			{!isProduction && <LinearProgressColors_ />}
+			<LinearProgressColors />
+			<LinearProgressDeterminate />
+			<LinearProgressBuffer />
 		</Stack>
 	);
 }

apps/website/src/content/docs/components/mui/CircularProgress.md

@@ -0,0 +1,30 @@
+---
+title: CircularProgress
+description: Progress indicators are used to display a loading state or visualize the progress of an operation.
+links:
+  muiDocs: https://mui.com/material-ui/react-progress/
+  apiReference: https://mui.com/material-ui/api/circular-progress/
+---
+
+::example{src="mui/CircularProgress.default"}
+
+## StrataKit MUI modifications
+
+- The `enableTrackSlot` prop defaults to true.
+- Restyled using StrataKit's visual language.
+- Includes full `forced-colors` support.
+
+## Examples
+
+### Colors
+
+- **Primary:** The default. Use when indicating the primary loading state on a page.
+- **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once.
+
+::example{src="mui/CircularProgress.colors"}
+
+### Determinate
+
+Set the `variant` prop to `"determinate"` when the completion percentage is known.
+
+::example{src="mui/CircularProgress.determinate"}

apps/website/src/content/docs/components/mui/LinearProgress.md

@@ -0,0 +1,36 @@
+---
+title: LinearProgress
+description: Progress indicators are used to display a loading state or visualize the progress of an operation.
+links:
+  muiDocs: https://mui.com/material-ui/react-progress/
+  apiReference: https://mui.com/material-ui/api/linear-progress/
+---
+
+::example{src="mui/LinearProgress.default"}
+
+## StrataKit MUI modifications
+
+- Added an end marker when the `variant` prop is set to `"determinate"` or `"buffer"`.
+- Restyled using StrataKit's visual language.
+- Includes full `forced-colors` support.
+
+## Examples
+
+### Colors
+
+- **Primary:** The default. Use when indicating the primary loading state on a page.
+- **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once.
+
+::example{src="mui/LinearProgress.colors"}
+
+### Determinate
+
+Set the `variant` prop to `"determinate"` when the completion percentage is known.
+
+::example{src="mui/LinearProgress.determinate"}
+
+### Buffer
+
+Set the `variant` prop to `"buffer"` when progress and buffered work are tracked separately.
+
+::example{src="mui/LinearProgress.buffer"}

apps/website/src/content/docs/components/mui/Skeleton.md

@@ -12,11 +12,11 @@ links:
 
 Make sure the **Skeleton** is suitable for your use case. There may be other, more appropriate components available.
 
-| Use case                                                                | [Progress](/components/progress) | [Skeleton](/components/skeleton) |
-| ----------------------------------------------------------------------- | -------------------------------- | -------------------------------- |
-| Showing a loading (or other) process where the progress is determinable | ✅                               | ❌                               |
-| Showing an indeterminable loading progress                              | ✅                               | ✅                               |
-| Showing a process other than loading, such as a calculation             | ✅                               | ❌                               |
+| Use case                                                                | [CircularProgress](/components/circularprogress) & [LinearProgress](/components/linearprogress) | [Skeleton](/components/skeleton) |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------- |
+| Showing a loading (or other) process where the progress is determinable | ✅                                                                                              | ❌                               |
+| Showing an indeterminable loading progress                              | ✅                                                                                              | ✅                               |
+| Showing a process other than loading, such as a calculation             | ✅                                                                                              | ❌                               |
 
 ### Variants
 
@@ -42,4 +42,4 @@ Accurately representing the shape and structure of a loading interface is a case
 ## 🚫 Don't
 
 - Don't use **Skeleton** where the size and shape of the content and functionality being loaded is not known.
-- Don't use **Skeleton** to indicate the progress of any process except loading. For indicating the progress of calculations and other processes within a loaded interface, use [**Progress**](/components/progress).
+- Don't use **Skeleton** to indicate the progress of any process except loading. For indicating the progress of calculations and other processes within a loaded interface, use [**CircularProgress**](/components/circularprogress) or [**LinearProgress**](/components/linearprogress).

apps/website/src/content/docs/getting-started/migration-from-legacy-stratakit.mdx

@@ -256,7 +256,7 @@ Read additional [StrataKit MUI component documentation](/components/overview/) f
 
 ### ProgressBar
 
-- Replace the `ProgressBar` component from `@stratakit/bricks` with the `LinearProgress` component from `@mui/material`. See [Progress examples](/components/progress/) for reference.
+- Replace the `ProgressBar` component from `@stratakit/bricks` with the `LinearProgress` component from `@mui/material`. See [LinearProgress examples](/components/linearprogress) for reference.
 - Remove unsupported [`size`](/reference/bricks/Progress#Progress.ProgressBar.size) prop.
 - Change [`tone`](/reference/bricks/Progress#Progress.ProgressBar.tone) prop to [`color`](https://mui.com/material-ui/api/linear-progress/#linear-progress-prop-color) prop.
 
@@ -290,7 +290,7 @@ Read additional [StrataKit MUI component documentation](/components/overview/) f
 
 ### Spinner
 
-- Replace the `Spinner` component from `@stratakit/bricks` with the `CircularProgress` component from `@mui/material`. See [Progress examples](/components/progress/) for reference.
+- Replace the `Spinner` component from `@stratakit/bricks` with the `CircularProgress` component from `@mui/material`. See [CircularProgress examples](/components/circularprogress) for reference.
 - Change the value of [`size`](/reference/bricks/Spinner#Spinner.size) prop. MUI [`size`](https://mui.com/material-ui/api/circular-progress/#circular-progress-prop-size) prop uses pixel values or custom units when a string is provided.
 - Change [`tone`](/reference/bricks/Spinner#Spinner.tone) prop to [`color`](https://mui.com/material-ui/api/circular-progress/#circular-progress-prop-color) prop.
 

examples/mui/CircularProgress.colors.tsx

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+
+export default () => {
+	const labelId = React.useId();
+
+	return (
+		<>
+			<CircularProgress color="secondary" aria-labelledby={labelId} />
+			<Typography id={labelId}>Analyzing results…</Typography>
+		</>
+	);
+};

examples/mui/CircularProgress.determinate.module.css

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.container {
+	display: inline-flex;
+	position: relative;
+}
+
+.percentage {
+	align-items: center;
+	display: flex;
+	inset: 0;
+	justify-content: center;
+	position: absolute;
+}

examples/mui/CircularProgress._colors.tsx → examples/mui/CircularProgress.determinate.tsx

@@ -4,28 +4,29 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as React from "react";
+import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 import Typography from "@mui/material/Typography";
 
-type CircularProgressProps = React.ComponentProps<typeof CircularProgress>;
-const colors = [
-	"secondary",
-	"primary",
-] as const satisfies CircularProgressProps["color"][];
+import styles from "./CircularProgress.determinate.module.css";
 
 export default () => {
-	const exampleId = React.useId();
+	const labelId = React.useId();
+	const progress = 50;
 
-	return colors.map((color) => {
-		const labelId = `${exampleId}-${color}`;
-		return (
-			<div key={color}>
-				<CircularProgress aria-labelledby={labelId} color={color} />
-				<Typography id={labelId}>
-					{color.charAt(0).toUpperCase()}
-					{color.slice(1)}…
+	return (
+		<>
+			<Box className={styles.container}>
+				<CircularProgress
+					variant="determinate"
+					value={progress}
+					aria-labelledby={labelId}
+				/>
+				<Typography variant="caption" className={styles.percentage}>
+					{progress}%
 				</Typography>
-			</div>
-		);
-	});
+			</Box>
+			<Typography id={labelId}>Uploading…</Typography>
+		</>
+	);
 };

examples/mui/LinearProgress.buffer.tsx

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from "react";
+import LinearProgress from "@mui/material/LinearProgress";
+import Typography from "@mui/material/Typography";
+
+export default () => {
+	const labelId = React.useId();
+
+	return (
+		<>
+			<LinearProgress
+				variant="buffer"
+				value={33}
+				valueBuffer={66}
+				aria-labelledby={labelId}
+			/>
+			<Typography id={labelId}>Buffering results…</Typography>
+		</>
+	);
+};

examples/mui/LinearProgress.colors.tsx

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from "react";
+import LinearProgress from "@mui/material/LinearProgress";
+import Typography from "@mui/material/Typography";
+
+export default () => {
+	const labelId = React.useId();
+
+	return (
+		<>
+			<LinearProgress color="secondary" aria-labelledby={labelId} />
+			<Typography id={labelId}>Analyzing results…</Typography>
+		</>
+	);
+};

examples/mui/LinearProgress.determinate.tsx

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from "react";
+import LinearProgress from "@mui/material/LinearProgress";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+export default () => {
+	const labelId = React.useId();
+	const progress = 50;
+
+	return (
+		<>
+			<LinearProgress
+				variant="determinate"
+				value={progress}
+				aria-labelledby={labelId}
+			/>
+			<Stack direction="row" sx={{ justifyContent: "space-between" }}>
+				<Typography id={labelId}>Uploading…</Typography>
+				<Typography>{progress}%</Typography>
+			</Stack>
+		</>
+	);
+};

packages/mui/src/~components.css

@@ -17,11 +17,13 @@
 @import "./~components/MuiCard.css";
 @import "./~components/MuiCheckbox.css";
 @import "./~components/MuiChip.css";
+@import "./~components/MuiCircularProgress.css";
 @import "./~components/MuiDialog.css";
 @import "./~components/MuiDivider.css";
 @import "./~components/MuiForm.css";
 @import "./~components/MuiIconButton.css";
 @import "./~components/MuiInput.css";
+@import "./~components/MuiLinearProgress.css";
 @import "./~components/MuiLink.css";
 @import "./~components/MuiList.css";
 @import "./~components/MuiMenu.css";