@carbon/ibm-products 2.71.0 → 2.72.0-rc.0

package/scss/components/Coachmark/_coachmark-beacon.scss

@@ -0,0 +1,164 @@
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/motion-easing-use */
+/* stylelint-disable max-nesting-depth */
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/motion' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/styles/scss/grid';
+
+// CoachmarkBeacon uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkBeacon
+$beaconAnimationTime: 2s;
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
+
+.#{$block-class} {
+  position: relative;
+
+  &-default {
+    .#{$block-class}__target {
+      &::before {
+        display: none;
+      }
+      // the blue dot
+      &::after {
+        position: absolute;
+        border-radius: 50%;
+        /* stylelint-disable-next-line carbon/theme-use */
+        background-color: $blue-50;
+        block-size: $spacing-04;
+        content: '';
+        inline-size: $spacing-04;
+        inset-block-start: calc($spacing-01 + $spacing-03);
+        inset-inline-start: calc($spacing-01 + $spacing-03);
+      }
+
+      &:focus {
+        outline: transparent;
+
+        &::before {
+          position: absolute;
+          display: block;
+          border-radius: 100%;
+          block-size: 18px;
+          content: '';
+          inline-size: 18px;
+          inset-block-start: 7px;
+          inset-inline-start: 7px;
+          /* stylelint-disable-next-line carbon/theme-use */
+          outline: $spacing-01 $focus solid;
+        }
+      }
+    }
+  }
+  .#{$block-class}__target {
+    // the hit area
+    display: flex;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    block-size: $spacing-07;
+    cursor: pointer;
+    inline-size: $spacing-07;
+
+    &[aria-expanded='true'] {
+      circle {
+        animation: none;
+      }
+    }
+  }
+
+  &__center {
+    position: absolute;
+    z-index: 6900;
+    block-size: $spacing-11;
+    inline-size: $spacing-11;
+    inset-block-start: calc(($spacing-06 - $spacing-01) * -1);
+    inset-inline-start: calc(($spacing-06 - $spacing-01) * -1);
+    pointer-events: none;
+
+    circle {
+      /* stylelint-disable-next-line carbon/motion-duration-use */
+      animation: ripple $beaconAnimationTime infinite;
+      fill: $support-info;
+      fill-opacity: 0;
+      -webkit-mask-image: none;
+      mask-image: none;
+      stroke: $support-info;
+      stroke-opacity: 0;
+      stroke-width: 1px;
+      transition-timing-function: motion (exit, productive);
+      @media (prefers-reduced-motion) {
+        animation: none;
+      }
+    }
+  }
+}
+@keyframes ripple {
+  0% {
+    fill-opacity: 0;
+    r: 1px;
+    stroke-opacity: 0;
+    transition-timing-function: motion(entrance, productive);
+  }
+
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes ring-ripple {
+  0% {
+    fill-opacity: 0;
+    r: 12px;
+    stroke-opacity: 0;
+    transition-timing-function: motion(entrance, productive);
+  }
+
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}

package/scss/components/Coachmark/_coachmark.scss

@@ -14,6 +14,9 @@
 @use './coachmark-header';
 @use './coachmark-overlay';
 @use './coachmark-tagline';
+@use './bubble';
+@use './coachmark-beacon';
+@use '../../global/styles/mixins' as *;
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -29,3 +32,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark;
 .#{$block-class} {
   position: relative;
 }
+
+// Onboarding/Coachmark/next
+
+$block-class-next: #{c4p-settings.$pkg-prefix}--coachmark__next;
+
+@include block-wrap(#{$block-class}__next) {
+  &.#{$block-class-next}--floating {
+    span:has(> div > .#{$block-class-next}--content-header--drag-icon) {
+      margin-inline-end: auto;
+    }
+  }
+}

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -28,6 +28,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   display: flex;
 }
 
+.#{$block-class}__visible {
+  visibility: visible;
+}
+
+.#{$block-class}__hidden {
+  visibility: hidden;
+}
+
 .#{$block-class}__condition-wrapper {
   display: flex;
   flex-flow: row wrap;

package/scss/components/PageHeader/_page-header.scss

@@ -711,15 +711,24 @@ $duration: 1000ms;
 /// @group page-header
 @include block-wrap(#{$block-class}__next) {
   &.#{$block-class} {
+    position: sticky;
     background-color: $layer-01;
     border-block-end: 1px solid $border-subtle-01;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$pkg-prefix}-page-header-header-top);
   }
 
   .#{$block-class}__breadcrumb-bar {
+    position: sticky;
+    z-index: 1;
+    background-color: $layer;
     block-size: to-rem(40px);
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$pkg-prefix}-page-header-breadcrumb-top);
   }
 
-  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid {
+  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid,
+  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--css-grid {
     block-size: 100%;
   }
 
@@ -751,14 +760,36 @@ $duration: 1000ms;
 
   .#{$block-class}__breadcrumb__actions {
     display: inline-flex;
+    justify-content: flex-end;
+    inline-size: 100%;
   }
 
   .#{$block-class}__breadcrumb__content-actions {
+    inline-size: 100%;
     margin-inline-end: $spacing-04;
   }
 
   .#{$block-class}__breadcrumb-wrapper {
     display: inline-flex;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}__breadcrumb-wrapper .#{$block-class}-breadcrumb-overflow {
+    inline-size: 100%;
+    .#{$carbon-prefix}--breadcrumb {
+      display: flex;
+    }
+  }
+
+  .#{$block-class}__breadcrumb-wrapper
+    .#{$block-class}-breadcrumb-overflow-item {
+    display: none;
+    opacity: 0;
+  }
+  .#{$block-class}__breadcrumb-wrapper
+    .#{$block-class}-overflow-breadcrumb-item-with-items {
+    display: flex;
+    opacity: 1;
   }
 
   .#{$block-class}__content {
@@ -874,6 +905,29 @@ $duration: 1000ms;
     grid-template-columns: auto minmax(0, 1fr);
   }
 
+  .#{$pkg-prefix}--page-header__tab-bar--tablist
+    .#{$pkg-prefix}--page-header__tags {
+    display: flex;
+    align-self: center;
+    justify-content: flex-end;
+  }
+
+  .#{$pkg-prefix}--page-header__tab-bar--tablist.#{$pkg-prefix}--page-header__tab-bar--with-scroller
+    .#{$pkg-prefix}--page-header__tags {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    transform: translateX(calc($spacing-06 * -1));
+
+    @include breakpoint(md) {
+      padding-inline-end: $spacing-03;
+      transform: translateX(0);
+    }
+    @include breakpoint(max) {
+      padding-inline-end: $spacing-05;
+    }
+  }
+
   .#{$carbon-prefix}--tabs .#{$carbon-prefix}--tab--overflow-nav-button {
     background-color: $layer-01;
 
@@ -886,6 +940,13 @@ $duration: 1000ms;
     }
   }
 
+  // **** This is a temporary work-around until the focus clipping
+  // **** for overflowing tabs is resolved in core.
+  // **** https://github.com/carbon-design-system/carbon/issues/19942
+  .#{$carbon-prefix}--tabs .#{$carbon-prefix}--tabs__nav-link {
+    margin-inline-end: $spacing-01;
+  }
+
   .#{$block-class}__tags {
     display: flex;
     align-items: center;
@@ -901,4 +962,86 @@ $duration: 1000ms;
   .#{$block-class}__tag-item {
     flex-shrink: 0;
   }
+
+  .#{$pkg-prefix}--page-header--scroller-button-icon {
+    /* stylelint-disable-next-line */
+    transition: transform $transition-base;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .#{$pkg-prefix}--page-header--scroller-button-icon-collapsed {
+    transform: rotate(-180deg);
+  }
+
+  .#{$pkg-prefix}--page-header--scroller-button-container {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: $spacing-01;
+  }
+
+  @keyframes page-header-title-breadcrumb-animation {
+    0% {
+      opacity: 0;
+      transform: translateY($spacing-05);
+    }
+
+    5% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes page-header-title-breadcrumb-animation-reduced-motion {
+    0% {
+      opacity: 0;
+    }
+
+    5% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .#{$pkg-prefix}--page-header-title-breadcrumb {
+    opacity: 0;
+    transform: translateY($spacing-05);
+    transition:
+      /* stylelint-disable-next-line */
+      transform motion(standard, productive) $duration-moderate-01,
+      opacity motion(standard, productive) $duration-moderate-01;
+    // Target browsers that do not yet support animation-timeline: scroll()
+    @supports not (animation-timeline: scroll()) {
+      &.#{$pkg-prefix}--page-header-title-breadcrumb-show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      @media (prefers-reduced-motion: reduce) {
+        transform: translateY(0);
+        /* stylelint-disable-next-line */
+        transition: opacity motion(standard, productive) $duration-moderate-01;
+      }
+    }
+    // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+    @supports (animation-timeline: scroll()) {
+      animation-direction: alternate;
+      animation-duration: 1ms; /* Firefox requires this to apply the animation */
+      animation-name: page-header-title-breadcrumb-animation;
+      animation-timeline: scroll(block nearest);
+
+      @media (prefers-reduced-motion: reduce) {
+        animation-name: page-header-title-breadcrumb-animation-reduced-motion;
+        transform: translateY(0);
+      }
+    }
+  }
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -302,6 +302,12 @@ $motion-duration: $duration-moderate-02;
     margin: $spacing-04 0 0;
   }
 
+  // Unfortunately <Layer> creates an extra DOM element.  Try not to let it break
+  // existing layouts.
+  .#{$block-class}__layer {
+    display: contents;
+  }
+
   &.#{$block-class} .#{$block-class}__body {
     display: flex;
     flex-direction: row;

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 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.
+//

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@use './carbon-imports';
+@use './truncated-text';

package/scss/components/TruncatedText/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@use './truncated-text';

package/scss/components/TruncatedText/_truncated-text.scss

@@ -0,0 +1,26 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/theme' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
+
+.#{$block-class} {
+  &__text-content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    text-overflow: clip;
+  }
+
+  &__expand-toggle {
+    color: $link-primary;
+    cursor: pointer;
+  }
+}

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -49,8 +49,9 @@
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;
 @use './SimpleHeader/index-with-carbon' as *;
-@use './BigNumbers/index-with-carbon' as *;
+@use './BigNumber/index-with-carbon' as *;
 @use './TruncatedList/index-with-carbon' as *;
+@use './TruncatedText/index-with-carbon' as *;
 @use './InterstitialScreen/index-with-carbon' as *;
 @use './Coachmark/index-with-carbon' as *;
 @use './CoachmarkBeacon/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2023
+// Copyright IBM Corp. 2021, 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.
@@ -62,8 +62,9 @@
 @use './Guidebanner';
 @use './InlineTip';
 @use './NonLinearReading';
-@use './BigNumbers';
+@use './BigNumber';
 @use './TruncatedList';
+@use './TruncatedText';
 @use './InterstitialScreen';
 @use './DelimitedList';
 @use './Decorator';

package/telemetry.yml

@@ -45,6 +45,7 @@ collect:
         - breadcrumbs
         - button
         - cancelButtonText
+        - caret
         - cellSize
         - children
         - className
@@ -85,6 +86,7 @@ collect:
         - displayMetalPanel
         - downloadLinkLabel
         - draggableClass
+        - dropShadow
         - element
         - emptyStateAction
         - emptyStateDescription
@@ -149,6 +151,7 @@ collect:
         - hideConditionSubGroupPreviewHandler
         - hideIcon
         - hideSelectAll
+        - highContrast
         - href
         - icon
         - iconDescription
@@ -189,6 +192,7 @@ collect:
         - labelText
         - launcherButtonRef
         - legendText
+        - lines
         - link
         - links
         - listRef
@@ -364,6 +368,7 @@ collect:
         - tableId
         - tagline
         - tags
+        - target
         - theme
         - title
         - titleSize
@@ -490,7 +495,7 @@ collect:
         - onRequestGenerate
         - previousStepButtonText
         - showAPIKeyLabel
-        # BigNumbers
+        # BigNumber
         - forceShowTotal
         - fractionDigits
         - iconButton
@@ -532,12 +537,14 @@ collect:
         - toggleLabel
         - toggleLabelAlign
         # Coachmark
+        - defaultOpen
+        - floating
         - isOpenByDefault
         - overlayClassName
         - overlayKind
         - overlayRef
+        - position
         - positionTune
-        - target
         # CoachmarkBeacon
         - buttonProps
         # CoachmarkDragbar
@@ -588,6 +595,8 @@ collect:
         # ConditionPreview
         - colorIndex
         - previewType
+        # ContentHeader
+        - dragIconDescription
         # CreateFullPage
         - breadcrumbsOverflowAriaLabel
         - maxVisibleBreadcrumbs
@@ -847,10 +856,17 @@ collect:
         - contentActions
         - contentActionsFlush
         - pageActionsFlush
+        # PageHeaderBreadcrumbOverflow
+        - renderOverflowBreadcrumb
         # PageHeaderContent
         - contextualActions
         # PageHeaderContentPageActions
         - menuButtonLabel
+        # PageHeaderScrollButton
+        - collapseText
+        - expandText
+        # PageHeaderTabBar
+        - scroller
         # PageHeaderTitle
         - blockClass
         - hasBreadcrumbRow
@@ -901,6 +917,7 @@ collect:
         # SidePanelBase
         - actionToolbarButtons
         - animateTitle
+        - closeIconTooltipAlignment
         - condensedActions
         - hideCloseButton
         - includeOverlay
@@ -920,21 +937,21 @@ collect:
         - retryLabel
         - showRetry
         # StringFormatter
-        - lines
         - tooltipDirection
         - width
         # TagOverflow
         - tagComponent
         # Toolbar
         - vertical
-        # ToolbarButton
-        - caret
         # TruncatedList
         - as
         - buttonClassName
         - collapsedItemsLimit
         - expandedItemsLimit
         - viewMoreLabel
+        # TruncatedText
+        - collapseLabel
+        - expandLabel
         # Underlay
         - activeId
         # UserAvatar
@@ -1138,12 +1155,14 @@ collect:
         - auto
         - checkbox
         - date
+        - expand
         - manual
         - number
         - radio
         - selection
         - text
         - textarea
+        - tooltip
         # General - updateMethod
         - batch
         - instant

package/es/components/BigNumbers/BigNumbersSkeleton.d.ts

@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-import React from 'react';
-import { BigNumbersProps } from './BigNumbers';
-/**
- * SkeletonBigNumbers is used to display a skeleton version while
- * content is loading (handled by the BigNumbers prop `loading').
- *
- * Note: This component is only used within BigNumbers.
- */
-type BigNumbersSkeletonProps = Pick<BigNumbersProps, 'className' | 'size'>;
-export declare const BigNumbersSkeleton: React.ForwardRefExoticComponent<BigNumbersSkeletonProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/BigNumbers/BigNumbersSkeleton.d.ts

@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-import React from 'react';
-import { BigNumbersProps } from './BigNumbers';
-/**
- * SkeletonBigNumbers is used to display a skeleton version while
- * content is loading (handled by the BigNumbers prop `loading').
- *
- * Note: This component is only used within BigNumbers.
- */
-type BigNumbersSkeletonProps = Pick<BigNumbersProps, 'className' | 'size'>;
-export declare const BigNumbersSkeleton: React.ForwardRefExoticComponent<BigNumbersSkeletonProps & React.RefAttributes<HTMLDivElement>>;
-export {};