Merge branch 'main' into deps-lern-dec2024

.github/workflows/ci.yml

@@ -182,28 +182,6 @@ jobs:
           name: playwright-avt-report
           path: .playwright
 
-  vrt-runner:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '20.x'
-          cache: yarn
-      - name: Install
-        run: yarn
-      - name: Install browsers
-        run: yarn playwright install --with-deps
-      - name: Build project
-        run: yarn build
-      - name: Run VRT
-        working-directory: packages/core
-        env:
-          PERCY_TOKEN: web_d04495b0b413d61c2ea6b9118d1748b43f4fdd58d17ebe453ef8e0016b5766e4
-        run: yarn percy storybook storybook-static
-
   avt:
     if: ${{ always() }}
     runs-on: ubuntu-latest

e2e/components/Checklist/Checklist-test.avt.e2e.js

@@ -20,5 +20,56 @@ test.describe('Checklist @avt', () => {
       },
     });
     await expect(page).toHaveNoACViolations('Checklist @avt-default-state');
+
+    const buttonEle = page.locator('[aria-label="Checklist toggle"]');
+    const viewButton = page.getByRole('button', { name: 'View all (10)' });
+    const tooltipContent = await page.getByText('Toggle');
+    const taskButtons = page.locator('[title="Task name"]');
+    //press tab to move focus to buttonELement
+    await page.keyboard.press('Tab');
+    await expect(buttonEle).toBeInViewport();
+    await expect(buttonEle).toBeFocused();
+
+    //check the checklist is expanded
+    await expect(buttonEle).toHaveAttribute('aria-expanded', 'true');
+    await expect(viewButton).toBeVisible();
+    //Press enter to collapse the checklist
+    await page.keyboard.press('Enter');
+    await expect(buttonEle).toHaveAttribute('aria-expanded', 'false');
+
+    //Press escape to hide tooltip
+    await page.keyboard.press('Escape');
+    await expect(tooltipContent).not.toBeVisible();
+
+    //Press tab to move focus to 1st Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(0)).toBeFocused();
+
+    //Press tab to move focus to 2nd Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(1)).toBeFocused();
+
+    //Press tab to move focus to 3rd Task name
+    await page.keyboard.press('Tab');
+    await expect(taskButtons.nth(2)).toBeFocused();
+
+    //Press tab to move focus to View all(10) button
+    await page.keyboard.press('Tab');
+    await expect(viewButton).toBeFocused();
+
+    //check button element is showing Toggle tooltip while hovering
+    await buttonEle.hover();
+    await expect(tooltipContent).toBeVisible();
+  });
+
+  test('@avt-task-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Checklist',
+      id: 'ibm-products-onboarding-checklist--task-states',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Checklist @avt-task-state');
   });
 });

packages/core/package.json

@@ -32,7 +32,7 @@
     "@carbon/ibm-products-styles": "^2.52.0-rc.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.71.1",
+    "@carbon/react": "^1.72.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "@percy/cli": "^1.30.1",

packages/ibm-products-styles/src/components/PageHeader/_page-header.scss

@@ -538,14 +538,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__subtitle-row {
-    display: -webkit-box;
-    overflow: hidden;
-    max-width: 100%;
     margin-top: $spacing-03;
 
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
     @include breakpoint-up('md') {
       max-width: $left-section-std-width;
     }
@@ -559,6 +553,24 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     @include type.type-style('body-01');
   }
 
+  .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term {
+    border-bottom: 0;
+    letter-spacing: inherit;
+  }
+
+  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the header
+  .#{$block-class}__subtitle-tooltip
+    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
+    max-inline-size: fit-content;
+  }
+
+  .#{$block-class}__subtitle-text {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
   .#{$block-class}__available-row {
     @include type.type-style('body-01');
 

packages/ibm-products-web-components/package.json

@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@carbon/ibm-products-styles": "^2.52.0-rc.0",
-    "@carbon/styles": "1.70.0",
-    "@carbon/web-components": "2.18.0",
+    "@carbon/styles": "1.71.0",
+    "@carbon/web-components": "2.19.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
@@ -77,7 +77,7 @@
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "eslint": "^9.11.1",
-    "eslint-config-carbon": "3.17.1",
+    "eslint-config-carbon": "3.18.0",
     "globby": "^14.0.2",
     "happy-dom": "^15.11.6",
     "postcss": "^8.4.47",

packages/ibm-products/package.json

@@ -103,7 +103,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.5.0",
-    "framer-motion": "^6.5.1 < 7",
+    "framer-motion": "^11.11.17",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -114,7 +114,7 @@
     "@carbon/grid": "^11.29.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.71.1",
+    "@carbon/react": "^1.72.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",

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

@@ -6,7 +6,7 @@
  */
 
 import React, { act } from 'react';
-import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+import { render, screen, fireEvent } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 import userEvent from '@testing-library/user-event';
 
 import { pkg } from '../../settings';
@@ -50,6 +50,48 @@ const taskLists = [
       },
     ],
   },
+  {
+    title: 'List 3 title',
+    tasks: [
+      {
+        kind: 'indeterminate',
+        label: 'indeterminate task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'indeterminate',
+        label: 'indeterminate task without callback',
+      },
+    ],
+  },
+  {
+    title: 'List 4 title',
+    tasks: [
+      {
+        kind: 'disabled',
+        label: 'disabled task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'disabled',
+        label: 'disabled task without callback',
+      },
+    ],
+  },
+  {
+    title: 'List 5 title',
+    tasks: [
+      {
+        kind: 'error',
+        label: 'error task with callback',
+        onClick: () => {},
+      },
+      {
+        kind: 'error',
+        label: 'error task without callback',
+      },
+    ],
+  },
 ];
 
 // calculate some values based on taskLists
@@ -173,4 +215,63 @@ describe(componentName, () => {
     await click(taskItemWithCallback);
     expect(list1itemCallbackFn).toHaveBeenCalledTimes(1);
   });
+
+  it('should expand/collapse while clicking on checklist header button ', async () => {
+    renderComponent({
+      title: 'Checklist header',
+      viewAllLabel: `View all (10)`,
+    });
+
+    const buttonEle = screen.getAllByRole('button');
+    const toggleButton = buttonEle.find(
+      (btn) => btn.getAttribute('aria-label') === 'Checklist toggle'
+    );
+    // checking if the checklist is expanded
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('View all (10)')).toBeVisible();
+
+    // collapsing checklist
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    // expand back on second click
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('View all (10)')).toBeVisible();
+  });
+
+  it('should call checklist with checked, unchecked,indeterminate, disabled and error state', async () => {
+    renderComponent();
+    const checkedElement = screen
+      .getByTitle('List 1 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(checkedElement).toBeInViewport;
+    expect(checkedElement).toHaveClass(`${blockClass}__icon--checked`);
+
+    const uncheckedElement = screen
+      .getByTitle('List 2 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(uncheckedElement).toBeInViewport;
+    expect(uncheckedElement).toHaveClass(`${blockClass}__icon--unchecked`);
+
+    const indeterminateElement = screen
+      .getByTitle('List 3 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(indeterminateElement).toBeInViewport;
+    expect(indeterminateElement).toHaveClass(
+      `${blockClass}__icon--indeterminate`
+    );
+
+    const disabledElement = screen
+      .getByTitle('List 4 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(disabledElement).toBeInViewport;
+    expect(disabledElement).toHaveClass(`${blockClass}__icon--disabled`);
+
+    const errorElement = screen
+      .getByTitle('List 5 title')
+      .nextElementSibling?.querySelector('li > span');
+    expect(errorElement).toBeInViewport;
+    expect(errorElement).toHaveClass(`${blockClass}__icon--error`);
+  });
 });