@carbon/ibm-products 2.17.1 → 2.17.2

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -17,7 +17,7 @@ var _react2 = require("@carbon/react");
 var _SidePanel = require("../SidePanel");
 require("../../global/js/utils/props-helper");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-var _excluded = ["children", "className", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
+var _excluded = ["children", "className", "disableSubmit", "id", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2021
  *
@@ -48,6 +48,7 @@ var EditSidePanel = exports.EditSidePanel = /*#__PURE__*/_react.default.forwardR
   var children = _ref.children,
     className = _ref.className,
     disableSubmit = _ref.disableSubmit,
+    id = _ref.id,
     formTitle = _ref.formTitle,
     formDescription = _ref.formDescription,
     onRequestClose = _ref.onRequestClose,
@@ -87,7 +88,8 @@ var EditSidePanel = exports.EditSidePanel = /*#__PURE__*/_react.default.forwardR
     onRequestClose: onRequestClose,
     title: title,
     subtitle: subtitle,
-    selectorPrimaryFocus: selectorPrimaryFocus
+    selectorPrimaryFocus: selectorPrimaryFocus,
+    id: id
   }, (0, _devtools.getDevtoolsProps)(componentName)), {
     placement: placement,
     slideIn: slideIn,
@@ -139,6 +141,10 @@ EditSidePanel.propTypes = {
    * Specifies a required field that provides a title for a form
    */
   formTitle: _propTypes.default.node.isRequired,
+  /**
+   * Unique identifier
+   */
+  id: _propTypes.default.string,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.

package/lib/components/SidePanel/SidePanel.js

@@ -26,7 +26,7 @@ var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
 var _ActionSet = require("../ActionSet");
 var _variants = require("./motion/variants");
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
+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"];
 /**
  * Copyright IBM Corp. 2020, 2023
@@ -72,6 +72,8 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     condensedActions = _ref.condensedActions,
     _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? blockClass : _ref$id,
     includeOverlay = _ref.includeOverlay,
     labelText = _ref.labelText,
     _ref$navigationBackIc = _ref.navigationBackIconDescription,
@@ -88,6 +90,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
     slideIn = _ref.slideIn,
+    slug = _ref.slug,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -112,6 +115,10 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
+  var getActionsContainerElement = (0, _react.useCallback)(function () {
+    var sidePanelOuter = document.querySelector("#".concat(id));
+    return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
+  }, [id]);
 
   // scroll panel to top going between steps
   (0, _react.useEffect)(function () {
@@ -119,7 +126,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     if (panelRef && panelRef.current) {
       var _document$querySelect;
       var scrollableSection = panelRef.current.querySelector(".".concat(blockClass, "__inner-content"));
-      var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+      var sidePanelOuter = document.querySelector("#".concat(id));
       var initialTitleHeight = (_document$querySelect = document.querySelector(".".concat(blockClass, "__title-container"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.offsetHeight;
       scrollableSection.scrollTop = 0;
       // The size of the panel has changed while it is still opened
@@ -131,7 +138,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
         sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 || _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
       }
     }
-  }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]);
+  }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
 
   // set initial focus when side panel opens
   (0, _react.useEffect)(function () {
@@ -155,13 +162,13 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   (0, _react.useEffect)(function () {
     if (open && actions && actions.length && animationComplete) {
       var _sidePanelOuter$style2;
-      var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+      var sidePanelOuter = document.querySelector("#".concat(id));
       var actionsContainer = getActionsContainerElement();
       var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
       actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
       sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 || _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
     }
-  }, [actions, condensedActions, open, animationComplete]);
+  }, [actions, condensedActions, open, animationComplete, id, getActionsContainerElement]);
 
   // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
@@ -176,23 +183,19 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     var _sidePanelOuter$style3;
     var height = _ref2.height;
     setPanelHeight(height);
-    var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+    var sidePanelOuter = document.querySelector("#".concat(id));
     var actionsContainer = getActionsContainerElement();
     var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
     actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
     sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 || _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
   };
-  var getActionsContainerElement = function getActionsContainerElement() {
-    var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
-    return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
-  };
 
   // Title and subtitle scroll animation
   (0, _react.useEffect)(function () {
     if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
       var _document$querySelect2, _document$querySelect3, _document$querySelect4;
-      var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
-      var sidePanelScrollArea = document.querySelector("#".concat(blockClass, "-outer .").concat(blockClass, "__inner-content"));
+      var sidePanelOuter = document.querySelector("#".concat(id));
+      var sidePanelScrollArea = document.querySelector("#".concat(id, " .").concat(blockClass, "__inner-content"));
       var sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-text"));
       var sidePanelCollapsedTitleElement = document.querySelector(".".concat(blockClass, "__collapsed-title-text"));
       var sidePanelSubtitleElement = document.querySelector(".".concat("".concat(blockClass, "__subtitle-text")));
@@ -267,7 +270,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       });
     }
     if (open && !animateTitle) {
-      var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+      var _sidePanelOuter = document.querySelector("#".concat(id));
       var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
       var _sidePanelSubtitleElement = document.querySelector(".".concat(blockClass, "__subtitle-text"));
       var actionToolbarElement = document.querySelector(".".concat(blockClass, "__action-toolbar"));
@@ -281,7 +284,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]);
+  }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   (0, _react.useEffect)(function () {
@@ -378,9 +381,16 @@ 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), _ref5)]);
+  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 renderHeader = function renderHeader() {
     var _cx, _cx2;
+    var normalizedSlug;
+    if (slug) {
+      normalizedSlug = /*#__PURE__*/_react.default.cloneElement(slug, {
+        // slug size is sm unless actions and size > md
+        size: actions.length && /l/.test(size) ? 'md' : 'sm'
+      });
+    }
     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(_react2.Button, {
@@ -398,7 +408,9 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       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(_react2.Button, {
+    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__slug-and-close")
+    }, normalizedSlug, /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
       size: "sm",
@@ -411,7 +423,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       className: "".concat(blockClass, "__close-button"),
       onClick: onRequestClose,
       ref: sidePanelCloseRef
-    }), subtitle && /*#__PURE__*/_react.default.createElement("p", {
+    })), 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))
     }, 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))
@@ -455,7 +467,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   var contentRef = ref || sidePanelRef;
   (0, _useResizeObserver.useResizeObserver)(contentRef, handleResize);
   return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
-    id: "".concat(blockClass, "-outer"),
+    id: id,
     className: mainPanelClassNames,
     onBlur: handleBlur,
     ref: contentRef,
@@ -563,6 +575,10 @@ SidePanel.propTypes = {
    * Sets the current step of the side panel
    */
   currentStep: _propTypes.default.number,
+  /**
+   * Unique identifier
+   */
+  id: _propTypes.default.string,
   /**
    * Determines whether the side panel should render with an overlay
    */
@@ -622,6 +638,10 @@ SidePanel.propTypes = {
    * Determines if this panel slides in
    */
   slideIn: _propTypes.default.bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: _propTypes.default.node,
   /**
    * Sets the subtitle text
    */

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -73,7 +73,7 @@ var useCreateComponentStepChange = exports.useCreateComponentStepChange = functi
   (0, _react.useEffect)(function () {
     var onUnmount = function onUnmount() {
       if (componentName !== 'CreateFullPage') {
-        setCurrentStep(0);
+        setCurrentStep(1);
       }
       setIsSubmitting(false);
       onClose();

package/lib/global/js/package-settings.js

@@ -85,8 +85,6 @@ var defaults = {
     'default-portal-target-body': true,
     'Datagrid.useInlineEdit': false,
     'Datagrid.useEditableCell': false,
-    'Datagrid.useExpandedRow': false,
-    'Datagrid.useNestedRows': false,
     'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,
     'ExampleComponent.secondaryIcon': false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.17.1",
+  "version": "2.17.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.17.1",
+    "@carbon/ibm-products-styles": "^2.17.2",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -89,11 +89,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.42.1",
-    "@carbon/themes": "^11.27.1",
+    "@carbon/react": "^1.44.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": "370d06eb88989ab2e82640ddaa4df29c19f27bd7"
+  "gitHead": "7b7eda56917b98f508478035f87c17ca75c46375"
 }

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -71,3 +71,24 @@
   td {
   background: $layer-hover;
 }
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr:hover
+  td.#{variables.$block-class}__expanded-row-cell-wrapper,
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{variables.$block-class}__expanded-row-cell-wrapper,
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__carbon-row-expanded
+  td.#{variables.$block-class}__expandable-row-cell {
+  border: none;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{variables.$block-class}__expanded-row-cell-wrapper {
+  padding: 0;
+}

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

@@ -84,3 +84,12 @@
 .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
   background-color: $layer-02;
 }
+
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td.#{variables.$block-class}__expandable-row-cell,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td.#{variables.$block-class}__expandable-row-cell {
+  padding-top: $spacing-03;
+}

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

@@ -45,7 +45,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 @mixin setCommonTitleStyles() {
   display: -webkit-box;
   overflow: hidden;
-  padding-right: $spacing-09;
+  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  padding-right: var(--#{$block-class}--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
@@ -61,6 +62,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   --#{$block-class}--content-bottom-padding: #{$spacing-10};
   --#{$block-class}--collapsed-title-y-position: 1rem;
   --#{$block-class}--label-text-height: 0;
+  --#{$block-class}--title-padding-right: #{$spacing-09};
 
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
@@ -140,6 +142,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       background-color: transparent;
     }
   }
+  &.#{$block-class}__container--has-slug {
+    --#{$block-class}--title-padding-right: #{$spacing-12};
+  }
   &.#{$block-class}__container-is-animating {
     pointer-events: none;
   }
@@ -174,7 +179,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     @include type.type-style('label-01');
 
     overflow: hidden;
-    padding-right: $spacing-05;
+    padding-right: var(--#{$block-class}--title-padding-right);
     opacity: var(--#{$block-class}--subtitle-opacity);
     text-overflow: ellipsis;
     transform: translateY(var(--#{$block-class}--title-y-position));
@@ -244,6 +249,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     overflow-x: hidden;
   }
 
+  &.#{$block-class}__container--has-slug .#{$block-class}__inner-content {
+    @include utilities.ai-gradient('bottom');
+  }
+
   .#{$block-class}__inner-content-with-actions {
     height: calc(
       100vh - (var(--#{$block-class}--content-bottom-padding) + 2rem)
@@ -330,19 +339,26 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
-    position: absolute;
-    z-index: 5;
-    top: $spacing-03;
-    right: $spacing-05;
     display: flex;
     align-items: center;
     justify-content: center;
+    margin: $spacing-03;
+    margin-bottom: 0;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button
     .#{c4p-settings.$carbon-prefix}--btn__icon {
     margin: 0;
   }
+
+  .#{$block-class}__slug-and-close {
+    position: fixed;
+    z-index: 5;
+    top: 0;
+    right: 0;
+    display: flex;
+  }
+
   .#{$block-class}__body-content {
     padding: $spacing-05;
     padding-top: 0;