carbon-react 110.5.1 → 110.5.2

package/esm/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;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -1,10 +1,11 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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);
 
 const FlatTableHeader = ({
@@ -21,6 +22,9 @@ const FlatTableHeader = ({
   ...rest
 }) => {
   const ref = useRef(null);
+  const {
+    colorTheme
+  } = useContext(FlatTableThemeContext);
   useLayoutEffect(() => {
     if (ref.current && reportCellWidth) {
       reportCellWidth(ref.current.offsetWidth, cellIndex);
@@ -31,6 +35,7 @@ const FlatTableHeader = ({
     leftPosition: leftPosition || 0,
     makeCellSticky: !!reportCellWidth,
     align: align,
+    colorTheme: colorTheme,
     "data-element": "flat-table-header",
     colSpan: colspan,
     rowSpan: rowspan,

package/esm/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",
   medium: "2px",
@@ -12,7 +13,8 @@ const StyledFlatTableHeader = styled.th`
   colWidth,
   leftPosition,
   makeCellSticky,
-  verticalBorder
+  verticalBorder,
+  colorTheme
 }) => css`
     background-color: transparent;
     border-width: 0;
@@ -47,11 +49,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;
         }
       `};
 

package/lib/components/flat-table/flat-table-header/flat-table-header-utils.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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)";
+  }
+};
+
+var _default = getAlternativeBackgroundColor;
+exports.default = _default;

package/lib/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -15,6 +15,8 @@ var _flatTableHeader = _interopRequireDefault(require("./flat-table-header.style
 
 var _utils = require("../../../style/utils");
 
+var _flatTable = require("../flat-table.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -39,6 +41,9 @@ const FlatTableHeader = ({
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
+  const {
+    colorTheme
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   (0, _react.useLayoutEffect)(() => {
     if (ref.current && reportCellWidth) {
       reportCellWidth(ref.current.offsetWidth, cellIndex);
@@ -49,6 +54,7 @@ const FlatTableHeader = ({
     leftPosition: leftPosition || 0,
     makeCellSticky: !!reportCellWidth,
     align: align,
+    colorTheme: colorTheme,
     "data-element": "flat-table-header",
     colSpan: colspan,
     rowSpan: rowspan,

package/lib/components/flat-table/flat-table-header/flat-table-header.style.js

@@ -9,6 +9,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
+var _flatTableHeaderUtils = _interopRequireDefault(require("./flat-table-header-utils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,7 +29,8 @@ const StyledFlatTableHeader = _styledComponents.default.th`
   colWidth,
   leftPosition,
   makeCellSticky,
-  verticalBorder
+  verticalBorder,
+  colorTheme
 }) => (0, _styledComponents.css)`
     background-color: transparent;
     border-width: 0;
@@ -60,11 +65,11 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     }
 
     ${alternativeBgColor && (0, _styledComponents.css)`
-        &&&:first-child {
-          border-left: 1px solid var(--colorsActionMinor550);
-        }
         &&& {
-          background-color: var(--colorsActionMinor550);
+          background-color: ${(0, _flatTableHeaderUtils.default)(colorTheme)};
+        }
+        &&&:first-child {
+          border-left: unset;
         }
       `};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "110.5.1",
+  "version": "110.5.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {