diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
index 216c1f625..cdf9c8891 100644
--- a/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
@@ -161,6 +161,122 @@ describe("Progress component", () => {
const circularProgressCircle = container.querySelector(".MuiCircularProgress-circle");
expect(circularProgressCircle).not.toHaveStyle("color: blue");
});
+
+ it("applies width to circular progress when width is defined as number", () => {
+ const { container } = render();
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 100px");
+ expect(circularProgress).toHaveStyle("height: 100px");
+ });
+
+ it("applies width to circular progress when width is defined as number & title is defined", () => {
+ const { container } = render();
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 100px");
+ expect(circularProgress).toHaveStyle("height: 100px");
+ });
+
+ it("applies width to circular progress when width is defined as number & title, titleAnchor are defined", () => {
+ const { container } = render(
+
+ );
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 100px");
+ expect(circularProgress).toHaveStyle("height: 100px");
+ });
+
+ it("applies width to circular progress when width is defined as number & title, titleAnchor, showValue are defined", () => {
+ const { container } = render(
+
+ );
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 100px");
+ expect(circularProgress).toHaveStyle("height: 100px");
+ });
+
+ it("applies width to circular progress when width is defined as string", () => {
+ const { container } = render();
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 10rem");
+ expect(circularProgress).toHaveStyle("height: 10rem");
+ });
+
+ it("applies width to circular progress when width is defined as string & title is defined", () => {
+ const { container } = render();
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 10rem");
+ expect(circularProgress).toHaveStyle("height: 10rem");
+ });
+
+ it("applies width to circular progress when width is defined as string & title, titleAnchor are defined", () => {
+ const { container } = render(
+
+ );
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 10rem");
+ expect(circularProgress).toHaveStyle("height: 10rem");
+ });
+
+ it("applies width to circular progress when width is defined as string & title, titleAnchor, showValue are defined", () => {
+ const { container } = render(
+
+ );
+ const circularProgress = container.querySelector(".MuiCircularProgress-root");
+ expect(circularProgress).toHaveStyle("width: 10rem");
+ expect(circularProgress).toHaveStyle("height: 10rem");
+ });
+
+ it("applies width to linear progress when width is defined as number", () => {
+ const { container } = render();
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 100px");
+ });
+
+ it("applies width to linear progress when width is defined as number & title is defined", () => {
+ const { container } = render();
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 100px");
+ });
+
+ it("applies width to linear progress when width is defined as number & title, titleAnchor are defined", () => {
+ const { container } = render();
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 100px");
+ });
+
+ it("applies width to linear progress when width is defined as number & title, titleAnchor, showValue are defined", () => {
+ const { container } = render(
+
+ );
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 100px");
+ });
+
+ it("applies width to linear progress when width is defined as string", () => {
+ const { container } = render();
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 10rem");
+ });
+
+ it("applies width to linear progress when width is defined as string & title is defined", () => {
+ const { container } = render();
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 10rem");
+ });
+
+ it("applies width to linear progress when width is defined as string & title, titleAnchor are defined", () => {
+ const { container } = render();
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 10rem");
+ });
+
+ it("applies width to linear progress when width is defined as string & title, titleAnchor, showValue are defined", () => {
+ const { container } = render(
+
+ );
+ const linearProgress = container.querySelectorAll(".MuiBox-root")[0];
+ expect(linearProgress).toHaveStyle("width: 10rem");
+ });
});
describe("Progress functions", () => {
diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.tsx
index 266ae01e9..b33af156f 100644
--- a/frontend/taipy-gui/src/components/Taipy/Progress.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Progress.tsx
@@ -18,7 +18,9 @@ import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";
import { useClassNames, useDynamicProperty } from "../../utils/hooks";
-import { TaipyBaseProps } from "./utils";
+import { getCssSize, TaipyBaseProps } from "./utils";
+import { SxProps } from "@mui/material/styles";
+import { Theme } from "@mui/system";
interface ProgressBarProps extends TaipyBaseProps {
color?: string;
@@ -31,6 +33,7 @@ interface ProgressBarProps extends TaipyBaseProps {
title?: string;
defaultTitle?: string;
titleAnchor?: "top" | "bottom" | "left" | "right" | "none";
+ width?: string | number;
}
const linearSx = { display: "flex", alignItems: "center", width: "100%" };
@@ -75,8 +78,9 @@ const Progress = (props: ProgressBarProps) => {
return {
boxWithFlexDirectionSx: {
...linearSx,
+ width: props.width ? getCssSize(props.width) : "100%",
flexDirection: getFlexDirection(titleAnchor),
- },
+ } as SxProps,
circularBoxSx: {
...circularSx,
flexDirection: getFlexDirection(titleAnchor),
@@ -99,7 +103,11 @@ const Progress = (props: ProgressBarProps) => {
},
},
};
- }, [props.color, title, titleAnchor]);
+ }, [props.color, props.width, title, titleAnchor]);
+
+ const circularProgressSize = useMemo(() => {
+ return props.width ? getCssSize(props.width) : undefined;
+ }, [props.width]);
const { boxWithFlexDirectionSx, circularBoxSx, linearProgressSx, circularProgressSx, linearProgressFullWidthSx } =
memoizedValues;
@@ -133,7 +141,12 @@ const Progress = (props: ProgressBarProps) => {
) : null}
-
+
{`${Math.round(value)}%`}
@@ -170,6 +183,7 @@ const Progress = (props: ProgressBarProps) => {
variant={value === undefined ? "indeterminate" : "determinate"}
value={value}
className={className}
+ size={circularProgressSize}
/>
);
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index d9492372a..c2b6d6e98 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -614,6 +614,7 @@ class _Factory:
("title", PropertyType.dynamic_string),
("title_anchor", PropertyType.string, "bottom"),
("render", PropertyType.dynamic_boolean, True),
+ ("width", PropertyType.string_or_number),
]
)
._set_propagate(),
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index a6c26e9fa..530e79686 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1374,6 +1374,12 @@
"type": "dynamic(bool)",
"default_value": "True",
"doc": "If False, this progress indicator is hidden from the page."
+ },
+ {
+ "name": "width",
+ "type": "Union[str,int]",
+ "default_value": "None",
+ "doc": "The width of this progress indicator, in CSS units."
}
]
}