Merge branch 'main' into 16545-select

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1
+        uses: github/codeql-action/init@ea9e4e37992a54ee68a9622e985e60c8e8f12d9f # v3.27.4
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1
+        uses: github/codeql-action/analyze@ea9e4e37992a54ee68a9622e985e60c8e8f12d9f # v3.27.4

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

@@ -22,35 +22,27 @@ test.describe('@avt FormLabel', () => {
     await expect(page).toHaveNoACViolations('FormLabel');
   });
 
-  test('@avt-advanced-states FormLabel with tooltip', async ({ page }) => {
+  test('@avt-advanced-states FormLabel with toggletip', async ({ page }) => {
     await visitStory(page, {
       component: 'FormLabel',
-      id: 'components-formlabel--with-tooltip',
+      id: 'components-formlabel--with-toggletip',
       globals: {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('FormLabel-with-tooltip');
+    await expect(page).toHaveNoACViolations('FormLabel-with-toggletip');
   });
 
-  test('@avt-keyboard-nav FormLabel with tooltip', async ({ page }) => {
+  test('@avt-keyboard-nav FormLabel with toggletip', async ({ page }) => {
     await visitStory(page, {
       component: 'FormLabel',
-      id: 'components-formlabel--with-tooltip',
+      id: 'components-formlabel--with-toggletip',
       globals: {
         theme: 'white',
       },
     });
 
-    await expect(page.getByText('Form label with Tooltip')).toBeVisible();
-    await page.keyboard.press('Tab');
-    await expect(
-      page
-        .getByText(
-          'This can be used to provide more information about a field.'
-        )
-        .first()
-    ).toBeVisible();
+    await expect(page.getByText('Form label with toggletip')).toBeVisible();
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
     await expect(

e2e/components/FormLabel/FormLabel-test.e2e.js

@@ -25,7 +25,7 @@ test.describe('FormLabel', () => {
       test('with tooltip @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'FormLabel',
-          id: 'components-formlabel--with-tooltip',
+          id: 'components-formlabel--with-toggletip',
           theme,
         });
       });

examples/class-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.67.0",
+  "version": "0.68.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/codesandbox-styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.72.0",
+  "version": "0.73.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.69.0"
+    "@carbon/styles": "^1.70.0-rc.0"
   }
 }

examples/custom-theme/package.json

@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.68.0",
+  "version": "0.69.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/id-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.67.0",
+  "version": "0.68.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.68.0",
+  "version": "0.69.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "next": "14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.70.0",
+  "version": "0.71.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "next": "14.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/v10-token-compat-in-v11/package.json

@@ -1,15 +1,15 @@
 {
   "name": "v10-token-compat-in-v11",
   "private": true,
-  "version": "0.68.0",
+  "version": "0.69.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/vite/package.json

@@ -1,15 +1,15 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.68.0",
+  "version": "0.69.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
+    "@carbon/react": "^1.71.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/carbon-components-react/package.json

@@ -2,7 +2,7 @@
   "name": "carbon-components-react",
   "private": true,
   "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.70.0",
+  "version": "8.71.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,8 +43,8 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/react": "^1.70.0",
-    "@carbon/styles": "^1.69.0",
+    "@carbon/react": "^1.71.0-rc.0",
+    "@carbon/styles": "^1.70.0-rc.0",
     "@ibm/telemetry-js": "^1.5.0",
     "chalk": "1.1.3"
   },

packages/carbon-components/package.json

@@ -2,7 +2,7 @@
   "name": "carbon-components",
   "private": true,
   "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.69.0",
+  "version": "11.70.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.69.0",
+    "@carbon/styles": "^1.70.0-rc.0",
     "@ibm/telemetry-js": "^1.5.0",
     "chalk": "1.1.3"
   },

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -1452,6 +1452,9 @@ Map {
       "danger": Object {
         "type": "bool",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "isFullWidth": Object {
         "type": "bool",
       },
@@ -1510,9 +1513,7 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
     },
     "render": [Function],
   },
@@ -6433,6 +6434,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "defaultChecked": Object {
         "type": "bool",
       },
@@ -6470,9 +6474,7 @@ Map {
       "required": Object {
         "type": "bool",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "value": Object {
         "args": Array [
           Array [
@@ -6498,6 +6500,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "defaultSelected": Object {
         "args": Array [
           Array [
@@ -6557,9 +6562,7 @@ Map {
       "required": Object {
         "type": "bool",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "valueSelected": Object {
         "args": Array [
           Array [
@@ -7286,6 +7289,9 @@ Map {
   "SideNavMenuItem" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
+      "as": Object {
+        "type": "elementType",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.70.0",
+  "version": "1.71.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,7 +52,7 @@
     "@carbon/feature-flags": "^0.24.0",
     "@carbon/icons-react": "^11.52.0",
     "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.69.0",
+    "@carbon/styles": "^1.70.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",

packages/react/src/components/ComposedModal/ComposedModal-test.js

@@ -344,9 +344,9 @@ describe('ComposedModal', () => {
       expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
     });
 
-    it('should respect slug prop', () => {
+    it('should respect decorator prop', () => {
       const { container } = render(
-        <ComposedModal open slug={<AILabel />}>
+        <ComposedModal open decorator={<AILabel />}>
           <ModalHeader>Modal header</ModalHeader>
           <ModalBody>This is the modal body content</ModalBody>
           <ModalFooter
@@ -357,10 +357,30 @@ describe('ComposedModal', () => {
         </ComposedModal>
       );
 
-      expect(container.firstChild).toHaveClass(`${prefix}--modal--slug`);
+      expect(container.firstChild).toHaveClass(`${prefix}--modal--decorator`);
     });
   });
 
+  it('should respect the deprecated slug prop', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <ComposedModal open slug={<AILabel />}>
+        <ModalHeader>Modal header</ModalHeader>
+        <ModalBody>This is the modal body content</ModalBody>
+        <ModalFooter
+          primaryButtonText="Add"
+          secondaryButtonText="Cancel"
+          loadingStatus="active"
+          loadingDescription="loading..."></ModalFooter>
+      </ComposedModal>
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'AI - Show information' })
+    ).toBeInTheDocument();
+    spy.mockRestore();
+  });
+
   it('should handle onClick events', async () => {
     const onClick = jest.fn();
     render(

packages/react/src/components/ComposedModal/ComposedModal.stories.js

@@ -16,6 +16,7 @@ import Select from '../Select';
 import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
 import Button from '../Button';
+import { Information } from '@carbon/icons-react';
 import {
   StructuredListWrapper,
   StructuredListHead,
@@ -391,7 +392,7 @@ export const _withAILabel = {
         <ComposedModal
           open={open}
           onClose={() => setOpen(false)}
-          slug={aiLabel}>
+          decorator={aiLabel}>
           <ModalHeader label="Account resources" title="Add a custom domain" />
           <ModalBody>
             <p style={{ marginBottom: '1rem' }}>