diff --git a/.yarn/cache/@figma-code-connect-npm-1.2.1-b72ead2d33-97de501bc0.zip b/.yarn/cache/@figma-code-connect-npm-1.2.1-b72ead2d33-97de501bc0.zip
deleted file mode 100644
index e47223cc87ec..000000000000
Binary files a/.yarn/cache/@figma-code-connect-npm-1.2.1-b72ead2d33-97de501bc0.zip and /dev/null differ
diff --git a/.yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip b/.yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip
new file mode 100644
index 000000000000..2e02f791a30e
Binary files /dev/null and b/.yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip differ
diff --git a/.yarn/cache/typescript-npm-5.4.2-7e4ff3dfd2-f8cfdc630a.zip b/.yarn/cache/typescript-npm-5.4.2-7e4ff3dfd2-f8cfdc630a.zip
deleted file mode 100644
index f54ab684272e..000000000000
Binary files a/.yarn/cache/typescript-npm-5.4.2-7e4ff3dfd2-f8cfdc630a.zip and /dev/null differ
diff --git a/.yarn/cache/typescript-patch-c145cea93e-f5f9a4133c.zip b/.yarn/cache/typescript-patch-c145cea93e-f5f9a4133c.zip
deleted file mode 100644
index 92181296634a..000000000000
Binary files a/.yarn/cache/typescript-patch-c145cea93e-f5f9a4133c.zip and /dev/null differ
diff --git a/NotificationCallout.figma.tsx b/NotificationCallout.figma.tsx
new file mode 100644
index 000000000000..f7f24b8146a2
--- /dev/null
+++ b/NotificationCallout.figma.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { NotificationCallout } from './NotificationCallout';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+ NotificationCallout,
+ 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-36580&t=nJ89fkK549fgCUuf-4',
+ {
+ props: {
+ title: figma.boolean('Title'),
+ messageText: figma.string('Message text'),
+ titleText: figma.string('Title text'),
+ status: figma.enum('Status', {
+ Info: 'info',
+ Warning: 'warning',
+ }),
+ highContrast: figma.boolean('High contrast'),
+ longMessage: figma.boolean('Long message'),
+ },
+ example: (props) => ,
+ }
+);
diff --git a/packages/react/code-connect/Notification/Notification.figma.tsx b/packages/react/code-connect/Notification/Notification.figma.tsx
index 1c7949cfdd71..af80747e0200 100644
--- a/packages/react/code-connect/Notification/Notification.figma.tsx
+++ b/packages/react/code-connect/Notification/Notification.figma.tsx
@@ -11,13 +11,13 @@ import {
InlineNotification,
ToastNotification,
ActionableNotification,
+ unstable__Callout as Callout,
} from '@carbon/react';
import figma from '@figma/code-connect';
const sharedNotificationProps = {
title: figma.string('Title text'),
subtitle: figma.string('Message text'),
- caption: figma.string('Time text'), //only used on toast
kind: figma.enum('Status', {
Info: 'info',
Success: 'success',
@@ -32,46 +32,43 @@ const sharedNotificationProps = {
true: false,
false: true,
}),
- inline: figma.enum('Type', {
- 'Inline short': true,
- 'Inline long': true,
- }),
- button: figma.nestedProps('Button', {
- // currently grabbing the text from the icon button not the action button
- // tracking here https://github.com/figma/code-connect/issues/11
- actionButtonLabel: figma.string('Button text'),
- }),
- // this doesn't work
- // button: figma.nestedProps('Notification action button item', {
- // actionButtonItem: figma.nestedProps('Button', {
- // actionButtonLabel: figma.string('Button text'),
- // }),
- // }),
};
+// Inline
+figma.connect(
+ InlineNotification,
+ 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=4179-105911&t=nJ89fkK549fgCUuf-4',
+ {
+ variant: { Actionable: 'False' },
+ props: sharedNotificationProps,
+ example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
+
+ ),
+ }
+);
+
+// Inline - actionable
figma.connect(
ActionableNotification,
- 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=WhsTspVnawA9vgXk-4',
+ 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=4179-105911&t=nJ89fkK549fgCUuf-4',
{
variant: { Actionable: 'True' },
props: sharedNotificationProps,
- example: ({
- title,
- kind,
- subtitle,
- hideCloseButton,
- lowContrast,
- inline,
- button,
- }) => (
+ example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
myFunction()}
onClose={() => myFunction()}
onCloseButtonClick={() => myFunction()}
@@ -80,18 +77,44 @@ figma.connect(
}
);
+// Toast
figma.connect(
- InlineNotification,
- 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=lJU3KHSU1pTpZ32z-4',
+ ToastNotification,
+ 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-35011&t=nJ89fkK549fgCUuf-4',
{
- variant: { Type: 'Inline short' },
-
- props: sharedNotificationProps,
- example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
- (
+
@@ -99,36 +122,54 @@ figma.connect(
}
);
+// Toast -- actionable
figma.connect(
- InlineNotification,
- 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=lJU3KHSU1pTpZ32z-4',
+ ActionableNotification,
+ 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-35011&t=nJ89fkK549fgCUuf-4',
{
- variant: { Type: 'Inline long' },
+ variant: { Actionable: 'True' },
props: sharedNotificationProps,
example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
- myFunction()}
+ onClose={() => myFunction()}
+ onCloseButtonClick={() => myFunction()}
/>
),
}
);
+// Callout
figma.connect(
- ToastNotification,
- 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=WhsTspVnawA9vgXk-4',
+ Callout,
+ 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-36580&t=nJ89fkK549fgCUuf-4',
{
- variant: { Type: 'Toast' },
- props: sharedNotificationProps,
- example: ({ title, kind, subtitle, caption, lowContrast }) => (
- (
+
),
diff --git a/packages/react/package.json b/packages/react/package.json
index 01e8c97dab7c..fe32fbff380d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -81,7 +81,7 @@
"@babel/preset-typescript": "^7.24.7",
"@carbon/test-utils": "^10.34.0",
"@carbon/themes": "^11.43.0",
- "@figma/code-connect": "^1.2.1",
+ "@figma/code-connect": "^1.2.2",
"@rollup/plugin-babel": "^6.0.0",
"@rollup/plugin-commonjs": "^28.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
diff --git a/yarn.lock b/yarn.lock
index e50c0bdea6ee..a0c49e7381f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1986,7 +1986,7 @@ __metadata:
"@carbon/styles": "npm:^1.71.0-rc.0"
"@carbon/test-utils": "npm:^10.34.0"
"@carbon/themes": "npm:^11.43.0"
- "@figma/code-connect": "npm:^1.2.1"
+ "@figma/code-connect": "npm:^1.2.2"
"@floating-ui/react": "npm:^0.26.0"
"@ibm/telemetry-js": "npm:^1.5.0"
"@rollup/plugin-babel": "npm:^6.0.0"
@@ -3143,9 +3143,9 @@ __metadata:
languageName: node
linkType: hard
-"@figma/code-connect@npm:^1.2.1":
- version: 1.2.1
- resolution: "@figma/code-connect@npm:1.2.1"
+"@figma/code-connect@npm:^1.2.2":
+ version: 1.2.2
+ resolution: "@figma/code-connect@npm:1.2.2"
dependencies:
"@babel/core": "npm:7.25.8"
"@babel/generator": "npm:7.25.7"
@@ -3170,13 +3170,13 @@ __metadata:
prompts: "npm:^2.4.2"
strip-ansi: "npm:^6.0.0"
ts-morph: "npm:^23.0.0"
- typescript: "npm:5.4.2"
+ typescript: "npm:5.5.4"
undici: "npm:^5.28.4"
zod: "npm:^3.23.8"
zod-validation-error: "npm:^3.2.0"
bin:
figma: bin/figma
- checksum: 10/97de501bc02e24ea5b868ae7ea8129d2fbfa719d17c51d716bfffdbcf92410787559ca7e14ed8a4b8308c6b53c2f24fb8abdfe27abd708da2066825e5c1c3b1a
+ checksum: 10/8e37bc70691f614e1de16ba531e645cbc9cae4d368596a8e3e13af691653ca6c0fdc23ad8b2a0a9006599c23cf8d80b3e29e7ad96a539b2a5e6c08251a4e3157
languageName: node
linkType: hard
@@ -26422,17 +26422,7 @@ __metadata:
languageName: unknown
linkType: soft
-"typescript@npm:5.4.2":
- version: 5.4.2
- resolution: "typescript@npm:5.4.2"
- bin:
- tsc: bin/tsc
- tsserver: bin/tsserver
- checksum: 10/f8cfdc630ab1672f004e9561eb2916935b2d267792d07ce93e97fc601c7a65191af32033d5e9c0169b7dc37da7db9bf320f7432bc84527cb7697effaa4e4559d
- languageName: node
- linkType: hard
-
-"typescript@npm:>=3 < 6":
+"typescript@npm:5.5.4, typescript@npm:>=3 < 6":
version: 5.5.4
resolution: "typescript@npm:5.5.4"
bin:
@@ -26462,17 +26452,7 @@ __metadata:
languageName: node
linkType: hard
-"typescript@patch:typescript@npm%3A5.4.2#optional!builtin":
- version: 5.4.2
- resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin::version=5.4.2&hash=5adc0c"
- bin:
- tsc: bin/tsc
- tsserver: bin/tsserver
- checksum: 10/f5f9a4133c2670761f0166eae5b3bafbc4a3fc24f0f42a93c9c893d9e9d6e66ea066969c5e7483fa66b4ae0e99125592553f3b92fd3599484de8be13b0615176
- languageName: node
- linkType: hard
-
-"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin":
+"typescript@patch:typescript@npm%3A5.5.4#optional!builtin, typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin":
version: 5.5.4
resolution: "typescript@patch:typescript@npm%3A5.5.4#optional!builtin::version=5.5.4&hash=379a07"
bin: