carbon-react 111.18.0 → 111.20.0

package/esm/__internal__/form-field/form-field.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -62,10 +62,24 @@ const FormField = ({
     setWarning,
     setInfo
   } = useContext(TabContext);
+  const isMounted = useRef(false);
+  useLayoutEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   useEffect(() => {
-    if (setError) setError(id, !!error);
-    if (setWarning) setWarning(id, !!warning);
-    if (setInfo) setInfo(id, !!info);
+    if (setError) setError(id, error);
+    if (setWarning) setWarning(id, warning);
+    if (setInfo) setInfo(id, info);
+    return () => {
+      if (!isMounted.current) {
+        if (setError && error) setError(id, false);
+        if (setWarning && warning) setWarning(id, false);
+        if (setInfo && info) setInfo(id, false);
+      }
+    };
   }, [id, setError, setWarning, setInfo, error, warning, info]);
   const marginProps = filterStyledSystemMarginProps(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/React.createElement(FieldHelp, {

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/tabs/tab/tab.component.js

@@ -27,24 +27,24 @@ const Tab = ({
   const [tabErrors, setTabErrors] = useState({});
   const [tabWarnings, setTabWarnings] = useState({});
   const [tabInfos, setTabInfos] = useState({});
-  const setError = useCallback((childId, hasError) => {
-    if (tabErrors[childId] !== hasError) {
+  const setError = useCallback((childId, error) => {
+    if (tabErrors[childId] !== error) {
       setTabErrors({ ...tabErrors,
-        [childId]: hasError
+        [childId]: error
       });
     }
   }, [tabErrors]);
-  const setWarning = useCallback((childId, hasWarning) => {
-    if (tabWarnings[childId] !== hasWarning) {
+  const setWarning = useCallback((childId, warning) => {
+    if (tabWarnings[childId] !== warning) {
       setTabWarnings({ ...tabWarnings,
-        [childId]: hasWarning
+        [childId]: warning
       });
     }
   }, [tabWarnings]);
-  const setInfo = useCallback((childId, hasInfo) => {
-    if (tabInfos[childId] !== hasInfo) {
+  const setInfo = useCallback((childId, info) => {
+    if (tabInfos[childId] !== info) {
       setTabInfos({ ...tabInfos,
-        [childId]: hasInfo
+        [childId]: info
       });
     }
   }, [tabInfos]);

package/esm/components/tabs/tab/tab.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError?: (childId: string, hasError: boolean) => void;
-  setWarning?: (childId: string, hasWarning: boolean) => void;
-  setInfo?: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, error?: boolean | string) => void;
+  setWarning?: (childId: string, warning?: boolean | string) => void;
+  setInfo?: (childId: string, info?: boolean | string) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/esm/components/tabs/tabs.component.js

@@ -27,6 +27,7 @@ const Tabs = ({
   variant = "default",
   validationStatusOverride,
   headerWidth,
+  showValidationsSummary,
   ...rest
 }) => {
   /** The children nodes converted into an Array */
@@ -48,24 +49,24 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = useState({});
   const [tabsWarnings, setTabsWarnings] = useState({});
   const [tabsInfos, setTabsInfos] = useState({});
-  const updateErrors = useCallback((id, hasError) => {
-    if (tabsErrors[id] !== hasError) {
+  const updateErrors = useCallback((id, error) => {
+    if (tabsErrors[id] !== error) {
       setTabsErrors({ ...tabsErrors,
-        [id]: hasError
+        [id]: error
       });
     }
   }, [tabsErrors]);
-  const updateWarnings = useCallback((id, hasWarning) => {
-    if (tabsWarnings[id] !== hasWarning) {
+  const updateWarnings = useCallback((id, warning) => {
+    if (tabsWarnings[id] !== warning) {
       setTabsWarnings({ ...tabsWarnings,
-        [id]: hasWarning
+        [id]: warning
       });
     }
   }, [tabsWarnings]);
-  const updateInfos = useCallback((id, hasInfo) => {
-    if (tabsInfos[id] !== hasInfo) {
+  const updateInfos = useCallback((id, info) => {
+    if (tabsInfos[id] !== info) {
       setTabsInfos({ ...tabsInfos,
-        [id]: hasInfo
+        [id]: info
       });
     }
   }, [tabsInfos]);
@@ -182,16 +183,34 @@ const Tabs = ({
         customLayout
       } = child.props;
       const refId = `${tabId}-tab`;
-      const errors = tabsErrors[tabId] ? Object.entries(tabsErrors[tabId]).filter(tab => tab[1] === true).length : 0;
-      const warnings = tabsWarnings[tabId] ? Object.entries(tabsWarnings[tabId]).filter(tab => tab[1] === true).length : 0;
-      const infos = tabsInfos[tabId] ? Object.entries(tabsInfos[tabId]).filter(tab => tab[1] === true).length : 0;
+      const errors = tabsErrors[tabId];
+      const warnings = tabsWarnings[tabId];
+      const infos = tabsInfos[tabId];
+      const errorsCount = errors && Object.entries(errors).filter(tab => tab[1]).length;
+      const warningsCount = warnings && Object.entries(warnings).filter(tab => tab[1]).length;
+      const infosCount = infos && Object.entries(infos).filter(tab => tab[1]).length;
       const hasOverride = validationStatusOverride && validationStatusOverride[tabId];
       const errorOverride = hasOverride && validationStatusOverride[tabId].error;
       const warningOverride = hasOverride && validationStatusOverride[tabId].warning;
       const infoOverride = hasOverride && validationStatusOverride[tabId].info;
-      const tabHasError = errorOverride !== undefined ? errorOverride : errors > 0;
-      const tabHasWarning = warningOverride !== undefined ? warningOverride : warnings > 0 && !tabHasError;
-      const tabHasInfo = infoOverride !== undefined ? infoOverride : infos > 0 && !tabHasError && !tabHasWarning;
+      const tabHasError = errorOverride !== undefined ? errorOverride : !!errorsCount;
+      const tabHasWarning = warningOverride !== undefined ? warningOverride : !!warningsCount && !tabHasError;
+      const tabHasInfo = infoOverride !== undefined ? infoOverride : !!infosCount && !tabHasError && !tabHasWarning;
+
+      const getValidationMessage = (message, validations = {}) => {
+        const summaryOfMessages = Object.values(validations).filter(value => value && typeof value === "string");
+
+        if (!showValidationsSummary || !summaryOfMessages.length) {
+          return message;
+        }
+
+        if (summaryOfMessages.length === 1) {
+          return summaryOfMessages[0];
+        }
+
+        return summaryOfMessages.map(value => `• ${value}`).join("\n");
+      };
+
       const tabTitle = /*#__PURE__*/React.createElement(TabTitle, {
         position: isInSidebar ? "left" : position,
         className: child.props.className || "",
@@ -212,9 +231,9 @@ const Tabs = ({
         borders: borders !== "off",
         siblings: siblings,
         titlePosition: titlePosition,
-        errorMessage: errorMessage,
-        warningMessage: warningMessage,
-        infoMessage: infoMessage,
+        errorMessage: getValidationMessage(errorMessage, errors),
+        warningMessage: getValidationMessage(warningMessage, warnings),
+        infoMessage: getValidationMessage(infoMessage, infos),
         alternateStyling: variant === "alternate",
         noLeftBorder: ["no left side", "no sides"].includes(borders),
         noRightBorder: ["no right side", "no sides"].includes(borders),
@@ -341,6 +360,11 @@ Tabs.propTypes = { ...marginPropTypes,
       warning: PropTypes.bool,
       info: PropTypes.bool
     })
-  })
+  }),
+
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary: PropTypes.bool
 };
 export { Tabs, Tab };

package/esm/components/tabs/tabs.d.ts

@@ -40,6 +40,10 @@ export interface TabsProps extends MarginProps {
       info?: boolean;
     };
   };
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary?: boolean;
 }
 
 declare function Tabs(props: TabsProps): JSX.Element;

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/__internal__/form-field/form-field.component.js

@@ -84,10 +84,24 @@ const FormField = ({
     setWarning,
     setInfo
   } = (0, _react.useContext)(_tab.TabContext);
+  const isMounted = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   (0, _react.useEffect)(() => {
-    if (setError) setError(id, !!error);
-    if (setWarning) setWarning(id, !!warning);
-    if (setInfo) setInfo(id, !!info);
+    if (setError) setError(id, error);
+    if (setWarning) setWarning(id, warning);
+    if (setInfo) setInfo(id, info);
+    return () => {
+      if (!isMounted.current) {
+        if (setError && error) setError(id, false);
+        if (setWarning && warning) setWarning(id, false);
+        if (setInfo && info) setInfo(id, false);
+      }
+    };
   }, [id, setError, setWarning, setInfo, error, warning, info]);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {

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/tabs/tab/tab.component.js

@@ -48,24 +48,24 @@ const Tab = ({
   const [tabErrors, setTabErrors] = (0, _react.useState)({});
   const [tabWarnings, setTabWarnings] = (0, _react.useState)({});
   const [tabInfos, setTabInfos] = (0, _react.useState)({});
-  const setError = (0, _react.useCallback)((childId, hasError) => {
-    if (tabErrors[childId] !== hasError) {
+  const setError = (0, _react.useCallback)((childId, error) => {
+    if (tabErrors[childId] !== error) {
       setTabErrors({ ...tabErrors,
-        [childId]: hasError
+        [childId]: error
       });
     }
   }, [tabErrors]);
-  const setWarning = (0, _react.useCallback)((childId, hasWarning) => {
-    if (tabWarnings[childId] !== hasWarning) {
+  const setWarning = (0, _react.useCallback)((childId, warning) => {
+    if (tabWarnings[childId] !== warning) {
       setTabWarnings({ ...tabWarnings,
-        [childId]: hasWarning
+        [childId]: warning
       });
     }
   }, [tabWarnings]);
-  const setInfo = (0, _react.useCallback)((childId, hasInfo) => {
-    if (tabInfos[childId] !== hasInfo) {
+  const setInfo = (0, _react.useCallback)((childId, info) => {
+    if (tabInfos[childId] !== info) {
       setTabInfos({ ...tabInfos,
-        [childId]: hasInfo
+        [childId]: info
       });
     }
   }, [tabInfos]);

package/lib/components/tabs/tab/tab.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError?: (childId: string, hasError: boolean) => void;
-  setWarning?: (childId: string, hasWarning: boolean) => void;
-  setInfo?: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, error?: boolean | string) => void;
+  setWarning?: (childId: string, warning?: boolean | string) => void;
+  setInfo?: (childId: string, info?: boolean | string) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/lib/components/tabs/tabs.component.js

@@ -57,6 +57,7 @@ const Tabs = ({
   variant = "default",
   validationStatusOverride,
   headerWidth,
+  showValidationsSummary,
   ...rest
 }) => {
   /** The children nodes converted into an Array */
@@ -78,24 +79,24 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = (0, _react.useState)({});
   const [tabsWarnings, setTabsWarnings] = (0, _react.useState)({});
   const [tabsInfos, setTabsInfos] = (0, _react.useState)({});
-  const updateErrors = (0, _react.useCallback)((id, hasError) => {
-    if (tabsErrors[id] !== hasError) {
+  const updateErrors = (0, _react.useCallback)((id, error) => {
+    if (tabsErrors[id] !== error) {
       setTabsErrors({ ...tabsErrors,
-        [id]: hasError
+        [id]: error
       });
     }
   }, [tabsErrors]);
-  const updateWarnings = (0, _react.useCallback)((id, hasWarning) => {
-    if (tabsWarnings[id] !== hasWarning) {
+  const updateWarnings = (0, _react.useCallback)((id, warning) => {
+    if (tabsWarnings[id] !== warning) {
       setTabsWarnings({ ...tabsWarnings,
-        [id]: hasWarning
+        [id]: warning
       });
     }
   }, [tabsWarnings]);
-  const updateInfos = (0, _react.useCallback)((id, hasInfo) => {
-    if (tabsInfos[id] !== hasInfo) {
+  const updateInfos = (0, _react.useCallback)((id, info) => {
+    if (tabsInfos[id] !== info) {
       setTabsInfos({ ...tabsInfos,
-        [id]: hasInfo
+        [id]: info
       });
     }
   }, [tabsInfos]);
@@ -216,16 +217,33 @@ const Tabs = ({
         customLayout
       } = child.props;
       const refId = `${tabId}-tab`;
-      const errors = tabsErrors[tabId] ? Object.entries(tabsErrors[tabId]).filter(tab => tab[1] === true).length : 0;
-      const warnings = tabsWarnings[tabId] ? Object.entries(tabsWarnings[tabId]).filter(tab => tab[1] === true).length : 0;
-      const infos = tabsInfos[tabId] ? Object.entries(tabsInfos[tabId]).filter(tab => tab[1] === true).length : 0;
+      const errors = tabsErrors[tabId];
+      const warnings = tabsWarnings[tabId];
+      const infos = tabsInfos[tabId];
+      const errorsCount = errors && Object.entries(errors).filter(tab => tab[1]).length;
+      const warningsCount = warnings && Object.entries(warnings).filter(tab => tab[1]).length;
+      const infosCount = infos && Object.entries(infos).filter(tab => tab[1]).length;
       const hasOverride = validationStatusOverride && validationStatusOverride[tabId];
       const errorOverride = hasOverride && validationStatusOverride[tabId].error;
       const warningOverride = hasOverride && validationStatusOverride[tabId].warning;
       const infoOverride = hasOverride && validationStatusOverride[tabId].info;
-      const tabHasError = errorOverride !== undefined ? errorOverride : errors > 0;
-      const tabHasWarning = warningOverride !== undefined ? warningOverride : warnings > 0 && !tabHasError;
-      const tabHasInfo = infoOverride !== undefined ? infoOverride : infos > 0 && !tabHasError && !tabHasWarning;
+      const tabHasError = errorOverride !== undefined ? errorOverride : !!errorsCount;
+      const tabHasWarning = warningOverride !== undefined ? warningOverride : !!warningsCount && !tabHasError;
+      const tabHasInfo = infoOverride !== undefined ? infoOverride : !!infosCount && !tabHasError && !tabHasWarning;
+
+      const getValidationMessage = (message, validations = {}) => {
+        const summaryOfMessages = Object.values(validations).filter(value => value && typeof value === "string");
+
+        if (!showValidationsSummary || !summaryOfMessages.length) {
+          return message;
+        }
+
+        if (summaryOfMessages.length === 1) {
+          return summaryOfMessages[0];
+        }
+
+        return summaryOfMessages.map(value => `• ${value}`).join("\n");
+      };
 
       const tabTitle = /*#__PURE__*/_react.default.createElement(_tabTitle.default, {
         position: isInSidebar ? "left" : position,
@@ -247,9 +265,9 @@ const Tabs = ({
         borders: borders !== "off",
         siblings: siblings,
         titlePosition: titlePosition,
-        errorMessage: errorMessage,
-        warningMessage: warningMessage,
-        infoMessage: infoMessage,
+        errorMessage: getValidationMessage(errorMessage, errors),
+        warningMessage: getValidationMessage(warningMessage, warnings),
+        infoMessage: getValidationMessage(infoMessage, infos),
         alternateStyling: variant === "alternate",
         noLeftBorder: ["no left side", "no sides"].includes(borders),
         noRightBorder: ["no right side", "no sides"].includes(borders),
@@ -378,5 +396,10 @@ Tabs.propTypes = { ...marginPropTypes,
       warning: _propTypes.default.bool,
       info: _propTypes.default.bool
     })
-  })
+  }),
+
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary: _propTypes.default.bool
 };

package/lib/components/tabs/tabs.d.ts

@@ -40,6 +40,10 @@ export interface TabsProps extends MarginProps {
       info?: boolean;
     };
   };
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary?: boolean;
 }
 
 declare function Tabs(props: TabsProps): JSX.Element;

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