@carbon/ibm-products 2.19.2 → 2.21.0

package/lib/components/SidePanel/SidePanel.js

@@ -26,6 +26,7 @@ var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
 var _ActionSet = require("../ActionSet");
 var _variants = require("./motion/variants");
+var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 /**
@@ -60,7 +61,7 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _window, _ref5, _cx4;
+  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -352,7 +353,11 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   (0, _react.useEffect)(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
-      pageContentElement.style.inlineSize = 'auto';
+      if (pageContentElement) {
+        pageContentElement.style.inlineSize = 'auto';
+      } else {
+        _pconsole.default.warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
+      }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = 0;
         pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(_motion.moderate02) : null;
@@ -382,9 +387,9 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     }
   };
   var primaryActionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container--has-slug"), slug), _ref5)]);
+  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__container-right-placement"), placement === 'right'), "".concat(blockClass, "__container-left-placement"), placement === 'left'), "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__container--has-slug"), slug)]);
   var renderHeader = function renderHeader() {
-    var _slug$type, _cx, _cx2;
+    var _slug$type;
     var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
     var normalizedSlug;
     if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
@@ -394,7 +399,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       });
     }
     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))
+      className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__on-detail-step"), currentStep > 0), "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__title-container-without-title"), !title), "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches))
     }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
@@ -426,7 +431,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       onClick: onRequestClose,
       ref: sidePanelCloseRef
     })), subtitle && /*#__PURE__*/_react.default.createElement("p", {
-      className: (0, _classnames.default)("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
+      className: (0, _classnames.default)("".concat(blockClass, "__subtitle-text"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), "".concat(blockClass, "__subtitle-without-title"), !title))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__action-toolbar"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
     }, actionToolbarButtons.map(function (_ref6) {
@@ -491,7 +496,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     className: "".concat(blockClass, "__visually-hidden")
   }, "Focus sentinel"), !animateTitle && renderHeader(), /*#__PURE__*/_react.default.createElement("div", {
     ref: sidePanelInnerRef,
-    className: (0, _classnames.default)("".concat(blockClass, "__inner-content"), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__static-inner-content"), !animateTitle), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length), _cx4))
+    className: (0, _classnames.default)("".concat(blockClass, "__inner-content"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__static-inner-content"), !animateTitle), "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length))
   }, animateTitle && renderHeader(), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body-content")
   }, children), /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {

package/lib/components/TagSet/TagSetOverflow.js

@@ -90,7 +90,6 @@ var TagSetOverflow = exports.TagSetOverflow = /*#__PURE__*/_react.default.forwar
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
-    var _cx2;
     var tagProps = {};
     if (overflowType === 'tag') {
       tagProps.type = 'high-contrast';
@@ -99,7 +98,7 @@ var TagSetOverflow = exports.TagSetOverflow = /*#__PURE__*/_react.default.forwar
       tagProps.filter = false;
     }
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: (0, _classnames.default)("".concat(blockClass, "__tag-item"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
+      className: (0, _classnames.default)("".concat(blockClass, "__tag-item"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
       key: index
     }, /*#__PURE__*/_react.default.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_react2.Link, {

package/lib/components/Tearsheet/Tearsheet.js

@@ -115,6 +115,11 @@ Tearsheet.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _react2.Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: _propTypes.default.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -103,6 +103,11 @@ TearsheetNarrow.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _react2.Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: _propTypes.default.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,7 +21,7 @@ var _react2 = require("@carbon/react");
 var _ActionSet = require("../ActionSet");
 var _Wrap = require("../../global/js/utils/Wrap");
 var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
-var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -71,6 +71,7 @@ var tearsheetHasCloseIcon = exports.tearsheetHasCloseIcon = function tearsheetHa
  * */
 var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
@@ -128,7 +129,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };
@@ -185,7 +186,6 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
     }
   }
   if (position <= depth) {
-    var _cx, _ref2, _cx3, _cx5, _cx6;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -194,11 +194,11 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
-      "aria-label": (0, _getNodeTextContent.getNodeTextContent)(title),
-      className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      "aria-label": ariaLabel || (0, _getNodeTextContent.getNodeTextContent)(title),
+      className: (0, _classnames.default)(bc, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), wide), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
-      style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: (0, _classnames.default)("".concat(bc, "__container"), (0, _defineProperty2.default)({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
       open: open,
@@ -209,7 +209,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
     }), includeHeader && /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
-      className: (0, _classnames.default)("".concat(bc, "__header"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
+      className: (0, _classnames.default)("".concat(bc, "__header"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
       closeClassName: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
       closeModal: onClose,
       iconDescription: closeIconDescription
@@ -234,7 +234,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
       element: _react2.ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: (0, _classnames.default)((_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx5)),
+      className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
     }, influencer), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__right")
@@ -245,7 +245,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
       className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
+      className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
     }, influencer)), includeActions && /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__button-container")

package/lib/components/WebTerminal/WebTerminal.js

@@ -50,7 +50,6 @@ var defaults = {
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
 var WebTerminal = exports.WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref3;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     children = _ref.children,
@@ -114,7 +113,7 @@ var WebTerminal = exports.WebTerminal = /*#__PURE__*/_react.default.forwardRef(f
   };
   return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _objectSpread(_objectSpread({}, rest), (0, _devtools.getDevtoolsProps)(componentName)), {
     ref: ref,
-    className: (0, _classnames.default)([blockClass, className, (_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
+    className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
       animation: !prefersReducedMotion && webTerminalAnimationName
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.19.2",
+  "version": "2.21.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.19.1",
+    "@carbon/ibm-products-styles": "^2.20.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -91,11 +91,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.45.0",
+    "@carbon/react": "^1.47.0",
     "@carbon/themes": "^11.28.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "6947a5b9d0e07a7a3d8e39abe152329e87200896"
+  "gitHead": "752821d664db5561979e60b06ad4d70ab644a250"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -279,6 +279,13 @@
   }
 }
 
+.#{$block-class}__empty-state
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr:not([data-child-row]):hover {
+  background: inherit;
+}
+
 .#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover {
   background: transparent;
 }
@@ -375,6 +382,7 @@
 
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-09;
+
   &.#{$block-class}__select-all-sticky-left {
     position: sticky;
     z-index: 1;

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2022, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 
 // stylelint-disable carbon/layout-token-use
 
@@ -82,7 +81,7 @@ $action-set-height: to-rem(64px);
   display: grid;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   gap: to-rem(16px) rem(32px);
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 // Carbon overrides
@@ -104,3 +103,7 @@ $action-set-height: to-rem(64px);
   .#{c4p-settings.$carbon-prefix}--fieldset {
   margin-bottom: 0;
 }
+
+.#{variables.$block-class}-filter-flyout__stacked {
+  grid-template-columns: 1fr;
+}

package/scss/components/Saving/_saving.scss

@@ -32,3 +32,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--saving;
 .#{$block-class}__buttons {
   display: flex;
 }
+
+.#{$block-class}__buttons
+  .#{c4p-settings.$carbon-prefix}--btn
+  .#{c4p-settings.$carbon-prefix}--inline-loading {
+  min-block-size: auto;
+}

package/scss/components/SidePanel/_side-panel.scss

@@ -77,12 +77,14 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       @include setPanelSize($size_value);
       .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation,
       .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation,
-      .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation,
-      .#{$block-class}__actions-container.#{$action-set-block-class}--#{$size} {
+      .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
         @include setPanelSize($size_value);
       }
     }
   }
+  .#{$block-class}__actions-container {
+    width: 100%;
+  }
   &.#{$block-class}__container-right-placement {
     right: 0;
     border-left: 1px solid $border-subtle-02;
@@ -112,9 +114,13 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     position: sticky;
     z-index: 4;
     top: 0;
-    padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+    padding: $spacing-05;
     background-color: $layer-01;
 
+    &:has(~ .#{$block-class}__subtitle-text) {
+      padding-bottom: $spacing-03;
+    }
+
     &:has(.#{$block-class}__navigation-back-button) {
       padding-top: $spacing-07;
     }

package/scss/components/TagSet/_tag-set.scss

@@ -142,7 +142,10 @@ $block-class-modal: #{$_block-class}-modal;
   .#{$block-class-overflow}__tag-list {
     display: flex;
     flex-direction: column;
-    margin-bottom: $spacing-03;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link {
+    margin-top: $spacing-03;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag