@carbon/ibm-products 2.43.2-canary.1 → 2.43.2-canary.101

package/lib/settings.d.ts

@@ -25,6 +25,7 @@ export const pkg: {
         ErrorEmptyState: boolean;
         ExportModal: boolean;
         ExpressiveCard: boolean;
+        FullPageError: boolean;
         HTTPError403: boolean;
         HTTPError404: boolean;
         HTTPErrorOther: boolean;
@@ -66,7 +67,6 @@ export const pkg: {
         BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;
-        FullPageError: boolean;
         ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.1+de3a8306c",
+  "version": "2.43.2-canary.101+137f5b1f1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,8 @@
     "lib",
     "scss",
     "flags.js",
-    "telemetry.yml"
+    "telemetry.yml",
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
   ],
   "keywords": [
     "carbon",
@@ -80,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.2.0",
+    "jest-config-ibm-cloud-cognitive": "^1.5.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -88,14 +89,14 @@
     "rimraf": "^5.0.5",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.0",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.111+137f5b1f1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -113,11 +114,11 @@
     "@carbon/grid": "^11.22.0",
     "@carbon/layout": "^11.21.0",
     "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.55.0",
-    "@carbon/themes": "^11.34.0",
+    "@carbon/react": "^1.60.3",
+    "@carbon/themes": "^11.37.1",
     "@carbon/type": "^11.26.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "de3a8306cc6ad34d09a642e11530a0c038610b63"
+  "gitHead": "137f5b1f103140707b90e1d6f94a0e7ba2636883"
 }

package/scss/components/Coachmark/_coachmark-overlay.scss

@@ -45,6 +45,11 @@ $draghandle-btn-class: #{$block-class}__handle;
 
   visibility: hidden;
 
+  &--tooltip {
+    position: initial;
+    transform: none !important;
+  }
+
   &--fixed {
     position: fixed;
     right: $spacing-05;
@@ -68,45 +73,19 @@ $draghandle-btn-class: #{$block-class}__handle;
     visibility: visible;
   }
 
-  // CARET STYLING
-  &__caret {
-    // background-color: this property is set in _coachmark-overlay-theme.scss
-    position: absolute;
-    z-index: 5902;
-    width: 0;
-    height: 0;
-    // border-bottom-color: this property is set in _coachmark-overlay-theme.scss
-    border-right: $caret-center solid transparent;
-    border-bottom: solid $caret-center $background-inverse;
-    border-left: $caret-center solid transparent;
-  }
-
-  // OVERLAY AND CARET POSITIONING
+  // OVERLAY POSITIONING
   &--top {
     $horizontal-push: calc($distance-offset - $caret-center);
     $translate-y: calc(-1 * (100% + $distance-offset + $caret-height));
 
     transform: translate(-50%, $translate-y);
 
-    .#{$block-class}__caret {
-      left: calc(50% - $caret-center);
-      transform: rotate(180deg);
-    }
-
     &-left {
       transform: translate(calc(-1 * $distance-offset), $translate-y);
-      .#{$block-class}__caret {
-        left: $horizontal-push;
-        transform: rotate(180deg);
-      }
     }
 
     &-right {
       transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
-      .#{$block-class}__caret {
-        right: $horizontal-push;
-        transform: rotate(180deg);
-      }
     }
   }
 
@@ -116,26 +95,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $translate-y: calc($distance-offset + $caret-height);
 
     transform: translate(-50%, $translate-y);
-    .#{$block-class}__caret {
-      top: $top;
-      left: calc(50% - $caret-center);
-    }
 
     &-left {
       transform: translate(calc(-1 * $distance-offset), $translate-y);
-      .#{$block-class}__caret {
-        top: $top;
-        left: $horizontal-push;
-      }
     }
 
     &-right {
       transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
-
-      .#{$block-class}__caret {
-        top: $top;
-        right: $horizontal-push;
-      }
     }
   }
 
@@ -145,28 +111,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $vertical-push: calc($distance-offset - ($caret-height * 0.5));
 
     transform: translate($translate-x, -50%);
-    .#{$block-class}__caret {
-      top: calc(50% - ($caret-height * 0.5));
-      right: $right;
-      transform: rotate(90deg);
-    }
 
     &-top {
       transform: translate($translate-x, calc(-1 * $distance-offset));
-      .#{$block-class}__caret {
-        top: $vertical-push;
-        right: $right;
-        transform: rotate(90deg);
-      }
     }
 
     &-bottom {
       transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
-      .#{$block-class}__caret {
-        right: $right;
-        bottom: $vertical-push;
-        transform: rotate(90deg);
-      }
     }
   }
 
@@ -176,28 +127,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $vertical-push: calc($distance-offset - ($caret-height * 0.5));
 
     transform: translate($translate-x, -50%);
-    .#{$block-class}__caret {
-      top: calc(50% - ($caret-height * 0.5));
-      left: $left;
-      transform: rotate(-90deg);
-    }
 
     &-top {
       transform: translate($translate-x, calc(-1 * $distance-offset));
-      .#{$block-class}__caret {
-        top: $vertical-push;
-        left: $left;
-        transform: rotate(-90deg);
-      }
     }
 
     &-bottom {
       transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
-      .#{$block-class}__caret {
-        bottom: $vertical-push;
-        left: $left;
-        transform: rotate(-90deg);
-      }
     }
   }
 

package/scss/components/Coachmark/_coachmark.scss

@@ -8,6 +8,7 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
+@use '@carbon/styles/scss/config';
 
 @use './coachmark-dragbar';
 @use './coachmark-header';
@@ -23,8 +24,8 @@
 // TODO: @use(s) of IBM Products component styles used by Coachmark
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-//$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
 
-// .#{$block-class} {
-//   // TODO: Styles.
-// }
+.#{$block-class} {
+  position: relative;
+}

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -69,9 +69,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
   }
   .#{$block-class}__target {
     // the hit area
-    position: absolute;
-    top: calc(-1 * $spacing-05);
-    left: calc(-1 * $spacing-05);
+    display: flex;
     width: $spacing-07;
     height: $spacing-07;
     padding: 0;

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -49,7 +49,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
-  width: max-content;
+  width: fit-content;
   flex-direction: row;
 }
 .#{$block-class}__content-container {
@@ -69,3 +69,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__group-separator {
   margin-top: $spacing-02;
 }
+.#{$block-class}__add-group,
+.#{$block-class}__group-separator {
+  width: fit-content;
+}

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

@@ -1,6 +1,6 @@
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/motion';
+@use '@carbon/react/scss/motion' as *;
 @use '@carbon/styles/scss/components/tag' as *;
 @use '@carbon/styles/scss/utilities/focus-outline';
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -30,7 +30,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
-    .#{$block-class}__connector-button
+    .#{$block-class}__connector-button,
+    .#{$block-class}__add-button
   ) {
   background-color: $tag-background-red;
   color: $tag-color-red;
@@ -52,10 +53,21 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   text-wrap: nowrap;
 }
 .#{$block-class}__group-preview {
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
+  .#{$block-class}__preview-condition {
+    display: flex;
+  }
+}
+.#{$block-class}__group-preview-animate {
+  height: auto;
   opacity: 0.5;
   pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
 }
-.#{$block-class}__connector-disabled {
+.#{$block-class}__connector--disabled {
   display: flex;
   min-width: $spacing-10;
   align-items: center;
@@ -63,3 +75,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   color: $text-helper;
   padding-inline: $spacing-03;
 }
+.#{$block-class}__condition-wrapper
+  > .#{$block-class}__condition-block:last-child
+  > .#{$block-class}__groupConnector {
+  margin-bottom: 0;
+}

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

@@ -18,7 +18,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   @include type-style('body-01');
 }
 
-.#{$block-class}__item__content {
+.#{$block-class}__popover-content-wrapper {
   overflow: auto;
   min-width: $spacing-07 + $spacing-13;
   max-width: $spacing-13 + $spacing-13;
@@ -96,7 +96,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__item-date,
 .#{$block-class}__item-text,
 .#{$block-class}__item-number,
-#{$block-class}__item-time {
+.#{$block-class}__item-time {
   padding-block-end: $spacing-05;
   padding-inline: $spacing-05;
 }
@@ -212,7 +212,12 @@ $colors: (
     background-color: $layer;
   }
   .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
+  .#{$block-class}__condition-wrapper
+    > :nth-child(2)
+    .#{$block-class}__button:not(
+      .#{$block-class}__add-button,
+      .#{$block-class}__add-condition-sub-group
+    ) {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -229,3 +234,27 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
+.#{$block-class}__add-condition-sub-group-wrapper {
+  z-index: -1;
+  width: 0;
+  margin-left: -50%;
+  opacity: 0;
+  pointer-events: none;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__add-condition-sub-group-wrapper--show {
+  z-index: 0;
+  width: auto;
+  margin-left: 0;
+  opacity: 1;
+  pointer-events: all;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__invalid-input {
+  display: flex;
+}
+.#{$block-class}__invalid-input > svg {
+  color: $support-warning;
+}

package/scss/components/CreateModal/_create-modal.scss

@@ -12,10 +12,6 @@
 @use '@carbon/styles/scss/type';
 @use '../../global/styles/project-settings' as c4p-settings;
 
-.#{c4p-settings.$pkg-prefix}--create-modal {
-  background-color: $background;
-}
-
 .#{c4p-settings.$pkg-prefix}--create-modal
   .#{c4p-settings.$carbon-prefix}--modal-close {
   display: none;

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
     position: sticky;
     z-index: 4;
     left: 0;
+    background-color: $background;
   }
   .#{$block-class}__td-th.#{$block-class}__td {
     @include font-family.font-weight('semibold');
@@ -200,6 +201,13 @@ $header-cell-background: $layer-accent-01;
       outline: 0;
     }
   }
+
+  .#{$block-class}__td-th.#{$block-class}__td_custom {
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-03;
+  }
+
   .#{$block-class}__selection-area--element {
     position: absolute;
     z-index: 2;
@@ -251,7 +259,9 @@ $header-cell-background: $layer-accent-01;
         background-color: $background-inverse;
       }
     }
-    .#{$block-class}__th--selected-header.#{$block-class}__th {
+    .#{$block-class}__th--selected-header.#{$block-class}__th:not(
+        .#{$block-class}__th--active-header-disabledSwapping
+      ) {
       cursor: grab;
     }
     .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {
@@ -267,6 +277,9 @@ $header-cell-background: $layer-accent-01;
     width: $spacing-01;
     background-color: $background-brand;
   }
+  .#{$block-class}__th--active-header-disabledSwapping {
+    cursor: pointer;
+  }
   .#{$block-class}__th--active-header,
   .#{$block-class}__td-th--active-header.#{$block-class}__td {
     background-color: $background-selected-hover;
@@ -282,7 +295,9 @@ $header-cell-background: $layer-accent-01;
       background-color: $background-inverse;
     }
   }
-  .#{$block-class}__th--selected-header.#{$block-class}__th {
+  .#{$block-class}__th--selected-header.#{$block-class}__th:not(
+      .#{$block-class}__th--active-header-disabledSwapping
+    ) {
     cursor: grab;
   }
   .#{$block-class}__th--selected-header-reorder-active.#{$block-class}__th {

package/scss/components/Datagrid/_datagrid.scss

@@ -80,7 +80,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   ) {
   min-width: auto;
 }
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--pagination {
-  background-color: $layer-02;
-}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -479,6 +479,7 @@
 }
 
 .#{$block-class}__head-hidden-select-all {
+  min-width: $spacing-09;
   padding-right: $spacing-09;
 
   &.#{$block-class}__select-all-sticky-left {

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -80,6 +80,19 @@ $row-heights: (
   align-items: center;
 }
 
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox-focus
+  .cds--checkbox-label::before {
+  outline: $spacing-01 solid $focus;
+  outline-offset: 1px;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox {
+  display: flex;
+  height: -webkit-fill-available;
+  justify-content: center;
+  padding-inline: $spacing-05;
+}
+
 .#{variables.$block-class}__static--outer-cell {
   display: flex;
   height: -webkit-fill-available;

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

@@ -5,8 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+// stylelint-disable carbon/layout-token-use
+
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/type/scss/font-family';
 @use '@carbon/layout' as *;
@@ -24,8 +26,8 @@
 
 .#{variables.$block-class}__customize-columns-tearsheet--actions
   input[role='searchbox'] {
-  height: $spacing-09;
-  padding-left: $spacing-09;
+  height: spacing.$spacing-09;
+  padding-left: spacing.$spacing-09;
   border-bottom: 1px solid $background-active;
 }
 
@@ -63,8 +65,8 @@
   z-index: 1;
   top: 0;
   display: flex;
-  height: $spacing-09;
-  padding-left: $spacing-08;
+  height: spacing.$spacing-09;
+  padding-left: spacing.$spacing-08;
   border-bottom: 1px solid $layer-active;
   background-color: $layer;
 

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

@@ -9,7 +9,7 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/layout' as *;
 
@@ -25,7 +25,7 @@ $action-set-height: to-rem(64px);
 
 .#{variables.$block-class}-filter-flyout {
   position: absolute;
-  top: $spacing-09;
+  top: spacing.$spacing-09;
   right: 0;
   display: none;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
@@ -53,7 +53,8 @@ $action-set-height: to-rem(64px);
 }
 
 .#{variables.$block-class}-filter-flyout__inner-container {
-  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
+  padding: spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-09
+    spacing.$spacing-05;
 }
 
 .#{variables.$block-class}-filter-flyout__inner-container::before {
@@ -74,7 +75,7 @@ $action-set-height: to-rem(64px);
   display: block;
   @include type-style('heading-compact-01');
 
-  margin-bottom: $spacing-06;
+  margin-bottom: spacing.$spacing-06;
 }
 
 .#{variables.$block-class}-filter-flyout__filters {

package/scss/components/HTTPErrors/_http-errors.scss

@@ -13,6 +13,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--http-errors;
+$block-class-404: #{c4p-settings.$pkg-prefix}--http-errors-404;
+$block-class-403: #{c4p-settings.$pkg-prefix}--http-errors-403;
+$block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
 
 .#{$block-class} .#{$block-class}__content {
   position: fixed;
@@ -66,3 +69,77 @@ $block-class: #{c4p-settings.$pkg-prefix}--http-errors;
     transform: scale(1.5);
   }
 }
+/* stylelint-disable carbon/theme-token-use */
+
+.#{$block-class-404}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-404}__prefix-cls-67 {
+  fill: #697077;
+}
+.#{$block-class-404}__prefix-cls-68 {
+  fill: #282828;
+}
+.#{$block-class-404}__prefix-cls-69 {
+  fill: #51565c;
+}
+.#{$block-class-404}__prefix-cls-70 {
+  fill: #002b50;
+}
+.#{$block-class-404}__prefix-cls-71 {
+  fill: #413d3d;
+}
+.#{$block-class-404}__prefix-cls-72 {
+  fill: #908b8b;
+}
+.#{$block-class-404}__prefix-cls-75 {
+  fill: #a4a4a5;
+}
+.#{$block-class-404}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-403}__prefix-cls-80 {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
+}
+.#{$block-class-403}__prefix-cls-75 {
+  fill: #595655;
+}
+.#{$block-class-403}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-77 {
+  fill: #373d42;
+}
+.#{$block-class-403}__prefix-cls-78 {
+  fill: #002b50;
+}
+.#{$block-class-403}__prefix-cls-81 {
+  fill: #2b2828;
+}
+.#{$block-class-other}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-other}__prefix-cls-69 {
+  fill: #697077;
+}
+.#{$block-class-other}__prefix-cls-70 {
+  fill: #282828;
+}
+.#{$block-class-other}__prefix-cls-71 {
+  fill: #51565c;
+}
+.#{$block-class-other}__prefix-cls-72 {
+  fill: #e0dbda;
+}
+.#{$block-class-other}__prefix-cls-73 {
+  fill: #003d73;
+}
+.#{$block-class-other}__prefix-cls-75 {
+  opacity: 0.15;
+}
+
+/* stylelint-enable */

package/scss/components/OptionsTile/_options-tile.scss

@@ -163,18 +163,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   overflow: hidden;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__summary,
+.#{$block-class}__summary.#{$block-class}__summary--open:not(
+    .#{$block-class}__summary--closing
+  ),
 .#{$block-class}__summary--hidden {
   height: 0;
   margin-top: 0;
   opacity: 0;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__chevron {
+.#{$block-class}__chevron.#{$block-class}__chevron--open:not(
+    .#{$block-class}__chevron--closing
+  ) {
   transform: rotate(180deg);
 }
 

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

@@ -363,7 +363,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: fixed;
+    position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;