carbon-react 111.19.0 → 111.20.0

package/esm/components/box/box.component.js

@@ -1,10 +1,21 @@
 import styled, { css } from "styled-components";
 import { space, layout, flexbox, position } from "styled-system";
+import Logger from "../../__internal__/utils/logger";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let isDeprecationWarningTriggered = false;
 export const Box = styled.div`
+  ${() => {
+  if (!isDeprecationWarningTriggered) {
+    isDeprecationWarningTriggered = true;
+    Logger.deprecate("Previous props that could be spread to the `Box` component are being removed. Only props documented in the intefaces will be supported.");
+  }
+
+  return css``;
+}}
+
   ${space}
   ${layout}
   ${flexbox}

package/esm/components/icon-button/icon-button.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { MarginProps } from "styled-system";
+import { SpaceProps } from "styled-system";
 import { IconProps } from "../icon";
-export interface IconButtonProps extends MarginProps {
+export interface IconButtonProps extends SpaceProps {
     /** Prop to specify the aria-label of the icon-button component */
     "aria-label"?: string;
     /** Icon meant to be rendered, should be an Icon component */

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

@@ -4,7 +4,6 @@ import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import Events from "../../__internal__/utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 const IconButton = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
@@ -14,7 +13,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const [internalRef, setInternalRef] = useState();
-  const marginProps = filterStyledSystemMarginProps(rest);
 
   const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
@@ -35,13 +33,15 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     if (typeof ref === "object") ref.current = reference;
     if (typeof ref === "function") ref(reference);
   }, [ref]);
-  return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(StyledIconButton, _extends({
+    p: 0
+  }, rest, {
     "aria-label": ariaLabel,
     onKeyDown: handleKeyDown,
     onClick: handleOnClick,
     ref: setRefs,
     disabled: disabled
-  }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
+  }), /*#__PURE__*/React.createElement(TooltipProvider, {
     disabled: disabled,
     focusable: false,
     target: internalRef
@@ -209,7 +209,161 @@ IconButton.propTypes = {
   "onBlur": PropTypes.func,
   "onFocus": PropTypes.func,
   "onMouseEnter": PropTypes.func,
-  "onMouseLeave": PropTypes.func
+  "onMouseLeave": PropTypes.func,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
 IconButton.displayName = "IconButton";
 export default IconButton;

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

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { margin } from "styled-system";
+import { space } from "styled-system";
 import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
 const StyledIconButton = styled.button.attrs({
@@ -8,10 +8,11 @@ const StyledIconButton = styled.button.attrs({
   ${({
   disabled
 }) => css`
-    ${margin}
+    && {
+      ${space}
+    }
     background: transparent;
     border: none;
-    padding: 0;
 
     &:focus {
       background-color: transparent;

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

@@ -109,9 +109,9 @@ const MenuItem = ({
   const getTitle = title => maxWidth && typeof title === "string" ? title : "";
 
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
+  const asPassiveItem = !(onClick || href);
 
   if (submenu) {
-    const asPassiveItem = !(onClick || href);
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
       "data-component": "menu-item",
       menuType: menuContext.menuType,
@@ -152,7 +152,8 @@ const MenuItem = ({
   }, elementProps, {
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
-    inFullscreenView: inFullscreenView
+    inFullscreenView: inFullscreenView,
+    asPassiveItem: asPassiveItem
   }), clonedChildren));
 };
 

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

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { StyledLink } from "../../link/link.style";
-import IconStyle from "../../icon/icon.style";
+import StyledIcon from "../../icon/icon.style";
+import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
 const StyledMenuItemWrapper = styled.a`
   ${({
@@ -16,7 +17,8 @@ const StyledMenuItemWrapper = styled.a`
   maxWidth,
   inFullscreenView,
   overrideColor,
-  as
+  as,
+  asPassiveItem
 }) => css`
     display: inline-block;
     font-size: 14px;
@@ -72,12 +74,28 @@ const StyledMenuItemWrapper = styled.a`
         }
       `}
 
-    a,
-    ${StyledLink} a,
-    button,
-    ${StyledLink} button {
-      padding: 0 16px;
-    }
+    ${asPassiveItem ? `
+        ${StyledIconButton} {
+          > span {
+            display: inline-flex;
+            margin-right: 0;
+          }
+
+          :focus {
+            outline: none;
+            [data-component="icon"] {
+              color: ${menuConfigVariants[menuType].color};
+            }
+          }
+        }
+      ` : `
+        a,
+        ${StyledLink} a,
+        button,
+        ${StyledLink} button {
+          padding: 0 16px;
+        }
+      `}
 
     button,
     ${StyledLink} button {
@@ -99,7 +117,7 @@ const StyledMenuItemWrapper = styled.a`
         color: ${menuConfigVariants[menuType].color};
       }
 
-      ${IconStyle} {
+      ${StyledIcon} {
         bottom: 1px;
       }
     }
@@ -192,7 +210,7 @@ const StyledMenuItemWrapper = styled.a`
 
         ${showDropdownArrow && css`
           > a,
-          > button {
+          > button:not(${StyledIconButton}) {
             padding-right: 32px;
           }
 

package/esm/components/typography/typography.component.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import styledColor from "../../style/utils/color";
 import baseTheme from "../../style/themes/base";
+import Logger from "../../__internal__/utils/logger";
 const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 
 const getAs = variant => {
@@ -146,6 +147,7 @@ const getDecoration = variant => {
   return "none";
 };
 
+let isDeprecationWarningTriggered = false;
 const Typography = styled.span.attrs(({
   variant,
   as,
@@ -165,6 +167,14 @@ const Typography = styled.span.attrs(({
     defaultMargin: variant === "p" ? "0 0 16px" : "0"
   };
 })`
+  ${() => {
+  if (!isDeprecationWarningTriggered) {
+    isDeprecationWarningTriggered = true;
+    Logger.deprecate("Previous props that could be spread to the `Typography` component are being removed. Only props documented in the intefaces will be supported.");
+  }
+
+  return css``;
+}}
   ${({
   size,
   weight,

package/lib/components/box/box.component.js

@@ -9,6 +9,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _color = _interopRequireDefault(require("../../style/utils/color"));
@@ -22,7 +24,18 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let isDeprecationWarningTriggered = false;
 const Box = _styledComponents.default.div`
+  ${() => {
+  if (!isDeprecationWarningTriggered) {
+    isDeprecationWarningTriggered = true;
+
+    _logger.default.deprecate("Previous props that could be spread to the `Box` component are being removed. Only props documented in the intefaces will be supported.");
+  }
+
+  return (0, _styledComponents.css)``;
+}}
+
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}

package/lib/components/icon-button/icon-button.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { MarginProps } from "styled-system";
+import { SpaceProps } from "styled-system";
 import { IconProps } from "../icon";
-export interface IconButtonProps extends MarginProps {
+export interface IconButtonProps extends SpaceProps {
     /** Prop to specify the aria-label of the icon-button component */
     "aria-label"?: string;
     /** Icon meant to be rendered, should be an Icon component */

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

@@ -13,8 +13,6 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _iconButton = _interopRequireDefault(require("./icon-button.style"));
 
-var _utils = require("../../style/utils");
-
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,7 +31,6 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const [internalRef, setInternalRef] = (0, _react.useState)();
-  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
 
   const handleKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
@@ -54,13 +51,15 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
     if (typeof ref === "object") ref.current = reference;
     if (typeof ref === "function") ref(reference);
   }, [ref]);
-  return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
+    p: 0
+  }, rest, {
     "aria-label": ariaLabel,
     onKeyDown: handleKeyDown,
     onClick: handleOnClick,
     ref: setRefs,
     disabled: disabled
-  }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+  }), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     disabled: disabled,
     focusable: false,
     target: internalRef
@@ -229,7 +228,161 @@ IconButton.propTypes = {
   "onBlur": _propTypes.default.func,
   "onFocus": _propTypes.default.func,
   "onMouseEnter": _propTypes.default.func,
-  "onMouseLeave": _propTypes.default.func
+  "onMouseLeave": _propTypes.default.func,
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])
 };
 IconButton.displayName = "IconButton";
 var _default = IconButton;

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

@@ -25,10 +25,11 @@ const StyledIconButton = _styledComponents.default.button.attrs({
   ${({
   disabled
 }) => (0, _styledComponents.css)`
-    ${_styledSystem.margin}
+    && {
+      ${_styledSystem.space}
+    }
     background: transparent;
     border: none;
-    padding: 0;
 
     &:focus {
       background-color: transparent;

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

@@ -135,9 +135,9 @@ const MenuItem = ({
   const getTitle = title => maxWidth && typeof title === "string" ? title : "";
 
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
+  const asPassiveItem = !(onClick || href);
 
   if (submenu) {
-    const asPassiveItem = !(onClick || href);
     return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
       "data-component": "menu-item",
       menuType: menuContext.menuType,
@@ -178,7 +178,8 @@ const MenuItem = ({
   }, elementProps, {
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
-    inFullscreenView: inFullscreenView
+    inFullscreenView: inFullscreenView,
+    asPassiveItem: asPassiveItem
   }), clonedChildren));
 };
 

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

@@ -11,6 +11,8 @@ var _link = require("../../link/link.style");
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
+var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
+
 var _menu = _interopRequireDefault(require("../menu.config"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,7 +35,8 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
   maxWidth,
   inFullscreenView,
   overrideColor,
-  as
+  as,
+  asPassiveItem
 }) => (0, _styledComponents.css)`
     display: inline-block;
     font-size: 14px;
@@ -89,12 +92,28 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
         }
       `}
 
-    a,
-    ${_link.StyledLink} a,
-    button,
-    ${_link.StyledLink} button {
-      padding: 0 16px;
-    }
+    ${asPassiveItem ? `
+        ${_iconButton.default} {
+          > span {
+            display: inline-flex;
+            margin-right: 0;
+          }
+
+          :focus {
+            outline: none;
+            [data-component="icon"] {
+              color: ${_menu.default[menuType].color};
+            }
+          }
+        }
+      ` : `
+        a,
+        ${_link.StyledLink} a,
+        button,
+        ${_link.StyledLink} button {
+          padding: 0 16px;
+        }
+      `}
 
     button,
     ${_link.StyledLink} button {
@@ -209,7 +228,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
 
         ${showDropdownArrow && (0, _styledComponents.css)`
           > a,
-          > button {
+          > button:not(${_iconButton.default}) {
             padding-right: 32px;
           }
 

package/lib/components/typography/typography.component.js

@@ -13,6 +13,8 @@ var _color = _interopRequireDefault(require("../../style/utils/color"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -163,6 +165,7 @@ const getDecoration = variant => {
   return "none";
 };
 
+let isDeprecationWarningTriggered = false;
 const Typography = _styledComponents.default.span.attrs(({
   variant,
   as,
@@ -182,6 +185,15 @@ const Typography = _styledComponents.default.span.attrs(({
     defaultMargin: variant === "p" ? "0 0 16px" : "0"
   };
 })`
+  ${() => {
+  if (!isDeprecationWarningTriggered) {
+    isDeprecationWarningTriggered = true;
+
+    _logger.default.deprecate("Previous props that could be spread to the `Typography` component are being removed. Only props documented in the intefaces will be supported.");
+  }
+
+  return (0, _styledComponents.css)``;
+}}
   ${({
   size,
   weight,

package/package.json

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