@carbon/ibm-products 1.25.1 → 2.0.0-rc.0

package/lib/components/OptionsTile/OptionsTile.js

@@ -29,7 +29,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -194,15 +194,15 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var summaryClasses = ["".concat(blockClass, "__summary")];
 
     if (invalid) {
-      Icon = _iconsReact.WarningFilled16;
+      Icon = _iconsReact.WarningFilled;
       text = invalidText;
       summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
-      Icon = _iconsReact.WarningAltFilled16;
+      Icon = _iconsReact.WarningAltFilled;
       text = warnText;
       summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
-      Icon = _iconsReact.Locked16;
+      Icon = _iconsReact.Locked;
       summaryClasses.push("".concat(blockClass, "__summary--locked"));
 
       if (!text) {
@@ -225,7 +225,9 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }, title), text && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(summaryClasses),
       "aria-hidden": summaryHidden
-    }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
+    }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+      size: 16
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
   }
@@ -237,7 +239,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), enabled !== undefined && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__toggle-container")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     id: "".concat(id, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
@@ -246,21 +248,25 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     "aria-labelledby": titleId,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked
+    disabled: isLocked,
+    labelText: title
   })), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
     open: isOpen,
     ref: detailsRef
   }, /*#__PURE__*/_react.default.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, {
+    size: 16,
     className: "".concat(blockClass, "__chevron")
   }), renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
   }, isLocked && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked16, null), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked, {
+    size: 16
+  }), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__static-content")
   }, renderTitle()));
 }); // Return a placeholder if not released and not enabled by feature flag

package/lib/components/PageHeader/PageHeader.js

@@ -27,7 +27,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactResizeDetector = require("react-resize-detector");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _hooks = require("../../global/js/hooks");
 
@@ -340,7 +340,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var result = withoutBackground ? 0 : 1;
 
     if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
-      var startAddingAt = parseFloat(_layout.layout05, 10) * parseInt(_layout.baseFontSize);
+      var startAddingAt = parseFloat(_layout.spacing10, 10) * parseInt(_layout.baseFontSize);
       var scrollRemaining = metrics.headerHeight - scrollYValue;
       /* don't know how to test resize */
 
@@ -396,17 +396,17 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
     style: pageHeaderStyles,
     ref: headerRef
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
     narrow: narrowGrid,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "--width--xl"), fullWidthGrid === 'xl'))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__non-navigation-row-content")
-  }, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  }, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--container")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-column"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
   }, breadcrumbs || breadcrumbItemForTitle ? /*#__PURE__*/_react.default.createElement(_BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
     className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb"),
@@ -414,7 +414,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
 
-  }) : null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }) : null), /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
@@ -429,31 +429,31 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar"),
     onWidthChange: handleActionBarWidthChange,
     rightAlign: true
-  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow), _cx4))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__title-column")
   }, title ? /*#__PURE__*/_react.default.createElement(_PageHeaderTitle.PageHeaderTitle, {
     blockClass: _PageHeaderUtils.blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: "".concat(_PageHeaderUtils.blockClass, "__subtitle-row")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  }, subtitle)) : null, children ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: "".concat(_PageHeaderUtils.blockClass, "__available-row")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__available-column")
   }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__last-row-buffer"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__last-row-buffer--active"), lastRowBufferActive)])
   }), // this navigation row scrolls under the breadcrumb if there is one
-  tags && !navigation ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  tags && !navigation ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-tags"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
   }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
-    overflowAlign: "start",
+    overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
@@ -461,21 +461,21 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
   }))) : null), // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
-  navigation ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  navigation ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (_cx7 = {}, (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags), _cx7))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__navigation-tabs")
-  }, navigation), tags ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, navigation), tags ? /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-tags"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
   }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
-    overflowAlign: "end",
+    overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_react2.Button, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
     hasIconOnly: true,
     iconDescription:
@@ -483,8 +483,12 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
     kind: "ghost",
     onClick: handleCollapseToggle,
-    renderIcon: _iconsReact.ChevronUp16,
-    size: "field",
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    size: "md",
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
@@ -494,7 +498,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     if (pageActions) {
       var _pageActions$content;
 
-      var _Tag = isBreadcrumbRow ? 'div' : _carbonComponentsReact.Column; // Only report size change of version action bar is rendered as part of the breadcrumb row.
+      var _Tag = isBreadcrumbRow ? 'div' : _react2.Column; // Only report size change of version action bar is rendered as part of the breadcrumb row.
       // and when there is an actionBar
 
 
@@ -553,10 +557,10 @@ PageHeader.propTypes = _objectSpread({
    * Each item is specified as an object with the properties of a Carbon Button in icon only form.
    * Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
    */
-  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
     iconDescription: _propTypes.default.string.isRequired,
-    onClick: _carbonComponentsReact.Button.propTypes.onClick,
-    renderIcon: _carbonComponentsReact.Button.propTypes.renderIcon.isRequired
+    onClick: _react2.Button.propTypes.onClick,
+    renderIcon: _react2.Button.propTypes.renderIcon.isRequired
   }))),
 
   /**
@@ -746,9 +750,9 @@ PageHeader.propTypes = _objectSpread({
    * - maxWidth: maximum number of pixels the content will grow to
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  pageActions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  pageActions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     key: _propTypes.default.string.isRequired,
-    kind: _carbonComponentsReact.Button.propTypes.kind,
+    kind: _react2.Button.propTypes.kind,
     label: _propTypes.default.node,
     onClick: _propTypes.default.func
   }))), _propTypes.default.shape({
@@ -804,7 +808,7 @@ PageHeader.propTypes = _objectSpread({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Tag.propTypes, 'filter')), {}, {
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
     label: _propTypes.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: _propTypes.default.oneOf(tagTypes)

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _ = require("../");
 
@@ -61,7 +61,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     var TitleIcon = icon;
     titleInnards = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && !loading ? /*#__PURE__*/_react.default.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SkeletonText, {
+    }) : null, loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/_react.default.createElement(_.InlineEdit, (0, _extends2.default)({
       hideLabel: true,

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -17,7 +17,7 @@ var _settings = require("../../settings");
 
 var _scrollableAncestor = require("../../global/js/utils/scrollableAncestor");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -193,7 +193,7 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
     if (title.text !== undefined) {
       // Shape title provided
       breadcrumbTitle = {
-        label: /*#__PURE__*/_react.default.createElement("span", null, title.loading ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SkeletonText, null) : title.text),
+        label: /*#__PURE__*/_react.default.createElement("span", null, title.loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null) : title.text),
         title: title.text
       };
     } else if (title.content !== undefined) {

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -120,6 +120,11 @@ ProductiveCard.propTypes = {
     onKeyDown: _propTypes.default.func
   })),
 
+  /**
+   * Aria label prop required for OverflowMenu
+   */
+  overflowAriaLabel: _propTypes.default.string,
+
   /**
    * Optionally specify an href for your Button to become an <a> element
    */

package/lib/components/RemoveModal/RemoveModal.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -87,21 +87,22 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setUserInput('');
     }
   }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
-    size: "sm"
+    size: "sm",
+    "aria-label": title
   }, _objectSpread({
     open: open,
     ref: ref,
     preventCloseOnClickOutside: preventCloseOnClickOutside,
     onClose: onClose
-  }, (0, _devtools.getDevtoolsProps)(componentName))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }, (0, _devtools.getDevtoolsProps)(componentName))), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     title: title,
     label: label,
     iconDescription: iconDescription
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__body")
-  }, body), textConfirmation && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, body), textConfirmation && /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     id: "".concat(idRef.current, "-confirmation-input"),
     className: "".concat(blockClass, "__input"),
     invalidText: inputInvalidText,
@@ -110,12 +111,12 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onChange: onChangeHandler,
     value: userInput,
     "data-modal-primary-focus": true
-  })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: onClose,
     "data-modal-primary-focus": !textConfirmation
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "submit",
     kind: "danger",
     onClick: onRequestSubmit,

package/lib/components/Saving/Saving.js

@@ -9,17 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Saving = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -58,20 +58,36 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
-      icon: _iconsReact.CheckmarkOutline16
+      icon: function icon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkOutline, (0, _extends2.default)({
+          size: 16
+        }, props));
+      }
     }
   }, (0, _defineProperty2.default)(_statusObj, 'in-progress', {
     text: inProgressText,
     iconDescription: inProgressIconDescription,
-    icon: _carbonComponentsReact.InlineLoading
+    icon: function icon(props) {
+      return /*#__PURE__*/_react.default.createElement(_react2.InlineLoading, (0, _extends2.default)({
+        size: 16
+      }, props));
+    }
   }), (0, _defineProperty2.default)(_statusObj, "success", {
     text: successText,
     iconDescription: successIconDescription,
-    icon: _iconsReact.Save16
+    icon: function icon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Save, (0, _extends2.default)({
+        size: 16
+      }, props));
+    }
   }), (0, _defineProperty2.default)(_statusObj, "fail", {
     text: failText,
     iconDescription: failIconDescription,
-    icon: _iconsReact.ErrorOutline16
+    icon: function icon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorOutline, (0, _extends2.default)({
+        size: 16
+      }, props));
+    }
   }), _statusObj);
   var blockClass = "".concat(_settings.pkg.prefix, "--saving");
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
@@ -81,16 +97,18 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__message")
   }, status === 'fail' && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled16, null)), /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+    size: 16
+  })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__text")
   }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === void 0 ? void 0 : _statusObj$status.text)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__buttons")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: onRequestCancel,
     kind: "secondary",
     disabled: status !== 'in-progress',
     type: "button"
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: onRequestSave,
     kind: "primary",
     renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === void 0 ? void 0 : _statusObj$status2.icon,

package/lib/components/SidePanel/SidePanel.js

@@ -39,7 +39,7 @@ var _constants = require("./constants");
 
 var _hooks = require("../../global/js/hooks");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -429,22 +429,30 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
-    }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
-      size: "small",
+      size: "sm",
       disabled: false,
-      renderIcon: _iconsReact.ArrowLeft20,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
       iconDescription: navigationBackIconDescription,
       className: "".concat(blockClass, "__navigation-back-button"),
       onClick: onNavigationBack
     }), title && title.length && labelText && labelText.length && /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "__label-text")
-    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
-      size: "small",
-      renderIcon: _iconsReact.Close20,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
       iconDescription: closeIconDescription,
       className: "".concat(blockClass, "__close-button"),
       onClick: onRequestClose,
@@ -464,10 +472,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           className = _ref5.className,
           onClick = _ref5.onClick,
           rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
         key: label,
         kind: kind || 'ghost',
-        size: "small",
+        size: "sm",
         renderIcon: icon,
         iconDescription: label,
         tooltipPosition: "bottom",
@@ -525,7 +533,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, children), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size
+    size: size === 'xs' ? 'sm' : size
   })), /*#__PURE__*/_react.default.createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",
@@ -550,7 +558,7 @@ SidePanel.propTypes = {
   actionToolbarButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string,
     leading: _propTypes.default.bool,
-    icon: _propTypes.default.object,
+    icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
     onClick: _propTypes.default.func,
     kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
   })),
@@ -568,12 +576,12 @@ SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here
-    onClick: _carbonComponentsReact.Button.propTypes.onClick
+    onClick: _react2.Button.propTypes.onClick
   })))]),
 
   /**
@@ -671,7 +679,7 @@ SidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Determines if this panel slides in