@carbon/ibm-products 2.60.0-rc.0 → 2.61.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.60.0-rc.0",
+  "version": "2.61.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -72,7 +72,7 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.18.0-rc.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.19.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.19.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.20.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^17.1.13",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.56.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.57.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -104,7 +104,6 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.8.0",
     "framer-motion": "^6.5.1 < 7",
-    "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
     "react-table": "^7.8.0",
     "react-window": "^1.8.11"
@@ -113,11 +112,11 @@
     "@carbon/grid": "^11.31.0",
     "@carbon/layout": "^11.29.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.75.0",
+    "@carbon/react": "^1.76.0",
     "@carbon/themes": "^11.46.0",
     "@carbon/type": "^11.35.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "c6483ba5c87a8c7b18a79188205dd425f9a406cb"
+  "gitHead": "42105e25737b74016cd80bcf1f76aeee6ee96cdf"
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
@@ -7,7 +7,6 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type';
@@ -20,11 +19,13 @@
 @use '../EmptyStates/empty-state';
 
 $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
+$block-size: 38.5rem;
+
 @keyframes fade-in {
   0% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-use
-    transform: translateY(-38.5rem); // the height of the notification panel
+    transform: translateY(-$block-size); // the height of the notification panel
   }
 
   100% {
@@ -42,23 +43,37 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   100% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-use
-    transform: translateY(-38.5rem); // the height of the notification panel
+    transform: translateY(-$block-size); // the height of the notification panel
   }
 }
+.#{$block-class}__entrance {
+  animation: fade-in $duration-moderate-02 motion(standard);
+}
 
-.#{$block-class}__container {
-  @include theme($g100);
+.#{$block-class}__exit {
+  animation: fade-out forwards $duration-moderate-02 motion(standard);
+}
 
+.#{$block-class} {
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
+}
+
+.#{$block-class}__container {
   position: fixed;
   z-index: 2;
   overflow: auto;
-  background-color: $background;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-02;
+  border-inline-start: 1px solid $border-subtle-02;
+  box-shadow: 0 $spacing-01 $spacing-02 $overlay;
   color: $text-primary;
   inset-block-start: $spacing-09;
   inset-inline-end: 0;
-  max-block-size: 38.5rem;
+  max-block-size: $block-size;
   max-inline-size: 22.75rem;
-  min-block-size: 38.5rem;
+  min-block-size: $block-size;
   min-inline-size: 20rem;
   transition: transform $duration-fast-02 motion(standard);
 
@@ -66,8 +81,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     position: sticky;
     z-index: 2;
     padding: $spacing-03 $spacing-05 $spacing-05;
-    background-color: $background;
-    border-block-end: 1px solid $layer-02;
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
     inset-block-start: 0;
     .#{$block-class}__header-flex {
       display: flex;
@@ -119,19 +134,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     align-items: flex-start;
     padding: $spacing-05;
     border: 0;
-    background-color: $background;
+    background-color: $layer-01;
     cursor: pointer;
     inline-size: 100%;
     min-block-size: 6.25rem;
     text-align: start;
     transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
-      color: $text-on-color;
+      color: $text-secondary;
       margin-block-end: $spacing-02;
       @include font-weight('regular');
     }
     .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
-      color: $text-on-color;
+      color: $text-secondary;
       margin-block-end: $spacing-02;
       @include font-weight('semibold');
     }
@@ -235,7 +250,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   .#{$block-class}__notification-previous:not(:first-of-type):before {
     position: absolute;
     margin: 0 auto;
-    background-color: $layer-02;
+    background-color: $border-subtle-01;
     block-size: 1px;
     content: '';
     inline-size: calc(100% - (2 * #{$spacing-05}));
@@ -269,18 +284,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     z-index: 2;
     display: flex;
     align-items: center;
-    background-color: $background;
+    background-color: $layer-01;
     block-size: 2.5rem;
-    border-block-start: 1px solid $layer-02;
+    border-block-start: 1px solid $border-subtle-01;
     inset-block-end: 0;
     min-block-size: 2.5rem;
     .#{$block-class}__view-all-button {
       display: flex;
-      width: 100%;
-      max-width: calc(100% - 2.5rem);
       align-items: center;
       block-size: 2.5rem;
-      border-inline-end: 1px solid $layer-02;
+      border-inline-end: 1px solid $border-subtle-01;
       color: $text-primary;
       inline-size: 100%;
       max-inline-size: calc(100% - 2.5rem);

package/scss/components/ScrollGradient/_scroll-gradient.scss

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
+$intersection-value: 3rem;
 
 .#{$block-class} {
   position: relative;
@@ -22,15 +23,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
   inline-size: inherit;
 }
 .#{$block-class}__content {
+  display: grid;
   overflow: auto;
   block-size: inherit;
+  grid-template-columns: 1fr;
   inline-size: 100%;
 }
 
 .#{$block-class}__content-children {
   block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
   inline-size: 100%;
 }
+
+.#{$block-class}__content-children > * {
+  grid-area: 1 / 1;
+}
 // All gradients
 .#{$block-class}__start-vertical,
 .#{$block-class}__start-horizontal,
@@ -100,3 +109,24 @@ $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
   .#{$block-class}__end-horizontal {
   display: block;
 }
+
+.#{$block-class} [data-start-vertical],
+.#{$block-class} [data-end-vertical] {
+  block-size: $intersection-value;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: 100%;
+}
+
+.#{$block-class} [data-end-vertical],
+.#{$block-class} [data-end-horizontal] {
+  place-self: flex-end;
+}
+
+.#{$block-class} [data-start-horizontal],
+.#{$block-class} [data-end-horizontal] {
+  block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: $intersection-value;
+}

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

@@ -72,9 +72,7 @@ $sizes: (
 @mixin setLightBg($order, $color) {
   :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--white .#{$block-class}--#{$order},
-  [storybook-carbon-theme='g10'] .#{$block-class}--#{$order},
-  [storybook-carbon-theme='white'] .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }
@@ -82,9 +80,7 @@ $sizes: (
 //this mixin allows you to set background color based on the darker themes such as g90 and g100
 @mixin setDarkBg($order, $color) {
   .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order},
-  [storybook-carbon-theme='g90'] .#{$block-class}--#{$order},
-  [storybook-carbon-theme='g100'] .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }

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

@@ -8,6 +8,7 @@
 // Standard imports.
 @use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '../../global/styles/project-settings' as *;
@@ -47,6 +48,14 @@ $block-class: #{$pkg-prefix}--web-terminal;
   despite of which carbon theme the user has.
 */
 
+.#{$block-class}--open {
+  animation: web-terminal-entrance $duration-moderate-02 motion(standard);
+}
+
+.#{$block-class}--closed {
+  animation: web-terminal-exit forwards $duration-moderate-02 motion(standard);
+}
+
 .#{$block-class} {
   @include theme($g90);
 
@@ -58,7 +67,10 @@ $block-class: #{$pkg-prefix}--web-terminal;
   inset-block-start: $spacing-09;
   inset-inline-end: 0;
   max-inline-size: $web-terminal-width;
-  /* stylelint-disable-next-line  */
+
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
 }
 
 .#{$block-class}__bar {