Merge branch 'main' into dependabot/npm_and_yarn/packages/grid/exampl…

…es/preview/nanoid-3.3.8
carbon-design-system · Jan 6, 2025 · 1ee8476 · 1ee8476
2 parents 28b495b + 85158ba
commit 1ee8476
Show file tree

Hide file tree

Showing 65 changed files with 1,702 additions and 33 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1740,6 +1740,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "vsvsv",
+      "name": "Vsevolod Platunov",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9214692?v=4",
+      "profile": "https://github.com/vsvsv",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -87,7 +87,7 @@ jobs:
       - name: Run tests
         run: yarn test --ci --collectCoverage
       - name: Upload coverage reports to Codecov with GitHub Action
-        uses: codecov/codecov-action@7f8b4b4bde536c465e797be725718b88c5d95e0e # v5.1.1
+        uses: codecov/codecov-action@1e68e06f1dbfde0e4cefc87efeba9e4643565303 # v5.1.2
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   e2e:

diff --git a/.github/workflows/metrics-merge-rate.yml b/.github/workflows/metrics-merge-rate.yml
@@ -46,7 +46,7 @@ jobs:
           echo "- **Merge Rate**: $MERGE_RATE%" >> $GITHUB_STEP_SUMMARY
 
       - name: Send message to Slack
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {

diff --git a/.github/workflows/slack-announcement.yml b/.github/workflows/slack-announcement.yml
@@ -37,7 +37,7 @@ jobs:
     steps:
       - name: Send slack announcement
         id: slack
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {

diff --git a/.github/workflows/slack-build-notifications.yml b/.github/workflows/slack-build-notifications.yml
@@ -24,7 +24,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack
         id: slack-success
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {
@@ -42,7 +42,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack
         id: slack-failure
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {

diff --git a/.github/workflows/slack-office-hours-design.yml b/.github/workflows/slack-office-hours-design.yml
@@ -13,7 +13,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {

diff --git a/.github/workflows/slack-office-hours-dev.yml b/.github/workflows/slack-office-hours-dev.yml
@@ -12,7 +12,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {
@@ -105,7 +105,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {
@@ -198,7 +198,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@fcfb566f8b0aab22203f066d80ca1d7e4b5d05b3 # v1.27.1
+        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
         with:
           payload: |
             {

diff --git a/README.md b/README.md
@@ -322,6 +322,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/a88zach"><img src="https://avatars.githubusercontent.com/u/1724822?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zach Tindall</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=a88zach" title="Code">💻</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/vsvsv"><img src="https://avatars.githubusercontent.com/u/9214692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vsevolod Platunov</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vsvsv" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ashna000"><img src="https://avatars.githubusercontent.com/u/12691034?s=96&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashna Thomas</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ashna000" title="Code">💻</a></td>
   </tr>
 </table>

diff --git a/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.avt.e2e.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('@avt IconIndicator', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'IconIndicator',
+      id: 'experimental-statusindicators-unstable-iconindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('IconIndicator');
+  });
+});
diff --git a/e2e/components/IconIndicator/IconIndicator-test.e2e.js b/e2e/components/IconIndicator/IconIndicator-test.e2e.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+const { test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory } = require('../../test-utils/storybook');
+
+test.describe('IconIndicator', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('icon indicator @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'IconIndicator',
+          id: 'experimental-statusindicators-unstable-iconindicator--default',
+          theme,
+        });
+      });
+    });
+  });
+});
diff --git a/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss b/packages/carbon-components-react/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/carbon-components-react/scss/components/icon-indicator/_index.scss b/packages/carbon-components-react/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss b/packages/carbon-components/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/carbon-components/scss/components/icon-indicator/_index.scss b/packages/carbon-components/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -324,6 +324,7 @@ Array [
   "spacing11",
   "spacing12",
   "spacing13",
+  "statusTokens",
   "styles",
   "supportCautionMajor",
   "supportCautionMinor",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10986,6 +10986,48 @@ Map {
       },
     },
   },
+  "unstable__IconIndicator" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "failed",
+            "caution-major",
+            "caution-minor",
+            "undefined",
+            "succeeded",
+            "normal",
+            "in-progress",
+            "incomplete",
+            "not-started",
+            "pending",
+            "unknown",
+            "informative",
+          ],
+        ],
+        "isRequired": true,
+        "type": "oneOf",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            16,
+            20,
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

diff --git a/packages/react/examples/drag-and-drop-file-uploader-vite/.yarn/install-state.gz b/packages/react/examples/drag-and-drop-file-uploader-vite/.yarn/install-state.gz
diff --git a/packages/react/examples/drag-and-drop-file-uploader-vite/yarn.lock b/packages/react/examples/drag-and-drop-file-uploader-vite/yarn.lock
@@ -1411,13 +1411,13 @@ __metadata:
   linkType: hard
 
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2":
-  version: 7.0.3
-  resolution: "cross-spawn@npm:7.0.3"
+  version: 7.0.6
+  resolution: "cross-spawn@npm:7.0.6"
   dependencies:
     path-key: "npm:^3.1.0"
     shebang-command: "npm:^2.0.0"
     which: "npm:^2.0.1"
-  checksum: 10/e1a13869d2f57d974de0d9ef7acbf69dc6937db20b918525a01dacb5032129bd552d290d886d981e99f1b624cb03657084cc87bd40f115c07ecf376821c729ce
+  checksum: 10/0d52657d7ae36eb130999dffff1168ec348687b48dd38e2ff59992ed916c88d328cf1d07ff4a4a10bc78de5e1c23f04b306d569e42f7a2293915c081e4dfee86
   languageName: node
   linkType: hard
 

diff --git a/packages/react/scss/components/icon-indicator/_icon-indicator.scss b/packages/react/scss/components/icon-indicator/_icon-indicator.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator/icon-indicator';
diff --git a/packages/react/scss/components/icon-indicator/_index.scss b/packages/react/scss/components/icon-indicator/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/icon-indicator';
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -284,6 +284,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidTimePicker",
         "unstable__FluidTimePickerSelect",
         "unstable__FluidTimePickerSkeleton",
+        "unstable__IconIndicator",
         "unstable__Slug",
         "unstable__SlugActions",
         "unstable__SlugContent",

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
@@ -8,7 +8,7 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ComposedModal, { ModalBody } from './ComposedModal';
 import { ModalHeader } from './ModalHeader';
@@ -396,4 +396,35 @@ describe('ComposedModal', () => {
     await userEvent.click(modal);
     expect(onClick).toHaveBeenCalled();
   });
+
+  it('should close when clicked on outside background layer', async () => {
+    const onClose = jest.fn();
+    render(
+      <ComposedModal open onClose={onClose}>
+        <ModalBody>This is the modal body content</ModalBody>
+      </ComposedModal>
+    );
+    const backgroundLayer = screen.getByRole('presentation');
+    await userEvent.click(backgroundLayer);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should NOT close when clicked inside dialog window, dragged outside and released mouse button', async () => {
+    const onClose = jest.fn();
+    render(
+      <ComposedModal open onClose={onClose}>
+        <ModalBody data-testid="modal-body-1">
+          This is the modal body content
+        </ModalBody>
+      </ComposedModal>
+    );
+
+    const modalBody = screen.getByTestId('modal-body-1');
+    const backgroundLayer = screen.getByRole('presentation');
+
+    fireEvent.mouseDown(modalBody, { target: modalBody });
+    fireEvent.click(backgroundLayer, { target: backgroundLayer });
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -8,6 +8,7 @@ import React, {
   type ReactNode,
   type ReactElement,
   type RefObject,
+  type MutableRefObject,
   useMemo,
   isValidElement,
 } from 'react';
@@ -257,6 +258,8 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
     const button = useRef<HTMLButtonElement>(null);
     const startSentinel = useRef<HTMLButtonElement>(null);
     const endSentinel = useRef<HTMLButtonElement>(null);
+    const onMouseDownTarget: MutableRefObject<Node | null> =
+      useRef<Node | null>(null);
     const focusTrapWithoutSentinels = useFeatureFlag(
       'enable-experimental-focus-wrap-without-sentinels'
     );
@@ -299,14 +302,21 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
       onKeyDown?.(event);
     }
 
+    function handleOnMouseDown(evt: React.MouseEvent<HTMLDivElement>) {
+      const target = evt.target as Node;
+      onMouseDownTarget.current = target;
+    }
+
     function handleOnClick(evt: React.MouseEvent<HTMLDivElement>) {
       const target = evt.target as Node;
+      const mouseDownTarget = onMouseDownTarget.current as Node;
       evt.stopPropagation();
       if (
         !preventCloseOnClickOutside &&
         !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
         innerModal.current &&
-        !innerModal.current.contains(target)
+        !innerModal.current.contains(target) &&
+        !innerModal.current.contains(mouseDownTarget)
       ) {
         closeModal(evt);
       }
@@ -457,6 +467,10 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
         aria-hidden={!open}
         onBlur={!focusTrapWithoutSentinels ? handleBlur : () => {}}
         onClick={composeEventHandlers([rest?.onClick, handleOnClick])}
+        onMouseDown={composeEventHandlers([
+          rest?.onMouseDown,
+          handleOnMouseDown,
+        ])}
         onKeyDown={handleKeyDown}
         className={modalClass}>
         <div