carbon-react 111.19.0 → 111.21.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/multi-action-button/multi-action-button.component.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { WidthProps } from "styled-system";
 import { SplitButtonProps } from "../split-button";
-export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
+export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProps, "buttonType"> {
     /** Button type: "primary" | "secondary" | "tertiary" */
     buttonType?: "primary" | "secondary" | "tertiary";
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
+export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
 export default MultiActionButton;

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -18,6 +18,7 @@ const MultiActionButton = ({
   children,
   text,
   subtext,
+  width,
   "data-element": dataElement,
   "data-role": dataRole,
   ...rest
@@ -124,7 +125,8 @@ const MultiActionButton = ({
     "data-component": "multi-action-button",
     "data-element": dataElement,
     "data-role": dataRole,
-    displayed: showAdditionalButtons
+    displayed: showAdditionalButtons,
+    width: width
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Button, _extends({
     "aria-haspopup": "true",
     "aria-expanded": showAdditionalButtons,
@@ -621,7 +623,108 @@ MultiActionButton.propTypes = {
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
   "value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
-  "vocab": PropTypes.string
+  "vocab": PropTypes.string,
+  "width": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
 export { MultiActionButton };
 export default MultiActionButton;

package/esm/components/multi-action-button/multi-action-button.style.d.ts

@@ -1,7 +1,7 @@
-declare type StyledMultiActionButtonProps = {
+import { MultiActionButtonProps } from "./multi-action-button.component";
+declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
     displayed: boolean;
-};
-declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, StyledMultiActionButtonProps, never>;
+}, never>;
 declare type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -3,12 +3,25 @@ import { margin } from "styled-system";
 import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
+import computeWidth from "../../style/utils/width";
 const StyledMultiActionButton = styled.div`
   ${margin}
 
   display: inline-block;
   position: relative;
 
+  ${({
+  width
+}) => width && css`
+    ${computeWidth({
+  width
+})}
+
+    ${StyledButton} {
+      width: 100%
+      justify-content: space-between;
+    }`}
+
   & > ${StyledButton} {
     margin: 0;
 

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/multi-action-button/multi-action-button.component.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { WidthProps } from "styled-system";
 import { SplitButtonProps } from "../split-button";
-export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
+export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProps, "buttonType"> {
     /** Button type: "primary" | "secondary" | "tertiary" */
     buttonType?: "primary" | "secondary" | "tertiary";
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
+export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
 export default MultiActionButton;

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -39,6 +39,7 @@ const MultiActionButton = ({
   children,
   text,
   subtext,
+  width,
   "data-element": dataElement,
   "data-role": dataRole,
   ...rest
@@ -145,7 +146,8 @@ const MultiActionButton = ({
     "data-component": "multi-action-button",
     "data-element": dataElement,
     "data-role": dataRole,
-    displayed: showAdditionalButtons
+    displayed: showAdditionalButtons,
+    width: width
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     "aria-haspopup": "true",
     "aria-expanded": showAdditionalButtons,
@@ -643,7 +645,108 @@ MultiActionButton.propTypes = {
   "typeof": _propTypes.default.string,
   "unselectable": _propTypes.default.oneOf(["off", "on"]),
   "value": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
-  "vocab": _propTypes.default.string
+  "vocab": _propTypes.default.string,
+  "width": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@iterator": _propTypes.default.func.isRequired,
+    "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
+    "big": _propTypes.default.func.isRequired,
+    "blink": _propTypes.default.func.isRequired,
+    "bold": _propTypes.default.func.isRequired,
+    "charAt": _propTypes.default.func.isRequired,
+    "charCodeAt": _propTypes.default.func.isRequired,
+    "codePointAt": _propTypes.default.func.isRequired,
+    "concat": _propTypes.default.func.isRequired,
+    "endsWith": _propTypes.default.func.isRequired,
+    "fixed": _propTypes.default.func.isRequired,
+    "fontcolor": _propTypes.default.func.isRequired,
+    "fontsize": _propTypes.default.func.isRequired,
+    "includes": _propTypes.default.func.isRequired,
+    "indexOf": _propTypes.default.func.isRequired,
+    "italics": _propTypes.default.func.isRequired,
+    "lastIndexOf": _propTypes.default.func.isRequired,
+    "length": _propTypes.default.number.isRequired,
+    "link": _propTypes.default.func.isRequired,
+    "localeCompare": _propTypes.default.func.isRequired,
+    "match": _propTypes.default.func.isRequired,
+    "matchAll": _propTypes.default.func.isRequired,
+    "normalize": _propTypes.default.func.isRequired,
+    "padEnd": _propTypes.default.func.isRequired,
+    "padStart": _propTypes.default.func.isRequired,
+    "repeat": _propTypes.default.func.isRequired,
+    "replace": _propTypes.default.func.isRequired,
+    "search": _propTypes.default.func.isRequired,
+    "slice": _propTypes.default.func.isRequired,
+    "small": _propTypes.default.func.isRequired,
+    "split": _propTypes.default.func.isRequired,
+    "startsWith": _propTypes.default.func.isRequired,
+    "strike": _propTypes.default.func.isRequired,
+    "sub": _propTypes.default.func.isRequired,
+    "substr": _propTypes.default.func.isRequired,
+    "substring": _propTypes.default.func.isRequired,
+    "sup": _propTypes.default.func.isRequired,
+    "toLocaleLowerCase": _propTypes.default.func.isRequired,
+    "toLocaleUpperCase": _propTypes.default.func.isRequired,
+    "toLowerCase": _propTypes.default.func.isRequired,
+    "toString": _propTypes.default.func.isRequired,
+    "toUpperCase": _propTypes.default.func.isRequired,
+    "trim": _propTypes.default.func.isRequired,
+    "trimEnd": _propTypes.default.func.isRequired,
+    "trimLeft": _propTypes.default.func.isRequired,
+    "trimRight": _propTypes.default.func.isRequired,
+    "trimStart": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@iterator": _propTypes.default.func.isRequired,
+    "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
+    "big": _propTypes.default.func.isRequired,
+    "blink": _propTypes.default.func.isRequired,
+    "bold": _propTypes.default.func.isRequired,
+    "charAt": _propTypes.default.func.isRequired,
+    "charCodeAt": _propTypes.default.func.isRequired,
+    "codePointAt": _propTypes.default.func.isRequired,
+    "concat": _propTypes.default.func.isRequired,
+    "endsWith": _propTypes.default.func.isRequired,
+    "fixed": _propTypes.default.func.isRequired,
+    "fontcolor": _propTypes.default.func.isRequired,
+    "fontsize": _propTypes.default.func.isRequired,
+    "includes": _propTypes.default.func.isRequired,
+    "indexOf": _propTypes.default.func.isRequired,
+    "italics": _propTypes.default.func.isRequired,
+    "lastIndexOf": _propTypes.default.func.isRequired,
+    "length": _propTypes.default.number.isRequired,
+    "link": _propTypes.default.func.isRequired,
+    "localeCompare": _propTypes.default.func.isRequired,
+    "match": _propTypes.default.func.isRequired,
+    "matchAll": _propTypes.default.func.isRequired,
+    "normalize": _propTypes.default.func.isRequired,
+    "padEnd": _propTypes.default.func.isRequired,
+    "padStart": _propTypes.default.func.isRequired,
+    "repeat": _propTypes.default.func.isRequired,
+    "replace": _propTypes.default.func.isRequired,
+    "search": _propTypes.default.func.isRequired,
+    "slice": _propTypes.default.func.isRequired,
+    "small": _propTypes.default.func.isRequired,
+    "split": _propTypes.default.func.isRequired,
+    "startsWith": _propTypes.default.func.isRequired,
+    "strike": _propTypes.default.func.isRequired,
+    "sub": _propTypes.default.func.isRequired,
+    "substr": _propTypes.default.func.isRequired,
+    "substring": _propTypes.default.func.isRequired,
+    "sup": _propTypes.default.func.isRequired,
+    "toLocaleLowerCase": _propTypes.default.func.isRequired,
+    "toLocaleUpperCase": _propTypes.default.func.isRequired,
+    "toLowerCase": _propTypes.default.func.isRequired,
+    "toString": _propTypes.default.func.isRequired,
+    "toUpperCase": _propTypes.default.func.isRequired,
+    "trim": _propTypes.default.func.isRequired,
+    "trimEnd": _propTypes.default.func.isRequired,
+    "trimLeft": _propTypes.default.func.isRequired,
+    "trimRight": _propTypes.default.func.isRequired,
+    "trimStart": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])
 };
 var _default = MultiActionButton;
 exports.default = _default;

package/lib/components/multi-action-button/multi-action-button.style.d.ts

@@ -1,7 +1,7 @@
-declare type StyledMultiActionButtonProps = {
+import { MultiActionButtonProps } from "./multi-action-button.component";
+declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
     displayed: boolean;
-};
-declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, StyledMultiActionButtonProps, never>;
+}, never>;
 declare type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;

package/lib/components/multi-action-button/multi-action-button.style.js

@@ -15,6 +15,8 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
+var _width = _interopRequireDefault(require("../../style/utils/width"));
+
 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; }
@@ -27,6 +29,18 @@ const StyledMultiActionButton = _styledComponents.default.div`
   display: inline-block;
   position: relative;
 
+  ${({
+  width
+}) => width && (0, _styledComponents.css)`
+    ${(0, _width.default)({
+  width
+})}
+
+    ${_button.default} {
+      width: 100%
+      justify-content: space-between;
+    }`}
+
   & > ${_button.default} {
     margin: 0;
 

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.21.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",