@carbon/ibm-products-styles 2.55.0 → 2.56.0-rc.0

package/scss/components/StatusIndicator/_carbon-imports.scss

@@ -8,5 +8,5 @@
 // Import any Carbon component styles used from StatusIndicator in this file.
 // StatusIndicator uses the following Carbon components:
 // InlineLoading, Button
-@use '@carbon/react/scss/components/inline-loading';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/inline-loading';
+@use '@carbon/styles/scss/components/button';

package/scss/components/StatusIndicator/_status-indicator.scss

@@ -28,17 +28,17 @@ $block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
 .#{$block-class}__title {
   @include type-style('heading-02');
 
-  margin-bottom: $spacing-02;
+  margin-block-end: $spacing-02;
 }
 .#{$block-class-step}__details {
   display: flex;
-  min-height: $spacing-07;
   align-items: center;
+  min-block-size: $spacing-07;
 }
 .#{$block-class-step}__icon {
   position: relative;
   display: flex;
-  width: $spacing-06;
+  inline-size: $spacing-06;
 }
 .#{$block-class-step}__text {
   @include type-style('body-compact-01');
@@ -47,12 +47,12 @@ $block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
 }
 .#{$block-class} .#{$block-class}__button {
   align-items: center;
-  margin-top: $spacing-01;
-  margin-left: $spacing-03;
+  margin-block-start: $spacing-01;
+  margin-inline-start: $spacing-03;
 }
 .#{$block-class} .#{$block-class}__button:not([disabled]) svg {
-  margin-left: $spacing-03;
   fill: currentColor;
+  margin-inline-start: $spacing-03;
 }
 
 // Text
@@ -67,11 +67,11 @@ $block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
 //
 // Override <InlineLoading's> large margins.
 .#{$block-class-step}--active .#{$block-class-step}__icon {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .#{$block-class-step}--active
   .#{c4p-settings.$carbon-prefix}--inline-loading__animation {
-  margin-right: to-rem(7px);
+  margin-inline-end: to-rem(7px);
 }
 // /Override
 //
@@ -86,8 +86,8 @@ $block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
 .#{$block-class-step}__error-message {
   @include type-style('label-01');
 
-  margin-top: to-rem(-2px);
-  margin-bottom: to-rem(6px);
-  margin-left: $spacing-06;
   color: $text-error;
+
+  margin-block: to-rem(-2px) to-rem(6px);
+  margin-inline-start: $spacing-06;
 }

package/scss/components/StringFormatter/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // Import any Carbon component styles used from StringFormatter in this file.
 // StringFormatter uses the following Carbon components:
-@use '@carbon/react/scss/components/tooltip';
+@use '@carbon/styles/scss/components/tooltip';

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

@@ -13,7 +13,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // StringFormatter uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by StringFormatter
@@ -24,20 +24,20 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 
 .#{$block-class} {
   display: inline-block;
-  text-align: left;
+  text-align: start;
 }
 
 .#{$block-class}--content {
   display: inline-block;
-  text-align: left;
+  text-align: start;
 }
 
 .#{$block-class}--truncate {
   display: -webkit-box;
   overflow: hidden;
-  max-width: 80ch;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
+  max-inline-size: 80ch;
 }
 
 .#{$block-class}__tooltip > button {
@@ -49,8 +49,8 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 }
 
 .#{$block-class} .#{$popover-block-class} {
-  max-width: $spacing-05;
   margin: 0 auto;
+  max-inline-size: $spacing-05;
 }
 
 .#{$block-class} .#{$popover-block-class}-content {
@@ -68,8 +68,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
   .#{$popover-block-class}--right-bottom
   .#{$popover-block-class},
 .#{$block-class} .#{$popover-block-class}--right-top .#{$popover-block-class} {
-  margin-right: 0;
-  margin-left: auto;
+  margin-inline: auto 0;
 }
 
 .#{$block-class} .#{$popover-block-class}--top .#{$popover-block-class}-caret,

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -16,7 +16,7 @@
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 
 // TagOverflow uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by TagOverflow
@@ -53,14 +53,14 @@ $block-class-modal: #{$block-class}-modal;
 .#{$block-class}__item--tag span {
   display: inline-block;
   overflow: hidden;
-  max-width: $spacing-12;
+  max-inline-size: $spacing-12;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .#{$block-class}__indicator {
   display: inline-block;
-  max-width: $spacing-09;
+  max-inline-size: $spacing-09;
 }
 
 .#{c4p-settings.$carbon-prefix}--popover
@@ -83,15 +83,15 @@ $block-class-modal: #{$block-class}-modal;
 
 .#{$block-class-overflow}--hidden {
   overflow: hidden;
-  max-width: 0;
+  max-inline-size: 0;
   visibility: hidden;
 }
 
 @include mixins.block-wrap('#{$block-class-overflow}__el') {
   &.#{$block-class-overflow}__el {
     // removes the min width in Carbon
-    min-width: initial;
-    text-align: left;
+    min-inline-size: initial;
+    text-align: start;
   }
 
   .#{$block-class-overflow}__trigger {
@@ -118,8 +118,8 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-overflow}__show-all-tags-link {
-    margin-top: $spacing-03;
     color: $link-inverse;
+    margin-block-start: $spacing-03;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
@@ -134,13 +134,13 @@ $block-class-modal: #{$block-class}-modal;
 
     display: block;
     overflow: hidden;
-    min-width: initial;
-    min-height: initial;
     padding: 0;
     border-radius: 0;
     margin: 0;
     background-color: inherit;
     color: inherit;
+    min-block-size: initial;
+    min-inline-size: initial;
   }
 
   .#{$block-class-overflow}__tag
@@ -175,18 +175,17 @@ $block-class-modal: #{$block-class}-modal;
 
   .#{$block-class-modal}__container {
     @include breakpoint(md) {
-      height: 90%;
-      max-height: 450px;
+      block-size: 90%;
+      max-block-size: 450px;
     }
   }
 
   .#{$block-class-modal}__search {
-    margin-top: $spacing-05;
-    margin-bottom: 0;
+    margin-block: $spacing-05 0;
   }
 
   .#{$block-class-modal}__header {
-    padding-right: 0;
-    margin-right: $spacing-05;
+    margin-inline-end: $spacing-05;
+    padding-inline-end: 0;
   }
 }

package/scss/components/TagSet/_carbon-imports.scss

@@ -7,8 +7,8 @@
 
 // TagSet uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalBody, Search, Link, Tag, Tooltip
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/search';
-@use '@carbon/react/scss/components/link';
-@use '@carbon/react/scss/components/tag';
-@use '@carbon/react/scss/components/popover';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/search';
+@use '@carbon/styles/scss/components/link';
+@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/components/popover';

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

@@ -20,13 +20,13 @@ $block-class-modal: #{$_block-class}-modal;
 @include block-wrap($_block-class) {
   &.#{$_block-class} {
     display: block;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$_block-class}__space {
     position: relative;
     display: block;
-    width: 100%;
+    inline-size: 100%;
     white-space: nowrap;
   }
 
@@ -66,7 +66,7 @@ $block-class-modal: #{$_block-class}-modal;
 
   .#{$block-class-overflow}--hidden {
     overflow: hidden;
-    max-width: 0;
+    max-inline-size: 0;
     visibility: hidden;
   }
 }
@@ -80,27 +80,26 @@ $block-class-modal: #{$_block-class}-modal;
 
   .#{$block-class-modal}__container {
     @include breakpoint(md) {
-      height: 90%;
-      max-height: 450px;
+      block-size: 90%;
+      max-block-size: 450px;
     }
   }
 
   .#{$block-class-modal}__search {
-    margin-top: $spacing-05;
-    margin-bottom: 0;
+    margin-block: $spacing-05 0;
   }
 
   .#{$block-class-modal}__header {
-    padding-right: 0;
-    margin-right: $spacing-05;
+    margin-inline-end: $spacing-05;
+    padding-inline-end: 0;
   }
 }
 
 @include block-wrap('#{$block-class-overflow}__tagset-popover') {
   &.#{$block-class-overflow}__tagset-popover {
     // removes the min width in Carbon
-    min-width: initial;
-    text-align: left;
+    min-inline-size: initial;
+    text-align: start;
   }
 
   .#{$block-class-overflow}__popover-trigger {
@@ -127,8 +126,8 @@ $block-class-modal: #{$_block-class}-modal;
   }
 
   .#{$block-class-overflow}__show-all-tags-link {
-    margin-top: $spacing-03;
     color: $link-inverse;
+    margin-block-start: $spacing-03;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
@@ -143,13 +142,13 @@ $block-class-modal: #{$_block-class}-modal;
 
     display: block;
     overflow: hidden;
-    min-width: initial;
-    min-height: initial;
     padding: 0;
     border-radius: 0;
     margin: 0;
     background-color: inherit;
     color: inherit;
+    min-block-size: initial;
+    min-inline-size: initial;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

package/scss/components/Tearsheet/_carbon-imports.scss

@@ -7,5 +7,5 @@
 
 // Tearsheets use the following Carbon components:
 // Button, ComposedModal, ModalHeader, ModalBody,
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/layer';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/layer';

package/scss/components/Tearsheet/_tearsheet.scss

@@ -1,3 +1,5 @@
+// stylelint-disable carbon/motion-duration-use, carbon/motion-easing-use
+
 //
 // Copyright IBM Corp. 2020, 2023
 //
@@ -38,7 +40,8 @@ $motion-duration: $duration-moderate-02;
       inset: 0;
       opacity: var(--overlay-opacity);
 
-      transition: background-color $motion-duration motion(exit, expressive),
+      transition:
+        background-color $motion-duration motion(exit, expressive),
         opacity $motion-duration motion(exit, expressive);
 
       @media (prefers-reduced-motion: reduce) {
@@ -54,8 +57,8 @@ $motion-duration: $duration-moderate-02;
     z-index: utilities.z('modal') + 1;
     align-items: flex-end;
     color: $text-primary;
-    // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear $motion-duration,
+    transition:
+      visibility 0s linear $motion-duration,
       background-color $motion-duration motion(exit, expressive),
       opacity $motion-duration motion(exit, expressive);
     --#{$block-class}--stacking-scale-factor-single: 0.95;
@@ -65,8 +68,8 @@ $motion-duration: $duration-moderate-02;
   &.is-visible {
     z-index: utilities.z('modal');
     align-items: flex-end;
-    // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear,
+    transition:
+      visibility 0s linear,
       background-color $motion-duration motion(entrance, expressive),
       opacity $motion-duration motion(entrance, expressive);
     @media (prefers-reduced-motion: reduce) {
@@ -98,9 +101,9 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__container {
-    top: auto;
-    height: 100%;
-    max-height: calc(100% - #{$spacing-09});
+    block-size: 100%;
+    inset-block-start: auto;
+    max-block-size: calc(100% - #{$spacing-09});
     // we want the enter/leave animation to run up most of the height of the
     // viewport, capped at 500px to set an upper limit on the movement speed
     // For the reason for calc() see https://github.com/sass/sass/issues/2849
@@ -114,11 +117,10 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-ai-label
     .#{$block-class}__container {
     border: 1px solid transparent;
-    border-bottom: 0;
 
     /* override carbon ai removing background gradient */
-    background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
-        padding-box,
+    background:
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
       linear-gradient(
           to bottom,
           var(--cds-ai-border-start, #78a9ff),
@@ -126,12 +128,14 @@ $motion-duration: $duration-moderate-02;
         )
         border-box,
       linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+    border-block-end: 0;
     box-shadow: 0 4px 10px 2px $ai-drop-shadow;
   }
 
   // extra specificity to ensure this transition overrides the carbon default
   &.#{$block-class}.#{$block-class} .#{$block-class}__container {
-    transition: transform $motion-duration motion(entrance, expressive),
+    transition:
+      transform $motion-duration motion(entrance, expressive),
       max-height $motion-duration motion(entrance, expressive);
   }
 
@@ -143,18 +147,18 @@ $motion-duration: $duration-moderate-02;
     .#{$block-class}__container:not(
       .#{$block-class}__container--mixed-size-stacking
     ) {
-    max-height: calc(100% - #{$spacing-09} + #{$spacing-05});
+    max-block-size: calc(100% - #{$spacing-09} + #{$spacing-05});
   }
 
   &.#{$block-class}--stacked-1-of-3
     .#{$block-class}__container:not(
       .#{$block-class}__container--mixed-size-stacking
     ) {
-    max-height: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
+    max-block-size: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
   }
 
   .#{$block-class}__container--lower {
-    max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}));
+    max-block-size: calc(100% - (#{$spacing-09} + #{$spacing-08}));
   }
 
   &.#{$block-class}--stacked-1-of-2
@@ -165,31 +169,33 @@ $motion-duration: $duration-moderate-02;
     .#{$block-class}__container--lower:not(
       .#{$block-class}__container--mixed-size-stacking
     ) {
-    max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05});
+    max-block-size: calc(
+      100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05}
+    );
   }
 
   &.#{$block-class}--stacked-1-of-3
     .#{$block-class}__container--lower:not(
       .#{$block-class}__container--mixed-size-stacking
     ) {
-    max-height: calc(
+    max-block-size: calc(
       100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
     );
   }
 
   &.#{$block-class}--wide .#{$block-class}__container {
-    width: 100%;
+    inline-size: 100%;
   }
 
   &.#{$block-class}--wide
     .#{$pkg-prefix}--action-set
     .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive {
-    height: $spacing-11;
+    block-size: $spacing-11;
   }
 
   @include breakpoint(md) {
     &.#{$block-class}--wide .#{$block-class}__container {
-      width: calc(100% - (2 * #{$spacing-10}));
+      inline-size: calc(100% - (2 * #{$spacing-10}));
     }
   }
 
@@ -204,16 +210,16 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--wide .#{$block-class}__header {
     padding: $spacing-06 $spacing-07;
-    border-bottom: 1px solid $border-subtle-01;
     margin: 0;
     background-color: $layer;
+    border-block-end: 1px solid $border-subtle-01;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header {
     padding: $spacing-05;
-    border-bottom: 1px solid $border-subtle-01;
     margin: 0;
     background-color: $layer;
+    border-block-end: 1px solid $border-subtle-01;
   }
 
   .#{$block-class}__header-content {
@@ -227,14 +233,14 @@ $motion-duration: $duration-moderate-02;
 
   .#{$block-class}__header-actions {
     flex: 0 0 auto;
-    padding-left: $spacing-06;
+    padding-inline-start: $spacing-06;
   }
 
   // buttons inside button sets in the header action area have 8px gap
   .#{$block-class}__header-actions
     .#{$carbon-prefix}--btn-set
     .#{$carbon-prefix}--btn:not(:first-of-type) {
-    margin-left: $spacing-03;
+    margin-inline-start: $spacing-03;
   }
 
   .#{$block-class}__header--no-close-icon {
@@ -247,18 +253,18 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header-description {
-    max-width: 100%;
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
+    max-inline-size: 100%;
+
     @include type.type-style('body-compact-01');
+
     @include breakpoint-up('md') {
-      max-width: 60%;
+      max-inline-size: 60%;
     }
-
-    word-break: break-word;
   }
 
   .#{$block-class}__description-tooltip .#{$carbon-prefix}--definition-term {
-    border-bottom: 0;
+    border-block-end: 0;
     letter-spacing: inherit;
     word-break: break-word;
   }
@@ -276,10 +282,11 @@ $motion-duration: $duration-moderate-02;
     overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
-    margin-top: $spacing-03;
+    margin-block-start: $spacing-03;
   }
 
   .#{$block-class}__header-navigation {
@@ -309,7 +316,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
-    max-width: 80%;
+    max-inline-size: 80%;
   }
 
   .#{$block-class}__header-navigation {
@@ -324,25 +331,28 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__resize-detector {
-    width: 100%;
-    height: 0;
+    block-size: 0;
+    inline-size: 100%;
   }
 
   .#{$block-class}__influencer {
     flex: 0 0 257px; // influencer width 256px plus 1px border
-    border-right: 1px solid $border-subtle-01;
+    border-inline-end: 1px solid $border-subtle-01;
     overflow-y: auto;
+    @supports (overflow-block: auto) {
+      overflow-block: auto;
+    }
 
     // the normal 80% content width inside modals should not apply to influencer content
     // apply the class again for higher specificity
     &.#{$block-class}__influencer p {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
   }
 
   @include breakpoint-down(md) {
     .#{$block-class}__container {
-      max-height: 100%;
+      max-block-size: 100%;
     }
 
     .#{$block-class}__influencer {
@@ -374,8 +384,8 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__main .#{$block-class}__influencer {
-    border-right: none;
-    border-left: 1px solid $border-subtle-01;
+    border-inline-end: none;
+    border-inline-start: 1px solid $border-subtle-01;
   }
 
   .#{$block-class}__content {
@@ -428,12 +438,16 @@ $motion-duration: $duration-moderate-02;
     grid-column: 1 / -1;
     grid-row: -1 / -1;
     overflow-x: auto;
+    @supports (overflow-inline: auto) {
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      overflow-inline: auto;
+    }
   }
 
   .#{$block-class}__buttons {
     display: inline-flex;
-    min-width: 100%;
-    border-top: 1px solid $border-subtle-01;
+    border-block-start: 1px solid $border-subtle-01;
+    min-inline-size: 100%;
   }
 
   &.#{$block-class}--wide .#{$block-class}__buttons {

package/scss/components/Toolbar/_carbon-imports.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

package/scss/components/Toolbar/_toolbar.scss

@@ -22,9 +22,9 @@ $toolbar-dimensions: $spacing-08;
   }
 
   display: flex;
-  min-width: $toolbar-dimensions;
-  min-height: $toolbar-dimensions;
   background-color: $layer-01;
+  min-block-size: $toolbar-dimensions;
+  min-inline-size: $toolbar-dimensions;
 }
 
 .#{$block-class}--vertical,
@@ -33,23 +33,23 @@ $toolbar-dimensions: $spacing-08;
 }
 
 .#{$block-class}--vertical {
-  max-width: $toolbar-dimensions;
+  max-inline-size: $toolbar-dimensions;
 }
 
 .#{$block-class}__group {
   display: flex;
-  border-right: $border;
-  border-bottom: $border;
+  border-block-end: $border;
+  border-inline-end: $border;
 }
 
 .#{$block-class}--vertical > .#{$block-class}__group,
 .#{$block-class}__group:last-of-type {
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 
 .#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
 .#{$block-class} .#{$carbon-prefix}--dropdown {
-  border-bottom-width: 0;
+  border-block-end-width: 0;
 }
 
 .#{$block-class}__button--caret {
@@ -62,14 +62,14 @@ $toolbar-dimensions: $spacing-08;
   $position: $spacing-01;
 
   position: absolute;
-  right: $position;
-  bottom: $position;
-  width: $caret-dimensions;
-  height: $caret-dimensions;
   background: linear-gradient(
     to right bottom,
     transparent 50%,
     $icon-primary 50%
   );
+  block-size: $caret-dimensions;
   content: '';
+  inline-size: $caret-dimensions;
+  inset-block-end: $position;
+  inset-inline-end: $position;
 }