Skip to content

Commit ae2b029

Browse files
alisonjosephalisonjoseph
authored
feat(code-connect): connect textarea, textinput, dropdown, slider, progress indicator (#16941)
* feat(code-connect): connect textarea, textinput and dropdown * feat: add slider, progress indicator update cc version
1 parent c1822dc commit ae2b029

File tree

13 files changed

+532
-9
lines changed

13 files changed

+532
-9
lines changed

.yarn/cache/@figma-code-connect-npm-1.0.1-64a8b81268-1fceaee828.zip renamed to .yarn/cache/@figma-code-connect-npm-1.0.2-c160202f86-28de9e3070.zip

156 KB
Binary file not shown.

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,8 @@ figma.connect(
4444
}),
4545
warnText: figma.string('Warning message'),
4646
type: figma.enum('Style', {
47-
// Fixed: 'fixed',
4847
Inline: 'inline',
4948
}),
50-
// selectedtext: figma.string('Selected text'), // what is this used for in Figma?
51-
// unselectedtext: figma.string('Unselected text'),// what is this used for in Figma?
5249
},
5350
example: ({ ...props }) => {
5451
const items = [

‎packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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 {
11+
unstable__FluidDropdown as FluidDropdown,
12+
unstable__FluidDropdownSkeleto as FluidDropdownSkeleton,
13+
} from '@carbon/react';
14+
import figma from '@figma/code-connect';
15+
16+
figma.connect(
17+
FluidDropdown,
18+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14505-302528&t=4Ath5JqwaYJZxznq-4',
19+
{
20+
props: {
21+
titleText: figma.string('Label text'),
22+
label: figma.string('Prompt text'),
23+
readOnly: figma.enum('State', {
24+
'Read-only': true,
25+
}),
26+
disabled: figma.enum('State', {
27+
Disabled: true,
28+
}),
29+
invalid: figma.enum('State', {
30+
Error: true,
31+
}),
32+
invalidText: figma.string('Error text'),
33+
warn: figma.enum('State', {
34+
Warning: true,
35+
}),
36+
warnText: figma.string('Warning text'),
37+
},
38+
example: ({ ...props }) => {
39+
const items = [
40+
{
41+
id: 'option-0',
42+
text: 'Option 0',
43+
},
44+
{
45+
id: 'option-1',
46+
text: 'Option 1',
47+
},
48+
];
49+
50+
return (
51+
<FluidDropdown
52+
{...props}
53+
id="id"
54+
initialSelectedItem={items[0]}
55+
itemToString={(item) => (item ? item.text : '')}
56+
/>
57+
);
58+
},
59+
}
60+
);
61+
62+
figma.connect(
63+
FluidDropdownSkeleton,
64+
'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=14032-290635&mode=dev',
65+
{
66+
variant: { State: 'Skeleton' },
67+
example: () => {
68+
return <FluidDropdownSkeleton />;
69+
},
70+
}
71+
);

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
import React from 'react';
9+
import { ProgressIndicator } from '@carbon/react';
10+
// import { ProgressIndicatorSkeleton } from '@carbon/react';
11+
import figma from '@figma/code-connect';
12+
13+
figma.connect(
14+
ProgressIndicator,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3925-58667&m=dev',
16+
{
17+
props: {
18+
children: figma.children(['_Progress indicator item']),
19+
vertical: figma.enum('Direction', {
20+
Vertical: true,
21+
}),
22+
},
23+
example: ({ children, vertical }) => (
24+
<ProgressIndicator vertical={vertical}>{children}</ProgressIndicator>
25+
),
26+
}
27+
);
28+
29+
// figma.connect(
30+
// ProgressIndicatorSkeleton,
31+
// 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3925-58667&m=dev',
32+
// {
33+
// variant: need nested variant selector here, https://github.com/figma/code-connect/issues/91
34+
// props: {
35+
// vertical: figma.enum('Direction', {
36+
// Vertical: true,
37+
// }),
38+
// },
39+
// example: ({ children, vertical }) => (
40+
// <ProgressIndicatorSkeleton vertical={vertical} />
41+
// ),
42+
// }
43+
// );

‎packages/react/code-connect/ProgressIndicator/ProgressStep.figma.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 { ProgressStep } from '@carbon/react';
11+
import figma from '@figma/code-connect';
12+
13+
figma.connect(
14+
ProgressStep,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3377-31707&m=dev',
16+
{
17+
props: {
18+
complete: figma.enum('State', {
19+
Completed: true,
20+
}),
21+
current: figma.enum('State', {
22+
Current: true,
23+
}),
24+
disabled: figma.enum('State', {
25+
Disabled: true,
26+
}),
27+
invalid: figma.enum('State', {
28+
Error: true,
29+
}),
30+
secondaryLabel: figma.boolean('Optional label', {
31+
true: figma.textContent('Optional label'),
32+
}),
33+
label: figma.string('Label text'),
34+
},
35+
example: ({ ...props }) => <ProgressStep {...props} />,
36+
}
37+
);

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

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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 { Slider, SliderSkeleton } from '@carbon/react';
11+
import figma from '@figma/code-connect';
12+
13+
//single
14+
figma.connect(
15+
Slider,
16+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3673-40574&m=dev',
17+
{
18+
props: {
19+
slider: figma.nestedProps('_Slider base', {
20+
labelText: figma.textContent('Label'),
21+
}),
22+
invalidText: figma.string('Error text'),
23+
warnText: figma.string('Warning text'),
24+
disabled: figma.enum('Status', {
25+
Disabled: true,
26+
}),
27+
invalid: figma.enum('Status', {
28+
Error: true,
29+
}),
30+
readOnly: figma.enum('Status', {
31+
'Read-only': true,
32+
}),
33+
warn: figma.enum('Status', {
34+
Warning: true,
35+
}),
36+
textInput: figma.nestedProps('Text input - Default', {
37+
value: figma.string('Input text'),
38+
}),
39+
},
40+
example: ({ slider, textInput, ...props }) => (
41+
<Slider value={textInput.value} labelText={slider.labelText} {...props} />
42+
),
43+
}
44+
);
45+
46+
//two handle
47+
figma.connect(
48+
Slider,
49+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev',
50+
{
51+
props: {
52+
max: figma.string('Max range text'),
53+
min: figma.string('Min range text'),
54+
invalidText: figma.string('Error text'),
55+
warnText: figma.string('Warning text'),
56+
labelText: figma.string('Label text'),
57+
hideTextInput: figma.boolean('Inputs', {
58+
false: true,
59+
true: false,
60+
}),
61+
invalidText: figma.string('Error text'),
62+
warnText: figma.string('Warning text'),
63+
disabled: figma.enum('State', {
64+
Disabled: true,
65+
}),
66+
invalid: figma.enum('State', {
67+
'Hover + Error': true,
68+
'Active + Error': true,
69+
'Focused + Error': true,
70+
}),
71+
readOnly: figma.enum('State', {
72+
'Read-only': true,
73+
}),
74+
warn: figma.enum('State', {
75+
'Hover + Warning': true,
76+
'Active + Warning': true,
77+
'Focused + Warning': true,
78+
}),
79+
},
80+
example: ({ ...props }) => <Slider twoHandles {...props} />,
81+
}
82+
);
83+
84+
//single
85+
figma.connect(
86+
SliderSkeleton,
87+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3673-40574&m=dev',
88+
{
89+
variant: { Status: 'Skeleton' },
90+
example: () => <SliderSkeleton />,
91+
}
92+
);
93+
94+
//two handle
95+
figma.connect(
96+
SliderSkeleton,
97+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev',
98+
{
99+
variant: { State: 'Skeleton' },
100+
example: () => <SliderSkeleton twoHandles />,
101+
}
102+
);

‎packages/react/code-connect/Slider/SliderRange.figma.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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 { Slider, SliderSkeleton } from '@carbon/react';
11+
// import figma from '@figma/code-connect';
12+
13+
// figma.connect(
14+
// SliderRange,
15+
// "https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=41061-1531&m=dev",
16+
// {
17+
// props: {
18+
// maxrangetext3836123: figma.string("Max range text"),
19+
// minrangetext383610: figma.string("Min range text"),
20+
// errortext97969: figma.string("Error text"),
21+
// warningtext97992: figma.string("Warning text"),
22+
// labeltext9790: figma.string("Label text"),
23+
// inputs: figma.boolean("Inputs"),
24+
// state: figma.enum("State", {
25+
// Enabled: "enabled",
26+
// Hover: "hover",
27+
// Active: "active",
28+
// Disabled: "disabled",
29+
// Focused: "focused",
30+
// Skeleton: "skeleton",
31+
// "Read only": "read-only",
32+
// "Hover + Error": "hover---error",
33+
// "Active + Error": "active---error",
34+
// "Focused + Error": "focused---error",
35+
// "Hover + Warning": "hover---warning",
36+
// "Active + Warning": "active---warning",
37+
// "Focused + Warning": "focused---warning",
38+
// }),
39+
// handle: figma.enum("Handle", {
40+
// None: "none",
41+
// Left: "left",
42+
// Right: "right",
43+
// }),
44+
// },
45+
// example: (props) => <SliderRange />,
46+
// },
47+
// )

‎packages/react/code-connect/TextArea/FluidTextArea.figma.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 { unstable__FluidTextArea as FluidTextArea } from './TextAreaFluid';
11+
import figma from '@figma/code-connect';
12+
13+
figma.connect(
14+
FluidTextArea,
15+
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=18791-274643&t=4Ath5JqwaYJZxznq-4',
16+
{
17+
props: {
18+
value: figma.boolean('Text filled', {
19+
true: figma.string('Body text'),
20+
}),
21+
labelText: figma.string('Label text'),
22+
warnText: figma.string('Warning message'),
23+
invalidText: figma.string('Error message'),
24+
placeholdertext: figma.string('Placeholder text'),
25+
warn: figma.enum('State', {
26+
Warning: true,
27+
}),
28+
disabled: figma.enum('State', {
29+
Disabled: true,
30+
}),
31+
invalid: figma.enum('State', {
32+
Error: true,
33+
}),
34+
readOnly: figma.enum('State', {
35+
'Read-only': 'read-only',
36+
}),
37+
},
38+
example: ({ ...props }) => <FluidTextArea {...props} />,
39+
}
40+
);

0 commit comments

Comments
 (0)