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

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -13,12 +13,12 @@
 .#{$block-class}__sortableColumn {
   .#{c4p-settings.$carbon-prefix}--table-header-label .header-title {
     display: inline-block;
-    width: auto;
+    inline-size: auto;
   }
   .#{c4p-settings.$carbon-prefix}--table-header-label {
     display: block;
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
   .#{c4p-settings.$carbon-prefix}--table-header-label
     .#{c4p-settings.$carbon-prefix}--table-sort:focus,
@@ -44,8 +44,6 @@
 
   .#{c4p-settings.$carbon-prefix}--table-header-label
     .#{c4p-settings.$carbon-prefix}--table-sort {
-    width: 100%;
-    min-width: 100%;
     padding: 0 $spacing-05;
     border: none;
     /* stylelint-disable-next-line declaration-no-important */
@@ -53,6 +51,8 @@
     /* stylelint-disable-next-line declaration-no-important */
     color: $text-primary !important;
     font: inherit;
+    inline-size: 100%;
+    min-inline-size: 100%;
   }
   .#{c4p-settings.$carbon-prefix}--table-header-label
     .#{c4p-settings.$carbon-prefix}--table-sort
@@ -63,9 +63,9 @@
   }
 
   .#{c4p-settings.$carbon-prefix}--table-sort.#{$block-class}--table-sort {
-    width: calc(100% + #{$spacing-07}); // offset due to inner label
     align-items: inherit;
     margin: 0 calc(-1 * #{$spacing-05}); // fill width of parent table column header
+    inline-size: calc(100% + #{$spacing-07}); // offset due to inner label
   }
 }
 

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -12,42 +12,42 @@
 .#{variables.$block-class}__right-sticky-column-cell {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
-  right: 0;
   display: flex;
   align-items: center;
-  border-left: 1px solid $border-subtle;
+  border-inline-start: 1px solid $border-subtle;
+  inset-inline-end: 0;
 }
 
 .#{variables.$block-class}__right-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .#{variables.$block-class}__left-sticky-column-cell {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
-  left: 0;
   display: flex;
   align-items: center;
-  border-right: 1px solid $border-subtle;
+  border-inline-end: 1px solid $border-subtle;
+  inset-inline-start: 0;
 }
 
 .#{variables.$block-class}__left-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   z-index: 10;
-  left: 0;
-  border-right: 1px solid $border-subtle;
+  border-inline-end: 1px solid $border-subtle;
+  inset-inline-start: 0;
 }
 
 .#{variables.$block-class}__right-sticky-column-header {
-  border-left: 1px solid $border-subtle;
+  border-inline-start: 1px solid $border-subtle;
 }
 
 .#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,
 .#{variables.$block-class}__left-sticky-column-header.#{variables.$block-class}__left-sticky-column-header--with-extra-select-column {
-  left: $spacing-09;
+  inset-inline-start: $spacing-09;
 }
 
 .#{variables.$block-class}__sticky-noShadow {
@@ -62,11 +62,11 @@
 
 .#{variables.$block-class}__right-sticky-column-offset-scroll {
   /* stylelint-disable-next-line */
-  right: 6px !important; // offset the vertical scroll bar in the table body
+  inset-inline-end: 6px !important; // offset the vertical scroll bar in the table body
 }
 
 .#{variables.$block-class}__select-all-toggle-on.#{variables.$block-class}__select-all-sticky-left {
   position: sticky;
   z-index: 10;
-  left: 0;
+  inset-inline-start: 0;
 }

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -26,9 +26,9 @@
 
 .#{variables.$block-class}__customize-columns-tearsheet--actions
   input[role='searchbox'] {
-  height: spacing.$spacing-09;
-  padding-left: spacing.$spacing-09;
-  border-bottom: 1px solid $background-active;
+  block-size: spacing.$spacing-09;
+  border-block-end: 1px solid $background-active;
+  padding-inline-start: spacing.$spacing-09;
 }
 
 .#{c4p-settings.$carbon-prefix}--form-item.#{c4p-settings.$carbon-prefix}--checkbox-wrapper.#{variables.$block-class}__customize-columns-checkbox {
@@ -42,12 +42,12 @@
   .#{variables.$block-class}__customize-columns-checkbox-visible-label {
   // Disabling linter only to match the spacing that Carbon uses for the Checkbox label
   /* stylelint-disable-next-line */
-  padding-left: convert.to-rem(6px);
+  padding-inline-start: convert.to-rem(6px);
 }
 
 .#{variables.$block-class}__customize-columns-column-list
   .#{variables.$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{variables.$block-class}__customize-columns-column-list {
@@ -63,12 +63,12 @@
 .#{variables.$block-class}__customize-columns-select-all--selected {
   position: sticky;
   z-index: 1;
-  top: 0;
   display: flex;
-  height: spacing.$spacing-09;
-  padding-left: spacing.$spacing-08;
-  border-bottom: 1px solid $layer-active;
   background-color: $layer;
+  block-size: spacing.$spacing-09;
+  border-block-end: 1px solid $layer-active;
+  inset-block-start: 0;
+  padding-inline-start: spacing.$spacing-08;
 
   .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
     @include font-family.font-weight('semibold');

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -25,14 +25,14 @@ $action-set-height: to-rem(64px);
 
 .#{variables.$block-class}-filter-flyout {
   position: absolute;
-  top: spacing.$spacing-09;
-  right: 0;
   display: none;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  width: to-rem(642px);
   background-color: $layer-02;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   box-shadow: 0 1px to-rem(8px) 0 rgba(0, 0, 0, 0.25);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(642px);
+  inset-block-start: spacing.$spacing-09;
+  inset-inline-end: 0;
 }
 
 .#{variables.$block-class}-filter-flyout--open {
@@ -40,16 +40,16 @@ $action-set-height: to-rem(64px);
 }
 
 .#{variables.$block-class}-filter-flyout--batch {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  min-height: to-rem(346px);
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   grid-template-rows: 1fr to-rem(48px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  min-block-size: to-rem(346px);
 }
 
 .#{variables.$block-class}-filter-flyout--instant {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  min-height: to-rem(282px);
   grid-template-rows: 1fr;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  min-block-size: to-rem(282px);
 }
 
 .#{variables.$block-class}-filter-flyout__inner-container {
@@ -59,23 +59,23 @@ $action-set-height: to-rem(64px);
 
 .#{variables.$block-class}-filter-flyout__inner-container::before {
   position: absolute;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  top: to-rem(-7px);
-  right: 1px;
   display: block;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  width: to-rem(46px);
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  height: to-rem(15px);
   background-color: $layer-02;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  block-size: to-rem(15px);
   content: '';
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(46px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inset-block-start: to-rem(-7px);
+  inset-inline-end: 1px;
 }
 
 .#{variables.$block-class}-filter-flyout__title {
   display: block;
   @include type-style('heading-compact-01');
 
-  margin-bottom: spacing.$spacing-06;
+  margin-block-end: spacing.$spacing-06;
 }
 
 .#{variables.$block-class}-filter-flyout__filters {
@@ -88,9 +88,9 @@ $action-set-height: to-rem(64px);
 // Carbon overrides
 .#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
   display: flex;
-  width: 3rem;
-  height: 3rem;
   justify-content: center;
+  block-size: 3rem;
+  inline-size: 3rem;
 }
 
 .#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
@@ -102,7 +102,7 @@ $action-set-height: to-rem(64px);
 
 .#{variables.$block-class}-filter-flyout
   .#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{variables.$block-class}-filter-flyout__stacked {

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -14,27 +14,27 @@
 
 .#{$block-class}-filter-panel__container {
   position: relative;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  width: to-rem(320px);
-  height: clamp(var(--filter-panel-min-height), 100%, 100vh);
-  border-top: 1px $layer-accent-01 solid;
   background-color: $layer-01;
+  block-size: clamp(var(--filter-panel-min-height), 100%, 100vh);
+  border-block-start: 1px $layer-accent-01 solid;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(320px);
 }
 
 .#{$block-class}-filter-panel--open {
-  border-right: 1px $layer-accent-01 solid;
+  border-inline-end: 1px $layer-accent-01 solid;
 }
 
 .#{$block-class}-filter-panel__container::before {
   position: absolute;
-  top: -1px; // stylelint-disable-line
-  left: 0;
   display: block;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  width: to-rem(47px); // size of filter panel button
-  height: 1px;
   background-color: $layer-01;
+  block-size: 1px;
   content: '';
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(47px); // size of filter panel button
+  inset-block-start: -1px; // stylelint-disable-line
+  inset-inline-start: 0;
 }
 
 .#{$block-class}-filter-panel__inner-container {
@@ -48,23 +48,23 @@
 // Adds extra space to the last category so the scroll shows everything visible when you reach the bottom
 .#{$block-class}-filter-panel__inner-container
   .#{$block-class}-filter-panel__category:last-of-type {
-  padding-bottom: $spacing-11;
+  padding-block-end: $spacing-11;
 }
 
 .#{$block-class}-filter-panel {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
 }
 
 .#{$block-class}-filter-panel__heading {
   display: flex;
   justify-content: space-between;
-  padding-left: $spacing-05;
-  border-bottom: 1px solid transparent;
+  border-block-end: 1px solid transparent;
+  padding-inline-start: $spacing-05;
 }
 
 .#{$block-class}-filter-panel__heading--with-divider {
-  border-bottom: 1px solid $layer-accent-01;
+  border-block-end: 1px solid $layer-accent-01;
 }
 
 .#{$block-class}-filter-panel__title {
@@ -79,27 +79,28 @@
 .#{$block-class}-filter-panel__category-title {
   @include type-style('heading-compact-01');
 
-  margin-bottom: $spacing-05;
   color: $text-secondary;
+
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class}-filter-panel__category {
-  padding-bottom: $spacing-06;
+  padding-block-end: $spacing-06;
 }
 
 // This selects all filter elements inside of categories and give them 16px margin bottom
 .#{$block-class}-filter-panel__category
   > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class}-filter-panel__action-set {
   position: sticky;
   z-index: 1; // To layer action set on top of content behind when sticky
-  bottom: 0;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  height: to-rem(64px);
-  margin-top: auto;
+  block-size: to-rem(64px);
+  inset-block-end: 0;
+  margin-block-start: auto;
 }
 
 // Overrides
@@ -115,26 +116,25 @@
 
 .#{$block-class}-filter-panel__container
   .#{c4p-settings.$carbon-prefix}--accordion__content {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 // Makes sure every child (filter) inside the accordion content has space in between
 .#{$block-class}-filter-panel__container
   .#{c4p-settings.$carbon-prefix}--accordion__content
   > *:not(:last-child) {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
   display: flex;
-  width: 3rem;
-  height: 3rem;
   justify-content: center;
-  border-right: 1px solid $layer-accent-01;
-  border-bottom: none;
+  block-size: 3rem;
+  border-block-end: none;
+  border-inline-end: 1px solid $layer-accent-01;
+  inline-size: 3rem;
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}-filter-panel__view-all-button {
-  margin-left: -$spacing-05;
+  margin-inline-start: -$spacing-05;
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -13,7 +13,9 @@
 .#{variables.$block-class}
   .#{variables.$block-class}__row-size-toggle-tip-content {
   background-color: $layer-02;
-  box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
+  box-shadow:
+    1px 4px 8px -3px $overlay,
+    -1px 6px 8px -5px $overlay;
 }
 
 .#{variables.$block-class}
@@ -32,14 +34,14 @@
   .#{c4p-settings.$carbon-prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
   .#{c4p-settings.$carbon-prefix}--popover-caret {
   // Used to fix layout issue with IconButton caret inside of Popover component
-  left: -$spacing-02;
+  inset-inline-start: -$spacing-02;
 }
 
 .#{variables.$block-class}__row-size-toggle-tip-button.#{c4p-settings.$carbon-prefix}--toggletip-button {
   display: flex;
-  width: $spacing-09;
-  height: $spacing-09;
   justify-content: center;
+  block-size: $spacing-09;
+  inline-size: $spacing-09;
 }
 
 // Top align cell content for xl row size
@@ -50,11 +52,10 @@
   table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
   td {
   align-items: flex-start;
-  padding-top: $spacing-05;
-  padding-bottom: $spacing-05;
+  padding-block: $spacing-05;
 
   &.#{variables.$block-class}__actions-column-cell {
-    padding-left: $spacing-03;
+    padding-inline-start: $spacing-03;
   }
 }
 
@@ -76,7 +77,7 @@
   .#{variables.$block-class}__checkbox-cell
   th.cds--table-column-checkbox {
   align-items: flex-start;
-  padding-top: $spacing-04;
+  padding-block-start: $spacing-04;
 }
 
 .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
@@ -89,5 +90,5 @@
 .#{variables.$block-class}
   table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
   td.#{variables.$block-class}__expandable-row-cell {
-  padding-top: $spacing-03;
+  padding-block-start: $spacing-03;
 }

package/scss/components/DecoratorBase/_decorator-base-mixins.scss

@@ -13,11 +13,10 @@
 @mixin value-divider($top: 0, $bottom: 0, $left: 0, $color: $border-subtle-02) {
   &::after {
     position: absolute;
-    top: #{$top};
-    bottom: #{$bottom};
-    left: #{$left};
-    border-left: 1px solid #{$color};
+    border-inline-start: 1px solid #{$color};
     content: '';
+    inset-block: #{$top} #{$bottom};
+    inset-inline-start: #{$left};
   }
 }
 
@@ -32,10 +31,9 @@
   &::after {
     position: absolute;
     z-index: 1;
-    top: #{$top};
-    right: #{$right};
-    bottom: #{$bottom};
-    border-right: 1px solid #{$color};
+    border-inline-end: 1px solid #{$color};
     content: '';
+    inset-block: #{$top} #{$bottom};
+    inset-inline-end: #{$right};
   }
 }

package/scss/components/DecoratorBase/_decorator-base.scss

@@ -16,7 +16,7 @@
 
 // DecoratorBase uses the following Carbon for IBM Products components:
 @use '@carbon/layout/scss/convert' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
@@ -38,16 +38,15 @@ $value: #{$block-class}__value;
 // BASE STYLING FOR ALL DECORATORS
 .#{$block-class} {
   display: inline-flex;
-  max-width: 100%;
   align-items: normal;
   border-radius: $spacing-12;
+  max-inline-size: 100%;
 }
 .#{$block-class} .#{$label} {
   @include type.type-style('label-01');
 
   position: relative;
   display: inline-flex;
-  height: $spacing-06;
   align-items: normal;
   padding: 0 $spacing-03;
   border-width: to-rem(1px) 0 to-rem(1px) to-rem(1px);
@@ -55,6 +54,7 @@ $value: #{$block-class}__value;
   border-color: $border-subtle-02;
   border-radius: $spacing-12 0 0 $spacing-12;
   background-color: $layer-01;
+  block-size: $spacing-06;
   color: $text-secondary;
   line-height: 1.8;
 }
@@ -64,7 +64,6 @@ $value: #{$block-class}__value;
   position: relative;
   display: inline-flex;
   overflow: hidden;
-  height: $spacing-06;
   align-items: normal;
   padding: 0 $spacing-03;
   border-width: to-rem(1px) to-rem(1px) to-rem(1px) 0;
@@ -72,26 +71,27 @@ $value: #{$block-class}__value;
   border-color: $border-subtle-02;
   border-radius: 0 $spacing-12 $spacing-12 0;
   background-color: $layer-01;
+  block-size: $spacing-06;
   color: $text-primary;
   line-height: 1.8;
 }
 .#{$block-class} .#{$icon} {
-  margin-top: to-rem(3px);
-  margin-right: $spacing-02;
+  margin-block-start: to-rem(3px);
+  margin-inline-end: $spacing-02;
 }
 
 //
 // MODIFIER, SMALL
 //
 .#{$block-class}--sm .#{$label} {
-  height: to-rem(18px);
   padding: 0 $spacing-02 0 $spacing-03;
+  block-size: to-rem(18px);
   line-height: 1.333;
 }
 .#{$block-class}--sm .#{$value} {
-  height: to-rem(18px);
   // When "small", the divider takes up 1px of 4px of the available space: so "+1px".
   padding: 0 $spacing-03 0 calc($spacing-02 + 1px);
+  block-size: to-rem(18px);
   line-height: 1.333;
 }
 
@@ -139,7 +139,7 @@ $value: #{$block-class}__value;
 
 // MODIFIER, SMALL ICON
 .#{$block-class} .#{$icon}--sm {
-  width: $spacing-04;
-  height: $spacing-04;
-  margin-top: to-rem(2.5px);
+  block-size: $spacing-04;
+  inline-size: $spacing-04;
+  margin-block-start: to-rem(2.5px);
 }

package/scss/components/DelimitedList/_delimited-list.scss

@@ -12,7 +12,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';
 
 // DelimitedList uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by DelimitedList

package/scss/components/DescriptionList/_description-list.scss

@@ -9,15 +9,15 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/type' as *;
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--description-list;
 $carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
 
 .#{$block-class} .#{$carbon-block-class} {
-  margin-bottom: $spacing-07;
+  margin-block-end: $spacing-07;
 }
 
 // ROW /////////////////////////
@@ -51,28 +51,28 @@ $carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
 }
 
 .#{$block-class} .#{$block-class}__body .#{$block-class}__cell:first-of-type {
-  width: 1%;
-  padding-left: 0;
+  inline-size: 1%;
+  padding-inline-start: 0;
   white-space: nowrap;
 }
 
 .#{$block-class} .#{$block-class}__body .#{$block-class}__cell:last-of-type {
-  padding-right: 0;
   color: $text-primary;
+  padding-inline-end: 0;
 }
 
 .#{$block-class}
   .#{$block-class}__body
   .#{$block-class}__row:first-of-type
   > .#{$block-class}__cell {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 
 .#{$block-class}
   .#{$block-class}__body
   .#{$block-class}__row:last-of-type
   > .#{$block-class}__cell {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 .#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul {
@@ -80,7 +80,7 @@ $carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
 }
 
 .#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul > li {
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 // LG SIZE /////////////////////////

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

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