Skip to content

Commit 899eb8d

Browse files
alisonjosephalisonjoseph
authored
fix(code-connect): update notification components (#18192)
* fix(code-connect): update notification components * chore: fix title
1 parent b944bb1 commit 899eb8d

8 files changed

+129
-78
lines changed

‎.yarn/cache/@figma-code-connect-npm-1.2.1-b72ead2d33-97de501bc0.zip‎

-236 KB
Binary file not shown.

‎.yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip‎

236 KB
Binary file not shown.

‎.yarn/cache/typescript-npm-5.4.2-7e4ff3dfd2-f8cfdc630a.zip‎

-5.62 MB
Binary file not shown.

‎.yarn/cache/typescript-patch-c145cea93e-f5f9a4133c.zip‎

-5.62 MB
Binary file not shown.

‎NotificationCallout.figma.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { NotificationCallout } from './NotificationCallout';
3+
import figma from '@figma/code-connect';
4+
5+
/**
6+
* -- This file was auto-generated by Code Connect --
7+
* `props` includes a mapping from Figma properties and variants to
8+
* suggested values. You should update this to match the props of your
9+
* code component, and update the `example` function to return the
10+
* code example you'd like to see in Figma
11+
*/
12+
13+
figma.connect(
14+
NotificationCallout,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-36580&t=nJ89fkK549fgCUuf-4',
16+
{
17+
props: {
18+
title: figma.boolean('Title'),
19+
messageText: figma.string('Message text'),
20+
titleText: figma.string('Title text'),
21+
status: figma.enum('Status', {
22+
Info: 'info',
23+
Warning: 'warning',
24+
}),
25+
highContrast: figma.boolean('High contrast'),
26+
longMessage: figma.boolean('Long message'),
27+
},
28+
example: (props) => <NotificationCallout />,
29+
}
30+
);

‎packages/react/code-connect/Notification/Notification.figma.tsx‎

Lines changed: 90 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import {
1111
InlineNotification,
1212
ToastNotification,
1313
ActionableNotification,
14+
unstable__Callout as Callout,
1415
} from '@carbon/react';
1516
import figma from '@figma/code-connect';
1617

1718
const sharedNotificationProps = {
1819
title: figma.string('Title text'),
1920
subtitle: figma.string('Message text'),
20-
caption: figma.string('Time text'), //only used on toast
2121
kind: figma.enum('Status', {
2222
Info: 'info',
2323
Success: 'success',
@@ -32,46 +32,43 @@ const sharedNotificationProps = {
3232
true: false,
3333
false: true,
3434
}),
35-
inline: figma.enum('Type', {
36-
'Inline short': true,
37-
'Inline long': true,
38-
}),
39-
button: figma.nestedProps('Button', {
40-
// currently grabbing the text from the icon button not the action button
41-
// tracking here https://github.com/figma/code-connect/issues/11
42-
actionButtonLabel: figma.string('Button text'),
43-
}),
44-
// this doesn't work
45-
// button: figma.nestedProps('Notification action button item', {
46-
// actionButtonItem: figma.nestedProps('Button', {
47-
// actionButtonLabel: figma.string('Button text'),
48-
// }),
49-
// }),
5035
};
5136

37+
// Inline
38+
figma.connect(
39+
InlineNotification,
40+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=4179-105911&t=nJ89fkK549fgCUuf-4',
41+
{
42+
variant: { Actionable: 'False' },
43+
props: sharedNotificationProps,
44+
example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
45+
<InlineNotification
46+
title={title}
47+
kind={kind}
48+
subtitle={subtitle}
49+
hideCloseButton={hideCloseButton}
50+
lowContrast={lowContrast}
51+
/>
52+
),
53+
}
54+
);
55+
56+
// Inline - actionable
5257
figma.connect(
5358
ActionableNotification,
54-
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=WhsTspVnawA9vgXk-4',
59+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=4179-105911&t=nJ89fkK549fgCUuf-4',
5560
{
5661
variant: { Actionable: 'True' },
5762
props: sharedNotificationProps,
58-
example: ({
59-
title,
60-
kind,
61-
subtitle,
62-
hideCloseButton,
63-
lowContrast,
64-
inline,
65-
button,
66-
}) => (
63+
example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
6764
<ActionableNotification
68-
inline={inline}
65+
inline
6966
kind={kind}
7067
title={title}
7168
subtitle={subtitle}
7269
hideCloseButton={hideCloseButton}
7370
lowContrast={lowContrast}
74-
actionButtonLabel={button.actionButtonLabel}
71+
actionButtonLabel="Action"
7572
onActionButtonClick={() => myFunction()}
7673
onClose={() => myFunction()}
7774
onCloseButtonClick={() => myFunction()}
@@ -80,55 +77,99 @@ figma.connect(
8077
}
8178
);
8279

80+
// Toast
8381
figma.connect(
84-
InlineNotification,
85-
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=lJU3KHSU1pTpZ32z-4',
82+
ToastNotification,
83+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-35011&t=nJ89fkK549fgCUuf-4',
8684
{
87-
variant: { Type: 'Inline short' },
88-
89-
props: sharedNotificationProps,
90-
example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
91-
<InlineNotification
92-
title={title}
85+
variant: { Actionable: 'False' },
86+
props: {
87+
title: figma.string('Title text'),
88+
subtitle: figma.string('Message text'),
89+
caption: figma.string('Time text'),
90+
kind: figma.enum('Status', {
91+
Info: 'info',
92+
Success: 'success',
93+
Warning: 'warning',
94+
Error: 'error',
95+
}),
96+
hideCloseButton: figma.boolean('Close', {
97+
true: false,
98+
false: true,
99+
}),
100+
lowContrast: figma.boolean('High contrast', {
101+
true: false,
102+
false: true,
103+
}),
104+
},
105+
example: ({
106+
title,
107+
kind,
108+
subtitle,
109+
caption,
110+
lowContrast,
111+
hideCloseButton,
112+
}) => (
113+
<ToastNotification
93114
kind={kind}
115+
title={title}
94116
subtitle={subtitle}
117+
caption={caption}
95118
hideCloseButton={hideCloseButton}
96119
lowContrast={lowContrast}
97120
/>
98121
),
99122
}
100123
);
101124

125+
// Toast -- actionable
102126
figma.connect(
103-
InlineNotification,
104-
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=lJU3KHSU1pTpZ32z-4',
127+
ActionableNotification,
128+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-35011&t=nJ89fkK549fgCUuf-4',
105129
{
106-
variant: { Type: 'Inline long' },
130+
variant: { Actionable: 'True' },
107131
props: sharedNotificationProps,
108132
example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => (
109-
<InlineNotification
110-
title={title}
133+
<ActionableNotification
111134
kind={kind}
135+
title={title}
112136
subtitle={subtitle}
113137
hideCloseButton={hideCloseButton}
114138
lowContrast={lowContrast}
139+
actionButtonLabel="Action"
140+
onActionButtonClick={() => myFunction()}
141+
onClose={() => myFunction()}
142+
onCloseButtonClick={() => myFunction()}
115143
/>
116144
),
117145
}
118146
);
119147

148+
// Callout
120149
figma.connect(
121-
ToastNotification,
122-
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4179-105911&mode=design&t=WhsTspVnawA9vgXk-4',
150+
Callout,
151+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=84336-36580&t=nJ89fkK549fgCUuf-4',
123152
{
124-
variant: { Type: 'Toast' },
125-
props: sharedNotificationProps,
126-
example: ({ title, kind, subtitle, caption, lowContrast }) => (
127-
<ToastNotification
128-
kind={kind}
153+
props: {
154+
title: figma.boolean('Title', {
155+
true: figma.string('Title text'),
156+
false: '',
157+
}),
158+
subtitle: figma.string('Message text'),
159+
kind: figma.enum('Status', {
160+
Info: 'info',
161+
Warning: 'warning',
162+
}),
163+
lowContrast: figma.boolean('High contrast', {
164+
true: false,
165+
false: true,
166+
}),
167+
},
168+
example: ({ title, kind, subtitle, lowContrast }) => (
169+
<Callout
129170
title={title}
171+
kind={kind}
130172
subtitle={subtitle}
131-
caption={caption}
132173
lowContrast={lowContrast}
133174
/>
134175
),

‎packages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"@babel/preset-typescript": "^7.24.7",
8282
"@carbon/test-utils": "^10.34.0",
8383
"@carbon/themes": "^11.43.0",
84-
"@figma/code-connect": "^1.2.1",
84+
"@figma/code-connect": "^1.2.2",
8585
"@rollup/plugin-babel": "^6.0.0",
8686
"@rollup/plugin-commonjs": "^28.0.0",
8787
"@rollup/plugin-node-resolve": "^15.0.0",

‎yarn.lock‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1986,7 +1986,7 @@ __metadata:
19861986
"@carbon/styles": "npm:^1.71.0-rc.0"
19871987
"@carbon/test-utils": "npm:^10.34.0"
19881988
"@carbon/themes": "npm:^11.43.0"
1989-
"@figma/code-connect": "npm:^1.2.1"
1989+
"@figma/code-connect": "npm:^1.2.2"
19901990
"@floating-ui/react": "npm:^0.26.0"
19911991
"@ibm/telemetry-js": "npm:^1.5.0"
19921992
"@rollup/plugin-babel": "npm:^6.0.0"
@@ -3143,9 +3143,9 @@ __metadata:
31433143
languageName: node
31443144
linkType: hard
31453145

3146-
"@figma/code-connect@npm:^1.2.1":
3147-
version: 1.2.1
3148-
resolution: "@figma/code-connect@npm:1.2.1"
3146+
"@figma/code-connect@npm:^1.2.2":
3147+
version: 1.2.2
3148+
resolution: "@figma/code-connect@npm:1.2.2"
31493149
dependencies:
31503150
"@babel/core": "npm:7.25.8"
31513151
"@babel/generator": "npm:7.25.7"
@@ -3170,13 +3170,13 @@ __metadata:
31703170
prompts: "npm:^2.4.2"
31713171
strip-ansi: "npm:^6.0.0"
31723172
ts-morph: "npm:^23.0.0"
3173-
typescript: "npm:5.4.2"
3173+
typescript: "npm:5.5.4"
31743174
undici: "npm:^5.28.4"
31753175
zod: "npm:^3.23.8"
31763176
zod-validation-error: "npm:^3.2.0"
31773177
bin:
31783178
figma: bin/figma
3179-
checksum: 10/97de501bc02e24ea5b868ae7ea8129d2fbfa719d17c51d716bfffdbcf92410787559ca7e14ed8a4b8308c6b53c2f24fb8abdfe27abd708da2066825e5c1c3b1a
3179+
checksum: 10/8e37bc70691f614e1de16ba531e645cbc9cae4d368596a8e3e13af691653ca6c0fdc23ad8b2a0a9006599c23cf8d80b3e29e7ad96a539b2a5e6c08251a4e3157
31803180
languageName: node
31813181
linkType: hard
31823182

@@ -26422,17 +26422,7 @@ __metadata:
2642226422
languageName: unknown
2642326423
linkType: soft
2642426424

26425-
"typescript@npm:5.4.2":
26426-
version: 5.4.2
26427-
resolution: "typescript@npm:5.4.2"
26428-
bin:
26429-
tsc: bin/tsc
26430-
tsserver: bin/tsserver
26431-
checksum: 10/f8cfdc630ab1672f004e9561eb2916935b2d267792d07ce93e97fc601c7a65191af32033d5e9c0169b7dc37da7db9bf320f7432bc84527cb7697effaa4e4559d
26432-
languageName: node
26433-
linkType: hard
26434-
26435-
"typescript@npm:>=3 < 6":
26425+
"typescript@npm:5.5.4, typescript@npm:>=3 < 6":
2643626426
version: 5.5.4
2643726427
resolution: "typescript@npm:5.5.4"
2643826428
bin:
@@ -26462,17 +26452,7 @@ __metadata:
2646226452
languageName: node
2646326453
linkType: hard
2646426454

26465-
"typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>":
26466-
version: 5.4.2
26467-
resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::version=5.4.2&hash=5adc0c"
26468-
bin:
26469-
tsc: bin/tsc
26470-
tsserver: bin/tsserver
26471-
checksum: 10/f5f9a4133c2670761f0166eae5b3bafbc4a3fc24f0f42a93c9c893d9e9d6e66ea066969c5e7483fa66b4ae0e99125592553f3b92fd3599484de8be13b0615176
26472-
languageName: node
26473-
linkType: hard
26474-
26475-
"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>":
26455+
"typescript@patch:typescript@npm%3A5.5.4#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>":
2647626456
version: 5.5.4
2647726457
resolution: "typescript@patch:typescript@npm%3A5.5.4#optional!builtin<compat/typescript>::version=5.5.4&hash=379a07"
2647826458
bin:

0 commit comments

Comments
 (0)