Merge branch 'carbon-design-system:main' into main

.all-contributorsrc

@@ -1524,8 +1524,8 @@
       "contributions": [
         "code"
       ]
-     },
-    {  
+    },
+    {
       "login": "ychavoya",
       "name": "Yael Chavoya",
       "avatar_url": "https://avatars.githubusercontent.com/u/7907338?v=4",
@@ -1559,6 +1559,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "lluisrojass",
+      "name": "Luis",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15043356?v=4",
+      "profile": "https://github.com/lluisrojass",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.github/renovate.json5

@@ -13,7 +13,7 @@
     'npm:unpublishSafe',
 
     // https://docs.renovatebot.com/presets-schedule/#scheduledaily
-    'schedule:weekday',
+    'schedule:every weekday',
   ],
   vulnerabilityAlerts: {
     enabled: true,

.github/workflows/deploy-packages.yml

@@ -39,7 +39,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: 'release/update-carbon-deps'
           commit-message: 'chore(release): update carbon deps'
@@ -82,7 +82,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: 'release/update-carbon-deps'
           commit-message: 'chore(release): update carbon deps'

.github/workflows/version.yml

@@ -64,7 +64,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: 'release/${{ github.event.inputs.tag }}'
           commit-message: 'chore(release): ${{ github.event.inputs.tag }}'

.whitesource

@@ -1,4 +1,6 @@
 {
   "settingsInheritedFrom": "ibm-mend-config/mend-config@main",
-  "minSeverityLevel": "NONE"
+  "issueSettings": {
+    "minSeverityLevel": "NONE"
+  }
 }

README.md

@@ -291,11 +291,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/aninaantony"><img src="https://avatars.githubusercontent.com/u/164350784?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anina Antony</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aninaantony" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ahmedsemih"><img src="https://avatars.githubusercontent.com/u/102798814?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Semih Erkan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ahmedsemih" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ychavoya"><img src="https://avatars.githubusercontent.com/u/7907338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yael Chavoya</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ychavoya" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Kilian-Collender"><img src="https://avatars.githubusercontent.com/u/37899503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Collender</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kilian-Collender" title="Code">💻</a></td>
+    <td align="center"><img src="https://avatars.githubusercontent.com/u/37899503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Collender</b></sub><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kilian-Collender" title="Code">💻</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/nandininarayanofficial"><img src="https://avatars.githubusercontent.com/u/165769075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nandininarayanofficial</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nandininarayanofficial" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
   </tr>
 </table>
 

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

@@ -87,7 +87,7 @@ test.describe('@avt DatePicker', () => {
       },
     });
 
-    // for some reason the firs tab is not working to focus the first tabstop, so focusing manually
+    // for some reason the first tab is not working to focus the first tabstop, so focusing manually
     await page.getByRole('textbox', { name: 'Date Picker label' }).focus();
     await expect(
       page.getByRole('textbox', { name: 'Date Picker label' })
@@ -96,9 +96,6 @@ test.describe('@avt DatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await expect(page.locator('span.today')).toBeFocused();
     await page.keyboard.press('Escape');
-    await expect(
-      page.getByRole('textbox', { name: 'Date Picker label' })
-    ).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
     );
@@ -126,18 +123,7 @@ test.describe('@avt DatePicker', () => {
     await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
-    await expect(
-      page.locator('input#date-picker-input-id-start')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
-      /open/
-    );
-    await page.keyboard.press('Tab');
-    await expect(
-      page.locator('input#date-picker-input-id-finish')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
-    await page.keyboard.press('Escape');
+    await page.keyboard.press('Enter');
     await expect(
       page.locator('input#date-picker-input-id-finish')
     ).toBeFocused();

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

@@ -70,7 +70,6 @@ test.describe('@avt FluidDatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await expect(page.locator('span.today')).toBeFocused();
     await page.keyboard.press('Escape');
-    await expect(page.getByRole('textbox', { name: 'Label' })).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
     );
@@ -98,18 +97,6 @@ test.describe('@avt FluidDatePicker', () => {
     await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
-    await expect(
-      page.locator('input#date-picker-input-id-start')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
-      /open/
-    );
-    await page.keyboard.press('Tab');
-    await expect(
-      page.locator('input#date-picker-input-id-finish')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
-    await page.keyboard.press('Escape');
     await expect(
       page.locator('input#date-picker-input-id-finish')
     ).toBeFocused();

figma.config.json

@@ -1,11 +1,10 @@
 {
   "codeConnect": {
-    "include": ["packages/react/code-connect/**"],
-    "react": {
-      "importPaths": {
-        "packages/react/src/*": "@carbon/react"
-      },
-      "paths": {}
-    }
+    "parser": "react",
+    "importPaths": {
+      "packages/react/src/*": "@carbon/react"
+    },
+    "paths": {},
+    "include": ["packages/react/code-connect/**"]
   }
 }

package.json

@@ -52,8 +52,9 @@
     "@percy/cli": "^1.27.0",
     "@percy/playwright": "^1.0.4",
     "@playwright/test": "^1.36.2",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-is": "~18.3.0",
     "accessibility-checker": "^3.1.48",

packages/icons-vue/examples/vue-cli/yarn.lock

@@ -7792,9 +7792,9 @@ write@^0.2.1:
     mkdirp "^0.5.1"
 
 ws@^6.0.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.2.tgz#3cc7462e98792f0ac679424148903ded3b9c3ad8"
-  integrity sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.3.tgz#ccc96e4add5fd6fedbc491903075c85c5a11d9ee"
+  integrity sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==
   dependencies:
     async-limiter "~1.0.0"
 

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

@@ -2824,6 +2824,9 @@ Map {
         "type": "string",
       },
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },
@@ -3415,6 +3418,9 @@ Map {
     "propTypes": Object {
       "aria-label": [Function],
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "clearSelectionDescription": Object {
         "type": "string",
       },
@@ -5088,6 +5094,9 @@ Map {
       "propTypes": Object {
         "aria-label": [Function],
         "ariaLabel": [Function],
+        "autoAlign": Object {
+          "type": "bool",
+        },
         "clearSelectionDescription": Object {
           "type": "string",
         },
@@ -5336,6 +5345,9 @@ Map {
       "render": [Function],
     },
     "propTypes": Object {
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },

packages/react/code-connect/Accordion/Accordion.figma.tsx

@@ -15,16 +15,28 @@ figma.connect(
   'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2490-17019&mode=design&t=0hF8pirV0i9mofd1-4',
   {
     props: {
-      // missing props, set on Accordion item within Figma
-      // size
-      // isFlush
-      // align
       children: figma.children(['Accordion item']),
+      accordionItem: figma.nestedProps('Accordion item', {
+        align: figma.enum('Alignment', {
+          Left: 'start',
+        }),
+        isFlush: figma.boolean('Flush'),
+        size: figma.enum('Size', {
+          Large: 'lg',
+          Medium: 'md',
+          Small: 'sm',
+        }),
+      }),
     },
-    example: ({ children }) => (
+    example: ({ children, accordionItem }) => (
       // Disclaimer: Code Connect is currently in beta and integration with Carbon
       // React is in an exploratory phase. Code sample below may be incomplete.
-      <Accordion>{children}</Accordion>
+      <Accordion
+        size={accordionItem.size}
+        align={accordionItem.align}
+        isFlush={accordionItem.isFlush}>
+        {children}
+      </Accordion>
     ),
   }
 );

packages/react/code-connect/Accordion/AccordionItem.figma.tsx

@@ -22,27 +22,8 @@ figma.connect(
       open: figma.boolean('Expanded'),
       content: figma.string('Content text'),
       children: figma.instance('Swap slot'),
-      // Props below are on accordion item in Figma and accordion in React
-      // size: figma.enum('Size', {
-      //   Large: 'lg',
-      //   Medium: 'md',
-      //   Small: 'sm',
-      // }),
-      // isFlush: figma.boolean('Flush'),
-      // align: figma.enum('Alignment', {
-      //   Left: 'start',
-      // }),
     },
-    example: ({
-      title,
-      disabled,
-      open,
-      content,
-      children,
-      // size, needs to be set on Accordion
-      // isFlush, needs to be set on Accordion
-      // align, needs to be set on Accordion
-    }) => (
+    example: ({ title, disabled, open, content, children }) => (
       <AccordionItem title={title} disabled={disabled} open={open}>
         <p>{content}</p>
         {children}

packages/react/code-connect/Checkbox/Checkbox.figma.tsx

@@ -31,7 +31,9 @@ figma.connect(
       checked: figma.enum('Selection', {
         Checked: true,
       }),
-      helperText: figma.string('Helper text'),
+      helperText: figma.boolean('Helper message', {
+        true: figma.string('Helper text'),
+      }),
       invalid: figma.enum('State', {
         Invalid: true,
       }),

packages/react/code-connect/Checkbox/CheckboxGroup.figma.tsx

@@ -16,11 +16,12 @@ figma.connect(
   {
     props: {
       // horizontal: figma.boolean('Horizontal'), // missing in React
-      //helpermessage: figma.boolean('Helper message'), show/hide helper text in figma, in react if message is there it displays
       // warnMessage: figma.boolean('Warning message'), // you can have a component in a warn state while hiding warning message in Figma, not supported in code
       // errorMessage: figma.boolean('Error message'), // you can have a component in a error state while hiding error message in Figma, not supported in code
       children: figma.children(['Checkbox']),
-      helperText: figma.string('Helper text'),
+      helperText: figma.boolean('Helper message', {
+        true: figma.string('Helper text'),
+      }),
       readOnly: figma.enum('State', {
         'Read-only': true,
       }),

packages/react/code-connect/CodeSnippet/CodeSnippet.figma.tsx

@@ -30,7 +30,7 @@ figma.connect(
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-104960&t=cMvnFTYLPEhzhIpj-4',
   {
     props: {
-      children: figma.string('Code text'),
+      children: figma.textContent('node -v'),
     },
     example: ({ children }) => {
       return (
@@ -49,14 +49,18 @@ figma.connect(
   CodeSnippet,
   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4266-103999&t=cMvnFTYLPEhzhIpj-4',
   {
-    example: () => (
-      // Disclaimer: Code Connect is currently in beta and integration with Carbon
-      // React is in an exploratory phase. Code sample below may be incomplete.
-      <CodeSnippet type="single" feedback="Copied to clipboard">
-        yarn add carbon-components@latest carbon-components-react@latest
-        @carbon/icons-react@latest carbon-icons@latest
-      </CodeSnippet>
-    ),
+    props: {
+      children: figma.textContent('$ npm install --save carbon-components'),
+    },
+    example: ({ children }) => {
+      return (
+        // Disclaimer: Code Connect is currently in beta and integration with Carbon
+        // React is in an exploratory phase. Code sample below may be incomplete.
+        <CodeSnippet type="single" feedback="Copied to clipboard">
+          {children}
+        </CodeSnippet>
+      );
+    },
   }
 );
 
@@ -99,19 +103,3 @@ figma.connect(
     ),
   }
 );
-
-// // Skeleton state (multiline only)
-// figma.connect(
-//   CodeSnippetSkeleton,
-//   'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4257-168802&t=cMvnFTYLPEhzhIpj-4',
-//   {
-//     variant: { State: 'Skeleton' },
-//     example: () => {
-//       return (
-//         // Disclaimer: Code Connect is currently in beta and integration with Carbon
-//         // React is in an exploratory phase. Code sample below may be incomplete.
-//         <CodeSnippetSkeleton type="multi" />
-//       );
-//     },
-//   }
-// );