fix(flat-table-header): alternative color not changing according theme

Closes: FE-5319
Sage · Sep 6, 2022 · ce6e48c · ce6e48c
1 parent 7ddd71e
commit ce6e48c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 23 deletions.
diff --git a/src/components/flat-table/flat-table-header/flat-table-header-utils.js b/src/components/flat-table/flat-table-header/flat-table-header-utils.js
@@ -0,0 +1,18 @@
+const getAlternativeBackgroundColor = (colorTheme) => {
+  switch (colorTheme) {
+    case "light":
+      return "var(--colorsActionMinor100)";
+
+    case "transparent-base":
+      return "var(--colorsUtilityMajor025)";
+
+    case "transparent-white":
+      return "var(--colorsUtilityYang100)";
+
+    // default theme is "dark"
+    default:
+      return "var(--colorsActionMinor550)";
+  }
+};
+
+export default getAlternativeBackgroundColor;
diff --git a/src/components/flat-table/flat-table-header/flat-table-header.component.js b/src/components/flat-table/flat-table-header/flat-table-header.component.js
@@ -1,9 +1,10 @@
-import React, { useLayoutEffect, useRef } from "react";
+import React, { useLayoutEffect, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 
 import StyledFlatTableHeader from "./flat-table-header.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
+import { FlatTableThemeContext } from "../flat-table.component";
 
 const paddingPropTypes = filterStyledSystemPaddingProps(
   styledSystemPropTypes.space
@@ -23,6 +24,7 @@ const FlatTableHeader = ({
   ...rest
 }) => {
   const ref = useRef(null);
+  const { colorTheme } = useContext(FlatTableThemeContext);
 
   useLayoutEffect(() => {
     if (ref.current && reportCellWidth) {
@@ -36,6 +38,7 @@ const FlatTableHeader = ({
       leftPosition={leftPosition || 0}
       makeCellSticky={!!reportCellWidth}
       align={align}
+      colorTheme={colorTheme}
       data-element="flat-table-header"
       colSpan={colspan}
       rowSpan={rowspan}

diff --git a/src/components/flat-table/flat-table-header/flat-table-header.spec.js b/src/components/flat-table/flat-table-header/flat-table-header.spec.js
@@ -3,6 +3,8 @@ import { mount } from "enzyme";
 import FlatTableHeader from "./flat-table-header.component";
 import StyledFlatTableHeader from "./flat-table-header.style";
 import { assertStyleMatch } from "../../../__spec_helper__/test-utils";
+import { FlatTableThemeContext } from "../flat-table.component";
+import getAlternativeBackgroundColor from "./flat-table-header-utils";
 
 describe("FlatTableHeader", () => {
   it("renders with proper width style rule when width prop is passed", () => {
@@ -49,25 +51,30 @@ describe("FlatTableHeader", () => {
   });
 
   describe('with the "alternativeBgColor" prop set', () => {
-    it('it overrides the header "background-color"', () => {
-      const wrapper = mount(
-        <table>
-          <thead>
-            <tr>
-              <FlatTableHeader alternativeBgColor />
-            </tr>
-          </thead>
-        </table>
-      );
+    it.each(["dark", "light", "transparent-white", "transparent-base"])(
+      'it overrides the header "background-color" with correspond color for %s themeColor"',
+      (colorTheme) => {
+        const wrapper = mount(
+          <FlatTableThemeContext.Provider value={{ colorTheme }}>
+            <table>
+              <thead>
+                <tr>
+                  <FlatTableHeader alternativeBgColor>test 1</FlatTableHeader>
+                </tr>
+              </thead>
+            </table>
+          </FlatTableThemeContext.Provider>
+        );
 
-      assertStyleMatch(
-        {
-          backgroundColor: "var(--colorsActionMinor550)",
-        },
-        wrapper.find(StyledFlatTableHeader),
-        { modifier: "&&&" }
-      );
-    });
+        assertStyleMatch(
+          {
+            backgroundColor: getAlternativeBackgroundColor(colorTheme),
+          },
+          wrapper.find(StyledFlatTableHeader),
+          { modifier: "&&&" }
+        );
+      }
+    );
   });
 
   describe.each([

diff --git a/src/components/flat-table/flat-table-header/flat-table-header.style.js b/src/components/flat-table/flat-table-header/flat-table-header.style.js
@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
+import getAlternativeBackgroundColor from "./flat-table-header-utils";
 
 const verticalBorderSizes = {
   small: "1px",
@@ -15,6 +16,7 @@ const StyledFlatTableHeader = styled.th`
     leftPosition,
     makeCellSticky,
     verticalBorder,
+    colorTheme,
   }) => css`
     background-color: transparent;
     border-width: 0;
@@ -57,11 +59,11 @@ const StyledFlatTableHeader = styled.th`
     ${
       alternativeBgColor &&
       css`
-        &&&:first-child {
-          border-left: 1px solid var(--colorsActionMinor550);
-        }
         &&& {
-          background-color: var(--colorsActionMinor550);
+          background-color: ${getAlternativeBackgroundColor(colorTheme)};
+        }
+        &&&:first-child {
+          border-left: unset;
         }
       `
     };