carbon-react 102.11.0 → 102.12.0

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

@@ -47,7 +47,7 @@ const StyledSubmenuWrapper = _styledComponents.default.div`
 }) => inFullscreenView && asPassiveItem && (0, _styledComponents.css)`
       ${_menuItem.default} {
         outline: none;
-        color: ${menuType === "light" ? theme.menu.light.title : theme.menu.dark.title};
+        color: ${theme.menu[menuType].title};
       }
     `}
 `;
@@ -64,8 +64,7 @@ const StyledSubmenu = _styledComponents.default.ul`
       box-shadow: 0 5px 5px 0 rgba(0, 20, 29, 0.2),
         0 10px 10px 0 rgba(0, 20, 29, 0.1);
       position: absolute;
-      background-color: ${theme.colors.white};
-
+      background: ${variant === "default" ? theme.menu[menuType].submenuBackground : theme.menu[menuType].background};
       a,
       button,
       ${_link.StyledLink} a,
@@ -109,10 +108,7 @@ const StyledSubmenu = _styledComponents.default.ul`
       white-space: nowrap;
       cursor: pointer;
 
-      ${menuType === "light" && (0, _styledComponents.css)`
-        ${!inFullscreenView && `background-color: ${theme.colors.white};`}
-        color: ${theme.colors.black};
-      `}
+      ${!inFullscreenView && `background-color: ${theme.menu[menuType].submenuBackground};`}
 
       &:hover,
       &:hover a,
@@ -129,43 +125,15 @@ const StyledSubmenu = _styledComponents.default.ul`
         height: 16px;
         margin-right: 5px;
       }
-    }
-
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background: ${variant === "default" ? theme.menu.dark.submenuBackground : theme.colors.slate};
 
-      ${_menuItem.default} {
-        ${!inFullscreenView && `background-color: ${theme.menu.dark.submenuBackground};`}
-        color: ${theme.colors.white};
+      ${_search.default} [data-component="icon"] {
+        color: ${theme.menu[menuType].searchIcon};
 
-        a,
-        button,
-        [data-component="icon"] {
-          color: ${theme.colors.white};
-        }
-
-        .carbon-menu-item--has-link button {
-          color: ${theme.colors.white};
-        }
-
-        ${_search.default} [data-component="icon"] {
-          color: ${theme.menu.dark.searchIcon};
-
-          &:hover {
-            color: ${theme.menu.dark.searchIconHover};
-          }
+        &:hover {
+          color: ${theme.menu[menuType].searchIconHover};
         }
       }
-
-      .carbon-menu-item--has-link:hover {
-        background-color: ${theme.colors.primary};
-        text-decoration: none;
-
-        [data-component="icon"] {
-          color: ${theme.colors.white};
-        }
-      }
-    `}
+    }
 
     [data-component="icon"] {
       line-height: 16px;

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

@@ -22,7 +22,7 @@ const StyledDivider = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
     margin: 0px ${size === "large" ? "" : "16px"};
     height: ${size === "large" ? "4px" : "1px"};
-    background: ${menuType !== "dark" ? theme.menu.light.divider : theme.menu.dark.divider};
+    background: ${theme.menu[menuType].divider};
   `}
 `;
 StyledDivider.defaultProps = {

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

@@ -70,6 +70,18 @@ const MenuFullscreen = ({
       wrapperRef.removeEventListener("transitionend", checkTransitionEnd);
     }
   }, [isOpen]);
+  const scrollVariants = {
+    light: "light",
+    dark: "dark",
+    white: "light",
+    black: "dark"
+  };
+  const iconColors = {
+    light: undefined,
+    dark: "#FFFFFF",
+    white: undefined,
+    black: "#FFFFFF"
+  };
   return /*#__PURE__*/_react.default.createElement("li", {
     "aria-label": "menu-fullscreen"
   }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
@@ -92,10 +104,10 @@ const MenuFullscreen = ({
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",
-    color: menuType === "dark" ? "#FFFFFF" : undefined
+    color: iconColors[menuType]
   }))), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflow: "auto",
-    scrollVariant: menuType,
+    scrollVariant: scrollVariants[menuType],
     width: "100vw",
     height: "100vh"
   }, /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, {

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

@@ -36,13 +36,9 @@ const StyledMenuFullscreen = _styledComponents.default.div`
   startPosition,
   theme
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.menu.light.background};
+    background-color: ${theme.menu[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.slate};
-    `}
-
     ${isOpen && (0, _styledComponents.css)`
       visibility: visible;
       ${startPosition}: 0;
@@ -77,11 +73,7 @@ const StyledMenuFullscreenHeader = _styledComponents.default.div`
   menuType,
   theme
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.white};
-
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.menu.dark.submenuBackground};
-    `}
+    background-color: ${theme.menu[menuType].submenuBackground};
   `}
 `;
 exports.StyledMenuFullscreenHeader = StyledMenuFullscreenHeader;

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

@@ -41,7 +41,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     height: 40px;
     position: relative;
     cursor: pointer;
-    background-color: ${theme.menu.light.background};
+    background-color: ${theme.menu[menuType].background};
 
     ${!inFullscreenView && (0, _styledComponents.css)`
       max-width: inherit;
@@ -96,7 +96,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     ${_link.StyledLink} [data-component="icon"] {
       font-weight: 700;
       text-decoration: none;
-      color: ${theme.colors.black};
+      color: ${theme.menu[menuType].text};
     }
 
     a:hover,
@@ -134,77 +134,19 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
 
     ${variant === "alternate" && (0, _styledComponents.css)`
       &&& {
-        background-color: ${theme.menu.light.background};
+        background-color: ${theme.menu[menuType].alternate};
       }
     `}
 
     ${selected && (0, _styledComponents.css)`
-      background-color: ${theme.menu.light.selected};
+      background-color: ${theme.menu[menuType].selected};
     `}
 
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.slate};
+    ${isOpen && (0, _styledComponents.css)`
+      background-color: ${theme.menu[menuType].submenuBackground};
       color: ${theme.colors.white};
-
-      a,
-      a:hover,
-      a:focus,
-      button,
-      button:hover,
-      [data-component="icon"],
-      ${_link.StyledLink} [data-component="icon"] {
-        font-weight: 700;
-        text-decoration: none;
-        color: ${theme.colors.white};
-        background-color: transparent;
-      }
-
-      ${selected && (0, _styledComponents.css)`
-        background-color: ${theme.menu.dark.selected};
-      `}
-
-      [data-component='icon'] {
-        color: ${theme.colors.white};
-      }
-
-      ${hasSubmenu && (0, _styledComponents.css)`
-        ${!href && (0, _styledComponents.css)`
-          && a:hover,
-          && button:hover {
-            background-color: ${theme.menu.dark.submenuBackground};
-            color: ${theme.colors.white};
-
-            [data-component="icon"] {
-              color: ${theme.colors.white};
-            }
-          }
-
-          && a:focus,
-          && button:focus {
-            background-color: ${theme.menu.dark.submenuBackground};
-            color: ${theme.colors.white};
-
-            a,
-            button,
-            [data-component="icon"] {
-              color: ${theme.colors.white};
-            }
-          }
-        `}
-
-        ${isOpen && (0, _styledComponents.css)`
-          background-color: ${theme.menu.dark.submenuBackground};
-          color: ${theme.colors.white};
-        `}
-      `}
-
-      ${variant === "alternate" && (0, _styledComponents.css)`
-        &&& {
-          background-color: ${theme.colors.slate};
-        }
-      `}
-    `}
-
+    `} 
+    
     ${hasSubmenu && (0, _styledComponents.css)`
       a:hover,
       button:hover {
@@ -213,35 +155,28 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
         `}
       }
 
-      ${menuType === "light" && (0, _styledComponents.css)`
-        ${!href && (0, _styledComponents.css)`
-          && a:hover,
-          && b:hover {
-            background-color: ${theme.colors.white};
-            color: ${theme.colors.black};
+      ${!href && (0, _styledComponents.css)`
+        && a:hover,
+        && button:hover {
+          background-color: ${theme.menu[menuType].submenuBackground};
+          color: ${theme.menu[menuType].text};
 
-            [data-component="icon"] {
-              color: ${theme.colors.black};
-            }
+          [data-component="icon"] {
+            color: ${theme.menu[menuType].text};
           }
+        }
 
-          && a:focus,
-          && button:focus {
-            background-color: ${theme.colors.white};
-            color: ${theme.colors.black};
+        && a:focus,
+        && button:focus {
+          background-color: ${theme.menu[menuType].submenuBackground};
+          color: ${theme.menu[menuType].text};
 
-            a,
-            button,
-            [data-component="icon"] {
-              color: ${theme.colors.black};
-            }
+          a,
+          button,
+          [data-component="icon"] {
+            color: ${theme.menu[menuType].text};
           }
-        `}
-
-        ${isOpen && (0, _styledComponents.css)`
-          background-color: ${theme.colors.white};
-          color: ${theme.colors.black};
-        `}
+        }
       `}
 
       ${showDropdownArrow && (0, _styledComponents.css)`
@@ -269,8 +204,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           content: "";
           width: 0;
           height: 0;
-          border-top: 5px solid
-            ${menuType !== "dark" ? theme.colors.slate : theme.colors.white};
+          border-top: 5px solid ${theme.menu[menuType].text};
           border-right: 4px solid transparent;
           border-bottom: 4px solid transparent;
           border-left: 4px solid transparent;

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -25,16 +25,8 @@ const StyledTitle = _styledComponents.default.div`
     text-transform: uppercase;
     line-height: 12px;
     cursor: default;
-
-    ${menuType === "light" && (0, _styledComponents.css)`
-      ${variant === "alternate" ? `background: ${theme.menu.light.background};` : ""}
-      color: ${theme.menu.light.title};
-    `}
-
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      ${variant === "alternate" ? `background: ${theme.colors.slate};` : ""}
-      color: ${theme.menu.dark.title};
-    `}
+    color: ${theme.menu[menuType].title};
+    ${variant === "alternate" ? `background: ${theme.menu[menuType].alternate};` : ""};
   `}
 `;
 StyledTitle.defaultProps = {

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

@@ -82,7 +82,7 @@ Menu.propTypes = {
   ..._propTypes2.default.layout,
 
   /** Defines the color scheme of the component */
-  menuType: _propTypes.default.oneOf(["light", "dark"]),
+  menuType: _propTypes.default.oneOf(["light", "dark", "white", "black"]),
 
   /** Children elements */
   children: _propTypes.default.node.isRequired

package/lib/components/menu/menu.context.d.ts

@@ -1,3 +1,5 @@
-declare var _default: React.Context<{}>;
+declare var _default: React.Context<{
+    menuType: string;
+}>;
 export default _default;
 import React from "react";

package/lib/components/menu/menu.context.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = /*#__PURE__*/_react.default.createContext({});
+var _default = /*#__PURE__*/_react.default.createContext({
+  menuType: "light"
+});
 
 exports.default = _default;

package/lib/components/menu/menu.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { LayoutProps, FlexBoxProps } from "../../utils/helpers/options-helper";
 
+type menuType = "light" | "dark" | "white" | "black";
 interface MenuContextProps {
-  menuType: "light" | "dark";
+  menuType: menuType;
   isFirstElement: boolean;
   handleKeyDown: (ev, submenuOpen) => void;
   isFocused: boolean;
@@ -13,7 +14,7 @@ export interface MenuProps extends LayoutProps, FlexBoxProps {
   /** Children elements */
   children: React.ReactNode;
   /** Defines the color scheme of the component */
-  menuType?: "light" | "dark";
+  menuType?: menuType;
 }
 
 declare const MenuContext: React.Context<MenuContextProps>;

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

@@ -32,12 +32,11 @@ const StyledMenuWrapper = _styledComponents.default.ul`
   menuType,
   theme
 }) => (0, _styledComponents.css)`
-      background-color: ${theme.menu.light.background};
       display: inline-block;
       vertical-align: bottom;
+      background-color: ${theme.menu[menuType].background};
 
       ${menuType === "dark" && (0, _styledComponents.css)`
-        background-color: ${theme.colors.slate};
         color: ${theme.colors.white};
       `}
     `}

package/lib/components/menu/scrollable-block/scrollable-block.component.js

@@ -38,13 +38,19 @@ const ScrollableBlock = ({
     focusIndex,
     handleKeyDown
   } = submenuContext;
+  const scrollVariants = {
+    light: "light",
+    dark: "dark",
+    white: "light",
+    black: "dark"
+  };
   return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
     variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
-    scrollVariant: menuContext.menuType,
+    scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
     p: 0
   }, _react.default.Children.map(children, (child, index) => {

package/lib/components/menu/scrollable-block/scrollable-block.style.js

@@ -24,14 +24,8 @@ const StyledScrollableBlock = _styledComponents.default.div`
   theme
 }) => (0, _styledComponents.css)`
     && ${_menuItem.default} {
-      background-color: ${variant === "default" ? theme.colors.white : theme.menu.light.background};
+      background-color: ${variant === "default" ? theme.menu[menuType].submenuBackground : theme.menu[menuType].background};
     }
-
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      && ${_menuItem.default} {
-        background-color: ${variant === "default" ? theme.menu.dark.submenuBackground : theme.colors.slate};
-      }
-    `}
   `}
 `;
 StyledScrollableBlock.defaultProps = {

package/lib/components/menu/submenu-block/submenu-block.style.js

@@ -23,13 +23,11 @@ const StyledSubmenuBlock = _styledComponents.default.div`
   theme,
   variant
 }) => (0, _styledComponents.css)`
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.menu.dark.submenuBackground};
+    background-color: ${theme.menu[menuType].submenuBackground};
 
-      ${_menuItem.default} {
-        background-color: ${variant === "default" ? "transparent" : theme.menu.dark.alternate};
-      }
-    `}
+    ${_menuItem.default} {
+      background-color: ${variant === "default" ? "transparent" : theme.menu[menuType].alternate};
+    }
   `}
 `;
 StyledSubmenuBlock.defaultProps = {

package/lib/components/navigation-bar/navigation-bar.component.js

@@ -46,7 +46,7 @@ NavigationBar.propTypes = {
   ariaLabel: _propTypes.default.string,
 
   /** Color scheme of navigation component */
-  navigationType: _propTypes.default.oneOf(["light", "dark"]),
+  navigationType: _propTypes.default.oneOf(["light", "dark", "white", "black"]),
 
   /** If 'true' the children will not be visible */
   isLoading: _propTypes.default.bool,

package/lib/components/navigation-bar/navigation-bar.d.ts

@@ -4,7 +4,7 @@ import { SpaceProps } from "styled-system";
 export interface NavigationBarProps extends SpaceProps {
   children?: React.ReactNode;
   ariaLabel?: string;
-  navigationType?: "light" | "dark";
+  navigationType?: "light" | "dark" | "white" | "black";
   isLoading?: boolean;
   stickyPosition?: "top" | "bottom";
   stickyOffset?: string;

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

@@ -62,14 +62,27 @@ const StyledNavigationBar = _styledComponents.default.nav`
   theme
 }) => (0, _styledComponents.css)`
     min-height: 40px;
-    background-color: ${theme.navigationBar.light.background};
-    border-bottom: 1px solid ${theme.navigationBar.light.borderBottom};
+
+    ${navigationType === "light" && (0, _styledComponents.css)`
+      background-color: ${theme.navigationBar.light.background};
+      border-bottom: 1px solid ${theme.navigationBar.light.borderBottom};
+    `}
 
     ${navigationType === "dark" && (0, _styledComponents.css)`
       background-color: ${theme.navigationBar.dark.background};
       border-bottom: 1px solid ${theme.navigationBar.dark.borderBottom};
       color: ${theme.colors.white};
     `}
+
+    ${navigationType === "black" && (0, _styledComponents.css)`
+      background-color: ${theme.navigationBar.black.background};
+      color: ${theme.colors.white};
+    `}
+
+    ${navigationType === "white" && (0, _styledComponents.css)`
+      background-color: ${theme.colors.white};
+      border-bottom: 1px solid ${theme.navigationBar.white.borderBottom};
+    `}
   `}
 `;
 StyledNavigationBar.defaultProps = {

package/lib/style/color-config/index.js

@@ -16,6 +16,7 @@ var _default = {
   navyBlue: "004B87",
   amethyst: "582C83",
   plum: "8246AF",
-  slate: "003349"
+  slate: "003349",
+  black: "000000"
 };
 exports.default = _default;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -77,15 +77,45 @@ declare function _default(palette: any): {
         itemColor: any;
         itemColorDisabled: any;
         light: {
+            text: string;
             background: any;
             selected: any;
             divider: any;
+            alternate: any;
             title: any;
+            submenuBackground: string;
+            searchIcon: any;
+            searchIconHover: any;
         };
         dark: {
+            text: string;
+            background: any;
             divider: any;
             submenuBackground: any;
             selected: any;
+            alternate: any;
+            title: any;
+            searchIcon: any;
+            searchIconHover: any;
+        };
+        black: {
+            text: string;
+            background: any;
+            submenuBackground: any;
+            selected: any;
+            divider: any;
+            alternate: any;
+            title: any;
+            searchIcon: any;
+            searchIconHover: any;
+        };
+        white: {
+            text: string;
+            background: string;
+            selected: any;
+            divider: any;
+            alternate: any;
+            submenuBackground: any;
             title: any;
             searchIcon: any;
             searchIconHover: any;
@@ -220,6 +250,12 @@ declare function _default(palette: any): {
             background: string;
             borderBottom: string;
         };
+        black: {
+            background: any;
+        };
+        white: {
+            borderBottom: any;
+        };
     };
     numeralDate: {
         passive: string;

package/lib/style/themes/base/base-theme.config.js

@@ -96,18 +96,48 @@ var _default = palette => {
       itemColor: palette.blackOpacity(0.9),
       itemColorDisabled: palette.blackOpacity(0.3),
       light: {
+        text: "#000000",
         background: palette.slateTint(90),
         selected: palette.slateTint(85),
         divider: palette.slateTint(80),
-        title: palette.slateTint(25)
+        alternate: palette.slateTint(90),
+        title: palette.slateTint(25),
+        submenuBackground: "#FFFFFF",
+        searchIcon: palette.slateTint(55),
+        searchIconHover: palette.slateTint(75)
       },
       dark: {
+        text: "#FFFFFF",
+        background: palette.slate,
         divider: palette.slateTint(10),
         submenuBackground: palette.slateShade(50),
         selected: palette.slateTint(10),
+        alternate: palette.slate,
+        title: palette.slateTint(60),
+        searchIcon: palette.slateTint(55),
+        searchIconHover: palette.slateTint(75)
+      },
+      black: {
+        text: "#FFFFFF",
+        background: palette.black,
+        submenuBackground: palette.black,
+        selected: palette.blackTint(15),
+        divider: palette.blackTint(15),
+        alternate: palette.blackTint(10),
         title: palette.slateTint(60),
         searchIcon: palette.slateTint(55),
         searchIconHover: palette.slateTint(75)
+      },
+      white: {
+        text: "#000000",
+        background: "#FFFFFF",
+        selected: palette.slateTint(95),
+        divider: palette.slateTint(70),
+        alternate: palette.slateTint(80),
+        submenuBackground: palette.slateTint(90),
+        title: palette.slateTint(25),
+        searchIcon: palette.slateTint(55),
+        searchIconHover: palette.slateTint(75)
       }
     },
     form: {
@@ -238,6 +268,12 @@ var _default = palette => {
       dark: {
         background: "#003349",
         borderBottom: "#003349"
+      },
+      black: {
+        background: palette.blackOpacity(1)
+      },
+      white: {
+        borderBottom: palette.slateTint(85)
       }
     },
     numeralDate: {

package/package.json

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