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

package/lib/components/ImportModal/ImportModal.js

@@ -27,7 +27,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -84,6 +84,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       secondaryButtonText = _ref.secondaryButtonText,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -236,7 +237,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var importButtonDisabled = !importUrl || hasFiles;
   var fileStatusString = "".concat(numberOfValidFiles, " / ").concat(numberOfFiles, " ").concat(fileUploadLabel);
   var blockClass = "".concat(_settings.pkg.prefix, "--import-modal");
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
     onClose: onClose
@@ -245,16 +246,16 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: (0, _classnames.default)(blockClass, className),
     size: "sm",
     preventCloseOnClickOutside: true
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     className: "".concat(blockClass, "__body-container")
   }, description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__body")
   }, description), fileDropHeader && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__file-drop-header")
-  }, fileDropHeader), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FileUploaderDropContainer, {
+  }, fileDropHeader), /*#__PURE__*/_react.default.createElement(_react2.FileUploaderDropContainer, {
     accept: accept,
     labelText: fileDropLabel,
     onAddFiles: onAddFile,
@@ -264,7 +265,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__label")
   }, inputLabel), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__input-group")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "",
     id: inputId,
     onChange: inputHandler,
@@ -272,25 +273,29 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     value: importUrl,
     disabled: hasFiles,
     "aria-label": inputLabel
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: fetchFile,
     className: "".concat(blockClass, "__import-button"),
     size: "sm",
     disabled: importButtonDisabled,
-    renderIcon: inputButtonIcon ? _iconsReact.Add20 : null
+    renderIcon: inputButtonIcon ? function (props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Add, (0, _extends2.default)({
+        size: 20
+      }, props));
+    } : null
   }, inputButtonText)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_settings.carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
+    className: "".concat(carbonPrefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__helper-text")
   }, fileStatusString), files.map(function (file) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FileUploaderItem, {
+    return /*#__PURE__*/_react.default.createElement(_react2.FileUploaderItem, {
       key: file.uuid,
       onDelete: function onDelete() {
         return onRemoveFile(file.uuid);
       },
       name: file.name,
       status: file.status,
-      size: "default",
+      size: "lg",
       uuid: file.uuid,
       iconDescription: file.iconDescription,
       invalid: file.invalid,
@@ -300,13 +305,13 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       /* cspell:disable-line */
 
     });
-  }))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, {
+  }))), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: onClose
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "submit",
     kind: "primary",
     onClick: onSubmitHandler,

package/lib/components/InlineEdit/InlineEdit.js

@@ -29,7 +29,7 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -80,6 +80,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carbonPrefix = (0, _react2.usePrefix)();
   var refInput = (0, _react.useRef)(null);
   var localRef = (0, _react.useRef)(null);
   var ref = refIn || localRef;
@@ -98,7 +99,9 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
 
   var validationText = invalidText; // || warnText;
 
-  var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null; // sanitize the tooltip values
+  var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled, {
+    size: 16
+  }) : null; // sanitize the tooltip values
 
   var alignIsObject = (0, _typeof2.default)(buttonTooltipAlignment) === 'object';
   var directionIsObject = (0, _typeof2.default)(buttonTooltipPosition) === 'object';
@@ -295,34 +298,43 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
     }, showValidation && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
+    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: cancelDescription,
       onClick: handleCancel,
-      renderIcon: _iconsReact.Close16
-    }, tipPositions.cancel)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+          size: 16
+        }, props));
+      }
+    }, tipPositions.cancel)), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: saveDescription,
       onClick: handleSave,
-      renderIcon: _iconsReact.Checkmark16,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.Checkmark, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
       disabled: value === internalValue
-    }, tipPositions.save))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
+    }, tipPositions.save))) : /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
       className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
-      hasIconOnly: true,
-      iconDescription: editDescription,
+      label: editDescription,
       onClick: handleEdit,
-      renderIcon: disabled ? _iconsReact.EditOff16 : _iconsReact.Edit16,
-      disabled: disabled,
-      tabIndex: -1
-    }, tipPositions.edit)))), /*#__PURE__*/_react.default.createElement("div", {
+      disabled: disabled
+    }, tipPositions.edit), disabled ? /*#__PURE__*/_react.default.createElement(_iconsReact.EditOff, {
+      size: 16
+    }) : /*#__PURE__*/_react.default.createElement(_iconsReact.Edit, {
+      size: 16
+    })))), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
     }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "__validation-text ").concat(_settings.carbon.prefix, "--form-requirement")
+      className: "".concat(blockClass, "__validation-text ").concat(carbonPrefix, "--form-requirement")
     }, validationText))
   );
 }); // Return a placeholder if not released and not enabled by feature flag

package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js

@@ -13,21 +13,27 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
+var _settings = require("../../settings");
+
 //
 // Copyright IBM Corp. 2020, 2020
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
+
 var ModifiedTabLabelNew = function ModifiedTabLabelNew(_ref) {
   var label = _ref.label;
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: "modified-tabs__tab-new"
+    className: "".concat(blockClass, "__tab-new")
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "modified-tabs__tab-new__label"
+    className: "".concat(blockClass, "__tab-new__label")
   }, label), /*#__PURE__*/_react.default.createElement("span", {
-    className: "modified-tabs__tab-new-img"
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Add20, null)));
+    className: "".concat(blockClass, "__tab-new-img")
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Add, {
+    size: 20
+  })));
 };
 
 exports.ModifiedTabLabelNew = ModifiedTabLabelNew;

package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js

@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
+var _settings = require("../../settings");
+
+var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
+
 var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {
   var unsavedContent = _ref.unsavedContent,
       label = _ref.label,
@@ -22,26 +26,22 @@ var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {
     if (onClose) {
       onClose();
     }
-  }; // const handleMousedown = (ev) => {
-  //   console.log('mouse down');
-  //   console.dir(ev);
-  //   ev.stopPropagation();
-  //   ev.cancelBubble = true;
-  //   ev.preventDefault();
-  // };
-
+  };
 
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: "modified-tabs__tab"
+    className: "".concat(blockClass, "__tab")
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "modified-tabs__tab-label"
+    className: "".concat(blockClass, "__tab-label")
   }, label), /*#__PURE__*/_react.default.createElement("button", {
     title: "Close button",
-    onClick: handleClose // onMouseDown={handleMousedown}
-    ,
-    className: "modified-tabs__tab-close",
+    onClick: handleClose,
+    className: "".concat(blockClass, "__tab-close"),
     type: "button"
-  }, unsavedContent ? /*#__PURE__*/_react.default.createElement(_iconsReact.CloseFilled16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.Close16, null)));
+  }, unsavedContent ? /*#__PURE__*/_react.default.createElement(_iconsReact.CloseFilled, {
+    size: 16
+  }) : /*#__PURE__*/_react.default.createElement(_iconsReact.Close, {
+    size: 16
+  })));
 };
 
 exports.ModifiedTabLabelWithClose = ModifiedTabLabelWithClose;

package/lib/components/ModifiedTabs/ModifiedTabs.js

@@ -13,7 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react2 = require("@carbon/react");
 
 var _ModifiedTabLabelWithClose = require("./ModifiedTabLabelWithClose");
 
@@ -31,23 +33,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+var blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
 var componentName = 'ModifiedTabs'; // Default values for props
 
 var defaults = {
-  tabs: [{
-    id: 'tab-1',
-    label: 'Tab 1',
-    content: /*#__PURE__*/_react.default.createElement("div", null, "Iam am the content of tab 1."),
-    unsavedContent: false
-  }],
   newTabLabel: 'New tab',
   newTabContent: 'Your new tab will be here soon',
   onNewTab: undefined,
-  onCloseTab: undefined
+  onCloseTab: undefined,
+  tabs: []
 };
-
-var ModifiedTabs = function ModifiedTabs(_ref) {
-  var _ref$tabs = _ref.tabs,
+var ModifiedTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+      _ref$tabs = _ref.tabs,
       tabs = _ref$tabs === void 0 ? defaults.tabs : _ref$tabs,
       _ref$newTabLabel = _ref.newTabLabel,
       newTabLabel = _ref$newTabLabel === void 0 ? defaults.newTabLabel : _ref$newTabLabel,
@@ -56,18 +54,19 @@ var ModifiedTabs = function ModifiedTabs(_ref) {
       _ref$onNewTab = _ref.onNewTab,
       onNewTab = _ref$onNewTab === void 0 ? defaults.onNewTab : _ref$onNewTab,
       _ref$onCloseTab = _ref.onCloseTab,
-      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab;
+      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab,
+      tabListAriaLabel = _ref.tabListAriaLabel;
+  var tabsRef = (0, _react.useRef)();
+  var localRef = ref || tabsRef;
 
   var handleNewTab = function handleNewTab() {
     if (onNewTab) {
       onNewTab();
       setTimeout(function () {
         // set focus to the new tab
-        var tab = tabsRef.current.getTabAt(tabs.length);
-
-        if (tab & tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
+        var addNewTabButton = localRef.current.querySelector(".".concat(blockClass, "__tab-new"));
+        var tab = addNewTabButton === null || addNewTabButton === void 0 ? void 0 : addNewTabButton.previousSibling;
+        tab === null || tab === void 0 ? void 0 : tab.focus();
       });
     }
   };
@@ -78,43 +77,55 @@ var ModifiedTabs = function ModifiedTabs(_ref) {
     }
   };
 
-  var tabsRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tabs, {
-    className: "modified-tabs",
-    ref: tabsRef
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: localRef
+  }, /*#__PURE__*/_react.default.createElement(_react2.Tabs, {
+    className: "modified-tabs"
+  }, /*#__PURE__*/_react.default.createElement(_react2.TabList, {
+    "aria-label": tabListAriaLabel
   }, tabs.map(function (tab) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, {
-      id: tab.id,
-      key: tab.id,
-      label: /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelWithClose.ModifiedTabLabelWithClose, {
-        label: tab.label,
-        onClose: function onClose() {
-          return handleClose(tab.id);
-        },
-        unsavedContent: tab.unsavedContent
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "some-content"
-    }, tab.content));
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tab, {
+      key: tab.id
+    }, /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelWithClose.ModifiedTabLabelWithClose, {
+      label: tab.label,
+      onClose: function onClose() {
+        return handleClose(tab.id);
+      },
+      unsavedContent: tab.unsavedContent
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_react2.Tab, {
     id: "modified-tabs__tab-new",
-    label: /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelNew.ModifiedTabLabelNew, {
-      label: newTabLabel
-    }),
     onClick: handleNewTab,
     onKeyUp: function onKeyUp(ev) {
       return ev.keyCode === 32 && handleNewTab();
     },
-    role: "button"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "some-content"
-  }, newTabContent)));
-}; // Return a placeholder if not released and not enabled by feature flag
-
+    role: "button",
+    className: "".concat(blockClass, "__tab-new")
+  }, /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelNew.ModifiedTabLabelNew, {
+    label: newTabLabel
+  }))), /*#__PURE__*/_react.default.createElement(_react2.TabPanels, null, tabs.map(function (tab) {
+    var _tab$content;
+
+    return /*#__PURE__*/_react.default.createElement(_react2.TabPanel, {
+      key: tab.id,
+      id: tab.id
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__tab-content")
+    }, (_tab$content = tab.content) === null || _tab$content === void 0 ? void 0 : _tab$content.call(tab)));
+  }), /*#__PURE__*/_react.default.createElement(_react2.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__tab-content")
+  }, newTabContent)))));
+}); // Return a placeholder if not released and not enabled by feature flag
 
 exports.ModifiedTabs = ModifiedTabs;
 exports.ModifiedTabs = ModifiedTabs = _settings.pkg.checkComponentEnabled(ModifiedTabs, componentName);
 ModifiedTabs.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+
   /**
    * New tab content
    */
@@ -135,9 +146,19 @@ ModifiedTabs.propTypes = {
    */
   onNewTab: _propTypes.default.func,
 
+  /**
+   * Tab list aria label, passed to Carbon TabList
+   */
+  tabListAriaLabel: _propTypes.default.string.isRequired,
+
   /**
    * Tabs array containing tab object { id, label, content }
    */
-  tabs: _propTypes.default.array
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.node,
+    content: _propTypes.default.func,
+    unsavedContent: _propTypes.default.bool
+  })).isRequired
 };
 ModifiedTabs.displayName = componentName;

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -105,11 +105,11 @@ MultiAddSelect.propTypes = {
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
-        icon: _propTypes.default.object,
+        icon: _propTypes.default.func,
         src: _propTypes.default.string
       }),
       children: _propTypes.default.object,
-      icon: _propTypes.default.object,
+      icon: _propTypes.default.func,
       id: _propTypes.default.string.isRequired,
       subtitle: _propTypes.default.string,
       title: _propTypes.default.string.isRequired,

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -33,7 +33,7 @@ var _utils = require("./utils");
 
 var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -246,10 +246,14 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     var showMoreButtonClassName = (0, _classnames.default)([(_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
       className: descriptionClassName
-    }, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       kind: "ghost",
-      size: "small",
-      renderIcon: _iconsReact.ChevronDown16,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
       iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
@@ -289,13 +293,17 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
 
         event.which === 13 && notification.onNotificationClick(notification);
       }
-    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled16, {
+    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled16, {
+    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, {
+    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled16, {
+    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__notification-content")
@@ -317,20 +325,21 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       nowText: nowText
     })), /*#__PURE__*/_react.default.createElement("h6", {
       className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
+    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, {
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+      align: "left",
       kind: "ghost",
-      size: "small",
-      renderIcon: _iconsReact.Close16,
-      iconDescription: dismissSingleNotificationIconDescription,
-      tooltipPosition: "left",
+      size: "sm",
+      label: dismissSingleNotificationIconDescription,
       className: "".concat(blockClass, "__dismiss-single-button"),
       onClick: function onClick(event) {
         return dismissSingleNotification(event, notification);
       }
-    }));
+    }, /*#__PURE__*/_react.default.createElement(_iconsReact.Close, {
+      size: 16
+    })));
   };
 
   var dismissSingleNotification = function dismissSingleNotification(event, notification) {
@@ -354,14 +363,14 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__header-flex")
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: "".concat(blockClass, "__header")
-  }, title), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
-    size: "small",
+  }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    size: "sm",
     kind: "ghost",
     className: "".concat(blockClass, "__dismiss-button"),
     onClick: function onClick() {
       return onDismissAllNotifications();
     }
-  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
     id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
@@ -371,7 +380,8 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       return onDoNotDisturbChange(event);
     },
     defaultToggled: doNotDisturbDefaultToggled,
-    "aria-label": doNotDisturbLabel
+    "aria-label": doNotDisturbLabel,
+    labelText: doNotDisturbLabel
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: mainSectionClassName
   }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
@@ -392,17 +402,21 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     subtitle: emptyStateLabel
   })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__bottom-actions")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     className: "".concat(blockClass, "__view-all-button"),
     onClick: function onClick() {
       return onViewAllClick();
     }
-  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
-    size: "small",
+    size: "sm",
     className: "".concat(blockClass, "__settings-button"),
-    renderIcon: _iconsReact.Settings16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Settings, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: settingsIconDescription,
     onClick: function onClick() {
       return onSettingsClick();