Added examples for progress control

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-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/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()

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()

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");