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

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -14,7 +14,7 @@
 .#{variables.$block-class}__draggable-handleStyle {
   display: flex;
   align-items: center;
-  margin-right: $spacing-03;
+  margin-inline-end: $spacing-03;
 }
 
 .#{variables.$block-class}__draggable-handleStyle.disabled {
@@ -27,24 +27,24 @@
 
 .#{variables.$block-class}__draggable-underlay {
   position: absolute;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .#{variables.$block-class}__draggable-underlay-item {
-  // must match draggable item size
-  width: 100%;
-  height: $spacing-09;
   border: 2px dashed $focus;
   /* stylelint-disable-next-line carbon/theme-use */
   background-color: colors.$blue-10; // not good in dark mode
+  block-size: $spacing-09;
+  // must match draggable item size
+  inline-size: 100%;
 }
 
 .#{variables.$block-class}__draggable-handleHolder {
   position: relative; // above underlay
   display: flex;
-  height: $spacing-09;
-  border-bottom: 1px solid $layer-active;
   background-color: $layer;
+  block-size: $spacing-09;
+  border-block-end: 1px solid $layer-active;
   cursor: grab;
 }
 
@@ -79,11 +79,11 @@
 
 .#{variables.$block-class}__draggable-handleHolder-droppable {
   display: flex;
-  width: 100%;
   align-items: center;
-  padding-left: $spacing-05;
+  inline-size: 100%;
   /* stylelint-disable-next-line carbon/type-use */
   line-height: 1; // center align text within row
+  padding-inline-start: $spacing-05;
   transition-property: opacity;
 }
 
@@ -104,11 +104,11 @@
   // hide the assistive text. can not use display: none which will also hide from ARIA
   position: absolute;
   overflow: hidden;
-  width: 0;
-  height: 0;
   padding: 0;
   border: 0;
+  block-size: 0;
   clip: rect(0 0 0 0);
+  inline-size: 0;
   text-transform: none;
   white-space: nowrap;
 }

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -21,7 +21,7 @@
 }
 
 .#{variables.$block-class}__actions-column-loading {
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 .#{variables.$block-class}

package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss

@@ -10,11 +10,10 @@
 $block-class: #{project-settings.$pkg-prefix}--datagrid;
 .#{$block-class}__center-align-header,
 .#{$block-class}__center-align-header .#{$block-class}--table-sort {
-  width: 100%;
+  inline-size: 100%;
   text-align: center;
 }
 
 .#{$block-class}__center-align-cell-renderer {
-  margin-right: auto;
-  margin-left: auto;
+  margin-inline: auto;
 }

package/scss/components/Datagrid/styles/_useColumnRightAlign.scss

@@ -8,21 +8,21 @@
 @use './variables';
 
 .#{variables.$block-class}__right-align-header {
-  width: 100%;
-  text-align: right;
+  inline-size: 100%;
+  text-align: end;
 }
 
 .#{variables.$block-class}__right-align-header button {
-  text-align: right;
+  text-align: end;
 }
 
 .#{variables.$block-class}__right-align-cell-renderer {
-  width: 100%;
+  inline-size: 100%;
   /* stylelint-disable-next-line carbon/layout-use */
-  padding-right: 23px;
-  text-align: right;
+  padding-inline-end: 23px;
+  text-align: end;
 }
 
 .#{variables.$block-class}__right-align-cell-renderer.sortDisabled {
-  padding-right: 0;
+  padding-inline-end: 0;
 }

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -11,8 +11,8 @@
 @use './variables';
 
 @mixin shared-pseudo-styles() {
-  height: 1px;
   background-color: $layer-accent;
+  block-size: 1px;
   content: '';
 }
 
@@ -24,36 +24,36 @@
 .#{variables.$block-class}
   .#{variables.$block-class}__expanded-row-content::before {
   position: absolute;
+  inline-size: calc(100% - #{$spacing-09});
   /* stylelint-disable-next-line carbon/layout-use */
-  top: -1px;
-  right: 0;
-  width: calc(100% - #{$spacing-09});
+  inset-block-start: -1px;
+  inset-inline-end: 0;
   @include shared-pseudo-styles();
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__expanded-row-content::after {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  inline-size: 100%;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   @include shared-pseudo-styles();
 }
 
 .#{variables.$block-class}__carbon-row.#{variables.$block-class}__carbon-row-expandable
   .#{variables.$block-class}__cell.#{variables.$block-class}__expandable-row-cell {
   padding: $spacing-03;
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .#{variables.$block-class}__row-expander.#{c4p-settings.$carbon-prefix}--btn {
   display: flex;
-  width: $spacing-07;
-  height: $spacing-07;
-  min-height: $spacing-07;
   align-items: center;
   justify-content: center;
   padding: 0;
+  block-size: $spacing-07;
+  inline-size: $spacing-07;
+  min-block-size: $spacing-07;
   .#{variables.$block-class}__row-expander--icon {
     fill: $layer-selected-inverse;
   }
@@ -68,8 +68,8 @@
 .#{variables.$block-class}
   .#{variables.$block-class}__expandable-row--hover
   td {
-  border-top: none;
   background: $layer-hover;
+  border-block-start: none;
 }
 
 .#{variables.$block-class}
@@ -91,7 +91,7 @@
   .#{c4p-settings.$carbon-prefix}--data-table
   .#{variables.$block-class}__carbon-row-expanded:hover
   td:not(.#{variables.$block-class}__expandable-row-cell) {
-  border-bottom: 1px solid $border-subtle-02;
+  border-block-end: 1px solid $border-subtle-02;
 }
 
 .#{variables.$block-class}

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

@@ -35,7 +35,7 @@ $row-heights: (
   .#{variables.$block-class}
     .#{variables.$block-class}__inline-edit--date.#{variables.$block-class}__inline-edit--date-#{$size}
     .#{c4p-settings.$carbon-prefix}--date-picker__input {
-    height: $size-value;
+    block-size: $size-value;
   }
   .#{variables.$block-class}
     .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
@@ -43,13 +43,13 @@ $row-heights: (
   .#{variables.$block-class}
     .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
     .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-    height: calc(#{$size-value} - 0.25rem);
+    block-size: calc(#{$size-value} - 0.25rem);
   }
   .#{variables.$block-class}
     .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
     .#{variables.$block-class}__inline-edit--select
     .#{c4p-settings.$carbon-prefix}--list-box {
-    max-height: none;
+    max-block-size: none;
   }
 }
 
@@ -69,8 +69,8 @@ $row-heights: (
 
 .#{variables.$block-class}__inline-edit-cell {
   display: flex;
-  height: 100%;
   align-items: center;
+  block-size: 100%;
 }
 
 .#{variables.$block-class}
@@ -87,44 +87,44 @@ $row-heights: (
 
 .#{variables.$block-class}__inline-edit--outer-cell-checkbox {
   display: flex;
-  height: -webkit-fill-available;
   justify-content: center;
+  block-size: -webkit-fill-available;
   padding-inline: $spacing-05;
 }
 
 .#{variables.$block-class}__static--outer-cell {
   display: flex;
-  height: -webkit-fill-available;
   align-items: center;
+  block-size: -webkit-fill-available;
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button {
-  width: 100%;
-  height: calc(100% + 2px); // account for borders
+  block-size: calc(100% + 2px); // account for borders
+  inline-size: 100%;
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button
   .#{variables.$block-class}__inline-edit-button {
   position: relative;
   display: flex;
-  width: 100%;
-  height: 100%;
   align-items: center;
   justify-content: space-between;
-  padding-left: $spacing-05;
+  block-size: 100%;
   color: $text-secondary;
   cursor: pointer;
+  inline-size: 100%;
   outline: 0; // handled by active class
+  padding-inline-start: $spacing-05;
   .#{variables.$block-class}__label-icon {
-    height: $spacing-05;
-    padding-right: $spacing-05;
+    block-size: $spacing-05;
+    padding-inline-end: $spacing-05;
   }
   &.#{variables.$block-class}__inline-edit-button--non-edit {
-    padding-left: 0;
     cursor: default;
+    padding-inline-start: 0;
   }
   .#{variables.$block-class}__inline-edit-button-icon {
-    height: $spacing-05;
+    block-size: $spacing-05;
     fill: $icon-secondary;
   }
   &.#{variables.$block-class}__inline-edit-button--date {
@@ -184,7 +184,7 @@ $row-heights: (
   .#{variables.$block-class}__inline-edit-button
   .#{variables.$block-class}__inline-edit-button-label {
   overflow: hidden;
-  padding-right: $spacing-05;
+  padding-inline-end: $spacing-05;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -192,7 +192,7 @@ $row-heights: (
 .#{variables.$block-class}__inline-edit--outer-cell-button
   .#{variables.$block-class}__inline-edit-button
   .#{variables.$block-class}__inline-edit-button-label.#{variables.$block-class}__inline-edit-button-label-with-icon {
-  padding-right: $spacing-09;
+  padding-inline-end: $spacing-09;
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button
@@ -200,12 +200,12 @@ $row-heights: (
 .#{variables.$block-class}__inline-edit--outer-cell-button
   .#{c4p-settings.$carbon-prefix}--number
   input[type='number'] {
-  height: $spacing-09;
+  block-size: $spacing-09;
 }
 
 .#{variables.$block-class}__inline-edit-button-icon {
   position: absolute;
-  right: $spacing-05;
+  inset-inline-end: $spacing-05;
 }
 
 .#{variables.$block-class}__table-with-inline-edit.#{c4p-settings.$carbon-prefix}--data-table
@@ -213,47 +213,47 @@ $row-heights: (
   position: relative;
   padding: 0;
   .#{variables.$block-class}__inline-edit-button--non-edit {
-    padding-left: $spacing-05;
+    padding-inline-start: $spacing-05;
   }
 
   .#{c4p-settings.$carbon-prefix}--number input[type='number'] {
-    min-width: auto;
-    padding-right: $spacing-05;
+    min-inline-size: auto;
+    padding-inline-end: $spacing-05;
   }
 }
 
 .#{variables.$block-class}__inline-edit--select
   .#{variables.$block-class}__inline-edit--select-item {
-  padding-bottom: $spacing-05;
-  padding-left: $spacing-05;
+  padding-block-end: $spacing-05;
+  padding-inline-start: $spacing-05;
 }
 
 .#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
 .#{variables.$block-class}__inline-edit--date
   .#{c4p-settings.$carbon-prefix}--date-picker {
-  width: inherit;
+  inline-size: inherit;
 }
 
 .#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
 .#{variables.$block-class}__inline-edit--date
   .#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
   .#{c4p-settings.$carbon-prefix}--date-picker__input {
-  width: 100%;
-  height: $spacing-09; // default row height
-  max-height: none;
+  block-size: $spacing-09; // default row height
+  inline-size: 100%;
+  max-block-size: none;
 }
 
 .#{variables.$block-class}__inline-edit--date
   .#{c4p-settings.$carbon-prefix}--date-picker-container {
-  width: inherit;
+  inline-size: inherit;
 }
 
 .#{variables.$block-class}__inline-edit--date.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
   .#{c4p-settings.$carbon-prefix}--date-picker__input {
   overflow: hidden;
-  width: 100%;
-  max-width: none;
-  padding-right: $spacing-07;
+  inline-size: 100%;
+  max-inline-size: none;
+  padding-inline-end: $spacing-07;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -262,8 +262,8 @@ $row-heights: (
   .#{c4p-settings.$carbon-prefix}--data-table
   .#{variables.$block-class}__carbon-row-hover-active
   td {
-  border-top-color: $layer-hover;
   background-color: $layer-hover;
+  border-block-start-color: $layer-hover;
 }
 
 // Custom border/outline for the focus region area, because of the scrolling
@@ -273,28 +273,28 @@ $row-heights: (
   .#{variables.$block-class}__grid-container-active::before {
   position: absolute;
   z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 2px;
-  height: calc(
+  background-color: $link-inverse;
+  block-size: calc(
     100% - 50px - var(--#{variables.$block-class}--grid-header-height)
   );
-  background-color: $link-inverse;
   content: '';
+  inline-size: 2px;
+  inset-block-end: 0;
+  inset-inline-start: 0;
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-active::after {
   position: absolute;
   z-index: 2;
-  right: 0;
-  bottom: 0;
-  width: 2px;
-  height: calc(
+  background-color: $link-inverse;
+  block-size: calc(
     100% - 50px - var(--#{variables.$block-class}--grid-header-height)
   );
-  background-color: $link-inverse;
   content: '';
+  inline-size: 2px;
+  inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .#{variables.$block-class}
@@ -302,19 +302,18 @@ $row-heights: (
   .#{c4p-settings.$carbon-prefix}--data-table-content::before {
   position: absolute;
   z-index: 2;
-  top: 0;
-  right: 0;
-  left: 0;
-  width: var(--#{variables.$block-class}--grid-width);
-  height: 2px;
   background-color: $link-inverse;
+  block-size: 2px;
+  inline-size: var(--#{variables.$block-class}--grid-width);
+  inset-block-start: 0;
+  inset-inline: 0;
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::before,
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::after {
-  height: calc(
+  block-size: calc(
     100% - 2px - var(--#{variables.$block-class}--grid-header-height)
   );
 }
@@ -329,7 +328,7 @@ $row-heights: (
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-inline-edit
   .#{variables.$block-class}__table-container {
-  padding-top: $spacing-01;
+  padding-block-start: $spacing-01;
 }
 
 .#{variables.$block-class}
@@ -342,11 +341,11 @@ $row-heights: (
   .#{c4p-settings.$carbon-prefix}--form-requirement {
   position: absolute;
   z-index: 3;
-  top: calc(100% - #{$spacing-01});
-  width: 100%;
   padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
   margin: 0;
   background-color: $layer-01;
+  inline-size: 100%;
+  inset-block-start: calc(100% - #{$spacing-01});
   outline: $spacing-01 solid $support-error;
   outline-offset: calc(-1 * #{$spacing-01});
 }
@@ -368,37 +367,37 @@ $row-heights: (
   .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
   .#{c4p-settings.$carbon-prefix}--number__invalid {
   z-index: 4;
-  top: calc(100% + #{$spacing-04} + #{$spacing-01});
-  right: $spacing-03;
+  inset-block-start: calc(100% + #{$spacing-04} + #{$spacing-01});
+  inset-inline-end: $spacing-03;
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
   .#{c4p-settings.$carbon-prefix}--number__invalid {
-  top: calc(100% + #{$spacing-02} + #{$spacing-01});
+  inset-block-start: calc(100% + #{$spacing-02} + #{$spacing-01});
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
   .#{c4p-settings.$carbon-prefix}--form-requirement::before {
   position: absolute;
-  top: 0;
-  left: $spacing-01;
-  width: calc(100% - (#{$spacing-01} * 2));
-  height: $spacing-01;
   background-color: $layer-01;
+  block-size: $spacing-01;
   content: '';
+  inline-size: calc(100% - (#{$spacing-01} * 2));
+  inset-block-start: 0;
+  inset-inline-start: $spacing-01;
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
   .#{c4p-settings.$carbon-prefix}--form-requirement::after {
   position: absolute;
-  top: $spacing-01;
-  left: $spacing-03;
-  width: calc(100% - (#{$spacing-03} * 2));
-  height: 1px;
   background-color: $layer-accent-01;
+  block-size: 1px;
   content: '';
+  inline-size: calc(100% - (#{$spacing-03} * 2));
+  inset-block-start: $spacing-01;
+  inset-inline-start: $spacing-03;
 }
 
 .#{variables.$block-class} tbody tr:hover {

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -13,10 +13,10 @@
 
 .#{c4p-settings.$carbon-prefix}--data-table
   tr.#{$block-class}__carbon-nested-row {
-  border-left: 1px solid transparent;
+  border-inline-start: 1px solid transparent;
 
   .#{$block-class}__cell {
-    border-bottom: 1px solid $layer-accent-01;
+    border-block-end: 1px solid $layer-accent-01;
   }
 }
 
@@ -31,7 +31,7 @@
 .#{$block-class}__expanded-row
   .#{$block-class}__carbon-row-expanded
   td:first-child {
-  border-bottom: none;
+  border-block-end: none;
 }
 
 .#{$block-class} .#{$block-class}__carbon-row-expandable {
@@ -42,25 +42,25 @@
   tr.#{$block-class}__carbon-nested-row
   + :not(tr.#{$block-class}__carbon-nested-row)::after {
   position: absolute;
-  /* stylelint-disable-next-line carbon/layout-use */
-  top: -1px;
-  left: 0;
-  width: 100%;
-  height: 1px;
   background-color: $border-subtle;
+  block-size: 1px;
   content: '';
+  inline-size: 100%;
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: -1px;
+  inset-inline-start: 0;
 }
 
 .#{$block-class} tr.#{$block-class}__carbon-nested-row {
   td:first-child:empty,
   .#{$block-class}__expandable-row-cell {
-    border-bottom: none;
+    border-block-end: none;
   }
 }
 
 .#{c4p-settings.$carbon-prefix}--data-table
   td.#{$block-class}__expandable-row-cell {
-  padding-left: $spacing-03;
+  padding-inline-start: $spacing-03;
 }
 
 .#{c4p-settings.$carbon-prefix}--data-table
@@ -91,13 +91,13 @@
   td.#{$block-class}__expandable-row-cell
   + td::before {
   position: absolute;
-  /* stylelint-disable-next-line carbon/layout-use */
-  bottom: -1px;
-  left: 0;
-  width: 1rem;
-  height: 1px;
   background-color: $layer-01;
+  block-size: 1px;
   content: '';
+  inline-size: 1rem;
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-end: -1px;
+  inset-inline-start: 0;
   transition: background-color $duration-fast-01 motion(entrance, productive);
 }
 
@@ -123,6 +123,6 @@
 
 .#{$block-class}__carbon-row-expanded {
   .#{$block-class}__expandable-row-cell {
-    border-bottom: none;
+    border-block-end: none;
   }
 }

package/scss/components/Datagrid/styles/_useNestedTable.scss

@@ -13,21 +13,24 @@
 // used for tables within a expandable row
 .#{variables.$block-class}__expanded-row
   .#{c4p-settings.$carbon-prefix}--data-table-container {
-  width: calc(100% - #{$spacing-07});
-  border-left: 2px solid $background-brand;
-  margin-left: $spacing-07;
+  border-inline-start: 2px solid $background-brand;
+  inline-size: calc(100% - #{$spacing-07});
+  margin-inline-start: $spacing-07;
   overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    overflow-inline: hidden;
+  }
 
   tr.#{variables.$block-class}__carbon-nested-row {
-    border-left: none;
+    border-inline-start: none;
   }
 }
 
 .#{variables.$block-class}__expanded-row
   .#{c4p-settings.$carbon-prefix}--data-table-container
   th {
-  padding-top: 0;
-  padding-bottom: 0;
-  border-top-color: $layer-accent-01;
   background-color: $layer-accent-01;
+  border-block-start-color: $layer-accent-01;
+  padding-block: 0;
 }

package/scss/components/Datagrid/styles/_useSelectAllToggle.scss

@@ -13,12 +13,12 @@
 .#{variables.$block-class}__grid-container {
   th.#{variables.$block-class}__select-all-toggle-on,
   td.#{variables.$block-class}__select-all-toggle-on {
-    /* stylelint-disable-next-line declaration-no-important */
-    width: 4.5rem !important;
-    /* stylelint-disable-next-line declaration-no-important */
-    min-width: initial !important;
     box-sizing: border-box;
     flex: 0 0 auto;
+    /* stylelint-disable-next-line declaration-no-important */
+    inline-size: 4.5rem !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    min-inline-size: initial !important;
   }
 }
 
@@ -29,9 +29,9 @@ th.#{variables.$block-class}__select-all-toggle-on {
 }
 
 th.#{variables.$block-class}__select-all-toggle-on.button {
-  margin-left: $spacing-01;
+  margin-inline-start: $spacing-01;
 }
 
 .#{variables.$block-class}__select-all-toggle-overflow.#{c4p-settings.$carbon-prefix}--overflow-menu-options--sm.#{c4p-settings.$carbon-prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
-  width: $spacing-13;
+  inline-size: $spacing-13;
 }