added more mui classes for buttons (#2159)

Added more mui class for buttons

---------

Signed-off-by: JeevaRamanathan M <[email protected]>
Co-authored-by: Fred Lefévère-Laoide <[email protected]>
Co-authored-by: Fabien Lelaquais <[email protected]>

doc/gui/examples/controls/button_size.py

@@ -0,0 +1,23 @@
+# 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
+
+page = """
+ <|Button Label|button|size=large|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run(title="Button - Size")

doc/gui/examples/controls/button_variant.py

@@ -0,0 +1,23 @@
+# 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
+
+page = """
+ <|Button Label|button|variant=contained|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run(title="Button - Variant")

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

@@ -70,6 +70,25 @@ describe("Button Component", () => {
         const elt = getByText("val");
         expect(elt).not.toBeDisabled();
     });
+    it("renders with default properties",()=>{
+        const {getByRole} = render(<Button label="val"/>);
+        const elt = getByRole("button");
+        expect(elt).toBeInTheDocument();
+        expect(elt).toHaveClass("MuiButton-sizeMedium");
+        expect(elt).toHaveClass("MuiButton-outlinedPrimary");
+    });
+    it("applies correct size",()=>{
+        const {getByRole}=render(<Button label="val" size="large"/>);
+        const elt = getByRole("button");
+        expect(elt).toBeInTheDocument();
+        expect(elt).toHaveClass("MuiButton-sizeLarge");
+    });
+    it("applies correct variant",()=>{
+        const {getByRole}=render(<Button label="val" variant="text"/>);
+        const elt=getByRole("button");
+        expect(elt).toBeInTheDocument();
+        expect(elt).toHaveClass("MuiButton-textPrimary");
+    });
     it("dispatch a well formed message", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;

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

@@ -27,20 +27,21 @@ interface ButtonProps extends TaipyActiveProps {
     label: string;
     defaultLabel?: string;
     width?: string | number;
+    size?: "small" | "medium" | "large";
+    variant?: "text" | "outlined" | "contained";
 }
 
 const cardSx = { p: 0 };
 
 const Button = (props: ButtonProps) => {
-    const { id, onAction = "", defaultLabel } = props;
+    const { id, onAction = "", defaultLabel, size = "medium", variant = "outlined" } = props;
     const [value, setValue] = useState<stringIcon>("");
     const dispatch = useDispatch();
     const module = useModule();
 
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
-
     const buttonSx = useMemo(() => (props.width ? { width: getCssSize(props.width) } : undefined), [props.width]);
 
     const handleClick = useCallback(() => {
@@ -67,7 +68,8 @@ const Button = (props: ButtonProps) => {
         <Tooltip title={hover || ""}>
             <MuiButton
                 id={id}
-                variant="outlined"
+                variant={variant}
+                size={size}
                 className={`${className} ${getComponentClassName(props.children)}`}
                 onClick={handleClick}
                 disabled={!active}

taipy/gui/_renderers/factory.py

@@ -99,6 +99,8 @@ class _Factory:
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
                 ("width", PropertyType.string_or_number),
+                ("size", PropertyType.string),
+                ("variant", PropertyType.string),
             ]
         ),
         "chat": lambda gui, control_type, attrs: _Builder(

taipy/gui/viselements.json

@@ -53,6 +53,17 @@
                         "type": "dynamic(Union[str,Icon])",
                         "default_value": "\"\"",
                         "doc": "The label displayed in the button."
+                    },                                        {
+                    "name": "size",
+                        "type": "str",
+                        "default_value": "\"medium\"",
+                        "doc": "The size of the button. Valid values: \"small\", \"medium\", or \"large\"."
+                    },
+                    {
+                        "name": "variant",
+                        "type": "str",
+                        "default_value": "\"outlined\"",
+                        "doc": "The variant of the button. Valid values: \"contained\", \"outlined\", or \"text\"."
                     },
                     {
                         "name": "on_action",