Added examples for progress control (#1809)

+ removed 'color' property from progress control
+ added CSS class names for value and title in the control
+ minor refman issues
+ Fred comments
+ Rename element documentation example directory names to make them module (mypy)
+ Exclude builder doc examples from mypy file list

.github/workflows/partial-tests.yml

@@ -14,7 +14,7 @@ jobs:
 
       - uses: jpetrucciani/mypy-check@master
         with:
-          mypy_flags:  "--ignore-missing-imports --implicit-optional --no-namespace-packages --exclude (taipy/templates/|generate_pyi.py|tools) --follow-imports skip --disable-error-code import-untyped"
+          mypy_flags:  "--ignore-missing-imports --implicit-optional --no-namespace-packages --exclude (taipy/templates/|tools/|doc/gui/examples/.*/builder.py) --follow-imports skip --disable-error-code import-untyped"
 
       - uses: chartboost/ruff-action@v1
   tests:

.pre-commit-config.yaml

@@ -13,7 +13,7 @@ repos:
         - --ignore-missing-imports
         - --implicit-optional
         - --no-namespace-packages
-        - --exclude=(taipy/templates/|generate_pyi.py|tools)
+        - --exclude=(taipy/templates/|tools/|doc/gui/examples/.*/builder.py)
         - --follow-imports=skip
 -   repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5

doc/gui/examples/blocks/pane_anchor/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_anchor/builder.py

@@ -0,0 +1,31 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = True
+
+with tgb.Page() as page:
+    with tgb.pane("{show_pane}", anchor="top", height="50px"):
+        tgb.text("Here is some text that is displayed at the top of the page in a pane.")
+
+    tgb.text("# Main page content", mode="md")
+
+    tgb.text("This is the content of the page.")
+
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_as_page/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_as_page/builder.py

@@ -0,0 +1,61 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+# Initially invested amount
+initial_investment = 100
+# Number of periods
+periods = 0
+# Number of periods
+final_amount = initial_investment
+# Interest rate by period
+rate = 5
+# Is the interest rate setting panel shown
+show_rate = False
+
+with tgb.Page() as rate_page:
+    tgb.text("Rate (in %):")
+    tgb.number("{rate}")
+
+with tgb.Page() as page:
+    tgb.text("# Interest Calculator", mode="md")
+
+    tgb.pane("{show_rate}", show_button=True, page="_rate_pane")
+
+    tgb.text("Initial amount: ", inline=True)
+    tgb.number("{initial_investment}")
+
+    tgb.text("Periods", inline=True)
+    tgb.number("{periods}", min=0, max=50)
+
+    tgb.text("Final amount: ", inline=True)
+    tgb.text("{final_amount}", format="%.2f", inline=True)
+
+
+# Invoked when any control value (initial_investment, rate, or periods) is changed.
+def on_change(state, var_name: str):
+    # Cumulated interest percentage
+    progress = pow(1 + state.rate / 100, state.periods)
+    state.final_amount = state.initial_investment * progress
+
+
+if __name__ == "__main__":
+    pages = {
+        "main": page,
+        "_rate_pane": rate_page,
+    }
+    Gui(pages=pages).run()

doc/gui/examples/blocks/pane-as-page.py → doc/gui/examples/blocks/pane_as_page/markdown.py

@@ -17,34 +17,33 @@ from taipy.gui import Gui
 
 # Initially invested amount
 initial_investment = 100
-# Interest rate by period
-rate = 5
 # Number of periods
 periods = 0
 # Number of periods
 final_amount = initial_investment
+# Interest rate by period
+rate = 5
 # Is the interest rate setting panel shown
 show_rate = False
 
-pane_page = """
+rate_page = """
 Rate (in %):
 <|{rate}|number|>
 """
 
 page = """
-# Interest Calculator
-
 <|{show_rate}|pane|show_button|page=_rate_pane|>
 
+# Interest Calculator
 Initial amount: <|{initial_investment}|number|>
 
 Periods: <|{periods}|number|min=0|max=50|>
 
-Final amount: <|{final_amount}|format=%.2f|>
+Final amount: <|{final_amount}|text|format=%.2f|>
 """
 
 
-# Invoked when any control value is changed.
+# Invoked when any control value (initial_investment, rate, or periods) is changed.
 def on_change(state, var_name: str):
     # Cumulated interest percentage
     progress = pow(1 + state.rate / 100, state.periods)
@@ -54,6 +53,6 @@ def on_change(state, var_name: str):
 if __name__ == "__main__":
     pages = {
         "main": page,
-        "_rate_pane": pane_page,
+        "_rate_pane": rate_page,
     }
     Gui(pages=pages).run()

doc/gui/examples/blocks/pane_persistent/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_persistent/builder.py

@@ -0,0 +1,30 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = False
+
+with tgb.Page() as page:
+    with tgb.part("d-flex"):
+        with tgb.pane("{show_pane}", persistent=True, show_button=True, width="150px"):
+            tgb.text("Here is the content of the pane.")
+        with tgb.part():
+            tgb.text("# Main page", mode="md")
+            tgb.text("Here is the content of the page.")
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_persistent/markdown.py

@@ -0,0 +1,33 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+show_pane = False
+
+page = """
+<|d-flex|
+<|{show_pane}|pane|persistent|show_button|width=150px|
+Here is the content of the pane.
+|>
+<|
+# Main page
+Here is the content of the page.
+|>
+|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_simple/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_simple/builder.py

@@ -0,0 +1,38 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = False
+
+
+# When the button is pressed, set the variable controlling the pane visibility to True
+def on_action(state):
+    state.show_pane = True
+
+
+with tgb.Page() as page:
+    tgb.text("# The **pane** block", mode="md")
+
+    with tgb.pane("{show_pane}"):
+        tgb.text("Here is the content of the pane.")
+
+    tgb.text("This is the content of the page.")
+
+    tgb.button("Show pane")
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_simple_lambda/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_simple_lambda/builder.py

@@ -0,0 +1,32 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = False
+
+with tgb.Page() as page:
+    tgb.text("# The **pane** block", mode="md")
+
+    with tgb.pane("{show_pane}"):
+        tgb.text("Here is the content of the pane.")
+
+    tgb.text("This is the content of the page.")
+
+    tgb.button("Show pane", on_action=lambda s: s.assign("show_pane", True))
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress-linear.py

@@ -0,0 +1,25 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 72
+
+page = """
+<|{value}|progress|linear|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress-simple.py

@@ -0,0 +1,25 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 72
+
+page = """
+<|{value}|progress|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress-styling-texts.py

@@ -0,0 +1,31 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui, Markdown
+
+value = 66
+
+page = Markdown(
+    "<|{value}|progress|show_value|title=In progress|>",
+    style={
+        ".taipy-progress-value": {
+            "font-style: bold",
+            "color: bold",
+        }
+    },
+)
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress_styling_circular/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/controls/progress_styling_circular/builder.py

@@ -0,0 +1,31 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+value = 72
+
+with tgb.Page(
+    style={
+        ".taipy-progress": {
+            ".MuiCircularProgress-circle": {"stroke": "green", "stroke-width": "2"},
+        }
+    }
+) as page:
+    tgb.progress("{value}")
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress_styling_circular/markdown.py

@@ -0,0 +1,30 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui, Markdown
+
+value = 72
+
+page = Markdown(
+    "<|{value}|progress|>",
+    style={
+        ".taipy-progress": {
+            ".MuiCircularProgress-circle": {"stroke": "green", "stroke-width": "2"},
+        }
+    },
+)
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress_styling_linear/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/controls/progress_styling_linear/builder.py

@@ -0,0 +1,38 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+value = 72
+
+with tgb.Page(
+    style={
+        ".taipy-progress": {
+            "background-color": "red",
+            "height": "30px",
+            ".MuiLinearProgress-root" : {
+                "height": "30px",
+                ".MuiLinearProgress-barColorPrimary": {
+                    "background-color": "green"
+                }
+            }
+        }
+    }
+) as page:
+    tgb.progress("{value}", linear=True)
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress_styling_linear/markdown.py

@@ -0,0 +1,37 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui, Markdown
+
+value = 72
+
+page = Markdown(
+    "<|{value}|progress|linear|>",
+    stylex={
+        ".taipy-progress": {
+            "background-color": "red",
+            "height": "30px",
+            ".MuiLinearProgress-root" : {
+                "height": "30px",
+                ".MuiLinearProgress-barColorPrimary": {
+                    "background-color": "green"
+                }
+            }
+        }
+    },
+)
+
+if __name__ == "__main__":
+    Gui(page).run()

frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx

@@ -24,9 +24,10 @@ describe("Progress component", () => {
     });
 
     it("uses the class", async () => {
-        const { getByRole } = render(<Progress className="taipy-progress" />);
+        const { getByRole } = render(<Progress className="test-class" />);
         const elt = getByRole("progressbar");
-        expect(elt).toHaveClass("taipy-progress");
+        // Actual progress bar in a child of the component
+        expect(elt.parentElement).toHaveClass("test-class");
     });
 
     it("renders circular progress with value (determinate)", () => {
@@ -138,24 +139,12 @@ describe("Progress component", () => {
         expect(box).toHaveStyle("flex-direction: column-reverse");
     });
 
-    it("applies color to linear progress when color is defined", () => {
-        const { container } = render(<Progress linear value={50} color="red" />);
-        const linearProgressBar = container.querySelector(".MuiLinearProgress-bar");
-        expect(linearProgressBar).toHaveStyle("background: red");
-    });
-
     it("does not apply color to linear progress when color is undefined", () => {
         const { container } = render(<Progress linear value={50} />);
         const linearProgressBar = container.querySelector(".MuiLinearProgress-bar");
         expect(linearProgressBar).not.toHaveStyle("background: red");
     });
 
-    it("applies color to circular progress when color is defined", () => {
-        const { container } = render(<Progress linear={false} value={50} color="blue" />);
-        const circularProgressCircle = container.querySelector(".MuiCircularProgress-circle");
-        expect(circularProgressCircle).toHaveStyle("color: blue");
-    });
-
     it("does not apply color to circular progress when color is undefined", () => {
         const { container } = render(<Progress linear={false} value={50} />);
         const circularProgressCircle = container.querySelector(".MuiCircularProgress-circle");

frontend/taipy-gui/src/components/Taipy/Progress.tsx

@@ -18,30 +18,29 @@ import LinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 
 import { useClassNames, useDynamicProperty } from "../../utils/hooks";
-import { getCssSize, TaipyBaseProps } from "./utils";
+import { getSuffixedClassNames, getCssSize, TaipyBaseProps } from "./utils";
 import { SxProps } from "@mui/material/styles";
 import { Theme } from "@mui/system";
 
 interface ProgressBarProps extends TaipyBaseProps {
-    color?: string;
-    linear?: boolean;
-    showValue?: boolean;
     value?: number;
     defaultValue?: number;
-    render?: boolean;
-    defaultRender?: boolean;
+    linear?: boolean;
+    showValue?: boolean;
     title?: string;
     defaultTitle?: string;
     titleAnchor?: "top" | "bottom" | "left" | "right" | "none";
+    render?: boolean;
+    defaultRender?: boolean;
     width?: string | number;
 }
 
 const linearSx = { display: "flex", alignItems: "center", width: "100%" };
 const linearPrgSx = { width: "100%", mr: 1 };
 const titleSx = { margin: 1 };
-const linearTxtSx = { minWidth: 35 };
+const linearValueSx = { minWidth: 35 };
 const circularSx = { position: "relative", display: "inline-flex" };
-const circularPrgSx = {
+const circularValueSx = {
     top: 0,
     left: 0,
     bottom: 0,
@@ -86,107 +85,67 @@ const Progress = (props: ProgressBarProps) => {
                 flexDirection: getFlexDirection(titleAnchor),
                 alignItems: title && titleAnchor ? "center" : "",
             },
-            linearProgressSx: {
-                "& .MuiLinearProgress-bar": {
-                    background: props.color ? props.color : undefined,
-                },
-            },
-            circularProgressSx: {
-                "& .MuiCircularProgress-circle": {
-                    color: props.color ? props.color : undefined,
-                },
-            },
             linearProgressFullWidthSx: {
                 width: "100%",
-                "& .MuiLinearProgress-bar": {
-                    background: props.color ? props.color : undefined,
-                },
             },
         };
-    }, [props.color, props.width, title, titleAnchor]);
+    }, [props.width, title, titleAnchor]);
 
     const circularProgressSize = useMemo(() => {
         return props.width ? getCssSize(props.width) : undefined;
     }, [props.width]);
 
-    const { boxWithFlexDirectionSx, circularBoxSx, linearProgressSx, circularProgressSx, linearProgressFullWidthSx } =
+    const { boxWithFlexDirectionSx, circularBoxSx, linearProgressFullWidthSx } =
         memoizedValues;
 
     if (!render) {
         return null;
     }
 
-    return showValue && value !== undefined ? (
-        linear ? (
-            <Box sx={boxWithFlexDirectionSx}>
-                {title && titleAnchor !== "none" ? (
-                    <Typography sx={titleSx} variant="caption">
-                        {title}
-                    </Typography>
-                ) : null}
-                <Box sx={linearSx} className={className} id={props.id}>
+    return <Box sx={linear ? boxWithFlexDirectionSx : circularBoxSx} className={className} id={props.id}>
+        {title && titleAnchor !== "none" ? (
+            <Typography sx={titleSx} variant="caption" className={getSuffixedClassNames(className, "-title")}>
+                {title}
+            </Typography>
+        ) : null}
+        {showValue && value !== undefined ?
+            (linear ?
+                <Box sx={linearSx}>
                     <Box sx={linearPrgSx}>
-                        <LinearProgress sx={linearProgressSx} variant="determinate" value={value} />
+                        <LinearProgress variant="determinate" value={value} />
                     </Box>
-                    <Box sx={linearTxtSx}>
-                        <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
+                    <Box sx={linearValueSx}>
+                        <Typography className={getSuffixedClassNames(className, "-value")} variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
                     </Box>
                 </Box>
-            </Box>
-        ) : (
-            <Box sx={circularBoxSx}>
-                {title && titleAnchor !== "none" ? (
-                    <Typography sx={titleSx} variant="caption">
-                        {title}
-                    </Typography>
-                ) : null}
-                <Box sx={circularSx} className={className} id={props.id}>
+                :
+                <Box sx={circularSx}>
                     <CircularProgress
-                        sx={circularProgressSx}
                         variant="determinate"
                         value={value}
                         size={circularProgressSize}
                     />
-                    <Box sx={circularPrgSx}>
-                        <Typography variant="caption" component="div" color="text.secondary">
+                    <Box sx={circularValueSx}>
+                        <Typography className={getSuffixedClassNames(className, "-value")} variant="body2" component="div" color="text.secondary">
                             {`${Math.round(value)}%`}
                         </Typography>
                     </Box>
-                </Box>
-            </Box>
-        )
-    ) : linear ? (
-        <Box sx={boxWithFlexDirectionSx}>
-            {title && titleAnchor !== "none" ? (
-                <Typography sx={titleSx} variant="caption">
-                    {title}
-                </Typography>
-            ) : null}
-            <LinearProgress
-                id={props.id}
-                sx={linearProgressFullWidthSx}
-                variant={value === undefined ? "indeterminate" : "determinate"}
-                value={value}
-                className={className}
-            />
-        </Box>
-    ) : (
-        <Box sx={circularBoxSx}>
-            {title && titleAnchor !== "none" ? (
-                <Typography sx={titleSx} variant="caption">
-                    {title}
-                </Typography>
-            ) : null}
-            <CircularProgress
-                id={props.id}
-                sx={circularProgressSx}
-                variant={value === undefined ? "indeterminate" : "determinate"}
-                value={value}
-                className={className}
-                size={circularProgressSize}
-            />
-        </Box>
-    );
+                </Box>)
+            :
+            (linear ?
+                <LinearProgress
+                    sx={linearProgressFullWidthSx}
+                    variant={value === undefined ? "indeterminate" : "determinate"}
+                    value={value}
+                />
+                :
+                <CircularProgress
+                    variant={value === undefined ? "indeterminate" : "determinate"}
+                    value={value}
+                    size={circularProgressSize}
+                />)
+        }
+    </Box>;
 };
 
 export default Progress;

mypy.ini

@@ -1,2 +1,3 @@
 [mypy]
 ignore_missing_imports = True
+exclude = "(taipy/templates/|tools/|doc/gui/examples/.*/builder.py)"

pyproject.toml

@@ -95,7 +95,7 @@ convention = "google"
 ignore_missing_imports = true
 implicit_optional = true
 namespace_packages = false
-exclude = "(taipy/templates/|generate_pyi.py|tools)"
+exclude = "(taipy/templates/|tools/|doc/gui/examples/.*/builder.py)"
 follow_imports = "skip"
 
 [tool.pyright]

taipy/gui/_renderers/factory.py

@@ -46,6 +46,7 @@ class _Factory:
         "layout": "columns",
         "login": "title",
         "menu": "lov",
+        "metric": "value",
         "navbar": "value",
         "number": "value",
         "pane": "open",
@@ -58,7 +59,6 @@ class _Factory:
         "text": "value",
         "toggle": "value",
         "tree": "value",
-        "metric": "value",
     }
 
     _TEXT_ATTRIBUTES = ["format", "id", "hover_text", "raw"]
@@ -445,6 +445,23 @@ class _Factory:
                 ("width", PropertyType.string_or_number),
             ]
         ),
+        "progress": lambda gui, control_type, attrs: _Builder(
+            gui=gui,
+            control_type=control_type,
+            element_name="Progress",
+            attributes=attrs,
+        )
+        .set_value_and_default(var_type=PropertyType.dynamic_number, native_type=True)
+        .set_attributes(
+            [
+                ("linear", PropertyType.boolean, False),
+                ("show_value", PropertyType.boolean, False),
+                ("title", PropertyType.dynamic_string),
+                ("title_anchor", PropertyType.string, "bottom"),
+                ("render", PropertyType.dynamic_boolean, True),
+                ("width", PropertyType.string_or_number),
+            ]
+        ),
         "selector": lambda gui, control_type, attrs: _Builder(
             gui=gui, control_type=control_type, element_name="Selector", attributes=attrs, default_value=None
         )
@@ -600,25 +617,6 @@ class _Factory:
             ]
         )
         ._set_propagate(),
-        "progress": lambda gui, control_type, attrs: _Builder(
-            gui=gui,
-            control_type=control_type,
-            element_name="Progress",
-            attributes=attrs,
-        )
-        .set_value_and_default(var_type=PropertyType.dynamic_number, native_type=True)
-        .set_attributes(
-            [
-                ("color", PropertyType.string),
-                ("linear", PropertyType.boolean, False),
-                ("show_value", PropertyType.boolean, False),
-                ("title", PropertyType.dynamic_string),
-                ("title_anchor", PropertyType.string, "bottom"),
-                ("render", PropertyType.dynamic_boolean, True),
-                ("width", PropertyType.string_or_number),
-            ]
-        )
-        ._set_propagate(),
     }
 
     # TODO: process \" in property value

taipy/gui/gui_actions.py

@@ -238,6 +238,7 @@ def get_module_context(state: State) -> t.Optional[str]:
 
 
 def get_context_id(state: State) -> t.Any:
+    """NOT DOCUMENTED"""
     _warn("'get_context_id()' was deprecated in Taipy GUI 2.0. Use 'get_state_id()' instead.")
     return get_state_id(state)
 
@@ -316,6 +317,7 @@ def broadcast_callback(
 
 
 def invoke_state_callback(gui: Gui, state_id: str, callback: t.Callable, args: t.Union[t.Tuple, t.List]) -> t.Any:
+    """NOT DOCUMENTED"""
     _warn("'invoke_state_callback()' was deprecated in Taipy GUI 2.0. Use 'Gui.invoke_callback()' instead.")
     return gui.invoke_callback(state_id, callback, args)
 

taipy/gui/page.py

@@ -142,14 +142,14 @@ class Page:
             return self._renderer.render(gui)
         return "<h1>No renderer found for page</h1>"
 
-    def set_style(self, style: t.Dict[str, t.Dict[str, t.Any]]):
+    def set_style(self, style: t.Dict[str, t.Dict[str, t.Any]]) -> Page:
         """Set the style for this page.
 
         Arguments:
             style (dict): A dict describing the style as CSS or Nested CSS.
 
         Returns:
-            the current instance.
+            This `Page` instance.
         """
         self.__style = style if isinstance(style, dict) else None
         return self

taipy/gui/utils/_css.py

@@ -4,6 +4,7 @@ import typing as t
 
 
 def get_style(style: t.Union[str, t.Dict[str, t.Union[str, t.Dict[str, t.Any]]]]):
+    """NOT DOCUMENTED"""
     if isinstance(style, dict):
             style_arr = []
             for k, v in style.items():

taipy/gui/utils/viselements.py

@@ -53,6 +53,7 @@ def _resolve_inherit_property(element: VisElement, viselements: VisElements) ->
 
 
 def resolve_inherits(viselements: VisElements) -> VisElements:
+    """NOT DOCUMENTED"""
     for element_type in "blocks", "controls":
         for element in viselements[element_type]:  # type: ignore[literal-required]
             element[1]["properties"] = _resolve_inherit_property(element, viselements)

taipy/gui/viselements.json

@@ -1362,12 +1362,7 @@
                         "name": "title_anchor",
                         "type": "str",
                         "default_value": "\"bottom\"",
-                        "doc": "The anchor of the title."
-                    },
-                    {
-                        "name": "color",
-                        "type": "str",
-                        "doc": "The color of the progress indicator."
+                        "doc": "The anchor of the title.<br/>Possible values are:\n<ul>\n<li>\"bottom\"</li>\n<li>\"top\"</li>\n<li>\"left\"</li>\n<li>\"right\"</li>\n<li>\"none\" (no title is displayed)</li>\n</ul>"
                     },
                     {
                         "name": "render",