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

package/scss/components/TooltipTrigger/_tooltip-trigger.scss

@@ -14,8 +14,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--tooltip-trigger;
 
 .#{$block-class} {
   display: flex;
-  width: 100%;
-  height: 100%;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -24,6 +22,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--tooltip-trigger;
   margin: 0;
   appearance: none;
   background: none;
+  block-size: 100%;
   cursor: pointer;
+  inline-size: 100%;
   outline: none;
 }

package/scss/components/TruncatedList/_truncated-list.scss

@@ -28,16 +28,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-list;
 
 .#{$block-class}--expanded .#{$block-class}__list {
   overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
 }
 
 .#{$block-class}--expanded-all .#{$block-class}__list {
   overflow-y: hidden;
+  @supports (overflow-block: hidden) {
+    overflow-block: hidden;
+  }
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button {
-  width: 100%;
   padding: 0;
-  margin-top: $spacing-02;
+  inline-size: 100%;
+  margin-block-start: $spacing-02;
   min-block-size: auto;
 }
 .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button:hover {

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

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

package/scss/components/UserAvatar/_user-avatar.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -15,17 +15,6 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/react/scss/grid';
-
-// UserAvatar uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by UserAvatar
-@use '@carbon/react/scss/components/tooltip';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-
 $block-class: #{$pkg-prefix}--user-avatar;
 
 $sizes: (
@@ -38,20 +27,21 @@ $sizes: (
 @mixin size($size) {
   $_size: map.get($sizes, $size);
 
-  width: $_size;
-  height: $_size;
+  block-size: $_size;
+
+  inline-size: $_size;
 }
 
 .#{$block-class} {
   position: relative;
   display: flex;
-  width: 4rem;
-  height: 4rem;
   align-items: center;
   justify-content: center;
   border: 0.5px solid transparent;
   border-radius: 100%;
+  block-size: 4rem;
   color: $text-inverse;
+  inline-size: 4rem;
   outline: none;
   outline-offset: 3px;
 }

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

@@ -7,4 +7,4 @@
 
 // UserProfileImage uses the following Carbon components:
 // IconButton
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

package/scss/components/UserProfileImage/_color-map.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 
 $carbon-colors: (
   'blue30': $blue-30,

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -28,8 +28,9 @@ $sizes: (
 @mixin size($size) {
   $_size: map.get($sizes, $size);
 
-  width: $_size;
-  height: $_size;
+  block-size: $_size;
+
+  inline-size: $_size;
 }
 
 $base-colors: 'cyan', 'gray', 'green', 'magenta', 'purple', 'teal';
@@ -93,9 +94,9 @@ $theme-keys: map-keys($themes);
 }
 
 .#{$block-class}__tooltip.#{$carbon-prefix}--btn--md.#{$carbon-prefix}--btn--icon-only {
-  min-height: auto;
   padding: 0;
   border-radius: 50%;
+  min-block-size: auto;
 }
 
 .#{$carbon-prefix}--btn--ghost.#{$block-class}__tooltip:focus {
@@ -109,8 +110,8 @@ $theme-keys: map-keys($themes);
 }
 
 .#{$block-class}__photo {
-  width: 100%;
   border-radius: 100%;
+  inline-size: 100%;
 }
 
 .#{$block-class}__photo--xl {

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

@@ -8,5 +8,5 @@
 // WebTerminal uses the following Carbon components:
 // Button
 // OverflowMenu
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/WebTerminal/_web-terminal.scss

@@ -51,22 +51,22 @@ $block-class: #{$pkg-prefix}--web-terminal;
   @include theme($g90);
 
   position: fixed;
-  top: $spacing-09;
-  right: 0;
-  width: 100%;
-  max-width: $web-terminal-width;
-  height: calc(100vh - #{$spacing-09});
-  border-left: 1px solid $gray-90;
+  block-size: calc(100vh - #{$spacing-09});
+  border-inline-start: 1px solid $gray-90;
   color: $text-primary;
+  inline-size: 100%;
+  inset-block-start: $spacing-09;
+  inset-inline-end: 0;
+  max-inline-size: $web-terminal-width;
   /* stylelint-disable-next-line  */
 }
 
 .#{$block-class}__bar {
   display: flex;
-  height: 3rem;
   align-items: center;
   justify-content: space-between;
   background-color: $background;
+  block-size: 3rem;
 }
 
 .#{$block-class}__actions {
@@ -84,15 +84,15 @@ $block-class: #{$pkg-prefix}--web-terminal;
 
 // Terminal body styles
 .#{$block-class}__body {
-  height: calc(100vh - #{$spacing-09});
+  block-size: calc(100vh - #{$spacing-09});
 }
 
 // Terminal wrapper styles
 .#{$block-class}-content-wrapper {
-  width: 100vw;
-  height: 100%;
+  block-size: 100%;
+  inline-size: 100vw;
 }
 
 .#{$block-class}-content-wrapper--open {
-  width: calc(100vw - #{$web-terminal-width});
+  inline-size: calc(100vw - #{$web-terminal-width});
 }

package/scss/components/_index-released-only-with-carbon.scss

@@ -20,6 +20,7 @@
 @use './CreateTearsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
+@use './EditTearsheet/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;
 @use './ExpressiveCard/index-with-carbon' as *;

package/scss/components/_index-with-carbon.scss

@@ -44,6 +44,7 @@
 @use './EditSidePanel/index-with-carbon' as *;
 @use './OptionsTile/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
+@use './EditTearsheet/index-with-carbon' as *;
 @use './DataSpreadsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;

package/scss/global/decorators/_side-panel-decorator.scss

@@ -8,8 +8,8 @@
 @mixin side-panel-decorator($prefix) {
   .#{$prefix}container {
     display: flex;
-    height: 100vh;
     flex-direction: column;
+    block-size: 100vh;
   }
 
   .#{$prefix}content {
@@ -18,8 +18,8 @@
 
   .#{$prefix}toggle {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
   }
 }

package/scss/global/styles/_display-box.scss

@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/react' as *;
-@use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/type' as *;
+@use '@carbon/styles' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
 @use '../../global/styles/project-settings' as *;
 
 $block-class: 'ccs-sb--display-box';
@@ -21,28 +21,28 @@ $indicator-height: $spacing-04;
 .#{$block-class} {
   position: relative;
   display: inline-block;
-  padding-top: $spacing-05; // space for the indicators
-  margin-top: $spacing-09; // provides space in docs
   color: $text-helper;
+  margin-block-start: $spacing-09; // provides space in docs
+  padding-block-start: $spacing-05; // space for the indicators
 }
 
 .#{$block-class}__indicator {
   position: absolute;
-  top: 0;
-  width: 100%;
-  border-bottom: 1px solid $text-helper;
+  border-block-end: 1px solid $text-helper;
+  inline-size: 100%;
+  inset-block-start: 0;
   white-space: nowrap;
   @include type-style('helper-text-01');
 }
 
 .#{$block-class}__message {
   position: absolute;
-  bottom: $spacing-02;
+  inset-block-end: $spacing-02;
 }
 
 .sb-main-centered .#{$block-class}__message {
-  left: 50%;
-  min-width: 100vh;
+  inset-inline-start: 50%;
+  min-inline-size: 100vh;
   text-align: center;
   transform: translateX(-50%);
 }
@@ -50,18 +50,18 @@ $indicator-height: $spacing-04;
 .#{$block-class}__indicator--left,
 .#{$block-class}__indicator--right {
   position: absolute;
-  bottom: calc(-1 * $indicator-height);
-  width: 0;
-  height: 0;
-  border-top: $indicator-height solid $text-helper;
-  border-right: $indicator-width solid transparent;
-  border-left: $indicator-width solid transparent;
+  block-size: 0;
+  border-block-start: $indicator-height solid $text-helper;
+  border-inline-end: $indicator-width solid transparent;
+  border-inline-start: $indicator-width solid transparent;
+  inline-size: 0;
+  inset-block-end: calc(-1 * $indicator-height);
 }
 
 .#{$block-class}__indicator--left {
-  left: calc(-1 * $indicator-width);
+  inset-inline-start: calc(-1 * $indicator-width);
 }
 
 .#{$block-class}__indicator--right {
-  right: calc(-1 * $indicator-width);
+  inset-inline-end: calc(-1 * $indicator-width);
 }

package/scss/global/styles/_mixins.scss

@@ -13,10 +13,10 @@
 
 @mixin measuring-container() {
   position: absolute;
-  top: -100vh; // off screen
-  left: -100vw; // off screen
   overflow: hidden;
-  max-width: 100vw; // NOTE: resize only detected if < 100vw
+  inset-block-start: -100vh; // off screen
+  inset-inline-start: -100vw; // off screen
+  max-inline-size: 100vw; // NOTE: resize only detected if < 100vw
   pointer-events: none;
   visibility: hidden;
 }

package/scss/index-full-carbon.scss

@@ -7,4 +7,4 @@
 
 @forward './global/styles/project-settings';
 @forward './components/index';
-@forward '@carbon/react';
+@forward '@carbon/styles';