carbon-react 104.10.2 → 104.11.0

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

@@ -109,7 +109,10 @@ const FlatTableBodyDraggable = ({
 };
 
 FlatTableBodyDraggable.propTypes = {
+  /** Callback fired when order is changed */
   getOrder: _propTypes.default.func,
+
+  /** Array of FlatTableRow. */
   children: _propTypes.default.node.isRequired
 };
 var _default = FlatTableBodyDraggable;

package/lib/components/search/search.style.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledButtonIcon = exports.StyledSearchButton = exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _styledSystem = require("styled-system");
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
@@ -40,7 +40,7 @@ const StyledSearch = _styledComponents.default.div`
   variant
 }) => {
   const darkVariant = variant === "dark";
-  const variantColor = darkVariant ? `${theme.search.darkVariantBorder}` : `${theme.search.passive}`;
+  const variantColor = darkVariant ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor300)";
   const iconColor = darkVariant && (searchHasValue && isFocused || !searchHasValue && isFocused || !isFocused && searchHasValue && showSearchButton);
   return (0, _styledComponents.css)`
       ${_styledSystem.margin}
@@ -52,52 +52,53 @@ const StyledSearch = _styledComponents.default.div`
       font-size: 14px;
       font-weight: 700;
       :hover {
-        border-bottom-color: ${theme.search.active};
+        border-bottom-color: ${darkVariant ? "var(--colorsUtilityMajor100)" : "var(--colorsUtilityMajor400)"};
         cursor: pointer;
       }
       ${(isFocused || searchHasValue) && (0, _styledComponents.css)`
         border-color: transparent;
         transition: background 0.2s ease;
-        color: ${theme.icon.defaultHover};
         :hover {
           border-color: transparent;
         }
       `}
       ${isFocused && !searchIsActive && (0, _styledComponents.css)`
         border-color: transparent;
-        color: ${theme.icon.defaultHover};
       `}
       ${!isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
         border-bottom: 2px solid ${variantColor};
         :hover {
-          border-bottom-color: ${theme.search.active};
+          border-bottom-color: var(--colorsUtilityMajor400);
           cursor: pointer;
         }
       `}
 
       ${_input.default} {
+        ::-moz-placeholder {
+          color: var(--colorsUtilityYin055);
+          opacity: 1;
+        }
+        ::placeholder {
+          color: var(--colorsUtilityYin055);
+        }
+
         ${darkVariant && !isFocused && (0, _styledComponents.css)`
           ::-moz-placeholder {
-            color: ${theme.search.darkVariantPlaceholder};
+            color: var(--colorsUtilityMajor200);
             opacity: 1;
           }
           ::placeholder {
-            color: ${theme.search.darkVariantPlaceholder};
+            color: var(--colorsUtilityMajor200);
           }
         `}
 
-        ${darkVariant && (0, _styledComponents.css)`
-          ${!isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
-            color: ${theme.search.darkVariantText};
-          `}
-          ${!isFocused && !searchHasValue && (0, _styledComponents.css)`
-            color: ${theme.search.darkVariantPlaceholder};
-          `}
+        ${darkVariant && !isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
+          color: var(--colorsUtilityYang100);
         `}
       }
 
       ${_inputPresentation.default} {
-        background-color: ${searchHasValue || isFocused ? `${theme.colors.white}` : "transparent"};
+        background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
         flex: 1;
         font-size: 14px;
         font-weight: 700;
@@ -106,11 +107,10 @@ const StyledSearch = _styledComponents.default.div`
         cursor: pointer;
         ${!isFocused && !searchHasValue && (0, _styledComponents.css)`
           border: 1px solid transparent;
-          color: ${theme.icon.default};
         `}
         ${!isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
           border: 1px solid transparent;
-          background-color: ${darkVariant ? "transparent" : `${theme.colors.white}`};
+          background-color: ${darkVariant ? "transparent" : "var(--colorsUtilityYang100)"};
         `}
       }
 
@@ -118,24 +118,19 @@ const StyledSearch = _styledComponents.default.div`
         flex: 1;
         z-index: ${theme.zIndex.smallOverlay};
       }
-      ${_button.default} {
-        background-color: ${theme.search.button};
-        cursor: pointer;
-        color: ${theme.colors.white};
-      }
       ${_icon.default} {
-        color: ${iconColor ? `${theme.search.icon}` : `${theme.search.iconDarkVariant}`};
+        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
         ${!darkVariant && (0, _styledComponents.css)`
-          color: ${theme.search.icon};
+          color: var(--colorsUtilityMajor400);
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
         :hover {
-          color: ${iconColor ? `${theme.search.iconHover}` : `${theme.search.iconDarkVariantHover}`};
+          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
           ${!darkVariant && (0, _styledComponents.css)`
-            color: ${theme.search.iconHover};
+            color: var(--colorsUtilityMajor500);
           `}
         }
       }
@@ -156,17 +151,13 @@ exports.default = _default;
 const StyledSearchButton = _styledComponents.default.div`
   display: inline-flex;
   border-bottom: none;
-  &&& ${_button.default} {
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-      background-color: ${theme.colors.primary};
-      border-color: ${theme.colors.primary};
-      :hover {
-        background: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
-      }
-    `}
+  & ${_button.default} {
+    background-color: var(--colorsActionMajor500);
+    border-color: var(--colorsActionMajorTransparent);
+    :hover {
+      background: var(--colorsActionMajor600);
+      border-color: var(--colorsActionMajorTransparent);
+    }
 
     width: 40px;
     margin: 0px 0px;
@@ -181,7 +172,7 @@ const StyledSearchButton = _styledComponents.default.div`
 exports.StyledSearchButton = StyledSearchButton;
 const StyledButtonIcon = _styledComponents.default.div`
   &&& ${_icon.default} {
-    color: white;
+    color: var(--colorsActionMajorYang100);
     margin-right: 0px;
   }
 `;

package/package.json

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