Merge branch 'main' into TextArea_Invalid_icon_bug

.github/workflows/code-connect.yml

@@ -0,0 +1,13 @@
+on:
+  push:
+    paths:
+      - src/packages/react/code-connect/**/*.figma.tsx
+    branches:
+      - main
+
+jobs:
+  code-connect:
+    name: Code Connect
+    runs-on: ubuntu-latest
+    steps:
+      - run: npx figma connect publish

.gitignore

@@ -57,3 +57,6 @@ package-lock.json
 
 # Playwright
 .playwright
+
+# Local token
+.env

figma.config.json

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

package.json

@@ -29,13 +29,13 @@
     "postinstall": "husky"
   },
   "resolutions": {
-    "@types/react": "~18.2.33",
+    "@types/react": "~18.3.0",
     "@types/prop-types": "15.7.12",
     "ast-types": "^0.14.0",
     "node-sass": "^9.0.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "react-is": "~18.2.0"
+    "react": "~18.3.0",
+    "react-dom": "~18.3.0",
+    "react-is": "~18.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
@@ -53,7 +53,7 @@
     "@percy/playwright": "^1.0.4",
     "@playwright/test": "^1.36.2",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-is": "~18.2.0",
     "accessibility-checker": "^3.1.48",

packages/carbon-components-react/package.json

@@ -57,7 +57,7 @@
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.30.0",
     "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.5.0",

packages/cli/package.json

@@ -34,7 +34,7 @@
     "@octokit/plugin-throttling": "^4.0.0",
     "@octokit/rest": "^19.0.0",
     "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "chalk": "^4.1.1",
     "change-case": "^4.1.2",

packages/grid/README.md

@@ -30,7 +30,7 @@ You can then include the grid by doing the following in your Sass files:
 ## Usage
 
 _More examples and documentation can be found on this
-[live demo website](https://carbon-elements.netlify.com/grid/examples/preview/)._
+[live demo website](https://carbon-elements.netlify.app/grid/examples/preview/)._
 
 `@carbon/grid` has three primitive class types to use in order to structure your
 application. They include:

packages/icons-vue/README.md

@@ -45,7 +45,7 @@ new Vue({
 ```
 
 _Note: if you would like to find the import path for an icon, you can reference
-our [icon preview](https://carbon-elements.netlify.com/icons/examples/preview/)_
+our [icon preview](https://carbon-elements.netlify.app/icons/examples/preview/)_
 
 Using `CarbonIconsVue` we can pass in any of the icon components that we'd like
 to use. In our application, we can then use them by doing:

packages/icons/README.md

@@ -32,7 +32,7 @@ for various frameworks:
 We also support using icons in Vanilla JavaScript.
 
 In order to use an icon, it may be helpful to reference our
-[Icon library](https://carbon-elements.netlify.com/icons/examples/preview/)
+[Icon library](https://carbon-elements.netlify.app/icons/examples/preview/)
 reference page in order to find the specific icon you would like to use.
 
 ### Vanilla
@@ -45,7 +45,7 @@ import IconName from '@carbon/icons/<module-type>/path-to-icon/size';
 ```
 
 For example, if I wanted to import the 16x16
-[`add`](https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fadd)
+[`add`](https://carbon-elements.netlify.app/icons/examples/preview/#16%2Fadd)
 icon, I would write:
 
 ```js
@@ -77,7 +77,7 @@ const addIconNode = toSVG({
 
 Certain icons in the library support an alternate fill inside of the icon, for
 example
-[`warning--filled`](https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fwarning--filled)
+[`warning--filled`](https://carbon-elements.netlify.app/icons/examples/preview/#16%2Fwarning--filled)
 supports styling the inner `!` path.
 
 In order to style the inner path, you will need to target the SVG using CSS. In
@@ -98,7 +98,7 @@ in order to get this inner path to be visible on the page.
 ### Reference
 
 You can view a full reference of our icons
-[here](https://carbon-elements.netlify.com/icons/examples/preview/) . This is
+[here](https://carbon-elements.netlify.app/icons/examples/preview/) . This is
 useful for finding the path information in order to import an icon.
 
 ## 🙌 Contributing

packages/icons/examples/preview/src/pages/index.js

@@ -211,7 +211,7 @@ function getBugTemplate(name, source) {
     'body',
     `<!-- Feel free to remove sections that aren't relevant. -->
 
-There is an issue for the \`${name}\` icon when viewing [the elements demo](https://carbon-elements.netlify.com/icons/examples/preview/).
+There is an issue for the \`${name}\` icon when viewing [the elements demo](https://carbon-elements.netlify.app/icons/examples/preview/).
 
 The source for this icon is available [here](${source}).
 

packages/pictograms/examples/preview/src/pages/index.js

@@ -128,7 +128,7 @@ function getBugTemplate(name, source) {
     'body',
     `<!-- Feel free to remove sections that aren't relevant. -->
 
-There is an issue for the \`${name}\` pictogram when viewing [the elements demo](https://carbon-elements.netlify.com/pictograms/examples/preview/).
+There is an issue for the \`${name}\` pictogram when viewing [the elements demo](https://carbon-elements.netlify.app/pictograms/examples/preview/).
 
 The source for this icon is available [here](${source}).
 

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

@@ -1112,6 +1112,9 @@ Map {
         "type": "string",
       },
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },
@@ -2709,6 +2712,14 @@ Map {
             "right",
             "right-bottom",
             "right-top",
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+            "left-end",
+            "left-start",
+            "right-end",
+            "right-start",
           ],
         ],
         "type": "oneOf",

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { Accordion } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Accordion,
+  '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']),
+    },
+    example: ({ children }) => (
+      // 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>
+    ),
+  }
+);

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

@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { AccordionItem } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  AccordionItem,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2154-8478&mode=design&t=0hF8pirV0i9mofd1-4',
+  {
+    props: {
+      title: figma.string('Title text'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      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
+    }) => (
+      <AccordionItem title={title} disabled={disabled} open={open}>
+        <p>{content}</p>
+        {children}
+      </AccordionItem>
+    ),
+  }
+);
+
+// figma.connect(
+//   AccordionSkeleton,
+//   'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=14032-290635&mode=dev',
+//   {
+//     variant: { State: 'Skeleton' },
+//     props: {
+//       open: figma.boolean('Expanded'),
+//       isFlush: figma.boolean('Flush'),
+//       align: figma.enum('Alignment', {
+//       Left: 'start',
+//     }),
+//     },
+//     example: ({ size, hideLabel }) => {
+//       return <AccordionSkeleton align={align}  />;
+//     },
+//   }
+// );

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { Breadcrumb } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Breadcrumb,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3155-31030&t=U57NnoohldL54XAl-4',
+  {
+    props: {
+      //noTrailingSlash: needs to come from child item component in figma
+      children: figma.children(['_Breadcrumb item']),
+    },
+    example: ({ children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <Breadcrumb>{children}</Breadcrumb>
+    ),
+  }
+);
+
+// BreadcrumbSkeleton missing from Figma, can only be set on individual items

packages/react/code-connect/Breadcrumb/BreadcrumbItem.figma.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-nocheck
+import React from 'react';
+import { BreadcrumbItem, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  BreadcrumbItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
+  {
+    variant: { Type: 'Link' },
+    props: {
+      // state: figma.enum('State', { // in react skeleton state replaces the entire Breadcrumb component , not BreadcrumbItem
+      //   Skeleton: 'skeleton',
+      // }),
+      children: figma.string('Link text'),
+    },
+    example: ({ children }) => (
+      <BreadcrumbItem href="#">{children}</BreadcrumbItem>
+    ),
+  }
+);
+
+figma.connect(
+  BreadcrumbItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
+  {
+    variant: { Type: 'Current page' },
+    props: {
+      children: figma.string('Link text'),
+      isCurrentPage: figma.boolean('Current'),
+    },
+    example: ({ children, isCurrentPage }) => (
+      <BreadcrumbItem isCurrentPage={isCurrentPage}>{children}</BreadcrumbItem>
+    ),
+  }
+);
+
+figma.connect(
+  BreadcrumbItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
+  {
+    variant: { Type: 'Overflow' },
+    props: {
+      isCurrentPage: figma.boolean('Current'),
+    },
+    example: ({ isCurrentPage }) => (
+      <BreadcrumbItem
+        isCurrentPage={isCurrentPage}
+        data-floating-menu-container>
+        <OverflowMenu aria-label="Overflow menu in a breadcrumb">
+          <OverflowMenuItem itemText="Breadcrumb 3" />
+          <OverflowMenuItem itemText="Breadcrumb 4" />
+        </OverflowMenu>
+      </BreadcrumbItem>
+    ),
+  }
+);