carbon-react 127.0.0 → 127.0.2

package/esm/__internal__/input/input.style.d.ts

@@ -1,3 +1,3 @@
 import { CommonInputProps } from "./input.component";
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly" | "inputBorderRadius">, never>;
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius">, never>;
 export default StyledInput;

package/esm/__internal__/input/input.style.js

@@ -31,7 +31,7 @@ const StyledInput = styled.input`
     `}
 
   &::placeholder {
-    color: var(--colorsUtilityYin030);
+    color: var(--colorsUtilityYin055);
   }
 
   ${({
@@ -40,11 +40,5 @@ const StyledInput = styled.input`
       color: var(--colorsUtilityYin030);
       cursor: not-allowed;
     `}
-
-  ${({
-  readOnly
-}) => readOnly && css`
-      color: var(--colorsActionMinorYin090);
-    `}
 `;
 export default StyledInput;

package/esm/__spec_helper__/index.js

@@ -1,3 +1,4 @@
+import { configure } from "@testing-library/react";
 import { enableFetchMocks } from "jest-fetch-mock";
 import { setupMatchMediaMock } from "./mock-match-media";
 import setupResizeObserverMock from "./mock-resize-observer";
@@ -5,4 +6,7 @@ import setupScrollToMock from "./mock-element-scrollto";
 enableFetchMocks();
 setupResizeObserverMock();
 setupMatchMediaMock();
-setupScrollToMock();
+setupScrollToMock();
+configure({
+  testIdAttribute: "data-role" /** Configure React Testing Library *ByTestId queries to use data-role tag */
+});

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -23,7 +23,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/React.createElement(StyledFlatTableBodyDraggable, _extends({
-    "data-testid": "flat-table-body-draggable",
+    "data-role": "flat-table-body-draggable",
     ref: drop,
     isDragging: isDragging
   }, rest), children);

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/lib/__internal__/input/input.style.d.ts

@@ -1,3 +1,3 @@
 import { CommonInputProps } from "./input.component";
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly" | "inputBorderRadius">, never>;
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius">, never>;
 export default StyledInput;

package/lib/__internal__/input/input.style.js

@@ -39,7 +39,7 @@ const StyledInput = _styledComponents.default.input`
     `}
 
   &::placeholder {
-    color: var(--colorsUtilityYin030);
+    color: var(--colorsUtilityYin055);
   }
 
   ${({
@@ -48,11 +48,5 @@ const StyledInput = _styledComponents.default.input`
       color: var(--colorsUtilityYin030);
       cursor: not-allowed;
     `}
-
-  ${({
-  readOnly
-}) => readOnly && (0, _styledComponents.css)`
-      color: var(--colorsActionMinorYin090);
-    `}
 `;
 var _default = exports.default = StyledInput;

package/lib/__spec_helper__/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _react = require("@testing-library/react");
 var _jestFetchMock = require("jest-fetch-mock");
 var _mockMatchMedia = require("./mock-match-media");
 var _mockResizeObserver = _interopRequireDefault(require("./mock-resize-observer"));
@@ -8,4 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 (0, _jestFetchMock.enableFetchMocks)();
 (0, _mockResizeObserver.default)();
 (0, _mockMatchMedia.setupMatchMediaMock)();
-(0, _mockElementScrollto.default)();
+(0, _mockElementScrollto.default)();
+(0, _react.configure)({
+  testIdAttribute: "data-role" /** Configure React Testing Library *ByTestId queries to use data-role tag */
+});

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -32,7 +32,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/_react.default.createElement(_flatTableBodyDraggable.default, _extends({
-    "data-testid": "flat-table-body-draggable",
+    "data-role": "flat-table-body-draggable",
     ref: drop,
     isDragging: isDragging
   }, rest), children);

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/package.json

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