carbon-react 138.0.1 → 138.1.0

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

@@ -46,11 +46,14 @@ const MenuFullscreen = ({
   const flattenedChildren = _react.default.Children.toArray(children);
   const childArray = _react.default.Children.toArray(flattenedChildren.map((child, index) => {
     if (index < flattenedChildren.length - 1) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, /*#__PURE__*/_react.default.createElement(_menuDivider.default, null));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, /*#__PURE__*/_react.default.createElement(_menuDivider.default, {
+        "data-role": "divider"
+      }));
     }
     return child;
   }));
   const closeModal = (0, _react.useCallback)(ev => {
+    /* istanbul ignore else */
     if (onClose && _events.default.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onClose(ev);

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

@@ -69,10 +69,13 @@ const MenuItem = ({
   const focusRef = inputRef.current ? inputRef : ref;
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
+
+    /* istanbul ignore else */
     if (registerItem) {
       registerItem(id);
     }
     return () => {
+      /* istanbul ignore else */
       if (unregisterItem) {
         unregisterItem(id);
       }
@@ -174,7 +177,8 @@ const MenuItem = ({
     onClick: updateFocusOnClick,
     as: as
   }), /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({
-    menuType: menuType
+    menuType: menuType,
+    "data-role": "menu-item-wrapper"
   }, elementProps, {
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,

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

@@ -31,7 +31,9 @@ const MenuSegmentTitle = /*#__PURE__*/_react.default.forwardRef(({
     menuType: menuContext.menuType,
     ref: ref,
     variant: variant
-  }), text), children && /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledSegmentChildren, null, children));
+  }), text), children && /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledSegmentChildren, {
+    "data-role": "menu-segment-children"
+  }, children));
 });
 if (process.env.NODE_ENV !== "production") {
   MenuSegmentTitle.propTypes = {

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

@@ -40,7 +40,8 @@ const ScrollableBlock = ({
     overrideColor: true,
     variant: parentVariant,
     p: "2px 16px",
-    as: "div"
+    as: "div",
+    "data-role": "scrollable-block-parent-menu-item"
   }, parent), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuType],

package/lib/components/pill/pill.style.js

@@ -15,15 +15,6 @@ var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color
 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 && {}.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; }
-function addStyleToPillIcon(fontSize) {
-  return `
-    ${_icon.default} {
-      &:before {
-        font-size: ${fontSize};
-      }
-    }
-  `;
-}
 const StyledPill = _styledComponents.default.span`
   ${_styledSystem.margin}
   ${({
@@ -79,13 +70,16 @@ const StyledPill = _styledComponents.default.span`
         border-radius: var(--borderRadius025);
       `}
       height: auto;
+
       ${!wrapText && (0, _styledComponents.css)`
         white-space: nowrap;
       `}
+
       ${wrapText && (0, _styledComponents.css)`
         white-space: break-spaces;
         hyphens: auto;
       `}
+
       color: ${contentColor};
 
       ${inFill && (0, _styledComponents.css)`
@@ -100,13 +94,10 @@ const StyledPill = _styledComponents.default.span`
         min-height: 16px;
         line-height: 16px;
         font-size: 12px;
+        padding: 0 8px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
           border-radius: 12px;
-
-          button {
-            border-radius: 0 10px 10px 0;
-          }
         `}
       `}
 
@@ -114,13 +105,10 @@ const StyledPill = _styledComponents.default.span`
         min-height: 20px;
         line-height: 20px;
         font-size: 14px;
+        padding: 0 8px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
           border-radius: 12px;
-
-          button {
-            border-radius: 0 10px 10px 0;
-          }
         `}
       `}
 
@@ -128,13 +116,10 @@ const StyledPill = _styledComponents.default.span`
         min-height: 24px;
         line-height: 24px;
         font-size: 14px;
+        padding: 0 8px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
           border-radius: 13px;
-
-          button {
-            border-radius: 0 11px 11px 0;
-          }
         `}
       `}
 
@@ -142,13 +127,10 @@ const StyledPill = _styledComponents.default.span`
         min-height: 28px;
         line-height: 28px;
         font-size: 16px;
+        padding: 0 12px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
           border-radius: 15px;
-
-          button {
-            border-radius: 0 12px 12px 0;
-          }
         `}
       `}
 
@@ -181,12 +163,10 @@ const StyledPill = _styledComponents.default.span`
                 var(--borderRadius025) var(--borderRadius000);
             `}
 
-            & {
-              color: ${contentColor};
-            }
             ::-moz-focus-inner {
               border: 0;
             }
+
             ${_icon.default} {
               color: ${contentColor};
             }
@@ -196,6 +176,7 @@ const StyledPill = _styledComponents.default.span`
             background-color: ${buttonFocusColor};
             color: ${contentColor};
             cursor: pointer;
+
             ${_icon.default} {
               color: ${contentColor};
             }
@@ -206,17 +187,10 @@ const StyledPill = _styledComponents.default.span`
             width: unset;
             color: ${contentColor};
 
-            &:hover,
-            &:focus {
-              color: ${contentColor};
-            }
-          }
-
-          ${!inFill && (0, _styledComponents.css)`
-            ${_icon.default} {
+            ${!inFill && (0, _styledComponents.css)`
               color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
-            }
-          `}
+            `}
+          }
         }
 
         ${size === "S" && (0, _styledComponents.css)`
@@ -225,8 +199,17 @@ const StyledPill = _styledComponents.default.span`
           button {
             padding: 0;
             line-height: 16px;
-            top: -2px;
-            ${addStyleToPillIcon("16px")}
+
+            ${_icon.default} {
+              top: -2px;
+              &:before {
+                font-size: 16px;
+              }
+            }
+
+            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+              border-radius: 0 10px 10px 0;
+            `}
           }
         `}
 
@@ -237,6 +220,10 @@ const StyledPill = _styledComponents.default.span`
             width: 24px;
             padding: 0;
             line-height: 15px;
+
+            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+              border-radius: 0 10px 10px 0;
+            `}
           }
         `}
 
@@ -247,6 +234,10 @@ const StyledPill = _styledComponents.default.span`
             width: 28px;
             padding: 0;
             line-height: 16px;
+
+            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+              border-radius: 0 11px 11px 0;
+            `}
           }
         `}
 
@@ -257,43 +248,10 @@ const StyledPill = _styledComponents.default.span`
             width: 32px;
             padding: 0;
             line-height: 18px;
-          }
-        `}
-      `}
-
-      ${!isDeletable && (0, _styledComponents.css)`
-        ${size === "S" && (0, _styledComponents.css)`
-          padding: 0 8px;
-
-          button {
-            padding: 0;
-          }
-        `}
 
-        ${size === "M" && (0, _styledComponents.css)`
-          padding: 0 8px;
-
-          button {
-            width: 24px;
-            padding: 0;
-          }
-        `}
-
-        ${size === "L" && (0, _styledComponents.css)`
-          padding: 0 8px;
-
-          button {
-            width: 28px;
-            padding: 0;
-          }
-        `}
-
-        ${size === "XL" && (0, _styledComponents.css)`
-          padding: 0 12px;
-
-          button {
-            width: 32px;
-            padding: 0;
+            ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
+              border-radius: 0 12px 12px 0;
+            `}
           }
         `}
       `}

package/package.json

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

package/esm/components/menu/__internal__/spec-helper/index.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper } from "enzyme";
-declare const openSubmenu: (wrapper: ReactWrapper, index?: number) => void;
-export default openSubmenu;

package/esm/components/menu/__internal__/spec-helper/index.js

@@ -1,19 +0,0 @@
-import { act } from "react-dom/test-utils";
-import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
-import { StyledSubmenuWrapper } from "../submenu/submenu.style";
-const events = {
-  space: {
-    key: " ",
-    preventDefault: jest.fn()
-  }
-};
-const openSubmenu = (wrapper, index = 0) => {
-  const menuWrapper = wrapper.find(StyledSubmenuWrapper).at(index);
-  const menuItem = menuWrapper.exists("a") ? menuWrapper.find("a") : menuWrapper.find("button");
-  menuItem.getDOMNode().focus();
-  act(() => {
-    menuWrapper.find(StyledMenuItemWrapper).props().onKeyDown(events.space);
-  });
-  wrapper.update();
-};
-export default openSubmenu;

package/lib/components/menu/__internal__/spec-helper/index.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper } from "enzyme";
-declare const openSubmenu: (wrapper: ReactWrapper, index?: number) => void;
-export default openSubmenu;

package/lib/components/menu/__internal__/spec-helper/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _testUtils = require("react-dom/test-utils");
-var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
-var _submenu = require("../submenu/submenu.style");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const events = {
-  space: {
-    key: " ",
-    preventDefault: jest.fn()
-  }
-};
-const openSubmenu = (wrapper, index = 0) => {
-  const menuWrapper = wrapper.find(_submenu.StyledSubmenuWrapper).at(index);
-  const menuItem = menuWrapper.exists("a") ? menuWrapper.find("a") : menuWrapper.find("button");
-  menuItem.getDOMNode().focus();
-  (0, _testUtils.act)(() => {
-    menuWrapper.find(_menuItem.default).props().onKeyDown(events.space);
-  });
-  wrapper.update();
-};
-var _default = exports.default = openSubmenu;

package/lib/components/menu/__internal__/spec-helper/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../../esm/components/menu/__internal__/spec-helper/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}