Normalize components (#2313)

* Normalize components
resolves #2305

* fix test

---------

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

frontend/taipy-gui/public/stylekit/controls/slider.css

@@ -22,5 +22,8 @@
 **************************************************/
 
 .taipy-slider {
+    display: inline-flex;
     max-width: 100%;
+    min-height: 48px;
+    align-items: center;
 }

frontend/taipy-gui/public/stylekit/controls/status.css

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+/**************************************************************
+
+                   TAIPY STATUS
+
+***************************************************************/
+
+/*************************************************
+              OVERRIDES / NORMALIZATION
+**************************************************/
+
+.taipy-status {
+    display: inline-flex;
+    min-height: 48px;
+    padding-top: 0.5em;
+}

frontend/taipy-gui/public/stylekit/controls/toggle.css

@@ -24,6 +24,9 @@
 .taipy-toggle {
     display: inline-flex;
     z-index: 10;
+    min-height: 48px;
+    align-items: center;
+    gap: 0.3em;
 }
 
 .taipy-toggle .MuiToggleButtonGroup-root[aria-label='Theme mode'] {

frontend/taipy-gui/public/stylekit/stylekit.css

@@ -37,6 +37,7 @@
 @import 'controls/number.css';
 @import 'controls/slider.css';
 @import 'controls/selector.css';
+@import 'controls/status.css';
 @import 'controls/toggle.css';
 @import 'controls/file_download.css';
 @import 'controls/file_selector.css';

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

@@ -52,6 +52,7 @@ const verticalDivStyle: CSSProperties = {
     flexDirection: "column",
     gap: 0,
 };
+const noPaddingYSx = {py: 0};
 
 const Input = (props: TaipyInputProps) => {
     const {
@@ -300,6 +301,7 @@ const Input = (props: TaipyInputProps) => {
                                     size="small"
                                     onMouseDown={handleUpStepperMouseDown}
                                     disabled={!active}
+                                    sx={noPaddingYSx}
                                 >
                                     <ArrowDropUpIcon fontSize="inherit" />
                                 </IconButton>
@@ -308,6 +310,7 @@ const Input = (props: TaipyInputProps) => {
                                     size="small"
                                     onMouseDown={handleDownStepperMouseDown}
                                     disabled={!active}
+                                    sx={noPaddingYSx}
                                 >
                                     <ArrowDropDownIcon fontSize="inherit" />
                                 </IconButton>

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

@@ -186,7 +186,17 @@ const Selector = (props: SelectorProps) => {
         return sx;
     }, [height]);
     const controlSx = useMemo(
-        () => ({ my: 1, mx: 0, maxWidth: width, display: "flex", "& .MuiFormControl-root": { maxWidth: "unset" } }),
+        () => ({
+            my: 1,
+            mx: 0,
+            maxWidth: width,
+            display: "flex",
+            "& .MuiFormControl-root": {
+                maxWidth: "unset",
+                my: 0,
+                "& .MuiInputBase-root": { minHeight: 48, "& input": { minHeight: "unset" } },
+            },
+        }),
         [width]
     );
 

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

@@ -37,7 +37,7 @@ describe("StatusList Component", () => {
     it("uses the class", async () => {
         const { getByText } = render(<StatusList value={statuses} className="taipy-status" />);
         const elt = getByText("4 statuses");
-        expect(elt.parentElement).toHaveClass("taipy-status");
+        expect(elt.parentElement?.parentElement).toHaveClass("taipy-status");
     });
     it("can be opened when more than 1 status", async () => {
         const { getByTestId } = render(<StatusList value={statuses} />);
@@ -57,8 +57,8 @@ describe("StatusList Component", () => {
         const { getByTestId, getByText } = render(<StatusList value={statuses} />);
         const elt = getByTestId("ArrowDownwardIcon");
         await userEvent.click(elt);
-        const selt = getByText("info");
-        expect(selt.parentElement?.parentElement?.childElementCount).toBe(4);
+        const infoElt = getByText("info");
+        expect(infoElt.parentElement?.parentElement?.childElementCount).toBe(4);
     });
     it("hide closed statuses", async () => {
         const { getByTestId, queryAllByTestId } = render(<StatusList value={statuses} />);

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

@@ -12,6 +12,7 @@
  */
 
 import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import ArrowDownward from "@mui/icons-material/ArrowDownward";
 import ArrowUpward from "@mui/icons-material/ArrowUpward";
@@ -19,7 +20,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Popover, { PopoverOrigin } from "@mui/material/Popover";
 
 import Status, { StatusType } from "./Status";
-import { TaipyBaseProps, TaipyHoverProps } from "./utils";
+import { getSuffixedClassNames, TaipyBaseProps, TaipyHoverProps } from "./utils";
 import { useClassNames, useDynamicProperty } from "../../utils/hooks";
 import { getComponentClassName } from "./TaipyStyle";
 
@@ -185,11 +186,11 @@ const StatusList = (props: StatusListProps) => {
 
     return (
         <Tooltip title={hover || ""}>
-            <>
+            <Box className={`${className} ${getComponentClassName(props.children)}`}>
                 <Status
                     id={props.id}
                     value={globStatus}
-                    className={`${className} ${getComponentClassName(props.children)}`}
+                    className={getSuffixedClassNames(className, "-main")}
                     {...globalProps}
                     icon={getIcon(icons, getStatusIntValue(globStatus.status))}
                 />
@@ -204,7 +205,7 @@ const StatusList = (props: StatusListProps) => {
                                         key={getId(props.id, idx)}
                                         id={getId(props.id, idx)}
                                         value={val}
-                                        className={`${className} ${getComponentClassName(props.children)}`}
+                                        className={getSuffixedClassNames(className, `-${idx}`)}
                                         {...closeProp}
                                         icon={getIcon(icons, getStatusIntValue(val.status))}
                                     />
@@ -213,7 +214,7 @@ const StatusList = (props: StatusListProps) => {
                     </Stack>
                 </Popover>
                 {props.children}
-            </>
+            </Box>
         </Tooltip>
     );
 };