@carbon/ibm-products 2.68.0 → 2.69.0

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

@@ -1,3 +1,4 @@
+//cspell: disable
 //
 // Copyright IBM Corp. 2020, 2025
 //
@@ -5,7 +6,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'sass:list';
 @use 'sass:map';
 
 // Other Carbon settings.
@@ -16,6 +16,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/components/button/tokens' as *;
 
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
@@ -29,6 +30,7 @@
 
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
+$clabs-prefix: 'clabs'; // TODO: remove when resizer available in labs
 
 @property --panel-transform {
   inherits: true;
@@ -37,13 +39,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 }
 
 @mixin setPanelSize($size: map.get($side-panel-sizes, md)) {
-  /* any value is single value list */
-  inline-size: list.nth($size, 1);
-  @if list.length($size) > 1 {
-    min-inline-size: list.nth($size, 2);
-  }
-
-  max-inline-size: 100%;
+  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, $size), 100%);
 }
 
 @mixin setDividerStyles() {
@@ -89,14 +85,26 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   background-color: $layer-01;
   block-size: calc(100% - 3rem);
   color: $text-primary;
+
   /* if the title does not scroll then we have a child scrolling section. */
   grid-template-rows: auto 1fr auto; /* titles content and actions */
   inset-block-start: $spacing-09;
+  max-inline-size: 100%;
+  min-inline-size: map.get($side-panel-sizes, xs);
 
   transform: translateX(0);
   transition-behavior: allow-discrete;
   transition-duration: $duration-moderate-01;
   transition-property: display, opacity, transform;
+  &:not(.#{$block-class}--slide-in) {
+    // enableSidepanelResizer flag class
+    &.#{$block-class}--enable-sidepanel-resizer {
+      grid-template-columns: 0 1fr;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: all $duration-moderate-01 linear;
+      }
+    }
+  }
 
   @starting-style {
     opacity: 0;
@@ -104,6 +112,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     transform: translateX(var(--panel-transform));
   }
 
+  @include breakpoint(md) {
+    max-inline-size: 75vw;
+  }
+
   @each $size, $size_value in $side-panel-sizes {
     &.#{$block-class}--#{$size} {
       @include setPanelSize($size_value);
@@ -188,6 +200,25 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     inset-inline-end: 0;
   }
   &.#{$block-class}--left-placement {
+    .#{$clabs-prefix}__resizer {
+      grid-column: 2;
+      inset-inline-start: 0;
+
+      &::before {
+        inset-inline-start: 0;
+      }
+    }
+    &:not(.#{$block-class}--slide-in) {
+      // enableSidepanelResizer FeatureFlag class
+      &.#{$block-class}--enable-sidepanel-resizer {
+        grid-template-columns: 1fr 0;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: all $duration-moderate-01 linear;
+        }
+      }
+    }
+
     border-inline-end: 1px solid $border-subtle-02;
     inset-inline-start: 0;
   }
@@ -200,6 +231,45 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       0 4px 10px 2px $ai-drop-shadow;
   }
 
+  .#{$clabs-prefix}__resizer--vertical::before {
+    position: absolute;
+    z-index: -1;
+    background-color: transparent;
+    block-size: 100%;
+    content: '';
+    inline-size: $spacing-01;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    transition: background-color $duration-moderate-01
+      motion(standard, productive);
+  }
+
+  &:hover {
+    .#{$clabs-prefix}__resizer--vertical::before {
+      background-color: $button-secondary-hover;
+    }
+  }
+
+  .#{$clabs-prefix}__resizer {
+    background-color: transparent;
+    grid-row: span 4 / span 3;
+    inset-inline-start: -$spacing-02;
+
+    &--vertical::after {
+      position: absolute;
+      z-index: 10;
+      block-size: 100%;
+      content: '';
+      inline-size: $spacing-03;
+      inset-inline-start: -$spacing-01;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $border-interactive;
+    }
+  }
+
   .#{$block-class}__header {
     --#{$block-class}--title-padding-bottom: #{$spacing-05};
 
@@ -497,10 +567,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       block-size: var(--#{$block-class}--actions-height);
     }
   }
-  &.#{$block-class}.#{$block-class}--xs
-    .#{$block-class}__actions-container.#{$action-set-block-class}--sm {
-    @include setPanelSize(map.get($side-panel-sizes, xs));
-  }
 }
 
 // form fields should receive correct background color
@@ -572,3 +638,54 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class}--has-decorator + .#{$block-class}__overlay {
   background-color: $ai-overlay;
 }
+
+// TODO: remove along with prefix after resizer available in labs
+.#{$clabs-prefix}__resizer {
+  position: relative;
+  flex: none;
+  background-color: $border-subtle-01;
+
+  &:hover {
+    @media (prefers-reduced-motion: no-preference) {
+      background-color: $border-interactive;
+      transition: background-color $duration-moderate-01;
+    }
+  }
+
+  &:focus {
+    background-color: $border-interactive;
+    outline: none;
+  }
+
+  &:active {
+    background-color: $border-interactive;
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: none;
+  }
+
+  &--horizontal {
+    block-size: $spacing-02;
+    cursor: ns-resize;
+  }
+
+  &--vertical {
+    cursor: ew-resize;
+    inline-size: $spacing-02;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
+  white-space: nowrap;
+}
+// END TODO: remove along with prefix after resizer available in labs

package/scss/global/decorators/_side-panel-decorator.scss

@@ -6,20 +6,48 @@
  */
 
 @mixin side-panel-decorator($prefix) {
-  .#{$prefix}container {
-    display: flex;
-    flex-direction: column;
-    block-size: 100vh;
+  .sbdocs {
+    // styles to apply to docs page iframe views of stories
+    .#{$prefix}container {
+      display: flex;
+      background-color: var(--cds-background, #ffffff);
+      block-size: 60vh;
+      box-shadow: 0 0 4px 1px var(--cds-layer-accent-01, #e0e0e0);
+      color: var(--cds-text-primary, #161616);
+    }
+    .#{$prefix}content {
+      block-size: unset;
+    }
   }
 
+  // styles applied to story pages
   .#{$prefix}content {
+    display: flex;
     flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    block-size: calc(100vh - 48px);
+
+    // dynamic prefix not working here, and this file is out of scope in the configuration
+    > div:first-of-type {
+      > div:last-of-type[class*='--annotation__content'] {
+        display: flex;
+        justify-content: center;
+      }
+    }
   }
 
   .#{$prefix}toggle {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    transform: translate(-50%, -50%);
+    margin: auto;
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    // sidepanel sets overflow hidden to body when open, which is right in context of irl application but in story page, as we are rendering many isolated sidepanel variants, we need to unset this for presentational purposes
+    /* stylelint-disable-next-line declaration-no-important */
+    overflow: unset !important;
+  }
+
+  .sbdocs .docs-story > div {
+    overflow: hidden;
   }
 }

package/telemetry.yml

@@ -534,6 +534,8 @@ collect:
         - overlayRef
         - positionTune
         - target
+        # CoachmarkBeacon
+        - buttonProps
         # CoachmarkDragbar
         - a11yKeyboardHandler
         - onDrag
@@ -674,6 +676,13 @@ collect:
         - successMessage
         - validExtensions
         # FeatureFlags
+        - defaultPortalTargetBody
+        - enableDatagridUseCustomizeColumns
+        - enableDatagridUseEditableCell
+        - enableDatagridUseInlineEdit
+        - enableSidepanelResizer
+        - enableTestFlagA
+        - enableTestFlagB
         - flags
         # FilterFlyout
         - flyoutIconDescription
@@ -844,6 +853,11 @@ collect:
         - primaryDangerDescription
         - resourceName
         - textConfirmation
+        # Resizer
+        - onDoubleClick
+        - onResize
+        - onResizeEnd
+        - orientation
         # RowSizeDropdown
         - datagridName
         - light
@@ -1183,6 +1197,9 @@ collect:
         - short
         # PageHeader - fullWidthGrid
         - xl
+        # Resizer - orientation
+        - horizontal
+        - vertical
   npm:
     dependencies: null
   js: