carbon-react 104.7.2 → 104.10.0

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -2,7 +2,7 @@ export const StyledAdvancedColorPickerWrapper: import("styled-components").Style
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 export const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogStyle: import("styled-components").StyledComponent<{
-    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
         [x: string]: any;
         className: any;
         children: any;
@@ -20,6 +20,7 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableClose: any;
         help: any;
         role?: string | undefined;
+        contentPadding?: {} | undefined;
     }): JSX.Element;
     propTypes: {
         "aria-describedby": import("prop-types").Requireable<string>;
@@ -43,6 +44,11 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableAutoFocus: import("prop-types").Requireable<boolean>;
         bespokeFocusTrap: import("prop-types").Requireable<(...args: any[]) => any>;
         role: import("prop-types").Requireable<string>;
+        contentPadding: import("prop-types").Requireable<import("prop-types").InferProps<{
+            p: import("prop-types").Requireable<number>;
+            px: import("prop-types").Requireable<number>;
+            py: import("prop-types").Requireable<number>;
+        }>>;
     };
     defaultProps: {
         size: string;

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -20,52 +22,32 @@ const StyledNavigationItem = _styledComponents.default.li`
     cursor: pointer;
     display: block;
     text-decoration: none;
-    color: ${({
-  theme
-}) => theme.text.color};
+    color: var(--colorsUtilityYin090);
     background-color: transparent;
-    border-left: 3px solid ${({
-  theme
-}) => theme.disabled.background};
+    border-left: var(--sizing050) solid var(--colorsActionMinor100);
     font-weight: 700;
     padding: 12px 24px;
 
     &:focus {
-      outline: none;
-      position: relative;
-
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -3px;
-        right: 0;
-        z-index: 1;
-        box-shadow: 0 0 6px ${({
-  theme
-}) => theme.colors.focus};
-      }
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
       background-color: ${({
-  isSelected,
-  theme
-}) => !isSelected && theme.anchorNavigation.navItemHoverBackground};
+  isSelected
+}) => !isSelected && "var(--colorsActionMinor100)"};
     }
 
     ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && (0, _styledComponents.css)`
-        background-color: ${theme.colors.white};
-        border-left-color: ${theme.colors.primary};
+        background-color: var(--colorsActionMinorYang100);
+        border-left-color: var(--colorsActionMajor500);
       `}
   }
 `;
-StyledNavigationItem.defaultProps = {
-  theme: _themes.baseTheme
+StyledNavigationItem.propTypes = {
+  isSelected: _propTypes.default.bool
 };
 var _default = StyledNavigationItem;
 exports.default = _default;

package/lib/components/anchor-navigation/anchor-navigation.style.js

@@ -7,8 +7,6 @@ exports.StyledContent = exports.StyledNavigation = exports.StyledAnchorNavigatio
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorNavigation = _styledComponents.default.div`
@@ -20,9 +18,6 @@ exports.StyledAnchorNavigation = StyledAnchorNavigation;
 const StyledNavigation = _styledComponents.default.ul`
   position: sticky;
   top: 32px;
-  box-shadow: inset 3px 0px 0px 0px ${({
-  theme
-}) => theme.disabled.background};
   list-style: none;
   margin: 0;
   padding: 0;
@@ -33,13 +28,4 @@ const StyledContent = _styledComponents.default.div`
   flex: 1;
   margin-left: 32px;
 `;
-exports.StyledContent = StyledContent;
-StyledAnchorNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledContent.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledContent = StyledContent;

package/lib/components/anchor-navigation/anchor-section-divider/anchor-section-divider.style.js

@@ -7,20 +7,13 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorDivider = _styledComponents.default.div.attrs({
   "data-element": "anchor-navigation-divider"
 })`
-  background-color: ${({
-  theme
-}) => theme.anchorNavigation.divider};
+  background-color: var(--colorsActionMinor200);
   height: 1px;
 `;
-StyledAnchorDivider.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledAnchorDivider;
 exports.default = _default;

package/lib/components/app-wrapper/app-wrapper.component.js

@@ -17,6 +17,8 @@ var _ether = require("../../__internal__/utils/ether");
 
 var _appWrapper = _interopRequireDefault(require("./app-wrapper.style"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -41,9 +43,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+let deprecatedWarnTriggered = false;
 /**
  * Manages the width and containment of your application.
  */
+
 let AppWrapper = /*#__PURE__*/function (_React$Component) {
   _inherits(AppWrapper, _React$Component);
 
@@ -56,6 +60,13 @@ let AppWrapper = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, ...args);
     _this.classes = _this.classes.bind(_assertThisInitialized(_this));
+
+    if (!deprecatedWarnTriggered) {
+      deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
+
+      _logger.default.deprecate("`AppWrapper` component is now deprecated and will soon be removed. Please use the `Box` component instead.");
+    }
+
     return _this;
   }
   /**

package/lib/components/dialog/dialog.component.d.ts

@@ -1,5 +1,5 @@
 export default Dialog;
-declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
     [x: string]: any;
     className: any;
     children: any;
@@ -17,6 +17,7 @@ declare function Dialog({ className, children, open, height, size, title, disabl
     disableClose: any;
     help: any;
     role?: string | undefined;
+    contentPadding?: {} | undefined;
 }): JSX.Element;
 declare namespace Dialog {
     const propTypes: {
@@ -28,7 +29,7 @@ declare namespace Dialog {
          */
         "aria-label": PropTypes.Requireable<string>;
         /**
-         * Prop to specify the aria-labeledby property of the Dialog component
+         * Prop to specify the aria-labelledby property of the Dialog component
          * To be used when the title prop is a custom React Node,
          * or the component is labelled by an internal element other than the title.
          */
@@ -71,6 +72,12 @@ declare namespace Dialog {
         bespokeFocusTrap: PropTypes.Requireable<(...args: any[]) => any>;
         /** The ARIA role to be applied to the Dialog container */
         role: PropTypes.Requireable<string>;
+        /** Padding to be set on the Dialog content */
+        contentPadding: PropTypes.Requireable<PropTypes.InferProps<{
+            p: PropTypes.Requireable<number>;
+            px: PropTypes.Requireable<number>;
+            py: PropTypes.Requireable<number>;
+        }>>;
     };
     namespace defaultProps {
         const size: string;

package/lib/components/dialog/dialog.component.js

@@ -29,6 +29,8 @@ var _form = _interopRequireDefault(require("../form"));
 
 var _dialog2 = require("./dialog.config");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -54,8 +56,10 @@ const Dialog = ({
   disableClose,
   help,
   role = "dialog",
+  contentPadding = {},
   ...rest
 }) => {
+  const locale = (0, _useLocale.default)();
   const dialogRef = (0, _react.useRef)();
   const innerContentRef = (0, _react.useRef)();
   const titleRef = (0, _react.useRef)();
@@ -124,7 +128,7 @@ const Dialog = ({
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
-      "aria-label": "Close button",
+      "aria-label": locale.dialog.ariaLabels.close(),
       onAction: onCancel,
       disabled: disableClose
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -187,9 +191,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, null, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, {
+  }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, _react.default.Children.map(children, child => {
+  }, contentPadding), _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _form.default) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         dialogRef
@@ -211,7 +215,7 @@ Dialog.propTypes = {
   "aria-label": _propTypes.default.string,
 
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -269,7 +273,14 @@ Dialog.propTypes = {
   bespokeFocusTrap: _propTypes.default.func,
 
   /** The ARIA role to be applied to the Dialog container */
-  role: _propTypes.default.string
+  role: _propTypes.default.string,
+
+  /** Padding to be set on the Dialog content */
+  contentPadding: _propTypes.default.shape({
+    p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  })
 };
 Dialog.defaultProps = {
   size: "medium",

package/lib/components/dialog/dialog.config.d.ts

@@ -1,2 +1,5 @@
 export const DIALOG_SIZES: string[];
 export const TOP_MARGIN: 20;
+export const CONTENT_TOP_PADDING: 24;
+export const HORIZONTAL_PADDING: 32;
+export const CONTENT_BOTTOM_PADDING: 30;

package/lib/components/dialog/dialog.config.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
+exports.CONTENT_BOTTOM_PADDING = exports.HORIZONTAL_PADDING = exports.CONTENT_TOP_PADDING = exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
 const DIALOG_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 exports.DIALOG_SIZES = DIALOG_SIZES;
 const TOP_MARGIN = 20;
-exports.TOP_MARGIN = TOP_MARGIN;
+exports.TOP_MARGIN = TOP_MARGIN;
+const CONTENT_TOP_PADDING = 24;
+exports.CONTENT_TOP_PADDING = CONTENT_TOP_PADDING;
+const HORIZONTAL_PADDING = 32;
+exports.HORIZONTAL_PADDING = HORIZONTAL_PADDING;
+const CONTENT_BOTTOM_PADDING = 30;
+exports.CONTENT_BOTTOM_PADDING = CONTENT_BOTTOM_PADDING;

package/lib/components/dialog/dialog.d.ts

@@ -1,6 +1,14 @@
 import * as React from "react";
 import { ModalProps } from "../modal/modal";
 
+type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+interface ContentPaddingInterface {
+  p?: PaddingValues;
+  py?: PaddingValues;
+  px?: PaddingValues;
+}
+
 export type DialogSizes =
   | "auto"
   | "extra-small"
@@ -20,7 +28,7 @@ export interface DialogProps extends ModalProps {
    */
   "aria-label"?: string;
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -49,6 +57,8 @@ export interface DialogProps extends ModalProps {
   title?: React.ReactNode;
   /** The ARIA role to be applied to the Dialog container */
   role?: string;
+  /** Padding to be set on the Dialog content */
+  contentPadding?: ContentPaddingInterface;
 }
 
 declare function Dialog(props: DialogProps): JSX.Element;

package/lib/components/dialog/dialog.style.d.ts

@@ -1,4 +1,7 @@
 export const DialogStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {
+    py: any;
+    p: any;
+}, never>;

package/lib/components/dialog/dialog.style.js

@@ -7,12 +7,18 @@ exports.DialogInnerContentStyle = exports.DialogContentStyle = exports.DialogTit
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 var _form = require("../form/form.style");
 
 var _heading = require("../heading/heading.style");
 
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
+var _dialog = require("./dialog.config");
+
 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; }
@@ -29,8 +35,51 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const HORIZONTAL_PADDING = 35;
-const CONTENT_BOTTOM_PADDING = 30;
+
+const calculateWidthValue = props => {
+  const {
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const paddingValue = paddingLeft ?? paddingRight ?? padding;
+  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING * 2 : paddingValue * 2;
+};
+
+const calculateFormSpacingValues = (props, isFormContent) => {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const spacingTopValue = paddingTop ?? padding ?? _dialog.CONTENT_TOP_PADDING;
+  const spacingRightValue = paddingRight ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  const spacingBottomValue = paddingBottom ?? padding ?? _dialog.CONTENT_BOTTOM_PADDING;
+  const spacingLeftValue = paddingLeft ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  return {
+    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
+    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    ...(isFormContent && {
+      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "padding-top": spacingTopValue,
+      "padding-bottom": spacingBottomValue,
+      "padding-left": spacingLeftValue,
+      "padding-right": spacingRightValue
+    }),
+    ...(!isFormContent && {
+      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
+      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+    })
+  };
+};
+
+const calculatePaddingTopInnerContent = ({
+  py,
+  p
+}) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
+
 const DialogStyle = _styledComponents.default.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
@@ -62,7 +111,7 @@ const DialogStyle = _styledComponents.default.div`
   dialogHeight
 }) => dialogHeight && (0, _styledComponents.css)`
       height: ${dialogHeight}px;
-    `};
+    `}
 
   ${_form.StyledForm} {
     padding-bottom: 0px;
@@ -70,21 +119,12 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormContent}.sticky {
-    padding-right: ${HORIZONTAL_PADDING}px;
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-top: 20px;
-    margin-right: -${HORIZONTAL_PADDING}px;
-    margin-left: -${HORIZONTAL_PADDING}px;
-    margin-top: -20px;
+    ${props => calculateFormSpacingValues(props, true)}
   }
 
   ${_form.StyledFormFooter}.sticky {
-    margin-left: -${HORIZONTAL_PADDING}px;
-    bottom: -${CONTENT_BOTTOM_PADDING}px;
-    margin-bottom: -${CONTENT_BOTTOM_PADDING}px;
-    width: calc(100% + ${2 * HORIZONTAL_PADDING}px);
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-right: ${HORIZONTAL_PADDING}px;
+    width: calc(100% + ${calculateWidthValue}px);
+    ${props => calculateFormSpacingValues(props, false)}
   }
 
   > ${_iconButton.default} {
@@ -101,7 +141,7 @@ const DialogStyle = _styledComponents.default.div`
 `;
 exports.DialogStyle = DialogStyle;
 const DialogTitleStyle = _styledComponents.default.div`
-  padding: 23px ${HORIZONTAL_PADDING}px 0;
+  padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({
   showCloseIcon
@@ -133,12 +173,19 @@ const DialogContentStyle = _styledComponents.default.div`
   overflow-y: auto;
   width: 100%;
   flex: 1;
-  padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
+  padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
+  ${_styledSystem.padding}
 `;
 exports.DialogContentStyle = DialogContentStyle;
 const DialogInnerContentStyle = _styledComponents.default.div`
-  padding-top: 20px;
   position: relative;
   flex: 1;
+  padding-top: ${calculatePaddingTopInnerContent};
 `;
-exports.DialogInnerContentStyle = DialogInnerContentStyle;
+exports.DialogInnerContentStyle = DialogInnerContentStyle;
+DialogStyle.defaultProps = {
+  theme: _base.default
+};
+DialogContentStyle.defaultProps = {
+  theme: _base.default
+};

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -27,6 +27,8 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -56,6 +58,7 @@ const DialogFullScreen = ({
   role = "dialog",
   ...rest
 }) => {
+  const locale = (0, _useLocale.default)();
   const dialogRef = (0, _react.useRef)();
   const headingRef = (0, _react.useRef)();
   const {
@@ -69,7 +72,7 @@ const DialogFullScreen = ({
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
-      "aria-label": "Close button",
+      "aria-label": locale.dialogFullScreen.ariaLabels.close(),
       onAction: onCancel
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"

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

@@ -44,11 +44,15 @@ const StyledSubmenuWrapper = _styledComponents.default.div`
   menuType,
   asPassiveItem,
   theme
-}) => inFullscreenView && asPassiveItem && (0, _styledComponents.css)`
-      ${_menuItem.default} {
-        outline: none;
-        color: ${theme.menu[menuType].title};
-      }
+}) => inFullscreenView && (0, _styledComponents.css)`
+      width: 100%;
+
+      ${asPassiveItem && (0, _styledComponents.css)`
+        ${_menuItem.default} {
+          outline: none;
+          color: ${theme.menu[menuType].title};
+        }
+      `}
     `}
 `;
 exports.StyledSubmenuWrapper = StyledSubmenuWrapper;
@@ -75,7 +79,7 @@ const StyledSubmenu = _styledComponents.default.ul`
 
     ${inFullscreenView && (0, _styledComponents.css)`
       ${_menu.StyledMenuItem} {
-        width: 100vw;
+        width: 100%;
       }
     `}
 
@@ -126,7 +130,7 @@ const StyledSubmenu = _styledComponents.default.ul`
         margin-right: 5px;
       }
 
-      ${_search.default} [data-component="icon"] {
+      ${_search.default} span > [data-component="icon"] {
         color: ${theme.menu[menuType].searchIcon};
 
         &:hover {

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -106,10 +106,10 @@ const MenuFullscreen = ({
     type: "close",
     color: iconColors[menuType]
   }))), /*#__PURE__*/_react.default.createElement(_box.default, {
-    overflow: "auto",
+    overflowY: "auto",
     scrollVariant: scrollVariants[menuType],
-    width: "100vw",
-    height: "100vh"
+    width: "100%",
+    height: "calc(100% - 40px)"
   }, /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, {
     "data-component": "menu",
     menuType: menuType,

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -13,6 +13,12 @@ var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.
 
 var _box = _interopRequireDefault(require("../../box"));
 
+var _search = _interopRequireDefault(require("../../search/search.style"));
+
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+
+var _button = _interopRequireDefault(require("../../button/button.style"));
+
 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; }
@@ -23,6 +29,8 @@ const StyledMenuFullscreen = _styledComponents.default.div`
   position: fixed;
   top: 0;
   bottom: 0;
+  height: 100vh;
+  width: 100%;
 
   a,
   button,
@@ -39,6 +47,45 @@ const StyledMenuFullscreen = _styledComponents.default.div`
     background-color: ${theme.menu[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
+    ${menuType === "dark" && (0, _styledComponents.css)`
+      ${_search.default} span > [data-component="icon"] {
+        color: ${theme.menu.dark.searchIcon};
+
+        &:hover {
+          color: ${theme.menu.dark.searchIconHover};
+        }
+      }
+    `}
+
+    ${menuType === "light" && (0, _styledComponents.css)`
+      ${_search.default} span > [data-component="icon"] {
+        color: ${theme.search.icon};
+
+        &:hover {
+          color: ${theme.search.iconHover};
+        }
+      }
+    `}
+
+    ${_search.default} {
+      ${_icon.default} {
+        display: inline-flex;
+        margin-right: 0;
+        bottom: auto;
+      }
+
+      ${_button.default} {
+        display: flex;
+        line-height: normal;
+        padding-bottom: 0;
+
+        &:focus {
+          outline: solid 3px var(--colorsSemanticFocus500);
+          box-shadow: none;
+        }
+      }
+    }
+
     ${isOpen && (0, _styledComponents.css)`
       visibility: visible;
       ${startPosition}: 0;
@@ -47,7 +94,7 @@ const StyledMenuFullscreen = _styledComponents.default.div`
 
     ${!isOpen && (0, _styledComponents.css)`
       visibility: hidden;
-      ${startPosition}: -100vw;
+      ${startPosition}: -100%;
       transition: all 0.3s ease;
     `}
   `}

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

@@ -218,7 +218,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
 
     ${inFullscreenView && (0, _styledComponents.css)`
       ${as === "div" && (0, _styledComponents.css)`
-        width: 100vw;
         cursor: default;
         padding: 0 16px;
 
@@ -226,14 +225,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           background: transparent;
         }
       `}
-
-      a,
-      ${_link.StyledLink} a,
-      button,
-      ${_link.StyledLink} button {
-        width: 100vw;
-        box-sizing: border-box;
-      }
     `}
   `}
 `;

package/lib/components/menu/menu-test.stories.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuFullScreenStory = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _ = require(".");
+
+var _menuItem = _interopRequireDefault(require("./menu-item"));
+
+var _menuFullScreen = _interopRequireDefault(require("./menu-full-screen"));
+
+var _search = _interopRequireDefault(require("../search"));
+
+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; }
+
+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; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: "Menu/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: false
+    }
+  },
+  argTypes: {
+    menuType: {
+      options: ["light", "dark"],
+      control: {
+        type: "select"
+      }
+    },
+    startPosition: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      }
+    },
+    searchVariant: {
+      options: ["default", "dark"],
+      control: {
+        type: "select"
+      }
+    },
+    searchButton: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const MenuFullScreenStory = ({
+  menuType,
+  startPosition,
+  searchVariant,
+  searchButton
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(true);
+
+  const onClose = evt => {
+    setIsOpen(false);
+    (0, _addonActions.action)("close icon clicked")(evt);
+  };
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    (0, _addonActions.action)("open")();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Menu, {
+    menuType: menuType
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    onClick: handleOpen
+  }, "Menu"), /*#__PURE__*/_react.default.createElement(_menuFullScreen.default, {
+    startPosition: startPosition,
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item One"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    onClick: evt => (0, _addonActions.action)("submenu item clicked")(evt),
+    submenu: "Menu Item Two"
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item One"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item Two")), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    variant: "alternate"
+  }, /*#__PURE__*/_react.default.createElement(_search.default, {
+    placeholder: "Search...",
+    variant: searchVariant,
+    defaultValue: "",
+    searchButton: searchButton
+  })), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item Three"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item Four"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    submenu: "Menu Item Five"
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item One"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item Two")), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item Six")));
+};
+
+exports.MenuFullScreenStory = MenuFullScreenStory;
+MenuFullScreenStory.story = {
+  name: "fullscreen menu",
+  args: {
+    menuType: "light",
+    startPosition: "left",
+    searchVariant: "default",
+    searchButton: true
+  }
+};

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

@@ -13,6 +13,8 @@ var _verticalDivider = require("../vertical-divider/vertical-divider.style");
 
 var _themes = require("../../style/themes");
 
+var _link = require("../link/link.style");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 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; }
@@ -46,12 +48,6 @@ const StyledMenuWrapper = _styledComponents.default.ul`
       top: -1px;
     }
   }
-
-  ${({
-  inFullscreenView
-}) => inFullscreenView && (0, _styledComponents.css)`
-      padding-bottom: 24px;
-    `}
 `;
 exports.StyledMenuWrapper = StyledMenuWrapper;
 const StyledMenuItem = _styledComponents.default.li`
@@ -71,6 +67,17 @@ const StyledMenuItem = _styledComponents.default.li`
 }) => inFullscreenView && (0, _styledComponents.css)`
       padding-top: 16px;
       padding-bottom: 16px;
+
+      a,
+      ${_link.StyledLink} a,
+      button,
+      ${_link.StyledLink} button,
+      > span,
+      > div,
+      [data-component="submenu-wrapper"] > ${_link.StyledLink} {
+        width: 100%;
+        box-sizing: border-box;
+      }
     `}
 `;
 exports.StyledMenuItem = StyledMenuItem;

package/lib/components/sidebar/sidebar.component.js

@@ -25,6 +25,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _sidebar2 = require("./sidebar.config");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -52,13 +54,14 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   role = "dialog",
   ...rest
 }, ref) => {
+  const locale = (0, _useLocale.default)();
   let sidebarRef = (0, _react.useRef)();
   if (ref) sidebarRef = ref;
 
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      "aria-label": "close",
+      "aria-label": locale.sidebar.ariaLabels.close(),
       onAction: onCancel,
       "data-element": "close"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/toast/toast.component.js

@@ -25,6 +25,8 @@ var _modalManager = _interopRequireDefault(require("../modal/__internal__/modal-
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -47,6 +49,7 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
   const componentClasses = (0, _react.useMemo)(() => {
@@ -85,6 +88,7 @@ const Toast = ({
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
       onAction: onDismiss
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/locales/en-gb.js

@@ -28,6 +28,16 @@ var _default = {
   date: {
     dateFnsLocale: () => _dateFnsLocales.enGB
   },
+  dialog: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   errors: {
     messages: {
       formSummary:
@@ -85,6 +95,11 @@ var _default = {
   link: {
     skipLinkLabel: () => "Skip to main content"
   },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   switch: {
     on: () => "ON",
     off: () => "OFF"
@@ -106,6 +121,11 @@ var _default = {
   tileSelect: {
     deselect: () => "Deselect"
   },
+  toast: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   wizards: {
     multiStep: {
       buttons: {

package/lib/locales/locale.d.ts

@@ -19,6 +19,16 @@ interface Locale {
   date: {
     dateFnsLocale: () => DateFnsLocale;
   };
+  dialog: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   errors: {
     messages: {
       formSummary: (
@@ -53,6 +63,14 @@ interface Locale {
     placeholder: () => string;
     noResultsForTerm: (term: string) => string;
   };
+  link: {
+    skipLinkLabel: () => string;
+  };
+  sidebar: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   switch: {
     on: () => string;
     off: () => string;
@@ -74,6 +92,11 @@ interface Locale {
   tileSelect: {
     deselect: () => string;
   };
+  toast: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   wizards: {
     multiStep: {
       buttons: {

package/lib/locales/pl-pl.js

@@ -28,6 +28,16 @@ var _default = {
   date: {
     dateFnsLocale: () => _dateFnsLocales.pl
   },
+  dialog: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   errors: {
     messages: {
       formSummary:
@@ -83,6 +93,11 @@ var _default = {
   link: {
     skipLinkLabel: () => "Przejdź do treści"
   },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   switch: {
     on: () => "WŁ",
     off: () => "WYŁ"
@@ -104,6 +119,11 @@ var _default = {
   tileSelect: {
     deselect: () => "Odznacz"
   },
+  toast: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   wizards: {
     multiStep: {
       buttons: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.7.2",
+  "version": "104.10.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {