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

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -21,16 +21,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__heading,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__label,
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
-  max-width: 100%;
-  padding-right: calc(20% - #{$spacing-05});
+  max-inline-size: 100%;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
-  margin-top: $spacing-02;
+  margin-block-start: $spacing-02;
 }
 
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header {
-  border-bottom: 1px solid $border-subtle-02;
+  border-block-end: 1px solid $border-subtle-02;
 }
 
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__content {
@@ -38,22 +38,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
 }
 
 .#{$block-class} .#{$block-class}__form {
-  padding-top: $spacing-05;
+  padding-block-start: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__form > * {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 
   /* stylelint-disable-next-line max-nesting-depth */
   &:last-child {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
 .#{$block-class} .#{$block-class}__form-title-text {
   @include type.type-style('heading-compact-02');
 
-  padding-bottom: $spacing-03;
+  padding-block-end: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__form-description-text {

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

@@ -15,16 +15,16 @@
 @use '../../global/styles/mixins' as *;
 
 @mixin set-header-borders {
-  border-right: 1px solid $border-subtle-selected-01;
-  border-bottom: 1px solid $border-subtle-selected-01;
+  border-block-end: 1px solid $border-subtle-selected-01;
+  border-inline-end: 1px solid $border-subtle-selected-01;
 }
 @mixin set-active-header-borders {
-  border-right: 1px solid $text-placeholder;
-  border-bottom: 1px solid $text-placeholder;
+  border-block-end: 1px solid $text-placeholder;
+  border-inline-end: 1px solid $text-placeholder;
 }
 @mixin set-body-borders {
-  border-right: 1px solid $border-subtle-01;
-  border-bottom: 1px solid $border-subtle-01;
+  border-block-end: 1px solid $border-subtle-01;
+  border-inline-end: 1px solid $border-subtle-01;
 }
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -49,7 +49,7 @@ $header-cell-background: $layer-accent-01;
   .#{$block-class}__tr {
     :last-child .#{$block-class}__body--td {
       .#{$block-class}__td {
-        border-bottom: 0;
+        border-block-end: 0;
       }
     }
   }
@@ -58,13 +58,14 @@ $header-cell-background: $layer-accent-01;
   .#{$block-class}__td {
     @include type.type-style('body-compact-01');
 
-    width: 100%;
-    height: 100%;
     padding: 0 $spacing-03;
     border: 0;
     margin: 0;
+    block-size: 100%;
     color: $text-primary;
     font-family: inherit;
+
+    inline-size: 100%;
   }
 
   .#{$block-class}__body--td {
@@ -74,14 +75,15 @@ $header-cell-background: $layer-accent-01;
   /* stylelint-disable-next-line max-nesting-depth */
   [role="'columnheader'"]:last-child,
   [role="'gridcell'"]:last-child {
-    border-right: 1px solid $text-placeholder;
+    border-inline-end: 1px solid $text-placeholder;
   }
   .#{$block-class}__th,
   .#{$block-class}__td-th.#{$block-class}__td {
     @include set-header-borders();
 
-    height: 100%;
     background-color: $header-cell-background;
+
+    block-size: 100%;
     cursor: pointer;
 
     /* stylelint-disable-next-line max-nesting-depth */
@@ -91,14 +93,14 @@ $header-cell-background: $layer-accent-01;
     }
   }
   .#{$block-class}__th--select-all {
-    width: $spacing-10;
+    inline-size: $spacing-10;
   }
   .#{$block-class}__td-th--cell-container,
   .#{$block-class}__select-all-cell-container {
     position: sticky;
     z-index: 4;
-    left: 0;
     background-color: $background;
+    inset-inline-start: 0;
   }
   .#{$block-class}__td-th.#{$block-class}__td {
     @include font-family.font-weight('semibold');
@@ -115,13 +117,13 @@ $header-cell-background: $layer-accent-01;
     margin: 0;
     background-color: $body-cell-background;
     cursor: cell;
-    text-align: left;
+    text-align: start;
   }
   .#{$block-class}__th {
     @include type.type-style('heading-compact-01');
 
     color: $text-primary;
-    text-align: left;
+    text-align: start;
   }
   .#{$block-class}__cell-editor {
     @include type.type-style('body-compact-01');
@@ -131,14 +133,14 @@ $header-cell-background: $layer-accent-01;
     z-index: 4;
     display: none;
     overflow: hidden;
-    min-width: initial;
-    min-height: initial;
     /* stylelint-disable-next-line carbon/layout-use */
     padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
     margin: 0;
     background-color: $body-cell-background;
     color: $text-primary;
     font-family: inherit;
+    min-block-size: initial;
+    min-inline-size: initial;
     resize: none;
 
     /* stylelint-disable-next-line max-nesting-depth */
@@ -156,10 +158,10 @@ $header-cell-background: $layer-accent-01;
 
     position: absolute;
     overflow: hidden;
-    width: fit-content;
-    max-width: var(--#{$block-class}--total-width);
     /* stylelint-disable-next-line carbon/layout-use */
     padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
+    inline-size: fit-content;
+    max-inline-size: var(--#{$block-class}--total-width);
     visibility: hidden;
 
     /* stylelint-disable-next-line max-nesting-depth */
@@ -175,18 +177,17 @@ $header-cell-background: $layer-accent-01;
     z-index: 3;
     display: none;
     overflow: hidden;
-    // Could be fixed by using border-right but the fact that
-    // this element is positioned absolute prevents that from working
     /* stylelint-disable-next-line carbon/layout-use */
-    padding-right: calc(#{$spacing-03} - 1px);
-    padding-bottom: $spacing-01;
-    /* stylelint-disable-next-line carbon/layout-use */
-    padding-left: calc(#{$spacing-03} - #{$spacing-01});
     border: $spacing-01 solid $background-brand;
     background-color: $body-cell-background;
     color: $text-primary;
     font-family: inherit;
-    text-align: left;
+    padding-block-end: $spacing-01;
+    // Could be fixed by using border-right but the fact that
+    // this element is positioned absolute prevents that from working
+    /* stylelint-disable-next-line carbon/layout-use */
+    padding-inline: #{$spacing-03 - $spacing-01} calc(#{$spacing-03} - 1px);
+    text-align: start;
 
     /* stylelint-disable-next-line max-nesting-depth */
     &[data-active-row-index='header'],
@@ -217,13 +218,13 @@ $header-cell-background: $layer-accent-01;
     /* stylelint-disable-next-line max-nesting-depth */
     &::before {
       position: absolute;
-      top: 0;
-      left: 0;
       display: block;
-      width: 100%;
-      height: 100%;
       background-color: $background-brand;
+      block-size: 100%;
       content: '';
+      inline-size: 100%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
       opacity: 0.2;
     }
     &.#{$block-class}__selection-area--element-cloned {
@@ -238,8 +239,8 @@ $header-cell-background: $layer-accent-01;
     .#{$block-class}__reorder-indicator-line {
       position: absolute;
       z-index: 4;
-      width: $spacing-01;
       background-color: $background-brand;
+      inline-size: $spacing-01;
       pointer-events: none;
     }
     .#{$block-class}__th--active-header,
@@ -274,8 +275,8 @@ $header-cell-background: $layer-accent-01;
   .#{$block-class}__reorder-indicator-line {
     position: absolute;
     z-index: 4;
-    width: $spacing-01;
     background-color: $background-brand;
+    inline-size: $spacing-01;
   }
   .#{$block-class}__th--active-header-disabledSwapping {
     cursor: pointer;

package/scss/components/Datagrid/_datagrid.scss

@@ -16,7 +16,7 @@
 /* stylelint-disable max-nesting-depth */
 
 // Other Carbon settings.
-// TODO: @use '@carbon/react/scss/grid'; if needed
+// TODO: @use '@carbon/styles/scss/grid'; if needed
 
 // Datagrid uses the following Carbon components:
 // TODO: @use(s) of Carbon component styles used by Datagrid
@@ -31,7 +31,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 
 .#{$block-class}__datagridWrap {
   display: block;
-  width: 100%;
+  inline-size: 100%;
 
   :global(.#{c4p-settings.$carbon-prefix}--checkbox) {
     display: none;
@@ -43,11 +43,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   .#{c4p-settings.$carbon-prefix}--popover-container
   .#{c4p-settings.$carbon-prefix}--btn--icon-only {
   display: flex;
-  width: $spacing-09;
-  height: $spacing-09;
   align-items: center;
   justify-content: center;
-  padding-top: 0;
+  block-size: $spacing-09;
+  inline-size: $spacing-09;
+  padding-block-start: 0;
 }
 
 .#{$block-class}
@@ -59,9 +59,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 
 .#{$block-class}__datagridWrap-simple {
   display: flex;
-  width: 100%;
-  height: 100%;
   flex-direction: column;
+  block-size: 100%;
+  inline-size: 100%;
 
   /* stylelint-disable-next-line */
   :global {
@@ -69,6 +69,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
       // newer version of carbon pagination has scroll which doesn't make any sense, removing it
       /* stylelint-disable-next-line declaration-property-value-disallowed-list */
       overflow-x: unset;
+      @supports (overflow-inline: unset) {
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        overflow-inline: unset;
+      }
     }
   }
 }
@@ -78,5 +82,5 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   .#{c4p-settings.$carbon-prefix}--menu-button__trigger:not(
     .#{c4p-settings.$carbon-prefix}--btn--ghost
   ) {
-  min-width: auto;
+  min-inline-size: auto;
 }