carbon-react 144.20.1 → 144.21.0

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

@@ -1,13 +1,13 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
-import StyledButton from "../../button/button.style";
-import { StyledContent, StyledLink } from "../../link/link.style";
-import StyledIcon from "../../icon/icon.style";
-import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
 import Link from "../../link";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
+import StyledButton from "../../button/button.style";
+import StyledIconButton from "../../icon-button/icon-button.style";
+import StyledIcon from "../../icon/icon.style";
+import { StyledContent, StyledLink } from "../../link/link.style";
 import { baseTheme } from "../../../style/themes";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
 const BASE_SPACING = 16;
 const parsePadding = props => {
   const {
@@ -121,16 +121,6 @@ const StyledMenuItemWrapper = styled.a.attrs({
       `}
     }
 
-    ${!maxWidth && css`
-      a:has([data-component="icon"]):not(:has(button))
-        ${StyledContent},
-        button:has([data-component="icon"]):not(:has(button))
-        ${StyledContent} {
-        position: relative;
-        top: -1px;
-      }
-    `}
-
     :has([data-element="input"]) ${StyledContent} {
       width: 100%;
     }
@@ -209,7 +199,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
             > a:has(${StyledButton}:not(.search-button)) {
              height: 100%;
-             
+
              ${StyledContent} {
                 height: inherit;
 
@@ -445,7 +435,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         `}
 
-      
+
       > a, > button {
        min-height: 40px;
        line-height: 40px;

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _menu = _interopRequireDefault(require("../menu.config"));
+var _link = _interopRequireDefault(require("../../link"));
 var _button = _interopRequireDefault(require("../../button/button.style"));
-var _link = require("../../link/link.style");
-var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
-var _menu = _interopRequireDefault(require("../menu.config"));
-var _link2 = _interopRequireDefault(require("../../link"));
-var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+var _link2 = require("../../link/link.style");
 var _themes = require("../../../style/themes");
+var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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; }
@@ -87,7 +87,7 @@ const oldFocusStyling = `
   box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
 `;
 const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
-  as: _link2.default
+  as: _link.default
 })`
   ${({
   menuType,
@@ -130,17 +130,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       `}
     }
 
-    ${!maxWidth && (0, _styledComponents.css)`
-      a:has([data-component="icon"]):not(:has(button))
-        ${_link.StyledContent},
-        button:has([data-component="icon"]):not(:has(button))
-        ${_link.StyledContent} {
-        position: relative;
-        top: -1px;
-      }
-    `}
-
-    :has([data-element="input"]) ${_link.StyledContent} {
+    :has([data-element="input"]) ${_link2.StyledContent} {
       width: 100%;
     }
 
@@ -218,8 +208,8 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
             > a:has(${_button.default}:not(.search-button)) {
              height: 100%;
-             
-             ${_link.StyledContent} {
+
+             ${_link2.StyledContent} {
                 height: inherit;
 
                 div {
@@ -252,25 +242,25 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       ` : `
         ${hasSubmenu || maxWidth && !inFullscreenView ? `
               a,
-              ${_link.StyledLink} a,
+              ${_link2.StyledLink} a,
               button,
-              ${_link.StyledLink} button {
+              ${_link2.StyledLink} button {
                 padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
               }
             ` : `
               a,
-              ${_link.StyledLink} a,
+              ${_link2.StyledLink} a,
               button,
-              ${_link.StyledLink} button {
+              ${_link2.StyledLink} button {
                 padding: ${!inFullscreenView ? "11px" : "0px"} 16px;
               }
             `}
       `}
 
     button,
-    ${_link.StyledLink} button,
+    ${_link2.StyledLink} button,
     a,
-    ${_link.StyledLink} a {
+    ${_link2.StyledLink} a {
       margin: 0px;
       text-align: left;
 
@@ -288,9 +278,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       a,
       button,
       [data-component="icon"],
-      ${_link.StyledLink} a,
-      ${_link.StyledLink} button,
-      ${_link.StyledLink} [data-component="icon"] {
+      ${_link2.StyledLink} a,
+      ${_link2.StyledLink} button,
+      ${_link2.StyledLink} [data-component="icon"] {
         font-weight: 500;
         text-decoration: none;
         ${!hasInput && `color: ${_menu.default[menuType].color};`}
@@ -454,16 +444,16 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
           }
         `}
 
-      
+
       > a, > button {
        min-height: 40px;
        line-height: 40px;
       }
 
       a,
-      ${_link.StyledLink} a,
+      ${_link2.StyledLink} a,
       button,
-      ${_link.StyledLink} button {
+      ${_link2.StyledLink} button {
         width: 100vw;
         box-sizing: border-box;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.20.1",
+  "version": "144.21.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",