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 <[email protected]> * 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 <[email protected]> Co-authored-by: Fabien Lelaquais <[email protected]>
Satoshi-Sh · Oct 9, 2024 · 8379661 · 8379661
1 parent a4dc088
commit 8379661
Show file tree

Hide file tree

Showing 61 changed files with 1,122 additions and 717 deletions.
diff --git a/.gitignore b/.gitignore
@@ -89,8 +89,8 @@ user_data/
 Data
 
 # demo files
-demo-*
-demo_*
+demo[_\-]*
+demo[_|-]*/
 .airflow
 *.dags
 data_sources

diff --git a/frontend/taipy-gui/packaging/taipy-gui.d.ts b/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;
diff --git a/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx b/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>
     );
 };

diff --git a/frontend/taipy-gui/src/components/Taipy/Button.tsx b/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>
     );