carbon-react 109.1.3 → 109.2.2

package/lib/components/pill/pill.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _polished = require("polished");
 
 var _styledSystem = require("styled-system");
@@ -39,19 +37,20 @@ function addStyleToPillIcon(fontSize) {
   `;
 }
 
-const PillStyle = _styledComponents.default.span`
-  ${_styledSystem.margin};
+const StyledPill = _styledComponents.default.span`
+  ${_styledSystem.margin}
   ${({
-  colorVariant,
+  wrapText,
   borderColor,
-  theme,
-  inFill,
+  colorVariant,
   isDeletable,
+  inFill,
+  maxWidth,
   pillRole,
-  size
+  size,
+  theme
 }) => {
   const isStatus = pillRole === "status";
-  const variety = isStatus ? colorVariant : "primary";
   let pillColor;
   let buttonFocusColor;
   let contentColor;
@@ -62,11 +61,15 @@ const PillStyle = _styledComponents.default.span`
       buttonFocusColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(pillColor));
       contentColor = (0, _polished.meetsContrastGuidelines)((0, _getColorValue.default)(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
+      const {
+        status,
+        tag
+      } = (0, _pillStyle.default)();
       const {
         varietyColor,
         buttonFocus,
         content
-      } = (0, _pillStyle.default)(theme)[pillRole][variety];
+      } = isStatus ? status[colorVariant] : tag.primary;
       pillColor = varietyColor;
       buttonFocusColor = buttonFocus;
       contentColor = content;
@@ -88,7 +91,13 @@ const PillStyle = _styledComponents.default.span`
       justify-content: center;
       border: 2px solid ${pillColor};
       height: auto;
-      white-space: nowrap;
+      ${!wrapText && (0, _styledComponents.css)`
+        white-space: nowrap;
+      `}
+      ${wrapText && (0, _styledComponents.css)`
+        white-space: break-spaces;
+        hyphens: auto;
+      `}
       color: ${contentColor};
 
       ${inFill && (0, _styledComponents.css)`
@@ -278,23 +287,14 @@ const PillStyle = _styledComponents.default.span`
           }
         `}
       `}
+      ${maxWidth && `max-width: ${maxWidth}`}
     `;
 }}
 `;
-PillStyle.defaultProps = {
+StyledPill.defaultProps = {
   inFill: false,
-  colorVariant: "default",
   isDeletable: false,
   theme: _themes.baseTheme
 };
-PillStyle.propTypes = {
-  inFill: _propTypes.default.bool,
-  colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
-  isDeletable: _propTypes.default.func,
-  size: _propTypes.default.oneOf(["S", "M", "L", "XL"]),
-  pillRole: _propTypes.default.oneOf(["tag", "status"]),
-  borderColor: _propTypes.default.string,
-  theme: _propTypes.default.object
-};
-var _default = PillStyle;
+var _default = StyledPill;
 exports.default = _default;

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

@@ -119,20 +119,34 @@ const StyledSearch = _styledComponents.default.div`
         z-index: ${theme.zIndex.smallOverlay};
       }
       ${_icon.default} {
-        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
+        ${darkVariant && (0, _styledComponents.css)`
+          ${iconColor && (0, _styledComponents.css)`
+            color: var(--colorsUtilityMajor400);
+
+            :hover {
+              color: var(--colorsUtilityMajor500);
+            }
+          `}
+          ${!iconColor && (0, _styledComponents.css)`
+            color: var(--colorsUtilityMajor200);
+
+            :hover {
+              color: var(--colorsUtilityMajor100);
+            }
+          `}
+        `}
+
         ${!darkVariant && (0, _styledComponents.css)`
-          color: var(--colorsUtilityMajor400);
+          color: var(--colorsActionMinor500);
+
+          :hover {
+            color: var(--colorsActionMinor600);
+          }
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
-        :hover {
-          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
-          ${!darkVariant && (0, _styledComponents.css)`
-            color: var(--colorsUtilityMajor500);
-          `}
-        }
       }
 
       ${_inputIconToggle.default} {

package/lib/components/select/multi-select/multi-select.component.js

@@ -70,6 +70,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   "data-role": dataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  wrapPillText = true,
   ...textboxProps
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -220,7 +221,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
-        onDelete: canDelete ? () => removeSelectedValue(index) : undefined
+        onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
+        wrapText: wrapPillText
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, selectedValue]);
@@ -530,7 +532,10 @@ MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: _propTypes.default.bool
+  flipEnabled: _propTypes.default.bool,
+
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText: _propTypes.default.bool
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

package/lib/components/select/multi-select/multi-select.d.ts

@@ -58,6 +58,8 @@ export interface MultiSelectProps
     | "left-end";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: bool;
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText?: boolean;
 }
 
 declare function MultiSelect(

package/lib/components/select/multi-select/multi-select.style.js

@@ -26,6 +26,7 @@ const StyledSelectPillContainer = _styledComponents.default.div`
   flex-direction: column;
   justify-content: center;
   margin: 3px 2px 3px 0;
+  max-width: 100%;
 
   && ${_pill.default} {
     text-overflow: ellipsis;

package/lib/components/split-button/split-button.component.js

@@ -17,7 +17,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-var _button = _interopRequireWildcard(require("../button"));
+var _button = _interopRequireDefault(require("../button"));
 
 var _splitButton = _interopRequireDefault(require("./split-button.style"));
 
@@ -249,11 +249,6 @@ const SplitButton = ({
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
-
-      if (child.type === _button.default) {
-        return /*#__PURE__*/_react.default.createElement(_button.ButtonWithForwardRef, _extends({}, child.props, childProps));
-      }
-
       return /*#__PURE__*/_react.default.cloneElement(child, childProps);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.1.3",
+  "version": "109.2.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -14,7 +14,7 @@
     "scripts/check_rfcs.js"
   ],
   "scripts": {
-    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -s .assets -c .storybook",
+    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
@@ -29,8 +29,8 @@
     "prepublishOnly": "npm run precompile",
     "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
-    "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook -s .assets",
-    "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook -s .assets",
+    "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook",
+    "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook",
     "start:static": "npx http-server -p 9001 ./storybook-static",
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/*.spec.ts','**/*.spec.tsx','**/*.test.js','**/*.d.ts' --quiet --extensions '.js','.ts','.tsx'",
     "clean-lib": "rimraf ./lib && rimraf ./esm",

package/esm/components/pill/pill.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface PillProps extends MarginProps {
-  /** Override color variant, provide any color from palette or any valid css color value. */
-  borderColor?: string;
-  /** Change the color of a status pill. */
-  colorVariant?: "neutral" | "negative" | "positive" | "warning";
-  /** The content to display inside of the pill.  */
-  children: string;
-  /** Fills the pill background with colour. When fill is false only the border is coloured. */
-  fill?: boolean;
-  /** Callback function for when the pill is clicked. */
-  onClick?: React.MouseEventHandler<HTMLSpanElement>;
-  /** Callback function for when the remove icon is clicked. */
-  onDelete?: React.MouseEventHandler<HTMLButtonElement>;
-  /** Sets the type of pill in use. */
-  pillRole?: "tag" | "status";
-  size?: "S" | "M" | "L" | "XL";
-}
-
-declare function Pill(props: PillProps): JSX.Element;
-
-export default Pill;

package/lib/components/pill/pill.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface PillProps extends MarginProps {
-  /** Override color variant, provide any color from palette or any valid css color value. */
-  borderColor?: string;
-  /** Change the color of a status pill. */
-  colorVariant?: "neutral" | "negative" | "positive" | "warning";
-  /** The content to display inside of the pill.  */
-  children: string;
-  /** Fills the pill background with colour. When fill is false only the border is coloured. */
-  fill?: boolean;
-  /** Callback function for when the pill is clicked. */
-  onClick?: React.MouseEventHandler<HTMLSpanElement>;
-  /** Callback function for when the remove icon is clicked. */
-  onDelete?: React.MouseEventHandler<HTMLButtonElement>;
-  /** Sets the type of pill in use. */
-  pillRole?: "tag" | "status";
-  size?: "S" | "M" | "L" | "XL";
-}
-
-declare function Pill(props: PillProps): JSX.Element;
-
-export default Pill;