fix: styles not apllying in first render

lumada-design · May 26, 2023 · 65ecb39 · 65ecb39
1 parent baf91cc
commit 65ecb39
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 20 deletions.
diff --git a/docs/overview/migration/MigrationV5.stories.mdx b/docs/overview/migration/MigrationV5.stories.mdx
@@ -743,7 +743,7 @@ const images = ["img1.png", "img2.png", "img3.png"];
 
 ### Table Renderer - hvExpandColumn <a id="table-renderer-expand-column" />
 
-The default icon for this component has changed to the one specified in DS5 specifications, in order to be possible to revert to the previous icon or customize to any other, the following properties where added:
+The default icon for this component has changed to the one specified in DS5 specifications, in order to be possible to revert to the previous icon or customize to any other, the following properties were added:
 
-- `isExpandedIcon`
-- `isCollapsedIcon`
+- `ExpandedIcon`
+- `CollapsedIcon`
diff --git a/packages/core/src/components/Table/TableCell/TableCell.tsx b/packages/core/src/components/Table/TableCell/TableCell.tsx
@@ -6,11 +6,14 @@ import {
   forwardRef,
   TdHTMLAttributes,
   useContext,
+  useEffect,
   useMemo,
+  useState,
 } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { transientOptions } from "@core/utils/transientOptions";
 import { getVarValue, hexToRgbA } from "@core/utils";
+import { useTheme } from "@core/hooks";
 import {
   HvTableCellAlign,
   HvTableCellType,
@@ -117,22 +120,42 @@ export const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(
     },
     externalRef
   ) => {
+    const { activeTheme, selectedMode } = useTheme();
     const tableContext = useContext(TableContext);
     const tableSectionContext = useContext(TableSectionContext);
 
+    const [sortedColorValue, setSortedColorValue] = useState<
+      string | undefined
+    >();
+    const [sortedColorAlpha, setSortedColorAlpha] = useState<
+      string | undefined
+    >();
+
     const type = typeProp || tableSectionContext?.type || "body";
 
     const Component =
       component || tableContext?.components?.Td || defaultComponent;
 
     const TableCell = useMemo(() => StyledTableCell(Component), [Component]);
 
-    const sortedColorValue = getVarValue(theme.table.rowSortedColor);
-    const sortedColorAlpha = getVarValue(theme.table.rowSortedColorAlpha);
+    let sortedColor =
+      checkValidHexColorValue(sortedColorValue) && sortedColorAlpha
+        ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha))
+        : sortedColorValue;
+
+    useEffect(() => {
+      setSortedColorValue(getVarValue(theme.table.rowSortedColor));
+      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha));
 
-    const sortedColor = checkValidHexColorValue(sortedColorValue)
-      ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha))
-      : sortedColorValue;
+      sortedColor =
+        checkValidHexColorValue(sortedColorValue) && sortedColorAlpha
+          ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha))
+          : sortedColorValue;
+    }, [
+      activeTheme?.colors?.modes[selectedMode],
+      sortedColorValue,
+      sortedColorAlpha,
+    ]);
 
     return (
       <ClassNames>

diff --git a/packages/core/src/components/Table/TableRow/TableRow.tsx b/packages/core/src/components/Table/TableRow/TableRow.tsx
@@ -84,12 +84,8 @@ export const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(
     const tableContext = useContext(TableContext);
     const tableSectionContext = useContext(TableSectionContext);
 
-    const [even, setEven] = useState(
-      getVarValue(theme.table.rowStripedBackgroundColorEven)
-    );
-    const [odd, setOdd] = useState(
-      getVarValue(theme.table.rowStripedBackgroundColorOdd)
-    );
+    const [even, setEven] = useState<string | undefined>();
+    const [odd, setOdd] = useState<string | undefined>();
 
     const type = tableSectionContext?.type || "body";
 
@@ -100,17 +96,24 @@ export const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(
 
     const TableRow = useMemo(() => StyledTableRow(Component), [Component]);
 
-    const stripedColorEven = checkValidHexColorValue(even)
+    let stripedColorEven = checkValidHexColorValue(even)
       ? hexToRgbA(even, 0.6)
       : even;
-    const stripedColorOdd = checkValidHexColorValue(odd)
+
+    let stripedColorOdd = checkValidHexColorValue(odd)
       ? hexToRgbA(odd, 0.6)
       : odd;
 
     useEffect(() => {
       setEven(getVarValue(theme.table.rowStripedBackgroundColorEven));
       setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd));
-    }, [activeTheme?.colors?.modes[selectedMode]]);
+      stripedColorEven = checkValidHexColorValue(even)
+        ? hexToRgbA(even, 0.6)
+        : even;
+      stripedColorOdd = checkValidHexColorValue(odd)
+        ? hexToRgbA(odd, 0.6)
+        : odd;
+    }, [activeTheme?.colors?.modes[selectedMode], even, odd]);
 
     return (
       <ClassNames>

diff --git a/packages/core/src/components/Table/utils/utils.ts b/packages/core/src/components/Table/utils/utils.ts
@@ -48,7 +48,7 @@ export const getBorderStyles = (
   }
 };
 
-export const checkValidHexColorValue = (value: string): boolean => {
+export const checkValidHexColorValue = (value?: string): boolean => {
   const reg = /^#([0-9a-f]{3}){1,2}$/i;
-  return reg.test(value);
+  return value ? reg.test(value) : false;
 };
diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -449,7 +449,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     rowListBorderColor: "transparent",
     rowStripedBackgroundColorEven: theme.colors.atmo1,
     rowStripedBackgroundColorOdd: "transparent",
-    rowExpandBackgroundColor: theme.colors.atmo1,
+    rowExpandBackgroundColor: theme.colors.atmo2,
     rowHoverColor: theme.colors.atmo3,
     rowHoverBorderColor: theme.colors.atmo4,
     rowSortedColor: theme.colors.atmo1,