diff --git a/packages/react/script/figma-connect-icons.ts b/packages/react/script/figma-connect-icons.ts
index 4d8eb8a9979..2f08603c6fa 100644
--- a/packages/react/script/figma-connect-icons.ts
+++ b/packages/react/script/figma-connect-icons.ts
@@ -171,6 +171,10 @@ ${Array.from(uniqueNames)
${icons
.map(
icon => `figma.connect(${icon.name}, '${icon.figmaUrl}', {
+ props: {
+ name: "${icon.name}",
+ fn: ${icon.name}
+ },
example: () => <${icon.name} size={${icon.size}} />,
})`,
)
diff --git a/packages/react/src/ActionBar/ActionBar.figma.tsx b/packages/react/src/ActionBar/ActionBar.figma.tsx
deleted file mode 100644
index 271a4b7dbd3..00000000000
--- a/packages/react/src/ActionBar/ActionBar.figma.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React from 'react'
-import {ActionBar} from '../../src'
-import figma from '@figma/code-connect'
-
-figma.connect(
- ActionBar,
- 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65810&t=ARVklwnsUc0zUmot-4',
- {
- props: {
- items: figma.children(['ActionBar.IconButton', 'ActionBar.Divider']),
- },
- example: ({items}) => {items},
- },
-)
-
-figma.connect(
- ActionBar.IconButton,
- 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35848-26016&m=dev',
- {
- props: {
- iconButton: figma.nestedProps('IconButton', {
- icon: figma.instance('icon'),
- ariaLabel: figma.string('aria-label'),
- }),
- },
- example: ({iconButton}) => ,
- },
-)
-
-figma.connect(
- ActionBar.Divider,
- 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65808&t=ARVklwnsUc0zUmot-4',
- {
- props: {},
- example: () => ,
- },
-)
diff --git a/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx b/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx
new file mode 100644
index 00000000000..d7df927a669
--- /dev/null
+++ b/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx
@@ -0,0 +1,39 @@
+// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// // @ts-nocheck
+// import React from 'react'
+// import {ActionBar} from '..'
+// import figma from '@figma/code-connect'
+
+// figma.connect(
+// ActionBar,
+// 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65810&t=ARVklwnsUc0zUmot-4',
+// {
+// props: {
+// items: figma.children(['ActionBar.IconButton', 'ActionBar.Divider']),
+// },
+// example: ({items}) => {items},
+// },
+// )
+
+// figma.connect(
+// ActionBar.IconButton,
+// 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35848-26016&m=dev',
+// {
+// props: {
+// iconButton: figma.nestedProps('IconButton', {
+// icon: figma.instance('icon'),
+// ariaLabel: figma.string('aria-label'),
+// }),
+// },
+// example: ({iconButton}) => ,
+// },
+// )
+
+// figma.connect(
+// ActionBar.Divider,
+// 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65808&t=ARVklwnsUc0zUmot-4',
+// {
+// props: {},
+// example: () => ,
+// },
+// )
diff --git a/packages/react/src/ActionList/ActionList.figma.tsx b/packages/react/src/ActionList/ActionList.figma.tsx
index 56a5f744499..627d42a95a3 100644
--- a/packages/react/src/ActionList/ActionList.figma.tsx
+++ b/packages/react/src/ActionList/ActionList.figma.tsx
@@ -126,6 +126,7 @@ figma.connect(
},
)
+/** DANGER ITEM */
figma.connect(
ActionList.Item,
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56205&m=dev',
@@ -140,6 +141,7 @@ figma.connect(
example: ({text}) => {text.label},
},
)
+
figma.connect(
ActionList.Item,
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56205&m=dev',
@@ -160,3 +162,56 @@ figma.connect(
),
},
)
+/** Single Select ITEM */
+figma.connect(
+ ActionList.Item,
+ 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56202&m=dev',
+ {
+ props: {
+ size: figma.enum('size', {
+ small: 'small',
+ medium: 'medium',
+ large: 'large',
+ }),
+ selected: figma.boolean('selected?'),
+ currentSelection: figma.boolean('currentSelection'),
+ text: figma.nestedProps('label and description', {
+ label: figma.textContent('label'),
+ description: figma.textContent('description'),
+ }),
+ leadingVisual: figma.instance('leadingVisual'),
+ },
+ variant: {'leadingVisual?': true},
+ example: ({text, selected, currentSelection, leadingVisual}) => (
+
+ {leadingVisual}
+ {text.label}
+
+ ),
+ },
+)
+figma.connect(
+ ActionList.Item,
+ 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56202&m=dev',
+ {
+ props: {
+ size: figma.enum('size', {
+ small: 'small',
+ medium: 'medium',
+ large: 'large',
+ }),
+ selected: figma.boolean('selected?'),
+ currentSelection: figma.boolean('currentSelection'),
+ text: figma.nestedProps('label and description', {
+ label: figma.textContent('label'),
+ description: figma.textContent('description'),
+ }),
+ },
+ variant: {'leadingVisual?': false},
+ example: ({text, selected, currentSelection}) => (
+
+ {text.label}
+
+ ),
+ },
+)
diff --git a/packages/react/src/Banner/Banner.figma.tsx b/packages/react/src/Banner/Banner.figma.tsx
index cb37565ab9e..b711599eee6 100644
--- a/packages/react/src/Banner/Banner.figma.tsx
+++ b/packages/react/src/Banner/Banner.figma.tsx
@@ -1,7 +1,7 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React from 'react'
-import {Banner} from '../../src/drafts'
+import {Banner} from '../../src/experimental/'
import figma from '@figma/code-connect'
const componentProps = {
diff --git a/packages/react/src/Button/Button.figma.tsx b/packages/react/src/Button/Button.figma.tsx
index abe84b891b6..a3b9ac8b7ab 100644
--- a/packages/react/src/Button/Button.figma.tsx
+++ b/packages/react/src/Button/Button.figma.tsx
@@ -38,7 +38,7 @@ figma.connect(
'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=30258%3A5582&mode=design&t=TVF2yeiff0ZtzQll-1',
{
props: componentProps,
- example: ({size, disabled, inactive, alignContent, leadingVisual, variant, label}) => (
+ example: ({size, disabled, inactive, alignContent, leadingVisual, trailingVisual, variant, label}) => (