@carbon/ibm-products 2.64.0 → 2.65.0-rc.0

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -94,4 +94,29 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &__icon-idea {
     margin-block-end: $spacing-03;
   }
+
+  li {
+    display: block;
+    max-inline-size: 100%;
+    white-space: nowrap;
+  }
+
+  button,
+  &__navLinkLabels-tooltip {
+    max-inline-size: 100%;
+
+    .#{c4p-settings.$carbon-prefix}--tooltip-content {
+      color: $text-primary;
+      margin-inline-start: calc($spacing-02 + $spacing-01);
+      max-inline-size: 100%;
+    }
+  }
+
+  &__navLinkLabels-text {
+    display: inline-block;
+    overflow: hidden;
+    max-inline-size: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -29,31 +29,6 @@ $one-grid-column: calc(100% / 16);
 .#{$block-class} {
   $block: &;
 
-  .#{$carousel} {
-    display: flex;
-    flex-direction: column;
-    min-block-size: 100%;
-
-    &__elements-container {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-
-    &__elements {
-      flex: 1;
-    }
-  }
-
-  position: fixed;
-  z-index: 6001;
-  inset-block-start: 0;
-  inset-inline: 0;
-
-  #{$block}--auto-height-container {
-    flex: 1;
-  }
-
   &--body {
     overflow: hidden auto;
     flex-grow: 1;
@@ -62,17 +37,8 @@ $one-grid-column: calc(100% / 16);
     background-color: $background;
   }
 
-  &--body-grid {
-    padding: 0 !important;
-    block-size: 100%;
-  }
-
-  &--body-row {
-    block-size: 100%;
-  }
-
   &--progress {
-    margin: $spacing-07 $spacing-05 $spacing-04;
+    margin-block-end: $spacing-04;
   }
 
   &__carousel {
@@ -83,32 +49,6 @@ $one-grid-column: calc(100% / 16);
     }
   }
 
-  &--container {
-    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-use
-    background-color: $background;
-    max-inline-size: 82rem;
-    min-inline-size: 47rem;
-  }
-
-  &--media-container {
-    overflow: hidden;
-  }
-
-  &--media {
-    block-size: 100%;
-    inline-size: 100%;
-
-    margin-inline-end: calc($spacing-08 * -1);
-    @include breakpoint-down(xlg) {
-      margin-inline-end: calc($spacing-07 * -1);
-    }
-  }
-
-  &--stepped-animated-media {
-    overflow: hidden;
-    block-size: 100%;
-  }
-
   &--internal-body {
     padding: 0 !important;
     margin: 0 !important;
@@ -120,18 +60,32 @@ $one-grid-column: calc(100% / 16);
     background-color: $background;
     margin-block-end: 0 !important;
     min-block-size: $spacing-09;
+    padding-block-start: $spacing-06;
+    padding-inline-start: $spacing-07 !important;
 
     &:empty {
       min-block-size: 0;
     }
 
-    h2 {
-      @include type.type-style('productive-heading-04');
+    .#{$block-class}--titleContainer {
+      margin-block-end: $spacing-05;
 
-      padding: 0 $spacing-05 $spacing-06;
+      h2 {
+        @include type.type-style('productive-heading-04');
 
-      &:empty {
-        padding: 0;
+        margin-block-end: $spacing-03;
+
+        &:empty {
+          padding: 0;
+        }
+      }
+
+      h3 {
+        @include type.type-style('productive-heading-03');
+
+        &:empty {
+          padding: 0;
+        }
       }
     }
 
@@ -143,13 +97,6 @@ $one-grid-column: calc(100% / 16);
         margin-block-start: 0;
       }
     }
-    > #{$block}--close-icon {
-      position: absolute !important;
-      z-index: 1;
-      inline-size: $spacing-09;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-    }
   }
 
   // FOOTER
@@ -174,6 +121,12 @@ $one-grid-column: calc(100% / 16);
       max-inline-size: none;
       padding-inline-start: $spacing-07 !important;
     }
+    .#{c4p-settings.$carbon-prefix}--inline-loading {
+      position: absolute;
+      inline-size: $spacing-07;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+    }
   }
 
   &--footer-controls {
@@ -183,25 +136,11 @@ $one-grid-column: calc(100% / 16);
     margin-inline-start: auto;
   }
 
-  // MODAL (settings exclusive of "FULL SCREEN")
-  &--modal {
-    #{$block}--content {
-      margin-block-start: 0;
-    }
-
-    #{$block}--internal-header {
-      &:has(> :nth-child(2)) {
-        min-block-size: initial;
-      }
-    }
-
-    &:has(> :nth-child(1)) {
-      min-block-size: initial;
-    }
-  }
-
   // FULL SCREEN (settings exclusive of "MODAL")
   &--full-screen {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
     #{$block}--container {
       display: flex;
       flex-direction: column;
@@ -211,53 +150,6 @@ $one-grid-column: calc(100% / 16);
       max-inline-size: 100vw;
     }
 
-    // e.g. "IBM Cloud Pak | Product"
-    // ..."IBM Cloud Pak"
-    #{$block}--header {
-      @include type.type-style('body-long-01');
-      /* stylelint-disable-next-line carbon/theme-use */
-      background-color: $gray-100;
-
-      block-size: $spacing-09;
-      border-block-end: 1px solid $border-subtle-01;
-      /* stylelint-disable-next-line carbon/theme-use */
-      color: $gray-10;
-      /* stylelint-disable-next-line carbon/type-use */
-      font-weight: normal !important; // overrides type style above
-      /* stylelint-disable-next-line carbon/type-use */
-      line-height: $spacing-09 !important;
-      padding-inline-start: $spacing-05;
-
-      b {
-        /* stylelint-disable-next-line carbon/type-use */
-        font-weight: 600;
-      }
-    }
-
-    #{$block}--internal-header {
-      > h2 {
-        padding: $spacing-05 $spacing-08 0;
-      }
-
-      #{$block}--progress {
-        margin: $spacing-10 $spacing-08 $spacing-04;
-
-        @include breakpoint-down(xlg) {
-          margin-inline-start: $spacing-07;
-        }
-      }
-
-      &--has-title {
-        #{$block}--progress {
-          margin-block-start: $spacing-06;
-        }
-      }
-
-      &:has(> :nth-child(1)) {
-        min-block-size: initial;
-      }
-    }
-
     #{$block}--footer {
       #{$block}--skip-btn {
         padding-inline-start: $spacing-08 !important;

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

@@ -169,6 +169,8 @@ $block-size: 38.5rem;
     text-align: start;
     transition: background-color $duration-moderate-02 motion(standard);
     .#{$block-class}__notification-title {
+      @include type.type-style('heading-01');
+
       color: $text-secondary;
       margin-block-end: $spacing-02;
       @include font-weight('regular');

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

@@ -109,6 +109,7 @@ $duration: 1000ms;
     z-index: $z-index-header-minus;
     display: inline-block; /* cause top/bottom margin to reserve space */
     background-color: $background;
+    border-block-end: 1px solid $border-subtle-00;
     color: $text-primary;
     inline-size: 100%;
     /* stylelint-disable-next-line carbon/layout-use */
@@ -124,6 +125,10 @@ $duration: 1000ms;
     --#{$block-class}--navigation-buffer-top: $spacing-06;
   }
 
+  &.#{$block-class}--without-background {
+    border-block-end: none;
+  }
+
   &.#{$block-class}--has-navigation-tags-only {
     --#{$block-class}--navigation-buffer-top: $spacing-04;
   }

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

@@ -52,8 +52,6 @@
 @use './BigNumbers/index-with-carbon' as *;
 @use './TruncatedList/index-with-carbon' as *;
 @use './InterstitialScreen/index-with-carbon' as *;
-@use './InterstitialScreenView/index-with-carbon' as *;
-@use './InterstitialScreenViewModule/index-with-carbon' as *;
 @use './Coachmark/index-with-carbon' as *;
 @use './CoachmarkBeacon/index-with-carbon' as *;
 @use './CoachmarkButton/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -65,8 +65,6 @@
 @use './BigNumbers';
 @use './TruncatedList';
 @use './InterstitialScreen';
-@use './InterstitialScreenView';
-@use './InterstitialScreenViewModule';
 @use './DelimitedList';
 @use './Decorator';
 @use './DecoratorLink';

package/telemetry.yml

@@ -2,7 +2,7 @@
 
 version: 1
 projectId: 495342db-5046-4ecf-85ea-9ffceb6f8cdf
-endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
 collect:
   jsx:
     elements:
@@ -364,6 +364,7 @@ collect:
         - titleSize
         - toolbarBatchActions
         - toolbarBatchActionsDisplayMin
+        - tooltipAlign
         - tooltipAlignment
         - tooltipText
         - totalVisibleColumns
@@ -561,7 +562,6 @@ collect:
         # ConditionBuilderButton
         - hideLabel
         - isInvalid
-        - tooltipAlign
         - wrapperClassName
         - wrapperProps
         # ConditionBuilderItem
@@ -627,6 +627,7 @@ collect:
         - border
         # DraggableElement
         - classList
+        - elementId
         - isSticky
         # DraggableItemsList
         - moveElement
@@ -729,19 +730,24 @@ collect:
         - narrow
         - tertiaryButtonLabel
         # InterstitialScreen
-        - breakpointsWithMedia
-        - domainName
-        - headerClassName
-        - headerTitle
-        - hideProgressIndicator
         - interstitialAriaLabel
         - isFullScreen
+        # InterstitialScreenBody
+        - contentRenderer
+        # InterstitialScreenFooter
+        - actionButtonRenderer
         - nextButtonLabel
-        - productName
+        - onAction
         - skipButtonLabel
         - startButtonLabel
+        # InterstitialScreenHeader
+        - headerSubTitle
+        - headerTitle
+        - hideProgressIndicator
         # InterstitialScreenView
         - stepTitle
+        # InterstitialScreenViewModule
+        - disableActionButton
         # Item
         - attributes
         - dragOverlay
@@ -1095,6 +1101,9 @@ collect:
         # General - titleSize
         - default
         - large
+        # General - tooltipAlign
+        - bottom
+        - top
         # General - tooltipAlignment
         - bottom
         - bottom-left

package/es/components/InterstitialScreenView/InterstitialScreenView.js

@@ -1,78 +0,0 @@
-/**
- * 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.
- */
-
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
-import PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
-
-var _excluded = ["children", "className", "stepTitle", "translateWithId"];
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--interstitial-screen-view");
-var componentName = 'InterstitialScreenView';
-/**
- * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
- */
-var InterstitialScreenView = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    stepTitle = _ref.stepTitle;
-    _ref.translateWithId;
-    var rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    role: "complementary",
-    "aria-label": stepTitle
-  }, rest, {
-    className: cx(blockClass,
-    // Apply the block class to the main HTML element
-    className,
-    // Apply any supplied class names to the main HTML element.
-    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    {
-      // switched classes dependant on props or state
-      // example: [`${blockClass}__here-if-small`]: size === 'sm',
-    }),
-    ref: ref
-  }, getDevtoolsProps(componentName)), children);
-});
-
-// Return a placeholder if not released and not enabled by feature flag
-InterstitialScreenView = pkg.checkComponentEnabled(InterstitialScreenView, componentName);
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-InterstitialScreenView.displayName = componentName;
-
-// The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-InterstitialScreenView.propTypes = {
-  /**
-   * Provide the contents of the InterstitialScreenView.
-   */
-  children: PropTypes.node,
-  /**
-   * Optional class name for this component.
-   */
-  className: PropTypes.string,
-  /**
-   * The label to pass to the ProgressStep component.
-   */
-  stepTitle: PropTypes.string.isRequired,
-  /**
-   * Optional method that takes in a message id and returns an internationalized string.
-   */
-  translateWithId: PropTypes.func
-};
-
-export { InterstitialScreenView };

package/es/components/InterstitialScreenView/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export { InterstitialScreenView } from './InterstitialScreenView';
-export type { InterstitialScreenViewProps } from './InterstitialScreenView';

package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js

@@ -1,81 +0,0 @@
-/**
- * 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.
- */
-
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from '../../_virtual/index.js';
-import React__default from 'react';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
-
-var _excluded = ["className", "title", "description"];
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--interstitial-screen-view-module");
-var componentName = 'InterstitialScreenViewModule';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-/**
- * View module to help in building interstitial screen views.
- */
-var InterstitialScreenViewModule = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    title = _ref.title,
-    description = _ref.description,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
-    className: cx(blockClass,
-    // Apply the block class to the main HTML element
-    className // Apply any supplied class names to the main HTML element.
-    ),
-    ref: ref
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("h1", {
-    className: "".concat(blockClass, "--heading")
-  }, title), /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "--body")
-  }, description));
-});
-
-// Return a placeholder if not released and not enabled by feature flag
-InterstitialScreenViewModule = pkg.checkComponentEnabled(InterstitialScreenViewModule, componentName);
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-InterstitialScreenViewModule.displayName = componentName;
-
-// The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-InterstitialScreenViewModule.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node.
-   */
-  className: PropTypes.string,
-  /**
-   * The description of this component.
-   */
-  description: PropTypes.string.isRequired,
-  /**
-   * The title of this component.
-   */
-  title: PropTypes.string.isRequired
-};
-
-export { InterstitialScreenViewModule };

package/es/components/InterstitialScreenViewModule/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export { InterstitialScreenViewModule } from './InterstitialScreenViewModule';
-export type { InterstitialScreenViewModuleProps } from './InterstitialScreenViewModule';

package/lib/components/InterstitialScreenView/InterstitialScreenView.js

@@ -1,78 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var index = require('../../_virtual/index.js');
-var cx = require('classnames');
-var devtools = require('../../global/js/utils/devtools.js');
-var settings = require('../../settings.js');
-
-var _excluded = ["children", "className", "stepTitle", "translateWithId"];
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen-view");
-var componentName = 'InterstitialScreenView';
-/**
- * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
- */
-exports.InterstitialScreenView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    stepTitle = _ref.stepTitle;
-    _ref.translateWithId;
-    var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    role: "complementary",
-    "aria-label": stepTitle
-  }, rest, {
-    className: cx(blockClass,
-    // Apply the block class to the main HTML element
-    className,
-    // Apply any supplied class names to the main HTML element.
-    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    {
-      // switched classes dependant on props or state
-      // example: [`${blockClass}__here-if-small`]: size === 'sm',
-    }),
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName)), children);
-});
-
-// Return a placeholder if not released and not enabled by feature flag
-exports.InterstitialScreenView = settings.pkg.checkComponentEnabled(exports.InterstitialScreenView, componentName);
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-exports.InterstitialScreenView.displayName = componentName;
-
-// The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-exports.InterstitialScreenView.propTypes = {
-  /**
-   * Provide the contents of the InterstitialScreenView.
-   */
-  children: index.default.node,
-  /**
-   * Optional class name for this component.
-   */
-  className: index.default.string,
-  /**
-   * The label to pass to the ProgressStep component.
-   */
-  stepTitle: index.default.string.isRequired,
-  /**
-   * Optional method that takes in a message id and returns an internationalized string.
-   */
-  translateWithId: index.default.func
-};

package/lib/components/InterstitialScreenView/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export { InterstitialScreenView } from './InterstitialScreenView';
-export type { InterstitialScreenViewProps } from './InterstitialScreenView';