carbon-react 127.0.1 → 127.0.3

package/esm/components/flat-table/flat-table-cell/flat-table-cell.style.js

@@ -2,7 +2,6 @@ import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 import baseTheme from "../../../style/themes/base";
 import { toColor } from "../../../style/utils/color";
-import StyledIcon from "../../icon/icon.style";
 const verticalBorderSizes = {
   small: "1px",
   medium: "2px",
@@ -58,6 +57,10 @@ const StyledFlatTableCell = styled.td`
       ${verticalBorderColor && css`
         border-right-color: ${toColor(theme, verticalBorderColor)};
       `}
+
+      [data-component="icon"]:not([color]) {
+        color: var(--colorsActionMinor500);
+      }
     }
 
     &:first-of-type {
@@ -92,11 +95,6 @@ const StyledCellContent = styled.div`
       display: flex;
       align-items: center;
       line-height: 1em;
-
-      ${StyledIcon} {
-        width: 16px;
-        height: 16px;
-      }
     `}
 `;
 StyledFlatTableCell.defaultProps = {

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -124,10 +124,6 @@ const StyledFlatTableRow = styled.tr`
       table-layout: fixed;
       width: auto;
 
-      [data-component="icon"]:not([color]) {
-        color: var(--colorsActionMinor500);
-      }
-
       :focus-visible {
         outline: none;
       }

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -73,6 +73,10 @@ const StyledFlatTableRowHeader = styled.th.attrs(({
       ${verticalBorderColor && css`
         border-${stickyAlignment === "right" ? "left" : "right"}-color: ${toColor(theme, verticalBorderColor)};
       `}
+
+      [data-component="icon"]:not([color]) {
+        color: var(--colorsActionMinor500);
+      }
     }
 
     ${expandable && css`

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

@@ -1,9 +1,9 @@
-import React, { useRef } from "react";
+import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import Event from "../../../__internal__/utils/helpers/events";
-import Icon from "../../icon";
-import { StyledSort, StyledSpaceHolder } from "./sort.style";
+import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+import { FlatTableThemeContext } from "../flat-table.component";
 const Sort = ({
   children,
   onClick,
@@ -17,6 +17,9 @@ const Sort = ({
     }
     return null;
   };
+  const {
+    colorTheme
+  } = useContext(FlatTableThemeContext);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     hidden: true,
     id: id.current
@@ -27,9 +30,9 @@ const Sort = ({
     onClick: onClick,
     sortType: sortType,
     "aria-labelledby": id.current
-  }, children, sortType && /*#__PURE__*/React.createElement(Icon, {
+  }, children, sortType && /*#__PURE__*/React.createElement(StyledSortIcon, {
     type: sortType === "ascending" ? "sort_up" : "sort_down",
-    color: "--colorsUtilityMajor200"
+    iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
   })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
 };
 export default Sort;

package/esm/components/flat-table/sort/sort.style.d.ts

@@ -1,4 +1,10 @@
+/// <reference types="react" />
+import { StyledIconProps } from "../../icon/icon.style";
 import { SortProps } from "./sort.component";
 declare const StyledSort: import("styled-components").StyledComponent<"div", any, Pick<SortProps, "sortType">, never>;
 declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledSort, StyledSpaceHolder };
+interface StylesSortIconProps extends StyledIconProps {
+    iconColor?: string;
+}
+declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
+export { StyledSort, StyledSpaceHolder, StyledSortIcon };

package/esm/components/flat-table/sort/sort.style.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import StyledIcon from "../../icon/icon.style";
+import Icon from "../../icon";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 import baseTheme from "../../../style/themes/base";
 const oldFocusStyling = `
@@ -13,12 +13,6 @@ const StyledSort = styled.div`
   border-bottom: 1px solid transparent;
   position: relative;
 
-  ${StyledIcon} {
-    width: 16px;
-    height: 16px;
-    padding-left: 6px;
-  }
-
   :hover {
     border-bottom: 1px solid;
     cursor: pointer;
@@ -38,4 +32,10 @@ const StyledSpaceHolder = styled.div`
   display: inline-block;
   width: 22px;
 `;
-export { StyledSort, StyledSpaceHolder };
+const StyledSortIcon = styled(Icon)`
+  padding-left: var(--spacing075);
+  color: ${({
+  iconColor
+}) => `var(${iconColor})`};
+`;
+export { StyledSort, StyledSpaceHolder, StyledSortIcon };

package/esm/locales/en-gb.js

@@ -11,7 +11,7 @@ const enGB = {
   },
   advancedColorPicker: {
     ariaLabel: () => "Change colour",
-    currentColorDescriptionTerm: () => "Current color assigned: ",
+    currentColorDescriptionTerm: () => "Current colour assigned: ",
     currentColorAssigned: currentColor => currentColor
   },
   batchSelection: {
@@ -126,7 +126,7 @@ const enGB = {
   },
   password: {
     ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
-    ariaLiveHiddenMessage: () => "Your Password is currently hidden."
+    ariaLiveHiddenMessage: () => "Your password is currently hidden."
   },
   progressTracker: {
     of: () => "of"

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

@@ -8,7 +8,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../../style/themes/base"));
 var _color = require("../../../style/utils/color");
-var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -67,6 +66,10 @@ const StyledFlatTableCell = exports.StyledFlatTableCell = _styledComponents.defa
       ${verticalBorderColor && (0, _styledComponents.css)`
         border-right-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
       `}
+
+      [data-component="icon"]:not([color]) {
+        color: var(--colorsActionMinor500);
+      }
     }
 
     &:first-of-type {
@@ -101,11 +104,6 @@ const StyledCellContent = exports.StyledCellContent = _styledComponents.default.
       display: flex;
       align-items: center;
       line-height: 1em;
-
-      ${_icon.default} {
-        width: 16px;
-        height: 16px;
-      }
     `}
 `;
 StyledFlatTableCell.defaultProps = {

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

@@ -133,10 +133,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       table-layout: fixed;
       width: auto;
 
-      [data-component="icon"]:not([color]) {
-        color: var(--colorsActionMinor500);
-      }
-
       :focus-visible {
         outline: none;
       }

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

@@ -82,6 +82,10 @@ const StyledFlatTableRowHeader = exports.StyledFlatTableRowHeader = _styledCompo
       ${verticalBorderColor && (0, _styledComponents.css)`
         border-${stickyAlignment === "right" ? "left" : "right"}-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
       `}
+
+      [data-component="icon"]:not([color]) {
+        color: var(--colorsActionMinor500);
+      }
     }
 
     ${expandable && (0, _styledComponents.css)`

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

@@ -7,9 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
-var _icon = _interopRequireDefault(require("../../icon"));
 var _sort = require("./sort.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _flatTable = require("../flat-table.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -26,6 +26,9 @@ const Sort = ({
     }
     return null;
   };
+  const {
+    colorTheme
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     hidden: true,
     id: id.current
@@ -36,9 +39,9 @@ const Sort = ({
     onClick: onClick,
     sortType: sortType,
     "aria-labelledby": id.current
-  }, children, sortType && /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, children, sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSortIcon, {
     type: sortType === "ascending" ? "sort_up" : "sort_down",
-    color: "--colorsUtilityMajor200"
+    iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
   })), !sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSpaceHolder, null));
 };
 var _default = exports.default = Sort;

package/lib/components/flat-table/sort/sort.style.d.ts

@@ -1,4 +1,10 @@
+/// <reference types="react" />
+import { StyledIconProps } from "../../icon/icon.style";
 import { SortProps } from "./sort.component";
 declare const StyledSort: import("styled-components").StyledComponent<"div", any, Pick<SortProps, "sortType">, never>;
 declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledSort, StyledSpaceHolder };
+interface StylesSortIconProps extends StyledIconProps {
+    iconColor?: string;
+}
+declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
+export { StyledSort, StyledSpaceHolder, StyledSortIcon };

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSpaceHolder = exports.StyledSort = void 0;
+exports.StyledSpaceHolder = exports.StyledSortIcon = exports.StyledSort = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+var _icon = _interopRequireDefault(require("../../icon"));
 var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 var _base = _interopRequireDefault(require("../../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,12 +20,6 @@ const StyledSort = exports.StyledSort = _styledComponents.default.div`
   border-bottom: 1px solid transparent;
   position: relative;
 
-  ${_icon.default} {
-    width: 16px;
-    height: 16px;
-    padding-left: 6px;
-  }
-
   :hover {
     border-bottom: 1px solid;
     cursor: pointer;
@@ -44,4 +38,10 @@ StyledSort.defaultProps = {
 const StyledSpaceHolder = exports.StyledSpaceHolder = _styledComponents.default.div`
   display: inline-block;
   width: 22px;
+`;
+const StyledSortIcon = exports.StyledSortIcon = (0, _styledComponents.default)(_icon.default)`
+  padding-left: var(--spacing075);
+  color: ${({
+  iconColor
+}) => `var(${iconColor})`};
 `;

package/lib/locales/en-gb.js

@@ -17,7 +17,7 @@ const enGB = {
   },
   advancedColorPicker: {
     ariaLabel: () => "Change colour",
-    currentColorDescriptionTerm: () => "Current color assigned: ",
+    currentColorDescriptionTerm: () => "Current colour assigned: ",
     currentColorAssigned: currentColor => currentColor
   },
   batchSelection: {
@@ -132,7 +132,7 @@ const enGB = {
   },
   password: {
     ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
-    ariaLiveHiddenMessage: () => "Your Password is currently hidden."
+    ariaLiveHiddenMessage: () => "Your password is currently hidden."
   },
   progressTracker: {
     of: () => "of"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "127.0.1",
+  "version": "127.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",