@carbon/ibm-products-styles 2.61.0-rc.0 → 2.62.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.61.0-rc.0",
+  "version": "2.62.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -52,7 +52,7 @@
     "cross-env": "^7.0.3",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.24.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.25.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-check-updates": "^17.1.15",
     "npm-run-all": "^4.1.5",
@@ -61,14 +61,14 @@
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.31.0",
-    "@carbon/layout": "^11.29.0",
-    "@carbon/motion": "^11.24.0",
-    "@carbon/themes": "^11.46.0",
-    "@carbon/type": "^11.35.0"
+    "@carbon/grid": "^11.34.0",
+    "@carbon/layout": "^11.32.0",
+    "@carbon/motion": "^11.26.0",
+    "@carbon/themes": "^11.50.0",
+    "@carbon/type": "^11.38.0"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "1ae84b1d3e24190c7235618e084dc950a1cc8842"
+  "gitHead": "4949e7eacdce0ffc474cc34e7df381ff153f3e83"
 }

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -11,6 +11,9 @@
 @use './variables' as *;
 
 .#{$block-class}__sortableColumn {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-inline: $spacing-05 !important;
+
   .#{c4p-settings.$carbon-prefix}--table-header-label .header-title {
     display: inline-block;
     inline-size: auto;

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -108,7 +108,7 @@ $block-size: 38.5rem;
   .#{$block-class}__header-container {
     position: sticky;
     z-index: 2;
-    padding: $spacing-03 $spacing-05 $spacing-05;
+    padding: $spacing-03 $spacing-05;
     background-color: $layer-01;
     border-block-end: 1px solid $border-subtle-01;
     inset-block-start: 0;
@@ -117,9 +117,12 @@ $block-size: 38.5rem;
       align-items: center;
       justify-content: space-between;
     }
-    .#{$block-class}__do-not-disturb-toggle
+    .#{$block-class}__do-not-disturb-toggle {
+      padding-block-end: $spacing-03;
+
       .#{c4p-settings.$carbon-prefix}--toggle__label-text {
-      @include utilities.visually-hidden;
+        @include utilities.visually-hidden;
+      }
     }
     .#{$block-class}__dismiss-button {
       color: $text-primary;
@@ -140,7 +143,7 @@ $block-size: 38.5rem;
     background-color: $layer-01;
     color: $text-secondary;
     // stylelint-disable-next-line carbon/layout-use
-    inset-block-start: 4.8125rem;
+    inset-block-start: 3.0625rem;
   }
   .#{$block-class}__notification:hover,
   .#{$block-class}__notification:focus {
@@ -345,3 +348,12 @@ $block-size: 38.5rem;
     }
   }
 }
+
+.#{$block-class}__header-container:has(
+    .#{$block-class}__do-not-disturb-toggle
+  ) {
+  + .#{$block-class}__main-section .#{$block-class}__time-section-label {
+    // stylelint-disable-next-line carbon/layout-use
+    inset-block-start: 4.8125rem;
+  }
+}

package/scss/components/StringFormatter/_string-formatter.scss

@@ -24,7 +24,24 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 
 .#{$block-class} {
   display: inline-block;
-  text-align: start;
+
+  &--truncate {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    line-height: inherit;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+
+  button.cds--definition-term {
+    border-block-end: none;
+    letter-spacing: inherit;
+  }
+
+  .cds--popover-container {
+    display: flex;
+  }
 }
 
 .#{$block-class}--content {
@@ -37,7 +54,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
-  max-inline-size: 80ch;
 }
 
 .#{$block-class}__tooltip > button {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -253,6 +253,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header-description {
+    display: inline-flex;
     margin-block-start: $spacing-05;
     max-inline-size: 100%;
 
@@ -263,28 +264,6 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
-  .#{$block-class}__description-tooltip .#{$carbon-prefix}--definition-term {
-    border-block-end: 0;
-    letter-spacing: inherit;
-    word-break: break-word;
-  }
-
-  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the description
-  .#{$block-class}__description-tooltip {
-    display: inline-flex;
-    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
-      max-inline-size: fit-content;
-    }
-  }
-
-  .#{$block-class}__description-text {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-
   &.#{$block-class}--narrow .#{$block-class}__header-description {
     margin-block-start: $spacing-03;
   }