Fix multiline input height (#1857)

resolves #1846

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/src/themes/stylekit.ts

@@ -14,212 +14,213 @@
 import { lighten } from "@mui/material";
 
 export const stylekitTheme = {
-  palette: {
-    // Primary and secondary colors
-    primary: {
-      main: window.taipyConfig?.stylekit?.colorPrimary,
-    },
-    secondary: {
-      main: window.taipyConfig?.stylekit?.colorSecondary,
-    },
-    error: {
-      main: window.taipyConfig?.stylekit?.colorError,
-    },
-    warning: {
-      main: window.taipyConfig?.stylekit?.colorWarning,
-    },
-    success: {
-      main: window.taipyConfig?.stylekit?.colorSuccess,
-    },
-  },
-  typography: {
-    // Custom font
-    fontFamily: window.taipyConfig?.stylekit?.fontFamily,
-    h6: {
-      fontSize: "1rem",
-    },
-  },
-  shape: {
-    borderRadius: window.taipyConfig?.stylekit?.borderRadius,
-  },
-  // Components normalization
-  components: {
-    // Paper element
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          // Remove the unwanted linear gradient overlay on the paper background color
-          backgroundImage: "none",
-        },
-      },
+    palette: {
+        // Primary and secondary colors
+        primary: {
+            main: window.taipyConfig?.stylekit?.colorPrimary,
+        },
+        secondary: {
+            main: window.taipyConfig?.stylekit?.colorSecondary,
+        },
+        error: {
+            main: window.taipyConfig?.stylekit?.colorError,
+        },
+        warning: {
+            main: window.taipyConfig?.stylekit?.colorWarning,
+        },
+        success: {
+            main: window.taipyConfig?.stylekit?.colorSuccess,
+        },
     },
-    // Form control
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          marginTop: 4,
-          width: "100%",
-          maxWidth: "15rem",
-          verticalAlign: "middle",
-        },
-      },
+    typography: {
+        // Custom font
+        fontFamily: window.taipyConfig?.stylekit?.fontFamily,
+        h6: {
+            fontSize: "1rem",
+        },
     },
-    // Form label
-    MuiInputLabel: {
-      styleOverrides: {
-        outlined: {
-          zIndex: "0",
-          transition: "all 200ms cubic-bezier(0, 0, 0.2, 1) 0ms",
-          // Properly position floating label on Y axis (second translate value) as the input height changes
-          "&:not(.MuiInputLabel-shrink):not(.static-label)": {
-            top: "50%",
-            transform: "translate(14px, -50%) scale(1)",
-          },
-          "&.static-label": {
-            position: "relative",
-            transform: "none",
-          },
-        },
-      },
+    shape: {
+        borderRadius: window.taipyConfig?.stylekit?.borderRadius,
     },
-    // Form input
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          // Fill the available width
-          display: "flex",
-        },
-        input: {
-          minHeight: window.taipyConfig?.stylekit?.inputButtonHeight,
-          boxSizing: "border-box",
+    // Components normalization
+    components: {
+        // Paper element
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    // Remove the unwanted linear gradient overlay on the paper background color
+                    backgroundImage: "none",
+                },
+            },
+        },
+        // Form control
+        MuiFormControl: {
+            styleOverrides: {
+                root: {
+                    marginTop: 4,
+                    width: "100%",
+                    maxWidth: "15rem",
+                    verticalAlign: "middle",
+                },
+            },
+        },
+        // Form label
+        MuiInputLabel: {
+            styleOverrides: {
+                outlined: {
+                    zIndex: "0",
+                    transition: "all 200ms cubic-bezier(0, 0, 0.2, 1) 0ms",
+                    // Properly position floating label on Y axis (second translate value) as the input height changes
+                    "&:not(.MuiInputLabel-shrink):not(.static-label)": {
+                        top: "50%",
+                        transform: "translate(14px, -50%) scale(1)",
+                    },
+                    "&.static-label": {
+                        position: "relative",
+                        transform: "none",
+                    },
+                },
+            },
+        },
+        // Form input
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    // Fill the available width
+                    display: "flex",
+                },
+                input: {
+                    minHeight: window.taipyConfig?.stylekit?.inputButtonHeight,
+                    boxSizing: "border-box",
 
-          ".MuiInputBase-root &": {
-            py: 4,
-          },
+                    // for textarea height calculation
+                    "&.MuiInputBase-inputMultiline": {
+                        minHeight: "unset",
+                    },
+                },
+            },
         },
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        select: {
-          display: "flex",
-          alignItems: "center",
-          minHeight: window.taipyConfig?.stylekit?.inputButtonHeight,
-          boxSizing: "border-box",
-          paddingTop: 8,
-          paddingBottom: 8,
-        },
-      },
-    },
-    // Button
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          height: "auto",
-          minHeight: window.taipyConfig?.stylekit?.inputButtonHeight,
-          marginBottom: 4,
-        },
-      },
-    },
-    // Mui slider
-    MuiSlider: {
-      styleOverrides: {
-        rail: {
-          ".taipy-indicator &": {
-            // Use success and error color for heat gradient
-            background:
-              "linear-gradient(90deg, " +
-              window.taipyConfig?.stylekit?.colorError +
-              " 0%, " +
-              window.taipyConfig?.stylekit?.colorSuccess +
-              " 100%)",
-          },
-        },
-      },
-    },
-    MuiSwitch: {
-      styleOverrides: {
-        switchBase: {
-          minHeight: "unset",
+        MuiSelect: {
+            styleOverrides: {
+                select: {
+                    display: "flex",
+                    alignItems: "center",
+                    minHeight: window.taipyConfig?.stylekit?.inputButtonHeight,
+                    boxSizing: "border-box",
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                },
+            },
+        },
+        // Button
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    height: "auto",
+                    minHeight: window.taipyConfig?.stylekit?.inputButtonHeight,
+                    marginBottom: 4,
+                },
+            },
+        },
+        // Mui slider
+        MuiSlider: {
+            styleOverrides: {
+                rail: {
+                    ".taipy-indicator &": {
+                        // Use success and error color for heat gradient
+                        background:
+                            "linear-gradient(90deg, " +
+                            window.taipyConfig?.stylekit?.colorError +
+                            " 0%, " +
+                            window.taipyConfig?.stylekit?.colorSuccess +
+                            " 100%)",
+                    },
+                },
+            },
+        },
+        MuiSwitch: {
+            styleOverrides: {
+                switchBase: {
+                    minHeight: "unset",
+                },
+            },
+        },
+        // Mui table
+        MuiTable: {
+            styleOverrides: {
+                root: {
+                    "& .MuiTableCell-root": {
+                        textAlign: "left",
+                    },
+                },
+            },
         },
-      },
-    },
-    // Mui table
-    MuiTable: {
-      styleOverrides: {
-        root: {
-          "& .MuiTableCell-root": {
-            textAlign: "left",
-          },
-        },
-      },
     },
-  },
 };
 
 export const stylekitModeThemes = {
-  light: {
-    palette: {
-      background: {
-        // Main background
-        default: window.taipyConfig?.stylekit?.colorBackgroundLight,
-        // Cards background
-        paper: window.taipyConfig?.stylekit?.colorPaperLight,
-      },
-    },
-    components: {
-      // Give popover paper a slightly lighter color to reflect superior elevation
-      MuiPopover: {
-        styleOverrides: {
-          paper: {
-            backgroundColor: window.taipyConfig?.stylekit?.colorPaperLight
-              ? lighten(window.taipyConfig.stylekit.colorPaperLight, 0.5)
-              : undefined,
-          },
-        },
-      },
-      // Give MuiSlider disabled thumb a fill color matching the theme
-      MuiSlider: {
-        styleOverrides: {
-          thumb: {
-            ".Mui-disabled &::before": {
-              backgroundColor: window.taipyConfig?.stylekit?.colorPaperLight,
+    light: {
+        palette: {
+            background: {
+                // Main background
+                default: window.taipyConfig?.stylekit?.colorBackgroundLight,
+                // Cards background
+                paper: window.taipyConfig?.stylekit?.colorPaperLight,
+            },
+        },
+        components: {
+            // Give popover paper a slightly lighter color to reflect superior elevation
+            MuiPopover: {
+                styleOverrides: {
+                    paper: {
+                        backgroundColor: window.taipyConfig?.stylekit?.colorPaperLight
+                            ? lighten(window.taipyConfig.stylekit.colorPaperLight, 0.5)
+                            : undefined,
+                    },
+                },
+            },
+            // Give MuiSlider disabled thumb a fill color matching the theme
+            MuiSlider: {
+                styleOverrides: {
+                    thumb: {
+                        ".Mui-disabled &::before": {
+                            backgroundColor: window.taipyConfig?.stylekit?.colorPaperLight,
+                        },
+                    },
+                },
             },
-          },
         },
-      },
-    },
-  },
-  dark: {
-    palette: {
-      background: {
-        // Main background
-        default: window.taipyConfig?.stylekit?.colorBackgroundDark,
-        // Cards background
-        paper: window.taipyConfig?.stylekit?.colorPaperDark,
-      },
     },
-    components: {
-      // Give popover paper a slightly lighter color to reflect superior elevation
-      MuiPopover: {
-        styleOverrides: {
-          paper: {
-            backgroundColor: window.taipyConfig?.stylekit?.colorPaperDark
-              ? lighten(window.taipyConfig.stylekit.colorPaperDark, 0.05)
-              : undefined,
-          },
-        },
-      },
-      // Give MuiSlider disabled thumb a fill color matching the theme
-      MuiSlider: {
-        styleOverrides: {
-          thumb: {
-            ".Mui-disabled &::before": {
-              backgroundColor: window.taipyConfig?.stylekit?.colorPaperDark,
+    dark: {
+        palette: {
+            background: {
+                // Main background
+                default: window.taipyConfig?.stylekit?.colorBackgroundDark,
+                // Cards background
+                paper: window.taipyConfig?.stylekit?.colorPaperDark,
+            },
+        },
+        components: {
+            // Give popover paper a slightly lighter color to reflect superior elevation
+            MuiPopover: {
+                styleOverrides: {
+                    paper: {
+                        backgroundColor: window.taipyConfig?.stylekit?.colorPaperDark
+                            ? lighten(window.taipyConfig.stylekit.colorPaperDark, 0.05)
+                            : undefined,
+                    },
+                },
+            },
+            // Give MuiSlider disabled thumb a fill color matching the theme
+            MuiSlider: {
+                styleOverrides: {
+                    thumb: {
+                        ".Mui-disabled &::before": {
+                            backgroundColor: window.taipyConfig?.stylekit?.colorPaperDark,
+                        },
+                    },
+                },
             },
-          },
         },
-      },
     },
-  },
 };