@carbon/ibm-products-styles 2.57.0 → 2.58.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.57.0",
+  "version": "2.58.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -52,12 +52,12 @@
     "cross-env": "^7.0.3",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.20.0",
+    "jest-config-ibm-cloud-cognitive": "^1.21.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
-    "npm-check-updates": "^17.1.13",
+    "npm-check-updates": "^17.1.15",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
-    "sass": "^1.83.4",
+    "sass": "^1.85.1",
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
@@ -68,7 +68,7 @@
     "@carbon/type": "^11.35.0"
   },
   "dependencies": {
-    "@ibm/telemetry-js": "^1.8.0"
+    "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "2722d2ea768f07df5445cf74a5e9aed8d250637b"
+  "gitHead": "cb377019a08e8b30947d9c57e2dc1749a22e014f"
 }

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

@@ -10,9 +10,77 @@
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '../../../../global/styles/project-settings' as c4p-settings;
-
-.#{$block-class}-filter-panel__container {
+@use './animations' as *;
+
+@property --panel-transform {
+  inherits: true;
+  initial-value: 320px;
+  syntax: '<integer>';
+}
+$block-class-component: #{$block-class}-filter-panel;
+
+.#{$block-class-component} {
+  --panel-transform: 320px;
+
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: $duration-moderate-01;
+  transition-property: display, opacity, transform;
+
+  @starting-style {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class-component}--open.#{$block-class-component}--left-placement {
+    animation: filter-panel-entrance-left $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+    animation: filter-panel-exit-left $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    &.#{$block-class-component}--closing {
+      opacity: 0;
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(var(--panel-transform, 320px));
+      transition-duration: $duration-moderate-01;
+    }
+    &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(calc(-1 * var(--panel-transform, 320px)));
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* styles to apply if a user's device settings are set to reduced motion */
+    &.#{$block-class-component}--open.#{$block-class-component}--left-placement {
+      animation: filter-panel-entrance-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 0;
+        transform: translateX(0);
+      }
+    }
+    &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+      animation: filter-panel-exit-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.#{$block-class-component}__container {
   position: relative;
   background-color: $layer-01;
   block-size: clamp(var(--filter-panel-min-height), 100%, 100vh);
@@ -21,11 +89,11 @@
   inline-size: to-rem(320px);
 }
 
-.#{$block-class}-filter-panel--open {
+.#{$block-class-component}--open {
   border-inline-end: 1px $layer-accent-01 solid;
 }
 
-.#{$block-class}-filter-panel__container::before {
+.#{$block-class-component}__container::before {
   position: absolute;
   display: block;
   background-color: $layer-01;
@@ -37,7 +105,7 @@
   inset-inline-start: 0;
 }
 
-.#{$block-class}-filter-panel__inner-container {
+.#{$block-class-component}__inner-container {
   position: relative;
   z-index: 0;
   overflow: auto;
@@ -46,37 +114,37 @@
 }
 
 // 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 {
+.#{$block-class-component}__inner-container
+  .#{$block-class-component}__category:last-of-type {
   padding-block-end: $spacing-11;
 }
 
-.#{$block-class}-filter-panel {
+.#{$block-class-component} {
   position: sticky;
   inset-block-start: 0;
 }
 
-.#{$block-class}-filter-panel__heading {
+.#{$block-class-component}__heading {
   display: flex;
   justify-content: space-between;
   border-block-end: 1px solid transparent;
   padding-inline-start: $spacing-05;
 }
 
-.#{$block-class}-filter-panel__heading--with-divider {
+.#{$block-class-component}__heading--with-divider {
   border-block-end: 1px solid $layer-accent-01;
 }
 
-.#{$block-class}-filter-panel__title {
+.#{$block-class-component}__title {
   padding: $spacing-05 0;
   @include type-style('heading-compact-02');
 }
 
-.#{$block-class}-filter-panel__search {
+.#{$block-class-component}__search {
   padding: 0 $spacing-05 $spacing-06;
 }
 
-.#{$block-class}-filter-panel__category-title {
+.#{$block-class-component}__category-title {
   @include type-style('heading-compact-01');
 
   color: $text-secondary;
@@ -84,49 +152,59 @@
   margin-block-end: $spacing-05;
 }
 
-.#{$block-class}-filter-panel__category {
+.#{$block-class-component}__category {
   padding-block-end: $spacing-06;
 }
 
 // This selects all filter elements inside of categories and give them 16px margin bottom
-.#{$block-class}-filter-panel__category
+.#{$block-class-component}__category
   > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
   margin-block-end: $spacing-05;
 }
 
-.#{$block-class}-filter-panel__action-set {
+.#{$block-class-component}__action-set {
   position: sticky;
   z-index: 1; // To layer action set on top of content behind when sticky
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   block-size: to-rem(64px);
   inset-block-end: 0;
   margin-block-start: auto;
+
+  opacity: 1;
+  transform: translateY(64px) translateZ(0);
+
+  &.#{$block-class-component}__animationComplete {
+    transform: none;
+    transition-behavior: allow-discrete;
+    transition-duration: $duration-moderate-01;
+    transition-property: display, opacity, transform;
+  }
 }
 
 // Overrides
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__title {
   margin: 0;
 }
 
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__arrow {
   margin: $spacing-01 0 0;
 }
 
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__content {
   padding-inline: 0;
 }
 
 // Makes sure every child (filter) inside the accordion content has space in between
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__content
   > *:not(:last-child) {
   margin-block-end: $spacing-05;
 }
 
-.#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+.#{c4p-settings.$carbon-prefix}--btn.#{$block-class-component}-open-button {
   display: flex;
   justify-content: center;
   block-size: 3rem;
@@ -135,6 +213,6 @@
   inline-size: 3rem;
 }
 
-.#{c4p-settings.$carbon-prefix}--btn.#{$block-class}-filter-panel__view-all-button {
+.#{c4p-settings.$carbon-prefix}--btn.#{$block-class-component}__view-all-button {
   margin-inline-start: -$spacing-05;
 }

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

@@ -0,0 +1,56 @@
+//
+// Copyright IBM Corp. 2025, 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.
+//
+
+@keyframes filter-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes filter-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes filter-panel-entrance-left {
+  0% {
+    inline-size: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+
+  100% {
+    inline-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes filter-panel-exit-left {
+  0% {
+    inline-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    inline-size: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+}

package/scss/components/FilterSummary/_animations.scss

@@ -0,0 +1,20 @@
+//
+// Copyright IBM Corp. 2025, 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.
+//
+@keyframes filter-summary-enter {
+  0% {
+    block-size: 0;
+    opacity: 0;
+    /* Move from top */
+    transform: translateY(calc(var(--panel-transform) * -1));
+  }
+
+  100% {
+    block-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -9,9 +9,16 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use './animations' as *;
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
+@property --panel-transform {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
 .#{$block-class} {
   display: flex;
   align-items: flex-start;
@@ -24,6 +31,10 @@ $block-class: #{$pkg-prefix}--filter-summary;
   &.#{$block-class}__expanded {
     block-size: fit-content;
   }
+  .#{$pkg-prefix}--tag-set__tag-container {
+    animation: filter-summary-enter $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
 }
 
 .#{$block-class}

package/scss/components/FullPageError/_full-page-error.scss

@@ -71,6 +71,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
   margin-block-end: $spacing-07;
 }
 
+.#{$block-class}__body {
+  @include type-style('body-02');
+}
+
 // safari rendering fix
 .#{$block-class}__svg-container svg.#{$block-class}__svg {
   inline-size: 100%;

package/scss/components/GetStartedCard/_get-started-card.scss

@@ -78,14 +78,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__pictogram ~ .#{$block-class}__content-container {
     .#{$block-class}__media {
       /* stylelint-disable-next-line function-no-unknown */
-      margin-block: to-rem(-50px) -$spacing-09;
+      margin-block: to-rem(-50px) - $spacing-09;
     }
   }
 
   .#{$block-class}__sequence ~ .#{$block-class}__content-container {
     .#{$block-class}__media {
       /* stylelint-disable-next-line function-no-unknown */
-      margin-block: to-rem(-56px) -$spacing-09;
+      margin-block: to-rem(-56px) - $spacing-09;
     }
   }
 

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -21,7 +21,7 @@
 $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 $block-size: 38.5rem;
 
-@keyframes fade-in {
+@keyframes notifications-panel-fade-in {
   0% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-use
@@ -34,7 +34,7 @@ $block-size: 38.5rem;
   }
 }
 
-@keyframes fade-out {
+@keyframes notifications-panel-fade-out {
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -46,17 +46,45 @@ $block-size: 38.5rem;
     transform: translateY(-$block-size); // the height of the notification panel
   }
 }
+
+@keyframes notifications-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes notifications-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 .#{$block-class}__entrance {
-  animation: fade-in $duration-moderate-02 motion(standard);
+  animation: notifications-panel-fade-in $duration-moderate-02 motion(standard);
 }
 
 .#{$block-class}__exit {
-  animation: fade-out forwards $duration-moderate-02 motion(standard);
+  animation: notifications-panel-fade-out $duration-moderate-02 motion(standard)
+    forwards;
 }
 
-.#{$block-class} {
-  @media (prefers-reduced-motion) {
-    animation: none;
+@media (prefers-reduced-motion) {
+  .#{$block-class}__entrance {
+    animation: notifications-panel-entrance-reduced $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  .#{$block-class}__exit {
+    animation: notifications-panel-exit-reduced $duration-moderate-01
+      motion(exit, productive) forwards;
   }
 }
 

package/scss/components/SidePanel/_side-panel.scss

@@ -147,7 +147,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   @media (prefers-reduced-motion) {
     /* styles to apply if a user's device settings are set to reduced motion */
-    &.#{$block-class}--open {
+    &.#{$block-class}--open.#{$block-class}--right-placement,
+    &.#{$block-class}--open.#{$block-class}--left-placement {
       animation: side-panel-entrance-reduced $duration-moderate-01
         motion(exit, productive) forwards;
       @starting-style {
@@ -155,7 +156,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
         transform: translateX(0);
       }
     }
-    &.#{$block-class}--closing {
+    &.#{$block-class}--closing.#{$block-class}--left-placement,
+    &.#{$block-class}--closing.#{$block-class}--right-placement {
       animation: side-panel-exit-reduced $duration-moderate-01
         motion(exit, productive) forwards;
       @starting-style {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -401,18 +401,12 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide .#{$block-class}__content {
-    // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
-    .#{$carbon-prefix}--pagination,
-    .#{$carbon-prefix}--pagination__control-buttons,
-    .#{$carbon-prefix}--text-input,
-    .#{$carbon-prefix}--text-area,
-    .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown,
-    .#{$carbon-prefix}--dropdown-list,
-    .#{$carbon-prefix}--number input[type='number'],
-    .#{$carbon-prefix}--date-picker__input {
-      background-color: $field;
+    // Specific to the Tearsheet *and* radio buttons,
+    // `readOnly` styling is not applying a grey outline.
+    .#{$carbon-prefix}--radio-button[readonly]
+      + .#{$carbon-prefix}--radio-button__label
+      .#{$carbon-prefix}--radio-button__appearance {
+      border-color: $icon-disabled;
     }
 
     .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {