fix(tearsheet): resolve conflict

.github/codecov.yml

@@ -0,0 +1,30 @@
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true
+
+# This is the configuration on how the codecov report layout will look like in PR's
+comment:
+  layout: 'header, diff, flags, components'
+
+component_management:
+  default_rules:
+    statuses:
+      - type: project
+        target: auto
+        threshold: 1%
+        branches:
+          - '!main'
+  individual_components:
+    - component_id: ibm-products
+      name: ibm-products
+      paths:
+        - ../packages/ibm-products/**
+    - component_id: ibm-products-web-components
+      name: ibm-products-web-components
+      paths:
+        - ../packages/ibm-products-web-components/**

.github/workflows/ci.yml

@@ -92,7 +92,11 @@ jobs:
       - name: Install
         run: yarn
       - name: CI tests for c4p
-        run: yarn ci-check:test:c4p
+        run: yarn ci-check:test:c4p --collectCoverage
+      - name: Upload coverage reports to Codecov with GitHub Action
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       - name: CI snapshot tests for c4p
         run: yarn ci-check:test:c4p:snapshot
   test-c4p-wc:

README.md

@@ -14,6 +14,7 @@
 [![Netlify status](https://img.shields.io/netlify/e8cd9972-0fc8-4c51-a911-e9a930ca6605)](https://app.netlify.com/sites/carbon-for-ibm-products/deploys)
 [![GitHub Lerna version](https://img.shields.io/github/lerna-json/v/carbon-design-system/ibm-products)](https://lerna.js.org)
 [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/carbon-design-system/ibm-products/blob/master/.github/CONTRIBUTING.md)
+[![codecov](https://codecov.io/gh/carbon-design-system/ibm-products/graph/badge.svg?token=TKEL92HSUK)](https://codecov.io/gh/carbon-design-system/ibm-products)
 
 ## 🚀 Getting started
 

cspell.json

@@ -1,7 +1,11 @@
 {
   "version": "0.1",
   "language": "en",
-  "dictionaries": ["contributors", "html", "packages"],
+  "dictionaries": [
+    "contributors",
+    "html",
+    "packages"
+  ],
   "dictionaryDefinitions": [
     {
       "name": "contributors",
@@ -95,14 +99,14 @@
     "disttags",
     "dragbar",
     "draggable",
-    "explainability",
     "interstitialscreenviewmodule",
     "draghandle",
     "dragmode",
     "editinplace",
     "editsidepanel",
     "emptystate",
     "erroremptystate",
+    "explainability",
     "exportmodal",
     "expressivecard",
     "fieldsets",
@@ -116,19 +120,20 @@
     "homescreen",
     "httperror",
     "httperrorother",
-    "interstitialscreenview",
     "importmodal",
     "inlineedit",
-    "jsnext",
-    "Menlo",
-    "Neue",
-    "noninteractive",
     "inlinetip",
+    "interstitialscreenview",
+    "interstitialscreenviewmodule",
+    "jsnext",
     "listbox",
     "loglevel",
+    "Menlo",
     "mordech",
     "namor",
+    "Neue",
     "nodataemptystate",
+    "noninteractive",
     "nonlinearreading",
     "nonselectablerows",
     "noreply",
@@ -186,9 +191,9 @@
     "toggletip",
     "toggletipbutton",
     "toolbarbutton",
-    "tsickle",
     "treegrid",
     "treeview",
+    "tsickle",
     "typeahead",
     "typeof",
     "unauthorizedemptystate",

e2e/components/CreateFlows/CreateTearsheet-test.avt.e2e.js

@@ -32,4 +32,107 @@ test.describe('CreateTearsheet @avt', () => {
       'CreateTearsheet @avt-default-state'
     );
   });
+
+  test('@avt-focus-move-properly-across-steps', async ({ page }) => {
+    await visitStory(page, {
+      component: 'CreateTearsheet',
+      id: 'ibm-products-patterns-create-flows-createtearsheet--multi-step-tearsheet',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+
+    const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`);
+    // Pressing 'Tab' key to focus on the "Open CreateTearsheet" button in the Storybook
+    await page.keyboard.press('Tab');
+    // Pressing 'Enter' key to open the Tearsheet
+    await page.keyboard.press('Enter');
+
+    await expect(modalElement).toBeVisible();
+    await modalElement.evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished)
+      )
+    );
+
+    const learnMoreAnchor = page.getByText('Learn more.');
+    const step1Input1 = page.locator(
+      '#tearsheet-multi-step-story-text-input-multi-step-1'
+    );
+    const nextButton = page.getByText('Next');
+    const backButton = page.getByText('Back');
+    // Expect the Learn More link to be focused
+    await expect(learnMoreAnchor).toBeFocused();
+
+    // Switch focus to input box
+    await page.keyboard.press('Tab');
+    // Expect the input box to be focused
+    await expect(step1Input1).toBeFocused();
+
+    // Type some text in the input field
+    await page.keyboard.type('H');
+    // Expect the Next button to be enabled at this moment
+    await expect(nextButton).toBeEnabled();
+
+    // Switch focus to next button
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Expect next button to be focused
+    await expect(nextButton).toBeFocused();
+
+    // Goto next step by pressing enter
+    await page.keyboard.press('Enter');
+
+    const step2Input1 = page.locator('#custom-step-input');
+    // Expect the Step 2 input field is focused
+    await expect(step2Input1).toBeFocused();
+    // Also confirm the Next button disabled in this step
+    await expect(nextButton).toBeDisabled();
+
+    // Type some text in the input field
+    await page.keyboard.type('L');
+    // Expect Next button enabled now
+    await expect(nextButton).toBeEnabled();
+
+    // Switch focus to next button
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Goto next step by pressing enter
+    await page.keyboard.press('Enter');
+
+    const step3Input1 = page.locator('#carbon-number');
+    // Expect the first input element to be focuses
+    await expect(step3Input1).toBeFocused();
+
+    // Switch focus to next button
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Goto previous step by pressing enter
+    await expect(backButton).toBeFocused();
+    await page.keyboard.press('Enter');
+
+    // Expect the first element in the previous step to be focused
+    await expect(step2Input1).toBeFocused();
+
+    // Switch focus to next button
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Goto previous step by pressing enter
+    await expect(backButton).toBeFocused();
+    await page.keyboard.press('Enter');
+
+    //  Expect the previous page first element to be focused
+    await expect(learnMoreAnchor).toBeFocused();
+  });
 });

packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss

@@ -109,7 +109,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     left: 0;
     border-right: 1px solid $border-subtle-02;
   }
-  &.#{$block-class}.#{$block-class}--has-slug {
+  &.#{$block-class}.#{$block-class}--has-slug,
+  &.#{$block-class}.#{$block-class}--has-ai-label {
     border-color: transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
@@ -195,13 +196,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar,
-  &.#{$block-class}--has-slug {
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label {
     --#{$block-class}--title-padding-right: #{$spacing-10};
   }
 
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar {
-    &.#{$block-class}--has-slug {
+    &.#{$block-class}--has-slug,
+    &.#{$block-class}--has-ai-label {
       --#{$block-class}--title-padding-right: #{$spacing-11};
     }
   }
@@ -308,7 +311,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding-top: $spacing-03;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}--scrolls {
+  &.#{$block-class}--has-slug .#{$block-class}--scrolls,
+  &.#{$block-class}--has-ai-label .#{$block-class}--scrolls {
     @include utilities.ai-popover-gradient('default', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
@@ -362,7 +366,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     height: $spacing-08;
   }
 
-  .#{$block-class}__slug-and-close {
+  .#{$block-class}__slug-and-close,
+  .#{$block-class}__ai-label-and-close {
     position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
@@ -464,7 +469,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   inset: 0;
 }
 
-.#{$block-class}--has-slug + .#{$block-class}__overlay {
+.#{$block-class}--has-slug + .#{$block-class}__overlay,
+.#{$block-class}--has-ai-label + .#{$block-class}__overlay {
   /* stylelint-disable-next-line carbon/theme-token-use */
   background-color: $ai-overlay;
 }

packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.test.js

@@ -309,7 +309,10 @@ describe(CreateTearsheet.displayName, () => {
     const createTearsheetSteps = tearsheetElement.querySelector(
       `.${createTearsheetBlockClass}__content .${carbon.prefix}--form`
     ).children;
-    click(nextButtonElement);
+    act(() => {
+      /* fire events that update state */
+      click(nextButtonElement);
+    });
     expect(
       createTearsheetSteps[1].classList.contains(
         `.${createTearsheetBlockClass}__step__step--visible-section`