@carbon/ibm-products 1.22.0 → 1.24.0

package/scss/components/PageHeader/_page-header.scss

@@ -39,21 +39,27 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
 @keyframes background-appear {
   from {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--from-color);
   }
 
   to {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--to-color);
   }
 }
 @keyframes background-and-shadow-appear {
   from {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--from-color);
+    /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: 0 1px 0 var(--from-color);
   }
 
   to {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--to-color);
+    /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: 0 1px 0 var(--to-color-shadow);
   }
 }
@@ -86,6 +92,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     $animation: background-and-shadow-appear;
   }
 
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: $animation $duration linear paused forwards;
   // Added separately for clarity
   animation-delay: calc(
@@ -102,6 +109,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       /* z-index used to raise above any position relative content as per Carbon header */
       /* dropped  1 below Carbon header so as not to overlay the side panel */
       z-index: $z-index-header-minus;
+      /* stylelint-disable-next-line carbon/layout-token-use */
       top: var(--#{$block-class}--header-top);
       display: inline-block; /* cause top/bottom margin to reserve space */
       width: 100%;
@@ -188,6 +196,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       content: '';
       opacity: 0;
       transform: translateX(-50%) scaleX(1);
+      // stylelint-disable-next-line carbon/motion-easing-use
       transition: all $duration--moderate-01 ease-out;
     }
 
@@ -329,10 +338,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       &:not(.#{$block-class}__breadcrumb-title--pre-collapsed) {
         opacity: var(--#{$block-class}--breadcrumb-title-opacity);
 
-        // stylelint-disable-next-line carbon/layout-token-use
-        transform: translateY(
-          var(--#{$block-class}--breadcrumb-title-top)
-        ); /* token linter does not support this form */
+        transform: translateY(var(--#{$block-class}--breadcrumb-title-top));
 
         visibility: var(--#{$block-class}--breadcrumb-title-visibility);
       }
@@ -427,6 +433,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title {
       @include carbon--type-style('productive-heading-04');
 
+      min-height: $spacing-08;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -241,7 +241,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       z-index: 4;
       background-color: $ui-01;
       opacity: var(--#{$block-class}--subtitle-opacity);
-      // stylelint-disable-next-line carbon/layout-token-use
       transform: translateY(var(--#{$block-class}--title-y-position));
     }
     .#{$block-class}__label-text {
@@ -251,7 +250,6 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       padding-right: $spacing-05;
       opacity: var(--#{$block-class}--subtitle-opacity);
       text-overflow: ellipsis;
-      // stylelint-disable-next-line carbon/layout-token-use
       transform: translateY(var(--#{$block-class}--title-y-position));
       white-space: nowrap;
     }
@@ -377,6 +375,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     .#{$block-class}__action-toolbar {
       position: sticky;
       z-index: 4;
+      /* stylelint-disable-next-line carbon/layout-token-use */
       top: var(--#{$block-class}--title-height);
       display: flex;
       align-items: center;

package/scss/components/StatusIcon/_status-icon.scss

@@ -119,7 +119,7 @@ $block-class: #{$pkg-prefix}--status-icon;
           @media (prefers-reduced-motion: reduce) {
             animation: none;
           }
-          // stylelint-disable-next-line carbon/motion-token-use
+          // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
           fill: --clr($icon, $theme);

package/scss/components/TagSet/_tag-set.scss

@@ -48,6 +48,10 @@ $block-class-modal: #{$block-class}-modal;
       white-space: nowrap;
     }
 
+    .#{$block-class}__tag-container--multiline {
+      flex-wrap: wrap;
+    }
+
     .#{$block-class}__tag-container--hidden {
       // This tag container is used to measure the width of all displayable tags
       @include measuring-container;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -32,7 +32,7 @@
       z-index: z('modal') + 1;
       align-items: flex-end;
       color: $text-01;
-      // stylelint-disable-next-line carbon/motion-token-use
+      // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
       transition: visibility 0s linear $motion-duration,
         background-color $motion-duration motion(exit, expressive),
         opacity $motion-duration motion(exit, expressive);
@@ -43,7 +43,7 @@
     &.is-visible {
       z-index: z('modal');
       align-items: flex-end;
-      // stylelint-disable-next-line carbon/motion-token-use
+      // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
       transition: visibility 0s linear,
         background-color $motion-duration motion(entrance, expressive),
         opacity $motion-duration motion(entrance, expressive);

package/scss/components/WebTerminal/_web-terminal.scss

@@ -42,7 +42,8 @@ $block-class: #{$pkg-prefix}--web-terminal;
   position: fixed;
   top: $spacing-09;
   right: 0;
-  width: $web-terminal-width;
+  width: 100%;
+  max-width: $web-terminal-width;
   height: calc(100vh - #{$spacing-09});
   border-left: 1px solid $gray-90;
   color: $text-01;

package/scss/components/_index.scss

@@ -45,3 +45,6 @@
 @import './InlineEdit/index';
 @import './DataSpreadsheet/index';
 @import './Datagrid/index';
+@import './EditTearsheet/index';
+@import './EditTearsheetNarrow/index';
+@import './EditFullPage/index';