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

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

@@ -36,6 +36,10 @@ $right-section-std-width: 100% - $left-section-std-width;
 $left-section-alt-width: 75%;
 $right-section-alt-width: 100% - $left-section-alt-width;
 
+$animation: background-appear;
+// This transitions the background-color between from-color and to-color
+$duration: 1000ms;
+
 @keyframes background-appear {
   from {
     /* stylelint-disable-next-line carbon/theme-use */
@@ -77,19 +81,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   --to-color-shadow: #{$to-color-shadow};
 
   position: absolute;
-  top: 0;
-  left: 0;
   display: block;
-  width: 100%;
-  height: 100%;
-
-  // This transitions the background-color between from-color and to-color
-  $duration: 1000ms;
-
-  $animation: background-appear;
-  @if $with-shadow {
-    $animation: background-and-shadow-appear;
-  }
 
   /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- non-standard duration used */
   animation: $animation $duration linear paused forwards;
@@ -97,7 +89,15 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   animation-delay: calc(
     -1 * $duration * var(--#{$block-class}--background-opacity)
   );
+  block-size: 100%;
   content: '';
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+
+  @if $with-shadow {
+    $animation: background-and-shadow-appear;
+  }
 }
 
 @include block-wrap($block-class) {
@@ -107,12 +107,12 @@ $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-use */
-    top: var(--#{$block-class}--header-top);
     display: inline-block; /* cause top/bottom margin to reserve space */
-    width: 100%;
     background-color: $background;
     color: $text-primary;
+    inline-size: 100%;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$block-class}--header-top);
 
     /* custom props */
     --#{$block-class}--breadcrumb-title-visibility: hidden;
@@ -135,18 +135,17 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}--width--xl {
-    padding-right: $spacing-07;
-    padding-left: $spacing-07;
+    padding-inline: $spacing-07;
   }
 
   .#{$block-class}__breadcrumb-row {
     position: sticky;
     z-index: $raised-z-index;
-    top: var(--#{$block-class}--breadcrumb-top); //2
-    min-height: $spacing-08;
+    inset-block-start: var(--#{$block-class}--breadcrumb-top); //2
+    min-block-size: $spacing-08;
 
     + .#{$block-class}__last-row-buffer--active {
-      height: $spacing-02;
+      block-size: $spacing-02;
     }
   }
 
@@ -154,46 +153,50 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       .#{$block-class}__breadcrumb-row--has-action-bar
     ) {
     // lifts up page title when there is no action bar
-    min-height: $spacing-07;
+    min-block-size: $spacing-07;
   }
 
   .#{$block-class}__breadcrumb-row--container {
     display: flex;
-    min-width: 100%;
     flex-wrap: nowrap;
+    min-inline-size: 100%;
   }
 
   .#{$block-class}__has-page-actions-without-action-bar {
+    max-inline-size: calc(0.6 * (100% + 2 * #{$spacing-05}));
     // NOTE: the extra spacing accounts for carbon margins
-    min-width: calc(0.6 * (100% + 2 * #{$spacing-05}));
-    max-width: calc(0.6 * (100% + 2 * #{$spacing-05}));
+    min-inline-size: calc(0.6 * (100% + 2 * #{$spacing-05}));
   }
 
   .#{$block-class}__has-page-actions-without-action-bar
     .#{$block-class}__has-page-actions-without-action-bar {
-    min-width: 100%;
+    min-inline-size: 100%;
   }
 
   .#{$block-class}__breadcrumb-row--has-action-bar
     .#{$block-class}__breadcrumb-row--container {
-    min-width: calc(
+    min-inline-size: calc(
       100% +
         (
-          var(--#{$block-class}--width-px) -
-            var(--#{$block-class}--breadcrumb-row-width-px)
-        ) / 2
+          var(--#{$block-class}--width-px) - var(
+              --#{$block-class}--breadcrumb-row-width-px
+            )
+        ) /
+        2
     );
   }
   .#{$block-class}__breadcrumb-row::after {
     position: absolute;
-    bottom: 0;
-    left: 50%;
     display: block;
-    width: 50vw;
-    height: 1px;
+    block-size: 1px;
     /* creates a full width box shadow without causing scroll */
-    box-shadow: 0 1px 0 0 $layer-accent-01, 0 1px 0 0 $layer-accent-01;
+    box-shadow:
+      0 1px 0 0 $layer-accent-01,
+      0 1px 0 0 $layer-accent-01;
     content: '';
+    inline-size: 50vw;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
     opacity: 0;
     transform: translateX(-50%) scaleX(1);
     // stylelint-disable-next-line carbon/motion-easing-use
@@ -205,12 +208,14 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     )::after,
   .#{$block-class}__breadcrumb-row--has-action-bar::after {
     /* creates a full width box shadow without causing scroll */
-    box-shadow: 25vw 1px 0 0 $layer-accent-01, -25vw 1px 0 0 $layer-accent-01;
+    box-shadow:
+      25vw 1px 0 0 $layer-accent-01,
+      -25vw 1px 0 0 $layer-accent-01;
     opacity: 1;
   }
 
   .#{$block-class}__breadcrumb-container {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$block-class}__action-bar-column {
@@ -219,13 +224,13 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__breadcrumb-row--has-breadcrumbs
     .#{$block-class}__action-bar-column {
-    // back button displayed only
-    max-width: $right-section-alt-width;
     flex: 0 1 $right-section-alt-width;
+    // back button displayed only
+    max-inline-size: $right-section-alt-width;
 
     @include breakpoint(md) {
-      max-width: $right-section-std-width;
       flex: 1 0 $right-section-std-width;
+      max-inline-size: $right-section-std-width;
     }
   }
 
@@ -247,9 +252,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   .#{$block-class}__breadcrumb-row .#{$block-class}__page-actions {
     position: relative;
     display: inline-block;
-    width: 100%;
-    max-width: var(--#{$block-class}--button-set-in-breadcrumb-width-px);
     flex: 1 1 var(--#{$block-class}--button-set-in-breadcrumb-width-px);
+    inline-size: 100%;
+    max-inline-size: var(--#{$block-class}--button-set-in-breadcrumb-width-px);
     opacity: 0;
     transition: opacity $duration-moderate-02 motion('entrance', 'productive');
     visibility: hidden;
@@ -264,8 +269,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__breadcrumb-column {
     overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
 
     @include breakpoint(md) {
       overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
@@ -274,21 +279,21 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__breadcrumb-row--has-action-bar.#{$block-class}__breadcrumb-row
     .#{$block-class}__breadcrumb-column {
-    // back button displayed only
-    max-width: $left-section-alt-width;
     flex: 0 1 $left-section-alt-width;
+    // back button displayed only
+    max-inline-size: $left-section-alt-width;
 
     @include breakpoint(md) {
-      max-width: $left-section-std-width;
       flex: 0 1 $left-section-std-width;
+      max-inline-size: $left-section-std-width;
     }
   }
 
   .#{$block-class}__has-page-actions-without-action-bar.#{$block-class}__breadcrumb-row
     .#{$block-class}__breadcrumb-column {
-    // the width of the breadcrumb column is adjusted elsewhere to compensate
-    max-width: 100%;
     flex: 0 1 100%;
+    // the width of the breadcrumb column is adjusted elsewhere to compensate
+    max-inline-size: 100%;
   }
 
   .#{$block-class}__breadcrumb-column--background,
@@ -302,28 +307,28 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__action-bar-column--influenced-by-collapse-button {
-    padding-right: $spacing-08;
+    padding-inline-end: $spacing-08;
   }
 
   .#{$block-class}__breadcrumb {
     @include type.type-style('label-01');
 
-    padding-top: $spacing-04;
+    padding-block-start: $spacing-04;
   }
 
   .#{$block-class}--breadcrumb.#{$breadcrumb-block-class}__with-items {
-    padding-top: 0;
+    padding-block-start: 0;
     @include breakpoint(md) {
-      padding-top: $spacing-04;
+      padding-block-start: $spacing-04;
     }
   }
 
   .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item {
-    margin-right: $spacing-02;
+    margin-inline-end: $spacing-02;
   }
 
   .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item::after {
-    margin-left: $spacing-02;
+    margin-inline-start: $spacing-02;
   }
 
   .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item,
@@ -350,11 +355,11 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__action-bar {
-    width: 100%;
-    max-width: var(--#{$block-class}--max-action-bar-width-px);
     flex: 1 1 var(--#{$block-class}--max-action-bar-width-px);
-    padding-top: $spacing-04;
-    margin-top: calc(-1 * #{$spacing-04}); /* align with breadcrumb */
+    inline-size: 100%;
+    margin-block-start: calc(-1 * #{$spacing-04}); /* align with breadcrumb */
+    max-inline-size: var(--#{$block-class}--max-action-bar-width-px);
+    padding-block-start: $spacing-04;
     vertical-align: top;
     white-space: nowrap;
   }
@@ -362,7 +367,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   .#{$block-class}__title-row {
     --title-row-margin-top: #{$spacing-01}; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
 
-    margin-bottom: 0;
+    margin-block-end: 0;
     transform: translateY(
       $spacing-01
     ); // position adjusted for editable title focus outline
@@ -372,43 +377,43 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     &.#{$block-class}__title-row--under-action-bar {
-      margin-top: $spacing-05;
+      margin-block-start: $spacing-05;
       transform: translateY(0); // Not needed under action bar
     }
 
     + .#{$block-class}__last-row-buffer--active {
-      height: $spacing-07;
+      block-size: $spacing-07;
     }
 
     &.#{$block-class}__title-row--spacing-below-03 {
-      margin-bottom: $spacing-03;
+      margin-block-end: $spacing-03;
     }
 
     &.#{$block-class}__title-row--spacing-below-05 {
       + .#{$block-class}__last-row-buffer--active {
-        height: $spacing-05;
+        block-size: $spacing-05;
       }
     }
 
     &.#{$block-class}__title-row--spacing-below-06 {
-      margin-bottom: $spacing-06;
+      margin-block-end: $spacing-06;
     }
 
     &.#{$block-class}__title-row--no-breadcrumb-row {
-      margin-top: $spacing-07;
+      margin-block-start: $spacing-07;
     }
   }
 
   &.#{$block-class}--has-navigation
     .#{$block-class}__title-row
     + .#{$block-class}__last-row-buffer--active {
-    height: calc(#{$spacing-06});
+    block-size: calc(#{$spacing-06});
   }
 
   &.#{$block-class}--has-navigation-tags-only
     .#{$block-class}__title-row
     + .#{$block-class}__last-row-buffer--active {
-    height: calc(#{$spacing-05});
+    block-size: calc(#{$spacing-05});
   }
 
   .#{$block-class}__title-row--sticky {
@@ -418,24 +423,24 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   .#{$block-class}__breadcrumb-row--has-breadcrumbs
     + .#{$block-class}__title-row--sticky {
     // stylelint-disable-next-line carbon/layout-use
-    top: calc(
+    inset-block-start: calc(
       var(--#{$block-class}--breadcrumb-top) - var(--title-row-margin-top)
     );
   }
 
   .#{$block-class}__title-column {
-    min-height: 40px;
     flex: 0 0 100%;
+    min-block-size: 40px;
 
     @include breakpoint-up('md') {
-      max-width: $left-section-std-width;
       flex: 1 0 $left-section-std-width;
+      max-inline-size: $left-section-std-width;
     }
   }
 
   .#{$block-class}__tooltip {
-    min-width: 0;
     flex-basis: auto;
+    min-inline-size: 0;
 
     button {
       border-block-end: none;
@@ -452,19 +457,19 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     @include type.type-style('heading-04');
 
     display: flex;
-    min-height: $spacing-08;
+    min-block-size: $spacing-08;
   }
 
   .#{$block-class}__title--editable {
     display: flex;
     overflow: visible;
     // move to match non-editable version position
-    margin-top: calc(-1 * #{$spacing-01});
-    margin-left: calc(-1 * #{$spacing-05});
+    margin-block-start: calc(-1 * #{$spacing-01});
+    margin-inline-start: calc(-1 * #{$spacing-05});
   }
 
   .#{$block-class}__title-skeleton {
-    height: $spacing-07;
+    block-size: $spacing-07;
   }
 
   .#{$block-class}__title--fades {
@@ -472,7 +477,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__title-icon {
-    margin-right: $spacing-04;
+    margin-inline-end: $spacing-04;
     // stylelint-disable-next-line carbon/layout-use
     transform: translateY(
       -$spacing-01
@@ -483,24 +488,24 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__page-actions {
     flex: 0 0 100%;
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
     white-space: nowrap;
 
     @include breakpoint-up('md') {
-      max-width: $right-section-std-width;
       flex: 0 1 $right-section-std-width;
-      margin-top: 0;
+      margin-block-start: 0;
+      max-inline-size: $right-section-std-width;
     }
   }
 
   .#{$block-class}__page-actions
     .#{$carbon-prefix}--btn-set
     .#{$carbon-prefix}--btn {
-    width: initial;
+    inline-size: initial;
   }
 
   .#{$block-class}__action-bar-column .#{$block-class}__page-actions {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .#{$block-class}__page-actions-container {
@@ -527,9 +532,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     position: relative; // ensure appears over ::before
     display: flex;
     overflow: hidden;
-    width: 100%;
-    height: 100%;
     justify-content: flex-end;
+    block-size: 100%;
+    inline-size: 100%;
   }
 
   .#{$block-class}__title-row .#{$block-class}__page-actions--in-breadcrumb {
@@ -538,14 +543,14 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__subtitle-row {
-    margin-top: $spacing-03;
+    margin-block-start: $spacing-03;
 
     @include breakpoint-up('md') {
-      max-width: $left-section-std-width;
+      max-inline-size: $left-section-std-width;
     }
 
     + .#{$block-class}__last-row-buffer--active {
-      height: $spacing-05;
+      block-size: $spacing-05;
     }
   }
 
@@ -554,7 +559,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term {
-    border-bottom: 0;
+    border-block-end: 0;
     letter-spacing: inherit;
   }
 
@@ -569,20 +574,21 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 
   .#{$block-class}__available-row {
     @include type.type-style('body-01');
 
-    margin-top: $spacing-03;
+    margin-block-start: $spacing-03;
 
     + .#{$block-class}__last-row-buffer--active {
-      height: $spacing-05;
+      block-size: $spacing-05;
     }
   }
 
   .#{$block-class}__title-row + .#{$block-class}__available-row {
-    margin-top: $spacing-05;
+    margin-block-start: $spacing-05;
   }
 
   .#{$block-class}__available-row * {
@@ -592,11 +598,11 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__navigation-row {
     flex-wrap: wrap-reverse;
-    margin-top: 0;
+    margin-block-start: 0;
 
     .#{$carbon-prefix}--content-switcher {
       box-sizing: content-box;
-      padding-bottom: $spacing-05;
+      padding-block-end: $spacing-05;
     }
   }
 
@@ -605,37 +611,35 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__navigation-tabs {
-    margin-left: calc(-1 * #{$spacing-05});
+    margin-inline-start: calc(-1 * #{$spacing-05});
   }
 
   .#{$block-class}__navigation-row--has-tags .#{$block-class}__navigation-tabs {
-    max-width: $left-section-alt-width;
     flex: 0 1 $left-section-alt-width;
+    max-inline-size: $left-section-alt-width;
   }
 
   .#{$block-class}__navigation-tags {
     display: flex;
-    max-width: $right-section-alt-width;
     flex: 1 0 $right-section-alt-width;
     align-items: center;
     justify-content: flex-end;
-    padding-top: $spacing-02;
+    max-inline-size: $right-section-alt-width;
+    padding-block: $spacing-02;
     // allow space for expand/collapse if we have a background
-    padding-right: $spacing-07;
-    padding-bottom: $spacing-02;
-    text-align: right;
+    padding-inline-end: $spacing-07;
+    text-align: end;
     white-space: nowrap;
 
     @include breakpoint(md) {
-      padding-right: $spacing-05;
+      padding-inline-end: $spacing-05;
     }
   }
 
   .#{$block-class}__navigation-tags--tags-only {
     justify-content: flex-start;
-    padding-top: 0;
-    padding-bottom: $spacing-04;
-    margin-left: calc(-1 * #{$spacing-02});
+    margin-inline-start: calc(-1 * #{$spacing-02});
+    padding-block: 0 $spacing-04;
     text-align: initial;
   }
 
@@ -646,8 +650,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   .#{$block-class}__collapse-expand-toggle {
     position: absolute;
     z-index: $raised-z-index + 1;
-    right: 0;
-    bottom: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
   }
 
   .#{$block-class}__collapse-expand-toggle .#{$carbon-prefix}--btn__icon {
@@ -669,7 +673,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   // stylelint-disable-next-line
   position: var(--#{$block-class}--tagset-tooltip-position) !important;
   // stylelint-disable-next-line
-  top: var(--#{$block-class}--tagset-tooltip-offset) !important;
+  inset-block-start: var(--#{$block-class}--tagset-tooltip-offset) !important;
 }
 
 .#{$block-class}__navigation-tags-overflow.#{$carbon-prefix}--tooltip {

package/scss/components/ProductiveCard/_productive-card.scss

@@ -28,13 +28,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__body {
-    padding-top: $spacing-03;
+    padding-block-start: $spacing-03;
   }
 
   .#{$block-class}__footer {
     align-items: center;
     justify-content: space-between;
-    border-top: 1px solid theme.$border-subtle-01;
+    border-block-start: 1px solid theme.$border-subtle-01;
   }
 
   .#{$block-class}__footer-no-button {
@@ -42,29 +42,28 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__actions {
-    min-height: $spacing-07;
     margin: 0;
+    min-block-size: $spacing-07;
   }
 
   .#{$block-class}__actions-header {
-    margin-top: calc(-1 * #{$spacing-02});
+    margin-block-start: calc(-1 * #{$spacing-02});
   }
 
   .#{$block-class}__actions-header-ghost-button {
-    min-height: $spacing-07;
+    min-block-size: $spacing-07;
     // stylelint-disable-next-line carbon/layout-use
-    padding-right: calc($spacing-01 + $spacing-03);
+    padding-inline: calc($spacing-01 + $spacing-03);
     // stylelint-disable-next-line carbon/layout-use
-    padding-left: calc($spacing-01 + $spacing-03);
 
     /* stylelint-disable-next-line max-nesting-depth */
     &::before {
       position: absolute;
-      left: 0;
-      width: 0.05rem;
-      height: $spacing-06;
       background-color: theme.$layer-hover-01;
+      block-size: $spacing-06;
       content: '';
+      inline-size: 0.05rem;
+      inset-inline-start: 0;
       opacity: 1;
     }
 
@@ -94,11 +93,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
   .#{$block-class}__title-lg .#{$block-class}__actions-header,
   .#{$block-class}__header-has-label .#{$block-class}__actions-header {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .#{$block-class}__icon {
-    margin-right: $spacing-05;
+    margin-inline-end: $spacing-05;
   }
 
   .#{$block-class}__header-container {

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

@@ -7,6 +7,6 @@
 
 // RemoveModal uses the following Carbon components:
 // Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/text-input';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/text-input';

package/scss/components/RemoveModal/_remove-modal.scss

@@ -14,14 +14,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--remove-modal;
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-footer
   .#{c4p-settings.$carbon-prefix}--btn {
-  max-width: none;
+  max-inline-size: none;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
-  padding-right: $spacing-05;
+  padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__body {
-  padding-right: 20%;
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
+  padding-inline-end: 20%;
 }

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

@@ -7,5 +7,5 @@
 
 // Saving uses the following Carbon components:
 // Button, InlineLoading
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/inline-loading';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/inline-loading';