fix(InlineEditor): losing variant styles when in edit mode (#3493)

Co-authored-by: Paulo Lagoá <paulo.lagoa@@hitachivantara.com>
lumada-design · Jul 7, 2023 · c1de54b · c1de54b
1 parent 125bee8
commit c1de54b
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 105 deletions.
diff --git a/app/src/generator/Typography/Typography.tsx b/app/src/generator/Typography/Typography.tsx
@@ -6,9 +6,10 @@ import {
   HvListValue,
   useTheme,
   theme,
+  getVarValue,
 } from "@hitachivantara/uikit-react-core";
 import { HvThemeTokens, HvThemeTypography } from "@hitachivantara/uikit-styles";
-import { extractFontSizeUnit, getVarValue } from "generator/utils";
+import { extractFontSizeUnit } from "generator/utils";
 import { useContext, useEffect, useState } from "react";
 import { GeneratorContext } from "generator/GeneratorContext";
 import debounce from "lodash/debounce";

diff --git a/app/src/generator/utils.ts b/app/src/generator/utils.ts
@@ -1,17 +1,6 @@
 import { HvTheme } from "@hitachivantara/uikit-react-core";
 import { HvThemeStructure } from "@hitachivantara/uikit-styles";
 
-export const getVarValue = (cssVar: string, rootElementId?: string) => {
-  const root = document.getElementById(rootElementId || "hv-root");
-  if (root) {
-    const computedValue = getComputedStyle(root)
-      .getPropertyValue(cssVar.replace("var(", "").replace(")", ""))
-      .trim();
-
-    return computedValue;
-  }
-};
-
 export const extractFontsNames = (webfontLink: string): string[] => {
   const fontNames: string[] = [];
 

diff --git a/docs/guides/theming/ThemeStructure.tsx b/docs/guides/theming/ThemeStructure.tsx
@@ -7,6 +7,8 @@ import {
   HvLabel,
   themes,
   theme,
+  getVarValue,
+  useTheme,
 } from "@hitachivantara/uikit-react-core";
 import { css } from "@emotion/css";
 import { clsx } from "clsx";
@@ -111,18 +113,7 @@ export const ThemeStructure = () => {
   );
   const [showComponents, setShowComponents] = useState<boolean>(false);
 
-  const getVarValue = (cssVar: string): string => {
-    // Creating a temporary element to get CSS variables
-    const tempEl = document.createElement("div");
-    tempEl.style.setProperty("--temp", cssVar);
-    document.body.appendChild(tempEl);
-    const computedValue = getComputedStyle(tempEl)
-      .getPropertyValue("--temp")
-      .trim();
-    document.body.removeChild(tempEl);
-
-    return computedValue;
-  };
+  const { rootId } = useTheme();
 
   const renderLevel = (
     value: object | string | number,
@@ -164,7 +155,7 @@ export const ThemeStructure = () => {
     }
     if (typeof value === "string") {
       const processedValue: string = value.includes("var(--")
-        ? getVarValue(value)
+        ? getVarValue(value, rootId) || ""
         : value;
 
       if (processedValue.trim().startsWith("#")) {

diff --git a/packages/core/src/components/Drawer/Drawer.tsx b/packages/core/src/components/Drawer/Drawer.tsx
@@ -6,11 +6,11 @@ import { Close } from "@hitachivantara/uikit-react-icons";
 import { HvBaseProps } from "@core/types/generic";
 import { withTooltip } from "@core/hocs";
 import {
-  getVarValue,
   hexToRgbA,
   setId,
   checkValidHexColorValue,
   ExtractNames,
+  getVarValue,
 } from "@core/utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvButton } from "@core/components";
@@ -86,10 +86,10 @@ export const HvDrawer = ({
   ...others
 }: HvDrawerProps) => {
   const { classes, css, cx } = useClasses(classesProp);
-  const { activeTheme, selectedMode } = useTheme();
+  const { activeTheme, rootId } = useTheme();
 
   const [backgroundColorValue, setBackgroundColorValue] = useState<string>(
-    getVarValue(theme.drawer.backDropBackgroundColor)
+    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || ""
   );
 
   const closeButtonDisplay = () => <Close role="presentation" />;
@@ -103,13 +103,19 @@ export const HvDrawer = ({
   );
 
   useEffect(() => {
-    setBackgroundColorValue(getVarValue(theme.drawer.backDropBackgroundColor));
+    setBackgroundColorValue(
+      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||
+        activeTheme?.drawer.backDropBackgroundColor ||
+        ""
+    );
 
     setBackgroundColor(getBackgroundColor(backgroundColorValue));
   }, [
-    activeTheme?.colors?.modes[selectedMode],
+    activeTheme?.colors.modes.selectedMode,
     backgroundColorValue,
     setBackgroundColor,
+    rootId,
+    activeTheme?.drawer.backDropBackgroundColor,
   ]);
 
   return (

diff --git a/packages/core/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/packages/core/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`HvDrawer > should render correctly 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiBackdrop-root HvDrawer-background hv-v41n4a MuiModal-backdrop css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
+      class="MuiBackdrop-root HvDrawer-background hv-8ripq6 MuiModal-backdrop css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
       style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
     />
     <div

diff --git a/packages/core/src/components/InlineEditor/InlineEditor.tsx b/packages/core/src/components/InlineEditor/InlineEditor.tsx
@@ -1,12 +1,7 @@
 import React, { useLayoutEffect, useRef, useState } from "react";
 import { HvBaseProps } from "@core/types";
 import { useControlled } from "@core/hooks";
-import {
-  ExtractNames,
-  getVarValue,
-  isKeypress,
-  keyboardCodes,
-} from "@core/utils";
+import { ExtractNames, isKeypress, keyboardCodes } from "@core/utils";
 import {
   HvButtonProps,
   HvTypographyVariants,
@@ -16,8 +11,8 @@ import {
   HvTypography,
   HvInputProps,
 } from "@core/components";
-import { HvThemeTypographyProps, theme } from "@hitachivantara/uikit-styles";
 import { Edit } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "@hitachivantara/uikit-react-core";
 import { staticClasses, useClasses } from "./InlineEditor.styles";
 
 export { staticClasses as inlineEditorClasses };
@@ -49,14 +44,6 @@ export interface HvInlineEditorProps
   classes?: HvInlineEditorClasses;
 }
 
-const getTypographyStyles = (typography): HvThemeTypographyProps => {
-  const typographyStyles = {};
-  Object.keys(typography).forEach((k) => {
-    typographyStyles[k] = getVarValue(typography[k]);
-  });
-  return typographyStyles;
-};
-
 /**
  * An Inline Editor allows the user to edit a record without making a major switch
  * between viewing and editing, making it an efficient method of updating a record.
@@ -82,8 +69,9 @@ export const HvInlineEditor = ({
   const [editMode, setEditMode] = useState(false);
   const [cachedValue, setCachedValue] = useState(value);
   const inputRef = useRef<HTMLInputElement>();
+  const { activeTheme } = useTheme();
 
-  const typographyStyles = getTypographyStyles(theme.typography[variant] || {});
+  const typographyStyles = activeTheme?.typography[variant] || {};
   const { lineHeight } = typographyStyles;
 
   useLayoutEffect(() => {

diff --git a/packages/core/src/components/Table/TableCell/TableCell.tsx b/packages/core/src/components/Table/TableCell/TableCell.tsx
@@ -14,8 +14,8 @@ import { transientOptions } from "@core/utils/transientOptions";
 import {
   checkValidHexColorValue,
   ExtractNames,
-  getVarValue,
   hexToRgbA,
+  getVarValue,
 } from "@core/utils";
 import { useTheme } from "@core/hooks";
 import {
@@ -131,7 +131,7 @@ export const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(
       ...others
     } = props;
     const { classes, cx } = useClasses(classesProp);
-    const { activeTheme, selectedMode } = useTheme();
+    const { activeTheme, rootId } = useTheme();
     const tableContext = useContext(TableContext);
     const tableSectionContext = useContext(TableSectionContext);
 
@@ -154,14 +154,15 @@ export const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(
     );
 
     useEffect(() => {
-      setSortedColorValue(getVarValue(theme.table.rowSortedColor));
-      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha));
+      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));
+      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));
 
       setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));
     }, [
-      activeTheme?.colors?.modes[selectedMode],
+      activeTheme?.colors.modes.selectedMode,
       sortedColorValue,
       sortedColorAlpha,
+      rootId,
     ]);
 
     return (

diff --git a/packages/core/src/components/Table/TableRow/TableRow.tsx b/packages/core/src/components/Table/TableRow/TableRow.tsx
@@ -4,8 +4,8 @@ import { theme } from "@hitachivantara/uikit-styles";
 import {
   ExtractNames,
   checkValidHexColorValue,
-  getVarValue,
   hexToRgbA,
+  getVarValue,
 } from "@core/utils";
 import { transientOptions } from "@core/utils/transientOptions";
 import { HvBaseProps } from "@core/types";
@@ -89,7 +89,7 @@ export const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(
       ...others
     } = props;
     const { classes, cx } = useClasses(classesProp);
-    const { activeTheme, selectedMode } = useTheme();
+    const { activeTheme, selectedMode, rootId } = useTheme();
     const tableContext = useContext(TableContext);
     const tableSectionContext = useContext(TableSectionContext);
 
@@ -113,12 +113,12 @@ export const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(
     );
 
     useEffect(() => {
-      setEven(getVarValue(theme.table.rowStripedBackgroundColorEven));
-      setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd));
+      setEven(getVarValue(theme.table.rowStripedBackgroundColorEven, rootId));
+      setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd, rootId));
 
       setStripedColorEven(getStripedColor(even));
       setStripedColorOdd(getStripedColor(odd));
-    }, [activeTheme?.colors?.modes[selectedMode], even, odd]);
+    }, [activeTheme?.colors?.modes[selectedMode], even, odd, rootId]);
 
     return (
       <TableRow