Merge branch 'main' into dependabot/github_actions/codecov/codecov-ac…

…tion-4.6.0
carbon-design-system · Oct 7, 2024 · bde8aa9 · bde8aa9
2 parents abb6e5b + f232cb6
commit bde8aa9
Show file tree

Hide file tree

Showing 29 changed files with 265 additions and 101 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1625,6 +1625,16 @@
         "doc"
       ]
     },
+    {
+      "login": "Neues",
+      "name": "Noah Sgorbati",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9409245?v=4",
+      "profile": "https://github.com/Neues",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
     {
       "login": "divya-281",
       "name": "Divya G",

diff --git a/README.md b/README.md
@@ -306,6 +306,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/NabeelAyubee"><img src="https://avatars.githubusercontent.com/u/64087875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Md Nabeel Ayubee</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=NabeelAyubee" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/pamrulla"><img src="https://avatars.githubusercontent.com/u/4942741?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Patan Amrulla Khan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=pamrulla" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=pamrulla" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Neues"><img src="https://avatars.githubusercontent.com/u/9409245?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Noah Sgorbati</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/divya-281"><img src="https://avatars.githubusercontent.com/u/72991264?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Divya G</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=divya-281" title="Code">💻</a></td>
   </tr>
 </table>

diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json
@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.64.0",
+  "version": "0.65.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.69.0",
+  "version": "0.70.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.66.0"
+    "@carbon/styles": "^1.67.0-rc.0"
   }
 }
diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json
@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.65.0",
+  "version": "0.66.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json
@@ -1,15 +1,15 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.64.0",
+  "version": "0.65.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json
@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.65.0",
+  "version": "0.66.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "next": "14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.67.0",
+  "version": "0.68.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "next": "14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/examples/v10-token-compat-in-v11/package.json b/examples/v10-token-compat-in-v11/package.json
@@ -1,15 +1,15 @@
 {
   "name": "v10-token-compat-in-v11",
   "private": true,
-  "version": "0.65.0",
+  "version": "0.66.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -1,15 +1,15 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.65.0",
+  "version": "0.66.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
+    "@carbon/react": "^1.68.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences. This package reached end of support on September 30, 2024 and will not receive any more updates.",
-  "version": "8.67.0",
+  "version": "8.68.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -42,8 +42,8 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/react": "^1.67.0",
-    "@carbon/styles": "^1.66.0",
+    "@carbon/react": "^1.68.0-rc.0",
+    "@carbon/styles": "^1.67.0-rc.0",
     "@ibm/telemetry-js": "^1.5.0",
     "chalk": "1.1.3"
   },

diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences. This package reached end of support on September 30, 2024 and will not receive any more updates.",
-  "version": "11.66.0",
+  "version": "11.67.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.66.0",
+    "@carbon/styles": "^1.67.0-rc.0",
     "@ibm/telemetry-js": "^1.5.0",
     "chalk": "1.1.3"
   },

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "11.54.0",
+  "version": "11.55.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -40,10 +40,10 @@
   "dependencies": {
     "@carbon/colors": "^11.27.0",
     "@carbon/grid": "^11.28.0",
-    "@carbon/icons": "^11.50.0",
+    "@carbon/icons": "^11.51.0-rc.0",
     "@carbon/layout": "^11.27.0",
     "@carbon/motion": "^11.23.0",
-    "@carbon/themes": "^11.41.0",
+    "@carbon/themes": "^11.42.0-rc.0",
     "@carbon/type": "^11.32.0",
     "@ibm/telemetry-js": "^1.5.0"
   },

diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "11.50.0",
+  "version": "11.51.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^1.31.0",
-    "@carbon/icons": "^11.50.0",
+    "@carbon/icons": "^11.51.0-rc.0",
     "rimraf": "^6.0.0"
   },
   "sideEffects": false

diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.99.0",
+  "version": "10.100.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.7.0",
-    "@carbon/icons": "^11.50.0",
+    "@carbon/icons": "^11.51.0-rc.0",
     "fs-extra": "^11.0.0",
     "prettier": "^2.8.8",
     "rimraf": "^6.0.0",

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons",
   "description": "Icons for digital and software products using the Carbon Design System",
-  "version": "11.50.0",
+  "version": "11.51.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.67.0",
+  "version": "1.68.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.23.0",
-    "@carbon/icons-react": "^11.50.0",
+    "@carbon/icons-react": "^11.51.0-rc.0",
     "@carbon/layout": "^11.27.0",
-    "@carbon/styles": "^1.66.0",
+    "@carbon/styles": "^1.67.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.33.0",
-    "@carbon/themes": "^11.41.0",
+    "@carbon/themes": "^11.42.0-rc.0",
     "@figma/code-connect": "^1.1.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -64,6 +64,18 @@ describe('ComboBox', () => {
     }
   });
 
+  it('should call `onChange` when selection is cleared', async () => {
+    render(<ComboBox {...mockProps} />);
+    expect(mockProps.onChange).not.toHaveBeenCalled();
+    await openMenu();
+    await userEvent.click(screen.getAllByRole('option')[0]);
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Clear selected item' })
+    );
+    expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+  });
+
   it('should call `onChange` with the proper item when `shouldFilterItem` is provided', async () => {
     const filterItems = (menu) => {
       return menu?.item?.label
@@ -90,12 +102,6 @@ describe('ComboBox', () => {
     });
   });
 
-  it('should call `onChange` on a fully controlled component', async () => {
-    render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
-    await userEvent.click(screen.getAllByRole('button')[0]);
-    expect(mockProps.onChange).toHaveBeenCalled();
-  });
-
   it('should select the correct item from the filtered list after text input on click', async () => {
     const user = userEvent.setup();
 
@@ -270,14 +276,14 @@ describe('ComboBox', () => {
     });
   });
 
-  describe('should display selected item found in `selectedItem`', () => {
-    it('using an object type for the `selectedItem` prop', async () => {
+  describe('provided `selectedItem`', () => {
+    it('should display selected item using an object type for the `selectedItem` prop', async () => {
       render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
       await waitForPosition();
       expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
     });
 
-    it('using a string type for the `selectedItem` prop', async () => {
+    it('should display selected item using a string type for the `selectedItem` prop', async () => {
       // Replace the 'items' property in mockProps with a list of strings
       mockProps = {
         ...mockProps,
@@ -288,6 +294,45 @@ describe('ComboBox', () => {
       await waitForPosition();
       expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
     });
+    it('should update and call `onChange` when selection is updated from the combobox', async () => {
+      render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
+      expect(mockProps.onChange).not.toHaveBeenCalled();
+      await openMenu();
+      await userEvent.click(screen.getByRole('option', { name: 'Item 2' }));
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(
+        screen.getByRole('combobox', { value: 'Item 2' })
+      ).toBeInTheDocument();
+    });
+    it('should update and call `onChange` when selection is updated externally', async () => {
+      const { rerender } = render(
+        <ComboBox {...mockProps} selectedItem={mockProps.items[0]} />
+      );
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
+      rerender(<ComboBox {...mockProps} selectedItem={mockProps.items[1]} />);
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[1].label);
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+    });
+    it('should clear selected item and call `onChange` when selection is cleared from the combobox', async () => {
+      render(<ComboBox {...mockProps} selectedItem={mockProps.items[1]} />);
+      expect(mockProps.onChange).not.toHaveBeenCalled();
+      await userEvent.click(
+        screen.getByRole('button', { name: 'Clear selected item' })
+      );
+      expect(mockProps.onChange).toHaveBeenCalled();
+      expect(findInputNode()).toHaveDisplayValue('');
+    });
+    it('should clear selected item when `selectedItem` is updated to `null` externally', async () => {
+      const { rerender } = render(
+        <ComboBox {...mockProps} selectedItem={mockProps.items[1]} />
+      );
+      await waitForPosition();
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[1].label);
+      rerender(<ComboBox {...mockProps} selectedItem={null} />);
+      await waitForPosition();
+      expect(findInputNode()).toHaveDisplayValue('');
+      expect(mockProps.onChange).toHaveBeenCalled();
+    });
   });
 
   describe('when disabled', () => {