Merge branch 'main' into issue-6324

carbon-design-system · Nov 15, 2024 · 8dbe589 · 8dbe589
2 parents bb6614b + 27fc332
commit 8dbe589
Show file tree

Hide file tree

Showing 29 changed files with 399 additions and 37 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -182,6 +182,28 @@ 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

diff --git a/.gitignore b/.gitignore
@@ -26,6 +26,7 @@ logs
 pids
 *.pid
 *.seed
+.env
 
 # Certificates
 *.crt

diff --git a/.percy.yml b/.percy.yml
@@ -0,0 +1,17 @@
+# Percy config
+version: 2
+snapshot:
+  widths:
+    - 360
+    - 1366
+  minHeight: 1024
+storybook:
+  include: ['/IBM Products/']
+  exclude: [
+      '/Datagrid/*',
+      '/DataSpreadsheet/',
+      '/MultiAddSelect: With Avatars/', # avoid dynamic avatar color generation
+      '/Tag set/TagSet: Hundreds Of Tags', # avoid dynamic tag color generation
+      '/Page header/PageHeader: Page header with all items, pre-collapsed', # takes random time, to collapse on initial load
+      '/Tag set/TagSet: Many Tags', # takes time to calculate the overflow, causing random layout shift
+    ]
diff --git a/cspell.json b/cspell.json
@@ -140,6 +140,7 @@
     "nonlinearreading",
     "nonselectablerows",
     "noreply",
+    "Overflowmenu",
     "overridable",
     "overscan",
     "overscroll",

diff --git a/e2e/components/Datagrid/Datagrid-test.avt.e2e.js b/e2e/components/Datagrid/Datagrid-test.avt.e2e.js
@@ -16,7 +16,7 @@ test.describe('Datagrid @avt', () => {
   test('@avt-basic-usage', async ({ page }) => {
     await visitStory(page, {
       component: 'Datagrid',
-      id: 'ibm-products-components-datagrid--basic-usage',
+      id: 'deprecated-datagrid-datagrid--basic-usage',
       globals: {
         carbonTheme: 'white',
       },
@@ -27,7 +27,7 @@ test.describe('Datagrid @avt', () => {
   test('@avt-open-and-dismiss-sidepanel-onRowClick', async ({ page }) => {
     await visitStory(page, {
       component: 'Datagrid',
-      id: 'ibm-products-components-datagrid-clickablerow--clickable-row-story',
+      id: 'deprecated-datagrid-datagrid-clickablerow--clickable-row-story',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/package.json b/package.json
@@ -67,7 +67,8 @@
     "upgrade:dependencies:examples": "npm-check-updates -u --dep dev,peer,prod --color --target minor --packageFile 'scripts/example-gallery-builder/update-example/**/package.json'",
     "upgrade:automatic": "run-s -s 'upgrade:dependencies:*'",
     "upgrade:carbon": "npm-check-updates -u --dep dev,peer,prod --packageFile '{package.json,{config/**,packages/**}/package.json}' --filter '/carbon/' --target minor",
-    "upgrade:manual": "sh ./scripts/monorepo-npm-upgrade.sh"
+    "upgrade:manual": "sh ./scripts/monorepo-npm-upgrade.sh",
+    "visual-snapshot": "cd packages/core && yarn percy storybook storybook-static"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -35,6 +35,8 @@
     "@carbon/react": "^1.69.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
+    "@percy/cli": "^1.30.1",
+    "@percy/storybook": "^6.0.0",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-controls": "^8.0.9",

diff --git a/packages/ibm-products/src/components/Card/Card.tsx b/packages/ibm-products/src/components/Card/Card.tsx
@@ -11,8 +11,9 @@ import {
   Button,
   IconButton,
   OverflowMenu,
-  OverflowMenuItem,
+  MenuItem,
   Layer,
+  unstable_FeatureFlags as FeatureFlags,
 } from '@carbon/react';
 import { CheckmarkOutline, Incomplete } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
@@ -169,21 +170,23 @@ export const Card = forwardRef(
     // actions can either be an overflow menu or series of icons
     const getActions = () => {
       if (overflowActions.length > 0) {
-        const pos = actionsPlacement === 'top' ? 'bottom' : 'top';
+        const pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
         const size = actionsPlacement === 'top' ? 'sm' : 'md';
         return (
           <Layer level={2}>
-            <OverflowMenu
-              size={size}
-              direction={pos}
-              flipped
-              aria-label={overflowAriaLabel}
-              iconDescription={iconDescription}
-            >
-              {overflowActions.map(({ id, ...rest }) => (
-                <OverflowMenuItem key={id} {...rest} />
-              ))}
-            </OverflowMenu>
+            <FeatureFlags enableV12Overflowmenu>
+              <OverflowMenu
+                autoAlign
+                menuAlignment={pos}
+                size={size}
+                aria-label={overflowAriaLabel}
+                label={iconDescription}
+              >
+                {overflowActions.map(({ id, itemText, ...rest }) => (
+                  <MenuItem key={id} label={itemText} {...rest} />
+                ))}
+              </OverflowMenu>
+            </FeatureFlags>
           </Layer>
         );
       }

diff --git a/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx b/packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx
@@ -55,6 +55,12 @@ export default {
     layout: 'fullscreen',
     docs: { page: DocsPage },
     controls: { sort: 'requiredFirst' },
+    percy: {
+      waitForSelector: [
+        `button.${blockClass}__create-button`,
+        `.${blockClass}__influencer`,
+      ],
+    },
   },
   decorators: [
     (story) => <div className={`${storyClass}__viewport`}>{story()}</div>,

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js
@@ -13,6 +13,7 @@ import toolbarScreenshot from './storybook-assets/datagrid-actions-example.png';
 
 const DocsPage = () => (
   <StoryDocsPage
+    deprecationNotice={`\`Datagrid\` is deprecated and will be moving to an example-based approach. For more information, please refer to the [migration docs](https://github.com/carbon-design-system/tanstack-carbon).`}
     blocks={[
       {
         title: 'Getting started',

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
@@ -36,9 +36,10 @@ import { Wrapper } from './utils/Wrapper';
 import DocsPage from './Datagrid.docs-page';
 import { getBatchActions } from './utils/getBatchActions';
 import { StatusIcon } from '../StatusIcon';
+import { Annotation } from '../../../../core/.storybook/Annotation';
 
 export default {
-  title: 'IBM Products/Components/Datagrid',
+  title: 'Deprecated/Datagrid/Datagrid',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
@@ -56,6 +57,27 @@ export default {
     },
   },
   excludeStories: ['getBatchActions'],
+  decorators: [
+    (story) => (
+      <div>
+        <Annotation
+          type="deprecation-notice"
+          text={
+            <div>
+              This component is deprecated and will be moving to an
+              example-based approach. For more information, please refer to the{' '}
+              <a href="https://github.com/carbon-design-system/tanstack-carbon">
+                migration documentation
+              </a>
+              .
+            </div>
+          }
+        >
+          {story()}
+        </Annotation>
+      </div>
+    ),
+  ],
 };
 
 const getColumns = (rows) => {

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -917,7 +917,10 @@ const ActionsColumnExample = ({
 
 beforeAll(() => {
   jest.spyOn(global.console, 'warn').mockImplementation((message) => {
-    if (!message.includes('componentWillReceiveProps')) {
+    if (
+      !message.includes('componentWillReceiveProps') &&
+      !message.includes('deprecated')
+    ) {
       global.console.warn(message);
     }
   });
@@ -1171,7 +1174,8 @@ describe(componentName, () => {
         );
         expect(container.children.length).toEqual(0);
         jest.spyOn(console, 'error').mockRestore();
-      }
+      },
+      2
     );
   });
 

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx
@@ -34,6 +34,7 @@ export interface DatagridProps {
 
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 export let Datagrid = React.forwardRef(
   (
@@ -104,6 +105,12 @@ export let Datagrid = React.forwardRef(
   }
 );
 
+/**@ts-ignore*/
+Datagrid.deprecated = {
+  level: 'warn',
+  details: `For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx
@@ -26,7 +26,7 @@ import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 import { ExampleAILabel } from '../../utils/ExampleAILabel';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/AILabel',
+  title: 'Deprecated/Datagrid/Datagrid/AILabel',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...ges/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx b/...ges/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx
@@ -30,7 +30,7 @@ import { SidePanel } from '../../../SidePanel';
 import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ClickableRow',
+  title: 'Deprecated/Datagrid/Datagrid/ClickableRow',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...ts/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx b/...ts/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx
@@ -30,7 +30,7 @@ import { FeatureFlags } from '../../../FeatureFlags';
 import { WithFeatureFlags } from '../../../../../../core/.storybook/WithFeatureFlags';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ColumnCustomization',
+  title: 'Deprecated/Datagrid/Datagrid/ColumnCustomization',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...ges/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx b/...ges/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx
@@ -28,7 +28,7 @@ const blockClass = `${pkg.prefix}--datagrid`;
 const storybookBlockClass = `storybook-${blockClass}__validation-code-snippet`;
 
 export default {
-  title: 'IBM Products/Components/Datagrid/EditableCell',
+  title: 'Deprecated/Datagrid/Datagrid/EditableCell',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...s/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx b/...s/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx
@@ -26,7 +26,7 @@ import { DocsPage } from './ExpandableRow.docs-page';
 import { usePrefix } from '../../../../global/js/hooks';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ExpandableRow',
+  title: 'Deprecated/Datagrid/Datagrid/ExpandableRow',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx
@@ -18,7 +18,7 @@ import { getDateFormat } from '../../utils/getDateFormat';
 import { getFilterProps } from './Panel.stories';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/Filtering/Flyout',
+  title: 'Deprecated/Datagrid/Datagrid/Filtering/Flyout',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx
@@ -18,7 +18,7 @@ import { FilteringUsage } from '../../utils/FilteringUsage';
 import { getDateFormat } from '../../utils/getDateFormat';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/Filtering/Panel',
+  title: 'Deprecated/Datagrid/Datagrid/Filtering/Panel',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx
@@ -33,7 +33,7 @@ const sharedArgTypes = {
 };
 
 export default {
-  title: 'IBM Products/Components/Datagrid/NestedRows',
+  title: 'Deprecated/Datagrid/Datagrid/NestedRows',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx b/...products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx
@@ -25,7 +25,7 @@ import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/RowActionButtons',
+  title: 'Deprecated/Datagrid/Datagrid/RowActionButtons',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...oducts/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx b/...oducts/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx
@@ -19,7 +19,7 @@ import { ARG_TYPES } from '../../utils/getArgTypes';
 import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/RowHeightSettings',
+  title: 'Deprecated/Datagrid/Datagrid/RowHeightSettings',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx b/packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx
@@ -41,6 +41,9 @@ export default {
     docs: {
       page: mdx,
     },
+    percy: {
+      waitForTimeout: 1000,
+    },
   },
 };
 

diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx b/packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx
@@ -373,7 +373,14 @@ export default {
   title: 'IBM Products/Components/Page header/PageHeader',
   component: PageHeader,
   tags: ['autodocs'],
-  parameters: { styles, layout: 'fullscreen' /* docs: { page: mdx } */ },
+  parameters: {
+    styles,
+    layout: 'fullscreen',
+    /* docs: { page: mdx } */
+    percy: {
+      waitForTimeout: 1000,
+    },
+  },
   decorators: [
     (story, { args }) => (
       <div

diff --git a/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx b/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx
@@ -135,6 +135,9 @@ export default {
   parameters: {
     // docs: { page: mdx },
     styles,
+    percy: {
+      waitForTimeout: 1000,
+    },
   },
   argTypes: {
     containerWidth: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ logs @@
     pids
     *.pid
     *.seed
+    .env
     # Certificates
     *.crt
@@ Expand Down @@