Skip to content

Commit 054231e

Browse files
maradwan26maradwan26
authored
feat(code-connect): add support for cds-button (#22295)
* feat(code-connect): add support for `cds-button` * chore: update code-connect version
1 parent f26a844 commit 054231e

4 files changed

Lines changed: 110 additions & 20 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ figma.connect(
3434
Small: 'sm',
3535
'Extra small': 'xs',
3636
'Extra large': 'xl',
37-
'2x large': '2xl',
37+
'2X large': '2xl',
3838
}),
3939
isExpressive: figma.enum('Size', {
4040
Expressive: true,
@@ -62,7 +62,7 @@ figma.connect(
6262
Small: 'sm',
6363
'Extra small': 'xs',
6464
'Extra large': 'xl',
65-
'2x large': '2xl',
65+
'2X large': '2xl',
6666
}),
6767
},
6868
example: ({ size }) => {

‎packages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"@babel/preset-typescript": "^7.27.1",
8181
"@carbon/test-utils": "^10.41.0",
8282
"@carbon/themes": "^11.74.0",
83-
"@figma/code-connect": "^1.4.2",
83+
"@figma/code-connect": "^1.4.5",
8484
"@stackblitz/sdk": "^1.11.0",
8585
"@storybook/addon-a11y": "^10.3.5",
8686
"@storybook/addon-docs": "^10.3.5",

‎packages/web-components/code-connect/button/button.figma.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* Copyright IBM Corp. 2026
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+
import figma, { html } from '@figma/code-connect/html';
9+
10+
figma.connect(
11+
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=1854-1776&mode=dev',
12+
{
13+
props: {
14+
disabled: figma.enum('State', {
15+
Disabled: true,
16+
}),
17+
buttonText: figma.enum('Type', {
18+
// Conditionally show the buttonText in the Code Connect only if the type is 'Text + Icon'
19+
'Icon only': '',
20+
'Text + Icon': figma.string('Button text'),
21+
}),
22+
kind: figma.enum('Style', {
23+
Primary: 'primary',
24+
Secondary: 'secondary',
25+
Tertiary: 'tertiary',
26+
Ghost: 'ghost',
27+
'Danger primary': 'danger',
28+
'Danger tertiary': 'danger-tertiary',
29+
'Danger ghost': 'danger-ghost',
30+
}),
31+
size: figma.enum('Size', {
32+
Large: 'lg',
33+
Medium: 'md',
34+
Small: 'sm',
35+
'Extra small': 'xs',
36+
'Extra large': 'xl',
37+
'2X large': '2xl',
38+
}),
39+
isExpressive: figma.enum('Size', {
40+
Expressive: true,
41+
}),
42+
hasIconOnly: figma.enum('Type', {
43+
'Icon only': true,
44+
}),
45+
renderIcon: figma.instance('Swap icon'),
46+
},
47+
example: (props) =>
48+
html`<cds-button
49+
disabled=${props.disabled}
50+
kind=${props.kind}
51+
size=${props.size}
52+
isExpressive=${props.isExpressive}>
53+
${props.buttonText} ${props.renderIcon}
54+
</cds-button>`,
55+
imports: ["import '@carbon/web-components/es/components/button/button.js'"],
56+
}
57+
);
58+
59+
figma.connect(
60+
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=1854-1776&mode=dev',
61+
{
62+
variant: { State: 'Skeleton' },
63+
props: {
64+
size: figma.enum('Size', {
65+
Large: 'lg',
66+
Medium: 'md',
67+
Small: 'sm',
68+
'Extra small': 'xs',
69+
'Extra large': 'xl',
70+
'2X large': '2xl',
71+
}),
72+
},
73+
example: (props) =>
74+
html`<cds-button-skeleton size=${props.size}></cds-button-skeleton>`,
75+
imports: ["import '@carbon/web-components/es/components/button/button.js'"],
76+
}
77+
);

‎yarn.lock‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1961,7 +1961,7 @@ __metadata:
19611961
"@carbon/test-utils": "npm:^10.41.0"
19621962
"@carbon/themes": "npm:^11.74.0"
19631963
"@carbon/utilities": "npm:^0.20.0"
1964-
"@figma/code-connect": "npm:^1.4.2"
1964+
"@figma/code-connect": "npm:^1.4.5"
19651965
"@floating-ui/react": "npm:^0.27.4"
19661966
"@ibm/telemetry-js": "npm:^1.5.0"
19671967
"@stackblitz/sdk": "npm:^1.11.0"
@@ -3110,9 +3110,9 @@ __metadata:
31103110
languageName: node
31113111
linkType: hard
31123112

3113-
"@figma/code-connect@npm:^1.4.2":
3114-
version: 1.4.2
3115-
resolution: "@figma/code-connect@npm:1.4.2"
3113+
"@figma/code-connect@npm:^1.4.5":
3114+
version: 1.4.5
3115+
resolution: "@figma/code-connect@npm:1.4.5"
31163116
dependencies:
31173117
boxen: "npm:5.1.1"
31183118
chalk: "npm:^4.1.2"
@@ -3124,21 +3124,21 @@ __metadata:
31243124
find-up: "npm:^5.0.0"
31253125
glob: "npm:^11.0.4"
31263126
jsdom: "npm:^24.1.1"
3127-
lodash: "npm:4.17.23"
3127+
lodash: "npm:4.18.1"
31283128
minimatch: "npm:^9.0.3"
31293129
ora: "npm:^5.4.1"
31303130
parse5: "npm:^7.1.2"
31313131
prettier: "npm:^2.8.8"
31323132
prompts: "npm:^2.4.2"
31333133
strip-ansi: "npm:^6.0.0"
31343134
ts-morph: "npm:^27.0.0"
3135-
typescript: "npm:5.9.3"
3135+
typescript: "npm:6.0.3"
31363136
undici: "npm:^7.19.1"
31373137
zod: "npm:3.25.58"
31383138
zod-validation-error: "npm:^3.2.0"
31393139
bin:
31403140
figma: bin/figma
3141-
checksum: 10/64ca0233d4ed377461ea87ff0fcae6ed8f7cc983c6398243c167554c6da7cda5b7d7a0983a0e454a0b07c0aa5c82b78868c75ea260ae2930a7d1b20b065ad14e
3141+
checksum: 10/a7e17f35b817f2ff156258b4b5b48c05bdcf14fd48a61fadace09f438c3f8c45d24b948c5aef338a37e87a691e0b0f6a258a7330dd02fa985fbd62b897d1750b
31423142
languageName: node
31433143
linkType: hard
31443144

@@ -16319,14 +16319,7 @@ __metadata:
1631916319
languageName: node
1632016320
linkType: hard
1632116321

16322-
"lodash@npm:4.17.23":
16323-
version: 4.17.23
16324-
resolution: "lodash@npm:4.17.23"
16325-
checksum: 10/82504c88250f58da7a5a4289f57a4f759c44946c005dd232821c7688b5fcfbf4a6268f6a6cdde4b792c91edd2f3b5398c1d2a0998274432cff76def48735e233
16326-
languageName: node
16327-
linkType: hard
16328-
16329-
"lodash@npm:^4.11.2, lodash@npm:^4.17.14, lodash@npm:^4.17.19, lodash@npm:^4.17.21":
16322+
"lodash@npm:4.18.1, lodash@npm:^4.11.2, lodash@npm:^4.17.14, lodash@npm:^4.17.19, lodash@npm:^4.17.21":
1633016323
version: 4.18.1
1633116324
resolution: "lodash@npm:4.18.1"
1633216325
checksum: 10/306fea53dfd39dad1f03d45ba654a2405aebd35797b673077f401edb7df2543623dc44b9effbb98f69b32152295fff725a4cec99c684098947430600c6af0c3f
@@ -22959,7 +22952,17 @@ __metadata:
2295922952
languageName: node
2296022953
linkType: hard
2296122954

22962-
"typescript@npm:5.9.3, typescript@npm:>=3 < 6, typescript@npm:^5.7.3":
22955+
"typescript@npm:6.0.3":
22956+
version: 6.0.3
22957+
resolution: "typescript@npm:6.0.3"
22958+
bin:
22959+
tsc: bin/tsc
22960+
tsserver: bin/tsserver
22961+
checksum: 10/0ef2357a4cffd916b52b683a021cdab0f81eea4e9aa35f2d254581c9a5106da02224e3392e1b0ed42b7a48f80c966e5f52b8e1a27941fa0523c1705a9c2e0330
22962+
languageName: node
22963+
linkType: hard
22964+
22965+
"typescript@npm:>=3 < 6, typescript@npm:^5.7.3":
2296322966
version: 5.9.3
2296422967
resolution: "typescript@npm:5.9.3"
2296522968
bin:
@@ -22979,7 +22982,17 @@ __metadata:
2297922982
languageName: node
2298022983
linkType: hard
2298122984

22982-
"typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>":
22985+
"typescript@patch:typescript@npm%3A6.0.3#optional!builtin<compat/typescript>":
22986+
version: 6.0.3
22987+
resolution: "typescript@patch:typescript@npm%3A6.0.3#optional!builtin<compat/typescript>::version=6.0.3&hash=5786d5"
22988+
bin:
22989+
tsc: bin/tsc
22990+
tsserver: bin/tsserver
22991+
checksum: 10/22b67a18dafedf9b1468b64ca20d9aa02ea61d449b65413d8aa6552aeb63f52ef369e86beb25b6b4c91a803d9726ee5c196f391a9b64201263263410a4223ee6
22992+
languageName: node
22993+
linkType: hard
22994+
22995+
"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>":
2298322996
version: 5.9.3
2298422997
resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=5786d5"
2298522998
bin:

0 commit comments

Comments
 (0)