Skip to content

Commit

Permalink
fix(code-connect): update notification components (#18192)
Browse files Browse the repository at this point in the history 
* fix(code-connect): update notification components

* chore: fix title
  • Loading branch information
@alisonjoseph
alisonjoseph authored Dec 4, 2024
1 parent b944bb1 commit 899eb8d
Show file tree
Hide file tree
Showing 8 changed files with 129 additions and 78 deletions.
Binary file removed .yarn/cache/@figma-code-connect-npm-1.2.1-b72ead2d33-97de501bc0.zip
View file
Binary file not shown.
Binary file added .yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip
View file
Binary file not shown.
Binary file removed .yarn/cache/typescript-npm-5.4.2-7e4ff3dfd2-f8cfdc630a.zip
View file
Binary file not shown.
Binary file removed .yarn/cache/typescript-patch-c145cea93e-f5f9a4133c.zip
View file
Binary file not shown.
30 changes: 30 additions & 0 deletions NotificationCallout.figma.tsx
View file
Original file line number Diff line number Diff line change
@@ -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) => <NotificationCallout />,
}
);
139 changes: 90 additions & 49 deletions packages/react/code-connect/Notification/Notification.figma.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 }) => (
<InlineNotification
title={title}
kind={kind}
subtitle={subtitle}
hideCloseButton={hideCloseButton}
lowContrast={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 }) => (
<ActionableNotification
inline={inline}
inline
kind={kind}
title={title}
subtitle={subtitle}
hideCloseButton={hideCloseButton}
lowContrast={lowContrast}
actionButtonLabel={button.actionButtonLabel}
actionButtonLabel="Action"
onActionButtonClick={() => myFunction()}
onClose={() => myFunction()}
onCloseButtonClick={() => myFunction()}
Expand All @@ -80,55 +77,99 @@ 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 }) => (
<InlineNotification
title={title}
variant: { Actionable: 'False' },
props: {
title: figma.string('Title text'),
subtitle: figma.string('Message text'),
caption: figma.string('Time text'),
kind: figma.enum('Status', {
Info: 'info',
Success: 'success',
Warning: 'warning',
Error: 'error',
}),
hideCloseButton: figma.boolean('Close', {
true: false,
false: true,
}),
lowContrast: figma.boolean('High contrast', {
true: false,
false: true,
}),
},
example: ({
title,
kind,
subtitle,
caption,
lowContrast,
hideCloseButton,
}) => (
<ToastNotification
kind={kind}
title={title}
subtitle={subtitle}
caption={caption}
hideCloseButton={hideCloseButton}
lowContrast={lowContrast}
/>
),
}
);

// 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 }) => (
<InlineNotification
title={title}
<ActionableNotification
kind={kind}
title={title}
subtitle={subtitle}
hideCloseButton={hideCloseButton}
lowContrast={lowContrast}
actionButtonLabel="Action"
onActionButtonClick={() => 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 }) => (
<ToastNotification
kind={kind}
props: {
title: figma.boolean('Title', {
true: figma.string('Title text'),
false: '',
}),
subtitle: figma.string('Message text'),
kind: figma.enum('Status', {
Info: 'info',
Warning: 'warning',
}),
lowContrast: figma.boolean('High contrast', {
true: false,
false: true,
}),
},
example: ({ title, kind, subtitle, lowContrast }) => (
<Callout
title={title}
kind={kind}
subtitle={subtitle}
caption={caption}
lowContrast={lowContrast}
/>
),
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 8 additions & 28 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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

Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -26462,17 +26452,7 @@ __metadata:
languageName: node
linkType: hard

"typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>":
version: 5.4.2
resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::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<compat/typescript>":
"typescript@patch:typescript@npm%3A5.5.4#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>":
version: 5.5.4
resolution: "typescript@patch:typescript@npm%3A5.5.4#optional!builtin<compat/typescript>::version=5.5.4&hash=379a07"
bin:
Expand Down

0 comments on commit 899eb8d

Please sign in to comment.