Component level Styling (Avaiga#1872)

* Component level Styling

* function test

* unused import

* optimization for detecting callable property

* Types init

* test callable property

* renaming get_class_name

* use the right function

* Update .gitignore

Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>

* getStyle

* include core comps

* a few less characters :-)

* remove closing tags when not needed

* spelling

* format

* format

* fix test

* remove only jsx closing tags

* html tag lower

* fix tests

* Fab is the king of RegExp

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>

.gitignore

@@ -89,8 +89,8 @@ user_data/
 Data
 
 # demo files
-demo-*
-demo_*
+demo[_\-]*
+demo[_|-]*/
 .airflow
 *.dags
 data_sources

frontend/taipy-gui/packaging/taipy-gui.d.ts

@@ -446,3 +446,12 @@ export declare const useDispatch: () => React.Dispatch<Action>;
  * @returns The page module.
  */
 export declare const useModule: () => string | undefined;
+
+/**
+ * A function that retrieves the dynamic className associated
+ * to an instance of component through the style property
+ *
+ * @param children - The react children of the component
+ * @returns The associated className.
+ */
+export declare const getComponentClassName: (children: React.ReactNode) => string;

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

@@ -79,6 +79,7 @@ import {
 import TableFilter from "./TableFilter";
 import { getSuffixedClassNames, getUpdateVar } from "./utils";
 import { emptyArray } from "../../utils";
+import { getComponentClassName } from "./TaipyStyle";
 
 interface RowData {
     colsOrder: string[];
@@ -592,7 +593,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
     const boxSx = useMemo(() => ({ ...baseBoxSx, width: width }), [width]);
 
     return (
-        <Box id={id} sx={boxSx} className={`${className} ${getSuffixedClassNames(className, "-autoloading")}`}>
+        <Box id={id} sx={boxSx} className={`${className} ${getSuffixedClassNames(className, "-autoloading")} ${getComponentClassName(props.children)}`}>
             <Paper sx={paperSx}>
                 <Tooltip title={hover || ""}>
                     <TableContainer>
@@ -715,6 +716,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
                     </TableContainer>
                 </Tooltip>
             </Paper>
+            {props.children}
         </Box>
     );
 };

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

@@ -20,6 +20,7 @@ import { createSendActionNameAction } from "../../context/taipyReducers";
 import { getCssSize, getSuffixedClassNames, TaipyActiveProps } from "./utils";
 import { useClassNames, useDispatch, useDynamicProperty, useModule } from "../../utils/hooks";
 import { stringIcon, Icon, IconAvatar } from "../../utils/icon";
+import { getComponentClassName } from "./TaipyStyle";
 
 interface ButtonProps extends TaipyActiveProps {
     onAction?: string;
@@ -67,7 +68,7 @@ const Button = (props: ButtonProps) => {
             <MuiButton
                 id={id}
                 variant="outlined"
-                className={className}
+                className={`${className} ${getComponentClassName(props.children)}`}
                 onClick={handleClick}
                 disabled={!active}
                 sx={buttonSx}
@@ -87,6 +88,7 @@ const Button = (props: ButtonProps) => {
                 ) : (
                     <IconAvatar img={value as Icon} className={getSuffixedClassNames(className, "-image")} />
                 )}
+                {props.children}
             </MuiButton>
         </Tooltip>
     );