carbon-react 104.7.2 → 104.7.3

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/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/package.json

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