Merge branch 'main' into expressiveCard-types-4508

carbon-design-system · Apr 30, 2024 · a966358 · a966358
2 parents 9492d86 + 1871965
commit a966358
Show file tree

Hide file tree

Showing 9 changed files with 230 additions and 61 deletions.
diff --git a/cspell.json b/cspell.json
@@ -85,6 +85,7 @@
     "dasharray",
     "data-testid",
     "datagrid",
+    "denormalized",
     "disttag",
     "disttags",
     "dragbar",

diff --git a/packages/ibm-products-styles/src/components/InterstitialScreen/_interstitial-screen.scss b/packages/ibm-products-styles/src/components/InterstitialScreen/_interstitial-screen.scss
@@ -17,13 +17,8 @@
 @use '@carbon/react/scss/colors' as *;
 @use '@carbon/styles/scss/type';
 
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/react/scss/grid';
-
 // InterstitialScreen uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by InterstitialScreen
+@use '../Carousel/carousel';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen;

diff --git a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.js b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.js
@@ -300,7 +300,13 @@ export let InterstitialScreen = React.forwardRef(
                   <div className={cx(`${blockClass}--content`)}>
                     {isMultiStep ? (
                       <div className={`${blockClass}__carousel`}>
-                        <Carousel disableArrowScroll ref={scrollRef}>
+                        <Carousel
+                          disableArrowScroll
+                          ref={scrollRef}
+                          onScroll={(scrollPercent) => {
+                            scrollPercent === 0 && setProgStep(0);
+                          }}
+                        >
                           {children}
                         </Carousel>
                       </div>
@@ -336,7 +342,13 @@ export let InterstitialScreen = React.forwardRef(
             <div className={cx(`${blockClass}--content`)}>
               {isMultiStep ? (
                 <div className={`${blockClass}__carousel`}>
-                  <Carousel disableArrowScroll ref={scrollRef}>
+                  <Carousel
+                    disableArrowScroll
+                    ref={scrollRef}
+                    onScroll={(scrollPercent) => {
+                      scrollPercent === 0 && setProgStep(0);
+                    }}
+                  >
                     {children}
                   </Carousel>
                 </div>

diff --git a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.stories.js b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.stories.js
@@ -300,21 +300,21 @@ interstitialScreenModalMultiplesHeader.args = {
       <InterstitialScreenView stepTitle="Step 1">
         <InterstitialScreenViewModule
           size="md"
-          title="Use case-specific heading"
+          title="Use case-specific heading 1"
           description="Use case-specific content that explains the concept. Use case-specific content that explains the concept. Use case-specific content that explains the concept. Use case-specific content that explains the concept."
         />
       </InterstitialScreenView>
       <InterstitialScreenView stepTitle="Step 2">
         <InterstitialScreenViewModule
           size="md"
-          title="Use case-specific heading"
+          title="Use case-specific heading 2"
           description="Use case-specific content that explains the concept. Use case-specific content that explains the concept. Use case-specific content that explains the concept. Use case-specific content that explains the concept."
         />
       </InterstitialScreenView>
       <InterstitialScreenView stepTitle="Step 3">
         <InterstitialScreenViewModule
           size="md"
-          title="Use case-specific heading"
+          title="Use case-specific heading 3"
           description="Use case-specific content that explains the concept. Use case-specific content that explains the concept. Use case-specific content that explains the concept. Use case-specific content that explains the concept."
         />
       </InterstitialScreenView>

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { ReactNode, PropsWithChildren } from 'react';
+import React, { ReactNode, PropsWithChildren, ForwardedRef } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -25,16 +25,12 @@ import {
   tearsheetHasCloseIcon,
   TearsheetShell,
   tearsheetShellWideProps as blocked,
+  CloseIconDescriptionTypes,
 } from './TearsheetShell';
 
 import { portalType } from './TearsheetShell';
 
-type closeIconDescriptionTypes = {
-  hasCloseIcon: true;
-  closeIconDescription: string;
-};
-
-interface TearsheetNarrowProps extends PropsWithChildren {
+interface TearsheetNarrowBaseProps extends PropsWithChildren {
   /**
    * The navigation actions to be shown as buttons in the action area at the
    * bottom of the tearsheet. Each action is specified as an object with
@@ -61,14 +57,6 @@ interface TearsheetNarrowProps extends PropsWithChildren {
    */
   className?: string;
 
-  /**
-   * The accessibility title for the close icon (if shown).
-   *
-   * **Note:** This prop is only required if a close icon is shown, i.e. if
-   * there are a no navigation actions and/or hasCloseIcon is true.
-   */
-  closeIconDescription?: closeIconDescriptionTypes;
-
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -123,6 +111,9 @@ interface TearsheetNarrowProps extends PropsWithChildren {
   verticalPosition?: 'normal' | 'lower';
 }
 
+type TearsheetNarrowProps = TearsheetNarrowBaseProps &
+  CloseIconDescriptionTypes;
+
 const componentName = 'TearsheetNarrow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -147,7 +138,7 @@ export let TearsheetNarrow = React.forwardRef(
       verticalPosition = defaults.verticalPosition,
       ...rest
     }: TearsheetNarrowProps,
-    ref
+    ref: ForwardedRef<HTMLDivElement>
   ) => (
     <TearsheetShell
       {...{