carbon-react 126.5.0 → 126.5.2

package/esm/components/button/button.component.js

@@ -35,8 +35,7 @@ function renderChildren({
     "aria-hidden": true,
     disabled,
     color: iconColor(),
-    bg: "transparent",
-    bgSize: "extra-small"
+    bg: "transparent"
   };
   const isValidChildren = children !== undefined && children !== false;
   return /*#__PURE__*/React.createElement(React.Fragment, null, iconType && iconPosition === "before" && isValidChildren && /*#__PURE__*/React.createElement(Icon, _extends({

package/esm/components/button-toggle/button-toggle-icon.component.js

@@ -14,7 +14,6 @@ const ButtonToggleIcon = ({
   "aria-hidden": true,
   type: buttonIcon,
   fontSize: buttonIconSize,
-  bgSize: "extra-small",
   disabled: disabled
 }));
 export default ButtonToggleIcon;

package/esm/components/button-toggle/button-toggle.style.js

@@ -79,6 +79,8 @@ const StyledButtonToggle = styled.button`
   }
 
   ${StyledIcon} {
+    width: 16px;
+    height: 16px;
     color: var(--colorsActionMinor500);
   }
 
@@ -153,6 +155,7 @@ const StyledButtonToggleIcon = styled.div`
 }) => buttonIconSize === "large" && css`
       margin-right: 0;
       ${StyledIcon} {
+        margin-left: 0;
         margin-right: 0;
         margin-bottom: 8px;
         height: ${`${iconFontSizes.largeIcon}px`};

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

@@ -59,7 +59,6 @@ export const FlatTableCell = ({
     expandable: expandable
   }, expandable && isFirstCell && /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_down_thick",
-    bgSize: "extra-small",
     mr: "8px"
   }), children));
 };

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

@@ -2,6 +2,7 @@ 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",
@@ -91,6 +92,11 @@ 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-header/flat-table-row-header.component.js

@@ -72,7 +72,6 @@ export const FlatTableRowHeader = ({
     expandable: expandable
   }, expandable && isFirstCell && /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_down_thick",
-    bgSize: "extra-small",
     mr: "8px"
   }), children));
 };

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

@@ -2,6 +2,7 @@ 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",
@@ -89,6 +90,11 @@ const StyledFlatTableRowHeaderContent = styled.div`
       display: flex;
       align-items: center;
       line-height: 1em;
+
+      ${StyledIcon} {
+        width: 16px;
+        height: 16px;
+      }
     `}
 `;
 export { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent };

package/esm/components/icon/icon.component.js

@@ -8,12 +8,14 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
 import { TabTitleContext } from "../tabs/__internal__/tab-title";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedExtraSmallBgSizeTriggered = false;
 const Icon = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ariaLabel,
   bg,
   bgShape,
-  bgSize = "small",
+  bgSize,
   className,
   color,
   disabled,
@@ -35,6 +37,10 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ICON_TOOLTIP_POSITIONS.includes(override));
+  if (!deprecatedExtraSmallBgSizeTriggered && bgSize === "extra-small") {
+    deprecatedExtraSmallBgSizeTriggered = true;
+    Logger.deprecate("The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed.");
+  }
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
   }
@@ -81,7 +87,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     "aria-hidden": ariaHidden,
     "aria-label": ariaLabel,
     bg,
-    bgSize,
+    bgSize: bgSize || fontSize,
     bgShape,
     className: className || undefined,
     color,

package/esm/components/icon/icon.style.js

@@ -9,8 +9,22 @@ import styledColor from "../../style/utils/color";
 import getColorValue from "../../style/utils/get-color-value";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 function adjustIconBgSize(fontSize, bgSize) {
-  if (fontSize && fontSize !== "small") {
-    return iconConfig.backgroundSize[fontSize];
+  const sizeValues = {
+    "extra-small": 1,
+    small: 2,
+    medium: 3,
+    large: 4,
+    "extra-large": 5
+  };
+  if (fontSize && bgSize) {
+    const fontSizeValue = sizeValues[fontSize];
+    const bgSizeValue = sizeValues[bgSize];
+    if (bgSizeValue < fontSizeValue) {
+      // eslint-disable-next-line no-console
+      console.warn(`[WARNING - Icon] The "${bgSize}" \`bgSize\` is smaller than "${fontSize}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`);
+      return iconConfig.backgroundSize[fontSize];
+    }
+    return iconConfig.backgroundSize[bgSize];
   }
   return bgSize ? iconConfig.backgroundSize[bgSize] : undefined;
 }
@@ -32,6 +46,7 @@ const StyledIcon = styled.span`
   let finalHoverColor;
   let bgColor;
   let bgHoverColor;
+  const adjustedBgSize = adjustIconBgSize(fontSize, bgSize);
   try {
     if (disabled) {
       finalColor = "var(--colorsYin030)";
@@ -74,8 +89,8 @@ const StyledIcon = styled.span`
       align-items: center;
       display: inline-flex;
       justify-content: center;
-      height: ${adjustIconBgSize(fontSize, bgSize)};
-      width: ${adjustIconBgSize(fontSize, bgSize)};
+      height: ${adjustedBgSize};
+      width: ${adjustedBgSize};
       ${bgShape ? `border-radius: ${iconConfig.backgroundShape[bgShape]}` : ""};
 
       ${isInteractive && css`

package/esm/components/link/link.component.js

@@ -52,7 +52,6 @@ const Link = /*#__PURE__*/React.forwardRef(({
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
       type: icon,
-      bgSize: "extra-small",
       disabled: disabled,
       ariaLabel: removeAriaLabelOnIcon ? undefined : ariaLabel,
       tooltipMessage: tooltipMessage,

package/esm/components/link/link.style.js

@@ -130,7 +130,7 @@ const StyledLink = styled.span`
           position: relative;
           vertical-align: middle;
           ${iconAlign === "left" && css`
-            margin-right: ${hasContent ? "var(--spacing100)" : 0};
+            margin-right: ${hasContent ? "var(--spacing050)" : 0};
           `}
           ${iconAlign === "right" && css`
             margin-right: 0;

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -3,7 +3,6 @@ import { baseTheme } from "../../../../style/themes";
 import { StyledLink } from "../../../link/link.style";
 import { StyledMenuItem } from "../../menu.style";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
-import StyledIcon from "../../../icon/icon.style";
 import StyledSearch from "../../../search/search.style";
 import menuConfigVariants from "../../menu.config";
 const StyledSubmenuWrapper = styled.div`
@@ -115,12 +114,6 @@ const StyledSubmenu = styled.ul`
         text-decoration: none;
       }
 
-      > ${StyledIcon} {
-        width: 16px;
-        height: 16px;
-        margin-right: 5px;
-      }
-
       ${StyledSearch} span > [data-component="icon"] {
         color: var(--colorsUtilityMajor200);
 
@@ -136,24 +129,6 @@ const StyledSubmenu = styled.ul`
       }
     }
 
-    [data-component="icon"] {
-      line-height: 16px;
-      top: -1px;
-
-      &:before {
-        line-height: unset;
-      }
-
-      span {
-        vertical-align: middle;
-
-        svg {
-          height: 16px;
-          width: 16px;
-        }
-      }
-    }
-
     &:before {
       background-color: transparent;
       border-radius: 0 0 4px 4px;

package/esm/components/menu/menu-item/menu-item.style.js

@@ -150,7 +150,6 @@ const StyledMenuItemWrapper = styled.a.attrs({
       }
 
       ${StyledIcon} {
-        bottom: 3px;
         display: inline-block;
       }
     }

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -126,11 +126,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
         triggerChange("", false);
         return "";
       }
+      triggerChange(match.props.value, false);
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      triggerChange(match.props.value, false);
       if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {

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

@@ -100,7 +100,6 @@ export const SplitButton = ({
       ref: toggleButton
     }, toggleButtonProps), /*#__PURE__*/React.createElement(Icon, {
       type: "dropdown",
-      bgSize: "extra-small",
       color: getIconColor(),
       bg: "transparent",
       disabled: disabled

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

@@ -44,8 +44,7 @@ function renderChildren({
     "aria-hidden": true,
     disabled,
     color: iconColor(),
-    bg: "transparent",
-    bgSize: "extra-small"
+    bg: "transparent"
   };
   const isValidChildren = children !== undefined && children !== false;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconType && iconPosition === "before" && isValidChildren && /*#__PURE__*/_react.default.createElement(_icon.default, _extends({

package/lib/components/button-toggle/button-toggle-icon.component.js

@@ -21,7 +21,6 @@ const ButtonToggleIcon = ({
   "aria-hidden": true,
   type: buttonIcon,
   fontSize: buttonIconSize,
-  bgSize: "extra-small",
   disabled: disabled
 }));
 var _default = exports.default = ButtonToggleIcon;

package/lib/components/button-toggle/button-toggle.style.js

@@ -88,6 +88,8 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
   }
 
   ${_icon.default} {
+    width: 16px;
+    height: 16px;
     color: var(--colorsActionMinor500);
   }
 
@@ -162,6 +164,7 @@ const StyledButtonToggleIcon = exports.StyledButtonToggleIcon = _styledComponent
 }) => buttonIconSize === "large" && (0, _styledComponents.css)`
       margin-right: 0;
       ${_icon.default} {
+        margin-left: 0;
         margin-right: 0;
         margin-bottom: 8px;
         height: ${`${iconFontSizes.largeIcon}px`};

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

@@ -68,7 +68,6 @@ const FlatTableCell = ({
     expandable: expandable
   }, expandable && isFirstCell && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_down_thick",
-    bgSize: "extra-small",
     mr: "8px"
   }), children));
 };

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

@@ -8,6 +8,7 @@ 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; }
@@ -100,6 +101,11 @@ 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-header/flat-table-row-header.component.js

@@ -81,7 +81,6 @@ const FlatTableRowHeader = ({
     expandable: expandable
   }, expandable && isFirstCell && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_down_thick",
-    bgSize: "extra-small",
     mr: "8px"
   }), children));
 };

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

@@ -8,6 +8,7 @@ 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; }
@@ -98,5 +99,10 @@ const StyledFlatTableRowHeaderContent = exports.StyledFlatTableRowHeaderContent
       display: flex;
       align-items: center;
       line-height: 1em;
+
+      ${_icon.default} {
+        width: 16px;
+        height: 16px;
+      }
     `}
 `;

package/lib/components/icon/icon.component.js

@@ -14,15 +14,17 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _icon = _interopRequireDefault(require("./icon.style"));
 var _iconConfig = require("./icon-config");
 var _tabTitle = require("../tabs/__internal__/tab-title");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 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; }
+let deprecatedExtraSmallBgSizeTriggered = false;
 const Icon = /*#__PURE__*/_react.default.forwardRef(({
   "aria-hidden": ariaHidden,
   ariaLabel,
   bg,
   bgShape,
-  bgSize = "small",
+  bgSize,
   className,
   color,
   disabled,
@@ -44,6 +46,10 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => _iconConfig.ICON_TOOLTIP_POSITIONS.includes(override));
+  if (!deprecatedExtraSmallBgSizeTriggered && bgSize === "extra-small") {
+    deprecatedExtraSmallBgSizeTriggered = true;
+    _logger.default.deprecate("The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed.");
+  }
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
   }
@@ -90,7 +96,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     "aria-hidden": ariaHidden,
     "aria-label": ariaLabel,
     bg,
-    bgSize,
+    bgSize: bgSize || fontSize,
     bgShape,
     className: className || undefined,
     color,

package/lib/components/icon/icon.style.js

@@ -18,8 +18,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 function adjustIconBgSize(fontSize, bgSize) {
-  if (fontSize && fontSize !== "small") {
-    return _iconConfig.default.backgroundSize[fontSize];
+  const sizeValues = {
+    "extra-small": 1,
+    small: 2,
+    medium: 3,
+    large: 4,
+    "extra-large": 5
+  };
+  if (fontSize && bgSize) {
+    const fontSizeValue = sizeValues[fontSize];
+    const bgSizeValue = sizeValues[bgSize];
+    if (bgSizeValue < fontSizeValue) {
+      // eslint-disable-next-line no-console
+      console.warn(`[WARNING - Icon] The "${bgSize}" \`bgSize\` is smaller than "${fontSize}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`);
+      return _iconConfig.default.backgroundSize[fontSize];
+    }
+    return _iconConfig.default.backgroundSize[bgSize];
   }
   return bgSize ? _iconConfig.default.backgroundSize[bgSize] : undefined;
 }
@@ -41,6 +55,7 @@ const StyledIcon = _styledComponents.default.span`
   let finalHoverColor;
   let bgColor;
   let bgHoverColor;
+  const adjustedBgSize = adjustIconBgSize(fontSize, bgSize);
   try {
     if (disabled) {
       finalColor = "var(--colorsYin030)";
@@ -83,8 +98,8 @@ const StyledIcon = _styledComponents.default.span`
       align-items: center;
       display: inline-flex;
       justify-content: center;
-      height: ${adjustIconBgSize(fontSize, bgSize)};
-      width: ${adjustIconBgSize(fontSize, bgSize)};
+      height: ${adjustedBgSize};
+      width: ${adjustedBgSize};
       ${bgShape ? `border-radius: ${_iconConfig.default.backgroundShape[bgShape]}` : ""};
 
       ${isInteractive && (0, _styledComponents.css)`

package/lib/components/link/link.component.js

@@ -61,7 +61,6 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: icon,
-      bgSize: "extra-small",
       disabled: disabled,
       ariaLabel: removeAriaLabelOnIcon ? undefined : ariaLabel,
       tooltipMessage: tooltipMessage,

package/lib/components/link/link.style.js

@@ -139,7 +139,7 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
           position: relative;
           vertical-align: middle;
           ${iconAlign === "left" && (0, _styledComponents.css)`
-            margin-right: ${hasContent ? "var(--spacing100)" : 0};
+            margin-right: ${hasContent ? "var(--spacing050)" : 0};
           `}
           ${iconAlign === "right" && (0, _styledComponents.css)`
             margin-right: 0;

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -9,7 +9,6 @@ var _themes = require("../../../../style/themes");
 var _link = require("../../../link/link.style");
 var _menu = require("../../menu.style");
 var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
-var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 var _search = _interopRequireDefault(require("../../../search/search.style"));
 var _menu2 = _interopRequireDefault(require("../../menu.config"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -124,12 +123,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
         text-decoration: none;
       }
 
-      > ${_icon.default} {
-        width: 16px;
-        height: 16px;
-        margin-right: 5px;
-      }
-
       ${_search.default} span > [data-component="icon"] {
         color: var(--colorsUtilityMajor200);
 
@@ -145,24 +138,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
       }
     }
 
-    [data-component="icon"] {
-      line-height: 16px;
-      top: -1px;
-
-      &:before {
-        line-height: unset;
-      }
-
-      span {
-        vertical-align: middle;
-
-        svg {
-          height: 16px;
-          width: 16px;
-        }
-      }
-    }
-
     &:before {
       background-color: transparent;
       border-radius: 0 0 4px 4px;

package/lib/components/menu/menu-item/menu-item.style.js

@@ -159,7 +159,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       }
 
       ${_icon.default} {
-        bottom: 3px;
         display: inline-block;
       }
     }

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

@@ -135,11 +135,11 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
         triggerChange("", false);
         return "";
       }
+      triggerChange(match.props.value, false);
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      triggerChange(match.props.value, false);
       if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {

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

@@ -109,7 +109,6 @@ const SplitButton = ({
       ref: toggleButton
     }, toggleButtonProps), /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "dropdown",
-      bgSize: "extra-small",
       color: getIconColor(),
       bg: "transparent",
       disabled: disabled

package/package.json

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