@carbon/ibm-products-styles 2.69.0 → 2.70.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.69.0",
+  "version": "2.70.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -50,7 +50,7 @@
     "cross-env": "^10.0.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.32.0",
+    "jest-config-ibm-cloud-cognitive": "^1.33.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
@@ -67,5 +67,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "d11657732618b5ad89db5b9350997837a7bcb996"
+  "gitHead": "c25fcbe02058e6ad4d9e701466eb540f5ee24833"
 }

package/scss/components/Coachmark/_coachmark.scss

@@ -9,6 +9,8 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/config';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 @use './coachmark-dragbar';
 @use './coachmark-header';
@@ -43,4 +45,9 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--coachmark__next;
       margin-inline-end: auto;
     }
   }
+  .#{$block-class-next}--content-header--is-dragging {
+    border-radius: 0;
+    box-shadow: 0 0 0 $spacing-02 $icon-inverse;
+    outline: $spacing-01 solid $background-inverse;
+  }
 }

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -88,3 +88,27 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   > .#{$block-class}__groupConnector {
   margin-block-end: 0;
 }
+
+.#{$block-class}__readonly {
+  .#{$block-class}__condition-inner-block,
+  .#{$block-class}__connector,
+  .#{$block-class}__action-block,
+  .#{$block-class}__add-condition-wrapper,
+  .#{$block-class}__groupConnector {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px $border-subtle-00;
+
+    button {
+      background: transparent;
+      cursor: default;
+
+      svg {
+        color: $icon-disabled;
+      }
+    }
+  }
+}
+
+.#{$block-class}__condition-inner-block {
+  display: flex;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -61,7 +61,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   padding-inline: $spacing-05;
 }
 
-.#{$block-class}__item-option__option:hover {
+.#{$block-class}__item-option__option[aria-disabled] {
+  color: $text-disabled;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    cursor: not-allowed;
+    outline: none;
+  }
+}
+.#{$block-class}__item-option__option[aria-hidden] {
+  display: none;
+}
+
+.#{$block-class}__item-option__option:not([aria-disabled]):hover {
   background-color: $layer-hover;
 }
 
@@ -91,17 +107,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   border-block-start: 0.0625rem solid $border-subtle;
 }
 
-.#{$block-class}__item-option__option:hover
-  .#{$block-class}__item-option__option-content,
-.#{$block-class}__item-option__option[aria-selected='true']
-  .#{$block-class}__item-option__option-content,
-.#{$block-class}__item-option__option:hover
-  + .#{$block-class}__item-option__option
-  .#{$block-class}__item-option__option-content,
-.#{$block-class}__item-option__option[aria-selected='true']
-  + .#{$block-class}__item-option__option
-  .#{$block-class}__item-option__option-content {
-  border-block-start-color: transparent;
+.#{$block-class}__item-option__option:not([aria-disabled]) {
+  &:hover,
+  &[aria-selected='true'],
+  &:hover + .#{$block-class}__item-option__option,
+  &[aria-selected='true'] + .#{$block-class}__item-option__option {
+    .#{$block-class}__item-option__option-content {
+      border-block-start-color: transparent;
+    }
+  }
 }
 
 .#{$block-class}__item-option__option[aria-selected='true'] {

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

@@ -188,11 +188,16 @@ $clabs-prefix: 'clabs';
     --#{$block-class}--actions-height: #{$spacing-09};
   }
 
-  &.#{$block-class}--slide-in,
   &:not(.#{$block-class}--has-overlay) {
     box-shadow: 0 $spacing-01 $spacing-02 $overlay;
   }
 
+  // Slide-in panels should use border not shadows since they don’t layer
+  &.#{$block-class}--slide-in,
+  &.#{$block-class}--slide-in:not(.#{$block-class}--has-overlay) {
+    box-shadow: none;
+  }
+
   .#{$block-class}__actions-container {
     inline-size: 100%;
   }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -209,6 +209,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide .#{$block-class}__header {
+    overflow: visible;
     padding: $spacing-06 $spacing-07;
     margin: 0;
     background-color: $layer;

package/scss/components/TruncatedText/_truncated-text.scss

@@ -16,6 +16,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
+    line-height: initial;
     text-overflow: clip;
   }