Skip to content

Commit f01d544

Browse files
alisonjosephtay1orjoneskennylam
authored
feat(code-connect): Connect AILabel (#17334)
* fix(code-connect): small fixes and latest version bump * chore: cleanup code comments * feat(code-connect): ailabel and ailabelcontent * chore: revert story change * chore: cleanup * chore: yarn dedupe --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kennylam <[email protected]>
1 parent a516277 commit f01d544

10 files changed

+154
-16
lines changed
Binary file not shown.
Binary file not shown.
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2024
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// @ts-nocheck
9+
import React from 'react';
10+
import { AILabel } from '@carbon/react';
11+
import figma from '@figma/code-connect';
12+
13+
figma.connect(
14+
AILabel,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=51447-1916&t=9XaizJDx8eI6KgQz-4',
16+
{
17+
props: {
18+
aiText: figma.string('Text translation'),
19+
size: figma.enum('Size', {
20+
'16px': 'mini',
21+
'20px': '2xs',
22+
'24px': 'xs',
23+
'32px': 'sm',
24+
'40px': 'md',
25+
'48px': 'lg',
26+
'64px': 'xl',
27+
}),
28+
},
29+
example: ({ ...props }) => <AILabel autoAlign {...props} />,
30+
}
31+
);
32+
33+
// inline
34+
figma.connect(
35+
AILabel,
36+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=51447-2035&t=9XaizJDx8eI6KgQz-4',
37+
{
38+
props: {
39+
aiText: figma.string('Text translation'),
40+
textLabel: figma.enum('Type', {
41+
'Text + Icon': figma.string('Slug text'),
42+
}),
43+
size: figma.enum('Size', {
44+
'12px': 'sm',
45+
'14px': 'md',
46+
'16px': 'lg',
47+
}),
48+
},
49+
example: ({ ...props }) => <AILabel autoAlign kind="inline" {...props} />,
50+
}
51+
);
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2024
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// @ts-nocheck
9+
import React from 'react';
10+
import { AILabelActions } from '@carbon/react';
11+
import figma from '@figma/code-connect';
12+
13+
figma.connect(
14+
AILabelActions,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=57561-3559&t=SB9qULZbn3FRopvU-4',
16+
{
17+
props: {
18+
children: figma.children('*'),
19+
},
20+
example: ({ children }) => <AILabelActions>{children}</AILabelActions>,
21+
}
22+
);
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2024
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// @ts-nocheck
9+
import React from 'react';
10+
import { AILabelContent } from '@carbon/react';
11+
import figma from '@figma/code-connect';
12+
13+
figma.connect(
14+
AILabelContent,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=57561-3508&t=SB9qULZbn3FRopvU-4',
16+
{
17+
props: {
18+
title: figma.string('AI title'),
19+
description: figma.string('AI description'),
20+
slotOne: figma.boolean('Slot 1', {
21+
true: figma.instance('Swap slot 1'),
22+
false: '',
23+
}),
24+
slotTwo: figma.boolean('Slot 2', {
25+
true: figma.instance('Swap slot 2'),
26+
}),
27+
slotThree: figma.boolean('Slot 3', {
28+
true: figma.instance('Swap slot 3'),
29+
}),
30+
slotFour: figma.boolean('Slot 4', {
31+
true: figma.instance('Swap slot 4'),
32+
}),
33+
actions: figma.children(['Actions footer']),
34+
},
35+
example: ({
36+
title,
37+
description,
38+
slotOne,
39+
slotTwo,
40+
slotThree,
41+
slotFour,
42+
actions,
43+
}) => (
44+
<AILabelContent>
45+
{slotOne}
46+
<div>
47+
<p>AI Explained</p>
48+
<h1>{title}</h1>
49+
<p>{description}</p>
50+
{slotOne}
51+
<hr />
52+
{slotTwo}
53+
<p>
54+
This is sample placeholder content, replace with your own content
55+
and custom styles.
56+
</p>
57+
{slotThree}
58+
{slotFour}
59+
</div>
60+
{actions}
61+
</AILabelContent>
62+
),
63+
}
64+
);

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
/* eslint-disable react/jsx-no-duplicate-props */
98
// @ts-nocheck
109
import React from 'react';
1110
import {
@@ -34,12 +33,14 @@ figma.connect(
3433
size: figma.enum('Size', {
3534
Large: 'lg',
3635
}),
37-
dismissable: figma.boolean('Dismissible'),
38-
dismissablePlusIcon: figma.boolean('Dismissible + Icon'),
36+
dismissable: figma.boolean('Dismissible', {
37+
true: true,
38+
false: figma.boolean('Dismissible + Icon'),
39+
}),
3940
}),
4041
},
4142
example: ({ children, contained, fullWidth, tab }) => (
42-
<Tabs dismissable={tab.dismissable} dismissable={tab.dismissablePlusIcon}>
43+
<Tabs dismissable={tab.dismissable}>
4344
<TabList
4445
aria-label="List of tabs"
4546
contained={contained}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ figma.connect(
7777
openOnHover
7878
definition={tooltip.definition}
7979
align={align}>
80-
{tooltip.children}
80+
{item.children}
8181
</DefinitionTooltip>
8282
),
8383
}

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.32.0-rc.0",
8383
"@carbon/themes": "^11.40.0-rc.0",
84-
"@figma/code-connect": "^1.0.4",
84+
"@figma/code-connect": "^1.0.6",
8585
"@rollup/plugin-babel": "^6.0.0",
8686
"@rollup/plugin-commonjs": "^26.0.0",
8787
"@rollup/plugin-node-resolve": "^15.0.0",

yarn.lock

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2021,7 +2021,7 @@ __metadata:
20212021
"@carbon/styles": "npm:^1.65.0-rc.0"
20222022
"@carbon/test-utils": "npm:^10.32.0-rc.0"
20232023
"@carbon/themes": "npm:^11.40.0-rc.0"
2024-
"@figma/code-connect": "npm:^1.0.4"
2024+
"@figma/code-connect": "npm:^1.0.6"
20252025
"@floating-ui/react": "npm:^0.26.0"
20262026
"@ibm/telemetry-js": "npm:^1.5.0"
20272027
"@rollup/plugin-babel": "npm:^6.0.0"
@@ -3066,16 +3066,16 @@ __metadata:
30663066
languageName: node
30673067
linkType: hard
30683068

3069-
"@figma/code-connect@npm:^1.0.4":
3070-
version: 1.0.4
3071-
resolution: "@figma/code-connect@npm:1.0.4"
3069+
"@figma/code-connect@npm:^1.0.6":
3070+
version: 1.0.6
3071+
resolution: "@figma/code-connect@npm:1.0.6"
30723072
dependencies:
30733073
"@babel/core": "npm:^7.24.7"
30743074
"@babel/generator": "npm:^7.24.7"
30753075
"@babel/parser": "npm:^7.24.7"
30763076
"@babel/types": "npm:^7.24.7"
30773077
"@storybook/csf-tools": "npm:^7.6.7"
3078-
axios: "npm:^1.6.0"
3078+
axios: "npm:^1.7.4"
30793079
boxen: "npm:5.1.1"
30803080
chalk: "npm:^4.1.2"
30813081
commander: "npm:^11.1.0"
@@ -3096,7 +3096,7 @@ __metadata:
30963096
zod-validation-error: "npm:^3.2.0"
30973097
bin:
30983098
figma: bin/figma
3099-
checksum: 10/a412e637748513ae64888032c62856a34680581ad4bfb03e4b03a37eee41b13b9b3d43df1cb74c2d9ec8dcf0c6ac82b72a22da5655e21f91a832e5b5bef2adcf
3099+
checksum: 10/952cf06f6a7e792cc41ca3e208ceb4d926823039882d208c074312bad817be0c4fbdd0dfbd38ac71f34e82eb3a0f6254678bf73bd5a2644823f13e2e37c31948
31003100
languageName: node
31013101
linkType: hard
31023102

@@ -8227,14 +8227,14 @@ __metadata:
82278227
languageName: node
82288228
linkType: hard
82298229

8230-
"axios@npm:^1.4.0, axios@npm:^1.5.1, axios@npm:^1.6.0":
8231-
version: 1.7.3
8232-
resolution: "axios@npm:1.7.3"
8230+
"axios@npm:^1.4.0, axios@npm:^1.5.1, axios@npm:^1.7.4":
8231+
version: 1.7.5
8232+
resolution: "axios@npm:1.7.5"
82338233
dependencies:
82348234
follow-redirects: "npm:^1.15.6"
82358235
form-data: "npm:^4.0.0"
82368236
proxy-from-env: "npm:^1.1.0"
8237-
checksum: 10/7f92af205705a8fb4a9d35666b663729507657f252a1d39d83582590119941872d49078017cf992e32f47aa3b7317f5439f77be772a173dac2ae0fedd38f43ae
8237+
checksum: 10/6cbcfe943a84089f420a900a3a3aeb54ee94dcc9c2b81b150434896357be5d1079eff0b1bbb628597371e79f896b1bc5776df04184756ba99656ff31df9a75bf
82388238
languageName: node
82398239
linkType: hard
82408240

0 commit comments

Comments
 (0)