carbon-react 128.4.1 → 130.0.0

package/esm/components/search/search.style.js

@@ -11,47 +11,40 @@ const StyledSearch = styled.div`
   isFocused,
   searchWidth,
   maxWidth,
-  searchIsActive,
   searchHasValue,
   showSearchButton,
   theme,
   variant
 }) => {
   const darkVariant = variant === "dark";
-  const variantColor = darkVariant ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor300)";
-  const iconColor = darkVariant && (searchHasValue && isFocused || !searchHasValue && isFocused || !isFocused && searchHasValue && showSearchButton);
+  const variantColor = darkVariant ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityMajor300)";
   return css`
       ${margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
       max-width: ${maxWidth ? `${maxWidth}` : "100%"};
-      padding-bottom: 2px;
+      padding-bottom: var(--spacing025);
       background-color: transparent;
-      border-bottom: 2px solid ${variantColor};
       display: inline-flex;
-      font-size: 14px;
+      font-size: var(--fontSize100);
       font-weight: 700;
-      :hover {
-        border-bottom-color: ${darkVariant ? "var(--colorsUtilityMajor100)" : "var(--colorsUtilityMajor400)"};
-        cursor: pointer;
-      }
-      ${(isFocused || searchHasValue) && css`
-        border-color: transparent;
-        transition: background 0.2s ease;
-        :hover {
-          border-color: transparent;
-        }
-      `}
-      ${isFocused && !searchIsActive && css`
-        border-color: transparent;
-      `}
-      ${!isFocused && searchHasValue && !showSearchButton && css`
-        border-bottom: 2px solid ${variantColor};
+
+      ${!showSearchButton && css`
+        border-bottom: var(--spacing025) solid ${variantColor};
+
         :hover {
-          border-bottom-color: var(--colorsUtilityMajor400);
+          border-bottom-color: ${darkVariant ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajor400)"};
           cursor: pointer;
         }
-      `}
 
+        ${(searchHasValue || isFocused) && css`
+          border-bottom-color: transparent;
+
+          :hover {
+            border-bottom-color: transparent;
+            cursor: default;
+          }
+        `}
+      `}
 
       ${StyledInput} {
         ::-moz-placeholder {
@@ -62,23 +55,50 @@ const StyledSearch = styled.div`
           color: var(--colorsUtilityYin055);
         }
 
-        ${darkVariant && !isFocused && css`
+        ${darkVariant && css`
           ::-moz-placeholder {
-            color: var(--colorsUtilityMajor200);
+            color: var(--colorsUtilityYang080);
             opacity: 1;
           }
           ::placeholder {
-            color: var(--colorsUtilityMajor200);
+            color: var(--colorsUtilityYang080);
           }
         `}
 
-        ${darkVariant && !isFocused && searchHasValue && !showSearchButton && css`
+        ${darkVariant && searchHasValue && !showSearchButton && css`
           color: var(--colorsUtilityYang100);
         `}
       }
 
       ${StyledInputPresentation} {
-        background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
+        [data-element="search"] {
+          height: auto;
+
+          ${!darkVariant && css`
+            color: var(--colorsUtilityYin065);
+
+            :hover {
+              color: var(--colorsUtilityYin100);
+            }
+          `}
+
+          ${darkVariant && css`
+            color: var(--colorsUtilityYang080);
+
+            :hover {
+              color: var(--colorsUtilityYang100);
+            }
+          `}
+        }
+
+        ${darkVariant && !showSearchButton && css`
+          background-color: transparent;
+          border-color: var(--colorsUtilityYang080);
+        `}
+
+        ${!darkVariant && css`
+          background-color: ${searchHasValue || isFocused || showSearchButton ? "var(--colorsUtilityYang100)" : "transparent"};
+        `}
 
         ${showSearchButton && css`
           border-top-right-radius: var(--borderRadius000);
@@ -86,16 +106,17 @@ const StyledSearch = styled.div`
         `}
 
         flex: 1;
-        font-size: 14px;
+        font-size: var(--fontSize100);
         font-weight: 700;
-        padding-bottom: 2px;
+        padding-bottom: var(--spacing025);
         padding-top: 1px;
         cursor: pointer;
-        ${!isFocused && !searchHasValue && css`
+
+        ${!isFocused && !searchHasValue && !showSearchButton && css`
           border: 1px solid transparent;
         `}
+
         ${!isFocused && searchHasValue && !showSearchButton && css`
-          border: 1px solid transparent;
           background-color: ${darkVariant ? "transparent" : "var(--colorsUtilityYang100)"};
         `}
       }
@@ -104,34 +125,25 @@ const StyledSearch = styled.div`
         flex: 1;
         z-index: ${theme.zIndex.smallOverlay};
       }
+
       ${StyledIcon} {
-        ${darkVariant && css`
-          ${iconColor && css`
-            color: var(--colorsUtilityMajor400);
+        :not([data-element="search"]) {
+          ${darkVariant && !showSearchButton && css`
+            color: var(--colorsUtilityYang080);
 
             :hover {
-              color: var(--colorsUtilityMajor500);
+              color: var(--colorsUtilityYang100);
             }
           `}
-          ${!iconColor && css`
-            color: var(--colorsUtilityMajor200);
+
+          ${!darkVariant && css`
+            color: var(--colorsActionMinor500);
 
             :hover {
-              color: var(--colorsUtilityMajor100);
+              color: var(--colorsActionMinor600);
             }
           `}
-        `}
-
-        ${!darkVariant && css`
-          color: var(--colorsActionMinor500);
-
-          :hover {
-            color: var(--colorsActionMinor600);
-          }
-        `}
-
-        width: 20px;
-        height: 20px;
+        }
         cursor: pointer;
       }
 

package/esm/locales/__internal__/es-es.js

@@ -137,6 +137,9 @@ const esES = {
   pod: {
     undo: () => "Deshacer"
   },
+  search: {
+    searchButtonText: () => "Buscar"
+  },
   select: {
     actionButtonText: () => "Añadir un nuevo elemento",
     placeholder: () => "Por favor seleccione...",
@@ -147,6 +150,9 @@ const esES = {
       close: () => "Cerrar"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Ordenar todo ${sortContent || "contenido"}${sortType ? ` en orden ${sortType === "ascending" ? "ascendente" : "descendente"}.` : " en orden ascendente o descendente."}`
+  },
   splitButton: {
     ariaLabel: () => "Mostrar más"
   },

package/esm/locales/en-gb.js

@@ -139,6 +139,9 @@ const enGB = {
   pod: {
     undo: () => "Undo"
   },
+  search: {
+    searchButtonText: () => "Search"
+  },
   select: {
     actionButtonText: () => "Add New Item",
     placeholder: () => "Please Select...",
@@ -149,6 +152,9 @@ const enGB = {
       close: () => "Close"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Sort all ${sortContent || "contents"}${sortType ? ` in an ${sortType} order.` : " in an ascending or descending order."}`
+  },
   splitButton: {
     ariaLabel: () => "Show more"
   },

package/esm/locales/locale.d.ts

@@ -114,6 +114,9 @@ interface Locale {
     pod: {
         undo: () => string;
     };
+    search: {
+        searchButtonText: () => string;
+    };
     select: {
         actionButtonText: () => string;
         placeholder: () => string;
@@ -124,18 +127,21 @@ interface Locale {
             close: () => string;
         };
     };
+    sort: {
+        accessibleName: (sortContent?: string, sortType?: "ascending" | "descending") => string;
+    };
     splitButton: {
         ariaLabel: () => string;
     };
-    switch: {
-        on: () => string;
-        off: () => string;
-    };
     stepFlow: {
         stepLabel: (currentStep: number, totalSteps: number) => string;
         screenReaderOnlyTitle: (title: string, currentStep: number, totalSteps: number, category?: string) => string;
         closeIconAriaLabel?: () => string;
     };
+    switch: {
+        on: () => string;
+        off: () => string;
+    };
     textEditor: {
         tooltipMessages: {
             bold: () => string;

package/lib/components/flat-table/sort/sort.component.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 export interface SortProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-    sortType?: "ascending" | "descending" | false;
-    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    sortType?: "ascending" | "descending";
+    /** Callback fired when the component is clicked */
     onClick?: () => void;
-    /** Sets the content of `FlatTableSortHeader` */
-    children?: React.ReactNode;
+    /** Sets the text content of the component */
+    children?: string;
+    /** Sets the accessible name of the component */
+    accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
 export default Sort;

package/lib/components/flat-table/sort/sort.component.js

@@ -7,8 +7,10 @@ exports.default = exports.Sort = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _typography = _interopRequireDefault(require("../../typography"));
 var _sort = require("./sort.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 var _flatTable = require("../flat-table.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -16,9 +18,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Sort = ({
   children,
   onClick,
-  sortType
+  sortType,
+  accessibleName
 }) => {
   const id = (0, _react.useRef)((0, _guid.default)());
+  const locale = (0, _useLocale.default)();
   const onKeyDown = e => {
     if (_events.default.isEnterOrSpaceKey(e)) {
       e.preventDefault();
@@ -29,10 +33,10 @@ const Sort = ({
   const {
     colorTheme
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    hidden: true,
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    screenReaderOnly: true,
     id: id.current
-  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
+  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,

package/lib/components/link/link.style.js

@@ -64,14 +64,14 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
       ${isSkipLink && (0, _styledComponents.css)`
         a {
           position: absolute;
-          padding-left: 24px;
-          padding-right: 24px;
+          padding-left: var(--spacing300);
+          padding-right: var(--spacing300);
           line-height: 36px;
           left: -999em;
           z-index: ${theme.zIndex.aboveAll};
-          box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
-          border: 2px solid var(--colorsUtilityYang100);
-          font-size: 16px;
+          box-shadow: inset 0 0 0 var(--spacing025) var(--colorsActionMajor500);
+          border: var(--spacing025) solid var(--colorsUtilityYang100);
+          font-size: var(--fontSizes200);
           color: var(--colorsUtilityYin090);
 
           &:hover {
@@ -89,15 +89,15 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
         }
 
         a:focus {
-          top: 8px;
-          left: 8px;
+          top: var(--spacing100);
+          left: var(--spacing100);
         }
       `}
 
       ${!isSkipLink && (0, _styledComponents.css)`
-        a,
-        button {
-          font-size: 14px;
+        > a,
+        > button {
+          font-size: var(--fontSizes100);
 
           ${!disabled && (0, _styledComponents.css)`
             color: ${color};
@@ -108,7 +108,7 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
             &:hover {
               color: ${hoverColor};
 
-              ${_icon.default} {
+              > ${_icon.default} {
                 color: ${hoverColor};
               }
             }
@@ -129,8 +129,8 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
         }
       `}
 
-      a,
-      button {
+      > a,
+      > button {
         text-decoration: ${hasContent ? "underline" : "none"};
         ${isMenuItem && "display: inline-block;"}
 
@@ -169,20 +169,20 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
       }
 
       ${!isSkipLink && !disabled && !theme.focusRedesignOptOut && hasFocus && (0, _styledComponents.css)`
-        a,
-        button {
+        > a,
+        > button {
           outline: none;
           text-decoration: none;
           border-bottom-left-radius: var(--borderRadius000);
           border-bottom-right-radius: var(--borderRadius000);
         }
         max-width: fit-content;
-        box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
+        box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
         border-bottom-left-radius: var(--borderRadius025);
         border-bottom-right-radius: var(--borderRadius025);
       `}
 
-      button {
+      > button {
         background-color: transparent;
         border: none;
         padding: 0;

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

@@ -9,7 +9,7 @@ var _themes = require("../../../../style/themes");
 var _link = require("../../../link/link.style");
 var _menu = require("../../menu.style");
 var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
-var _search = _interopRequireDefault(require("../../../search/search.style"));
+var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 var _menu2 = _interopRequireDefault(require("../../menu.config"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -103,17 +103,17 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
       ${!inFullscreenView && menuType && (0, _styledComponents.css)`
         background-color: ${_menu2.default[menuType].submenuItemBackground};
 
-        a:focus,
-        button:focus {
+        > a:focus,
+        > button:focus {
           background-color: ${_menu2.default[menuType].submenuItemBackground};
         }
 
-        a:hover,
-        button:hover {
+        > a:hover,
+        > button:hover {
           background-color: transparent;
           color: var(--colorsComponentsMenuYang100);
 
-          [data-component="icon"] {
+          > [data-component="icon"] {
             color: var(--colorsComponentsMenuYang100);
           }
         }
@@ -123,17 +123,26 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
         text-decoration: none;
       }
 
-      ${_search.default} span > [data-component="icon"] {
-        color: var(--colorsUtilityMajor200);
+      > ${_icon.default} {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+      }
+    }
 
-        &:hover {
-          color: var(--colorsUtilityMajor150);
-        }
+    [data-component="icon"] {
+      line-height: 20px;
+
+      &:before {
+        line-height: unset;
       }
 
-      ${_search.default} {
-        :hover {
-          border-bottom-color: var(--colorsUtilityMajor150);
+      span {
+        vertical-align: middle;
+
+        svg {
+          height: 16px;
+          width: 16px;
         }
       }
     }

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

@@ -43,22 +43,6 @@ const MenuFullscreen = ({
   const isDarkVariant = ["dark", "black"].includes(menuType);
   const transitionDuration = 200;
   const locale = (0, _useLocale.default)();
-
-  // TODO: Remove this temporary event handler as part of FE-6078
-  const handleFocusedSearchButton = ev => {
-    const search = modalRef.current?.querySelector('[data-component="search"]');
-    const searchInput = search?.querySelector("input");
-    const searchButton = search?.querySelector("button");
-
-    // if there is no value in the search input the button disappears when the input blurs
-    // this means we need to programmatically set focus to the next menu item
-    if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
-      ev.preventDefault();
-      const elements = Array.from(modalRef.current?.querySelectorAll("a, input, button"));
-      const index = elements.indexOf(searchInput);
-      elements[index + 2]?.focus();
-    }
-  };
   const flattenedChildren = _react.default.Children.toArray(children);
   const childArray = _react.default.Children.toArray(flattenedChildren.map((child, index) => {
     if (index < flattenedChildren.length - 1) {
@@ -97,7 +81,6 @@ const MenuFullscreen = ({
     "data-element": dataElement,
     "data-role": dataRole,
     menuType: menuType,
-    onKeyDown: ev => _events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && handleFocusedSearchButton(ev),
     ref: modalRef,
     role: "dialog",
     tabIndex: -1

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

@@ -13,6 +13,7 @@ var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _button = _interopRequireDefault(require("../../button/button.style"));
 var _menu = _interopRequireDefault(require("../menu.config"));
 var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+var _link = require("../../link/link.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -63,10 +64,16 @@ const StyledMenuModal = exports.StyledMenuModal = _styledComponents.default.div`
   width: 100vw;
   outline: none;
 
-  a,
-  button,
-  div {
-    font-size: 16px;
+  && {
+    ${_link.StyledLink} {
+      max-width: 100vw;
+    }
+
+    ${_link.StyledLink} > a,
+    ${_link.StyledLink} > button,
+    > div {
+      font-size: var(--fontSizes200);
+    }
   }
 
   ${({
@@ -76,30 +83,9 @@ const StyledMenuModal = exports.StyledMenuModal = _styledComponents.default.div`
     background-color: ${_menu.default[menuType].background};
 
     && {
-      ${menuType === "dark" && (0, _styledComponents.css)`
-        ${_search.default} span > [data-component="icon"] {
-          color: var(--colorsUtilityMajor200);
-
-          &:hover {
-            color: var(--colorsUtilityMajor150);
-          }
-        }
-      `}
-
-      ${menuType === "light" && (0, _styledComponents.css)`
-        ${_search.default} span > [data-component="icon"] {
-          color: var(--colorsUtilityMajor200);
-
-          &:hover {
-            color: var(--colorsUtilityMajor400);
-          }
-        }
-      `}
-
-    ${_search.default} {
+      ${_search.default} {
         ${_icon.default} {
           display: inline-flex;
-          margin-right: 0;
           bottom: auto;
         }
 

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

@@ -64,8 +64,6 @@ const MenuItem = ({
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
   const inputRef = (0, _react.useRef)(null);
-  const inputIcon = (0, _react.useRef)(null);
-  inputIcon.current = ref.current ? ref.current.querySelector("[data-element='input-icon-toggle']") : null;
   inputRef.current = ref.current ? ref.current.querySelector("[data-element='input']") : null;
   const focusRef = inputRef.current ? inputRef : ref;
   (0, _react.useEffect)(() => {
@@ -80,18 +78,19 @@ const MenuItem = ({
     };
   }, [registerItem, unregisterItem]);
   (0, _react.useEffect)(() => {
+    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
     if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
       /* istanbul ignore else */
       if (focusRef.current) {
         focusRef.current?.focus();
       }
-    } else if (focusFromSubmenu && !(shiftTabPressed && inputIcon.current?.getAttribute("tabindex") === "0")) {
+    } else if (focusFromSubmenu && !(shiftTabPressed && inputIcon?.getAttribute("tabindex") === "0")) {
       /* istanbul ignore else */
       if (focusRef.current) {
         focusRef.current?.focus();
       }
     }
-  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, inputIcon, shiftTabPressed, focusRef]);
+  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, shiftTabPressed, focusRef]);
   const updateFocusOnClick = (0, _react.useCallback)(() => {
     if (updateSubmenuFocusId) {
       updateSubmenuFocusId(menuItemId.current);
@@ -104,16 +103,17 @@ const MenuItem = ({
     if (ref.current && _events.default.isEscKey(event)) {
       ref.current?.focus();
     }
-    const shouldFocusIcon = inputIcon.current?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
+    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
+    const shouldFocusIcon = inputIcon?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
 
     // let natural tab order move focus if input icon is tabbable or input with button exists
-    if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon.current)) {
+    if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon)) {
       return;
     }
     if (handleSubmenuKeyDown) {
       handleSubmenuKeyDown(event);
     }
-  }, [onKeyDown, handleSubmenuKeyDown, inputIcon]);
+  }, [onKeyDown, handleSubmenuKeyDown]);
   const elementProps = {
     className: href || onClick ? "carbon-menu-item--has-link" : "",
     href,

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

@@ -158,9 +158,11 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
         ${!hasInput && `color: ${_menu.default[menuType].color};`}
       }
 
-      ${_icon.default} {
-        display: inline-block;
-      }
+      ${!inFullscreenView && (0, _styledComponents.css)`
+          a > ${_icon.default}, button > ${_icon.default} {
+            display: inline-block;
+          }
+        `}
     }
 
     ${selected && (0, _styledComponents.css)`
@@ -322,10 +324,10 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       }
 
       && {
-        a:focus,
-        a:hover,
-        button:focus,
-        button:hover {
+        > a:focus,
+        > a:hover,
+        > button:focus,
+        > button:hover {
           background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
 

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

@@ -10,6 +10,7 @@ var _menu = _interopRequireDefault(require("./menu.config"));
 var _verticalDivider = require("../vertical-divider/vertical-divider.style");
 var _link = require("../link/link.style");
 var _themes = require("../../style/themes");
+var _menuItem = _interopRequireDefault(require("./menu-item/menu-item.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -75,7 +76,9 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.li`
       }
     `}
 
-  ${_styledSystem.padding}
+  ${_menuItem.default} {
+    ${_styledSystem.padding}
+  }
 `;
 StyledMenuItem.defaultProps = {
   theme: _themes.baseTheme