@carbon/ibm-products 2.18.1 → 2.19.0

package/scss/components/Guidebanner/_guidebanner.scss

@@ -246,3 +246,28 @@ $purple-3: #7433e3;
     fill: $purple-1;
   }
 }
+
+// Exception handling.
+// If "withLeftgutter", then:
+// - insert 1 rem of more "space" on the left.
+// - move icon 1 rem more to the right.
+.#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {
+  left: $spacing-07;
+}
+.#{$block-class}__with-left-gutter .#{$block-class}__title {
+  padding-left: calc($horizontal-margin + $spacing-05);
+}
+.#{$block-class}__with-left-gutter .#{$block-class}__navigation {
+  padding-left: $spacing-05;
+}
+// Override Carousel settings
+// - insert 1 rem of more "space" on the left.
+.#{$block-class}__with-left-gutter
+  .#{c4p-settings.$pkg-prefix}--carousel__elements-container {
+  padding-left: $spacing-05;
+}
+// - expand "fade" to cover more of the left side of the carousel.
+.#{$block-class}__with-left-gutter
+  .#{c4p-settings.$pkg-prefix}--carousel__elements-container--scrolled {
+  width: $spacing-10;
+}

package/scss/components/InlineTip/_inline-tip.scss

@@ -227,3 +227,15 @@ $purple: #7f3ae7;
     flex-shrink: 0;
   }
 }
+
+// Exception handling.
+// If "withLeftgutter", then:
+// - insert 1 rem of more "space" on the left.
+// - move icon 1 rem more to the right.
+.#{$block-class}__wide.#{$block-class}__with-left-gutter {
+  padding-left: $spacing-10;
+}
+.#{$block-class}__wide.#{$block-class}__with-left-gutter
+  .#{$block-class}__icon-idea {
+  left: $spacing-07;
+}

package/scss/components/ProductiveCard/_productive-card.scss

@@ -16,10 +16,6 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__productive {
-  .#{$block-class}__header {
-    padding-right: 0;
-  }
-
   .#{$block-class}__title {
     @include type.type-style('heading-compact-02');
   }
@@ -49,7 +45,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
   .#{$block-class}__actions-header {
     margin-top: calc(-1 * #{$spacing-02});
-    margin-right: $spacing-03;
   }
 
   .#{$block-class}__actions-header-ghost-button {

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

@@ -115,6 +115,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
     background-color: $layer-01;
 
+    &:has(.#{$block-class}__navigation-back-button) {
+      padding-top: $spacing-07;
+    }
+
+    &:has(
+        .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      ) {
+      padding-top: $spacing-08;
+    }
+
     /* stylelint-disable-next-line max-nesting-depth */
     &::before {
       @include setDividerStyles();
@@ -129,8 +139,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       margin-bottom: 0;
     }
     &.#{$block-class}__on-detail-step .#{$block-class}__collapsed-title-text {
-      top: $spacing-09;
+      top: $spacing-07;
+    }
+
+    &.#{$block-class}__on-detail-step
+      .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      ~ .#{$block-class}__collapsed-title-text {
+      top: $spacing-08;
     }
+
     &.#{$block-class}__title-container-without-title {
       padding: 0;
     }
@@ -326,29 +343,30 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
-    position: relative;
+    position: fixed;
     z-index: 5;
-    top: calc(-1 * #{$spacing-03});
-    left: calc(-1 * #{$spacing-03});
+    top: 0;
+    left: 0;
   }
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
-    min-width: 2rem;
-    padding: 0;
-    color: $text-primary;
-  }
-
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
     display: flex;
+    width: $spacing-07;
+    height: $spacing-07;
     align-items: center;
     justify-content: center;
-    margin: $spacing-03;
-    margin-bottom: 0;
-  }
+    padding: 0;
+    color: $text-primary;
 
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button
     .#{c4p-settings.$carbon-prefix}--btn__icon {
-    margin: 0;
+      margin: 0;
+    }
+  }
+
+  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__navigation-back-button,
+  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__close-button {
+    width: $spacing-08;
+    height: $spacing-08;
   }
 
   .#{$block-class}__slug-and-close {