-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(code-connect): connect Search, Select, RadioButton, RadioButtonG…
…roup (#16782) * feat(code-connect): connect Select and FluidSelect * chore: fix * feat(code-connect): connect select and radio button * feat(code-connect): radio button and radio button group * chore: typo * feat(code-connect): connect search * Update README.md
- Loading branch information
1 parent
412ce20
commit 5e000ea
Showing
10 changed files
with
450 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
packages/react/code-connect/RadioButton/RadioButton.figma.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| // @ts-nocheck | ||
| import React from 'react'; | ||
| import { RadioButton, RadioButtonSkeleton } from '@carbon/react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| figma.connect( | ||
| RadioButton, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2930-23442&t=yFGI7EFVWv0vtqIk-4', | ||
| { | ||
| props: { | ||
| labelText: figma.string('Value text'), | ||
| labelPosition: figma.enum('Position', { | ||
| Right: 'right', | ||
| }), | ||
| hideLabel: figma.boolean('Value', { | ||
| true: false, | ||
| false: true, | ||
| }), | ||
| disabled: figma.enum('State', { | ||
| Disabled: true, | ||
| }), | ||
| defaultChecked: figma.boolean('Selected'), | ||
| // Below props are set on RadioButtonGroup only in code | ||
| // | ||
| // labeltext: figma.string('Label text'), | ||
| // warningtext: figma.string('Warning text'), | ||
| // helpermessage: figma.boolean('Helper message'), | ||
| // warningmessage: figma.boolean('Warning message'), | ||
| // errormessage: figma.boolean('Error message'), | ||
| // helpertext: figma.string('Helper text'), | ||
| // errortext: figma.string('Error text'), | ||
| // label: figma.boolean('Label'), | ||
| // state: figma.enum('State', { | ||
| // 'Read-only': 'read-only', | ||
| // Invalid: 'invalid', | ||
| // Warning: 'warning', | ||
| // }), | ||
| }, | ||
| example: ({ | ||
| labelText, | ||
| labelPosition, | ||
| hideLabel, | ||
| disabled, | ||
| defaultChecked, | ||
| }) => ( | ||
| <RadioButton | ||
| labelText={labelText} | ||
| labelPosition={labelPosition} | ||
| hideLabel={hideLabel} | ||
| disabled={disabled} | ||
| defaultChecked={defaultChecked} | ||
| /> | ||
| ), | ||
| } | ||
| ); | ||
|
|
||
| figma.connect( | ||
| RadioButtonSkeleton, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2930-23442&t=yFGI7EFVWv0vtqIk-4', | ||
| { | ||
| variant: { State: 'Skeleton' }, | ||
| example: () => { | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <RadioButtonSkeleton />; | ||
| }, | ||
| } | ||
| ); |
64 changes: 64 additions & 0 deletions
64
packages/react/code-connect/RadioButton/RadioButtonGroup.figma.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| // @ts-nocheck | ||
| import React from 'react'; | ||
| import { RadioButtonGroup } from '@carbon/react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| figma.connect( | ||
| RadioButtonGroup, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2927-28166&t=yFGI7EFVWv0vtqIk-4', | ||
| { | ||
| props: { | ||
| children: figma.children(['Radio button']), | ||
| disabled: figma.enum('State', { | ||
| Disabled: true, | ||
| }), | ||
| helperText: figma.boolean('Helper message', { | ||
| true: figma.string('Helper text'), | ||
| }), | ||
| warnText: figma.string('Warning text'), | ||
| warn: figma.enum('State', { | ||
| Warning: true, | ||
| }), | ||
| invalidText: figma.string('Error text'), | ||
| invalid: figma.enum('State', { | ||
| Invalid: true, | ||
| }), | ||
| legendText: figma.string('Label text'), | ||
| orientation: figma.boolean('Horizontal', { | ||
| false: 'vertical', | ||
| }), | ||
| }, | ||
| example: ({ | ||
| children, | ||
| disabled, | ||
| helperText, | ||
| warnText, | ||
| warn, | ||
| invalidText, | ||
| invalid, | ||
| orientation, | ||
| legendText, | ||
| }) => ( | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <RadioButtonGroup | ||
| disabled={disabled} | ||
| helperText={helperText} | ||
| warnText={warnText} | ||
| warn={warn} | ||
| invalidText={invalidText} | ||
| invalid={invalid} | ||
| orientation={orientation} | ||
| legendText={legendText}> | ||
| {children} | ||
| </RadioButtonGroup> | ||
| ), | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| // @ts-nocheck | ||
| import React from 'react'; | ||
| import { | ||
| unstable__FluidSearch as FluidSearch, | ||
| // unstable__FluidSearchSkeleton as FluidSearchSkeleton, | ||
| } from '@carbon/react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| figma.connect( | ||
| FluidSearch, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=15503-270751&t=6KMXKibN414b97hv-4', | ||
| { | ||
| props: { | ||
| placeholder: figma.string('Placeholder text'), | ||
| labelText: figma.string('Label text'), | ||
| disabled: figma.enum('State', { | ||
| Disabled: true, | ||
| }), | ||
| }, | ||
| example: ({ placeholder, labelText, disabled }) => ( | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <FluidSearch | ||
| placeholder={placeholder} | ||
| labelText={labelText} | ||
| disabled={disabled} | ||
| /> | ||
| ), | ||
| } | ||
| ); | ||
|
|
||
| // missing from Figma | ||
| // figma.connect( | ||
| // FluidSearchSkeleton, | ||
| // 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=15503-270751&t=6KMXKibN414b97hv-4', | ||
| // { | ||
| // variant: { State: 'Skeleton' }, | ||
| // example: () => ( | ||
| // // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // // React is in an exploratory phase. Code sample below may be incomplete. | ||
| // <FluidSearchSkeleton /> | ||
| // ), | ||
| // } | ||
| // ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| // @ts-nocheck | ||
| import React from 'react'; | ||
| import { Search, ExpandableSearch, TextInputSkeleton } from '@carbon/react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| figma.connect( | ||
| Search, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2805-21056&t=6KMXKibN414b97hv-4', | ||
| { | ||
| props: { | ||
| size: figma.enum('Size', { | ||
| Large: 'lg', | ||
| Medium: 'md', | ||
| Small: 'sm', | ||
| }), | ||
| placeholder: figma.string('Placeholder text'), | ||
| disabled: figma.enum('State', { | ||
| Disabled: true, | ||
| }), | ||
| }, | ||
| example: ({ size, placeholder, disabled }) => ( | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <Search size={size} placeholder={placeholder} disabled={disabled} /> | ||
| ), | ||
| } | ||
| ); | ||
|
|
||
| figma.connect( | ||
| ExpandableSearch, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2805-21056&t=6KMXKibN414b97hv-4', | ||
| { | ||
| variant: { Expanded: 'True' }, // <--doesn't work | ||
| props: { | ||
| size: figma.enum('Size', { | ||
| Large: 'lg', | ||
| Medium: 'md', | ||
| Small: 'sm', | ||
| }), | ||
| placeholder: figma.string('Placeholder text'), | ||
| disabled: figma.enum('State', { | ||
| Disabled: true, | ||
| }), | ||
| }, | ||
| example: ({ size, placeholder, disabled }) => ( | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <ExpandableSearch | ||
| size={size} | ||
| placeholder={placeholder} | ||
| disabled={disabled} | ||
| /> | ||
| ), | ||
| } | ||
| ); | ||
|
|
||
| figma.connect( | ||
| TextInputSkeleton, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2805-21056&t=6KMXKibN414b97hv-4', | ||
| { | ||
| variant: { State: 'Skeleton' }, | ||
| example: () => ( | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <TextInputSkeleton hideLabel /> | ||
| ), | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| // @ts-nocheck | ||
| import React from 'react'; | ||
| import { | ||
| unstable__FluidSelect as FluidSelect, | ||
| SelectItem, | ||
| } from '@carbon/react'; | ||
| import figma from '@figma/code-connect'; | ||
|
|
||
| figma.connect( | ||
| FluidSelect, | ||
| 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17650-275243&t=LS77peWFGhwOdxIw-4', | ||
| { | ||
| props: { | ||
| disabled: figma.enum('State', { | ||
| Disabled: true, | ||
| }), | ||
| labelText: figma.string('Label text'), | ||
| warn: figma.enum('State', { | ||
| Warning: true, | ||
| }), | ||
| warnText: figma.string('Warning text'), | ||
| invalid: figma.enum('State', { | ||
| Error: true, | ||
| }), | ||
| invalidText: figma.string('Error text'), | ||
| // showtooltip: figma.boolean('Show tooltip'), // not supported in react | ||
| // labelText: figma.boolean('Show tooltip', { | ||
| // true: 'add tooltip icon code here ', | ||
| // false: figma.string('Label text'), | ||
| // }), | ||
| }, | ||
| example: ({ | ||
| labelText, | ||
| warnText, | ||
| invalidText, | ||
| warn, | ||
| invalid, | ||
| disabled, | ||
| }) => ( | ||
| // Disclaimer: Code Connect is currently in beta and integration with Carbon | ||
| // React is in an exploratory phase. Code sample below may be incomplete. | ||
| <FluidSelect | ||
| labelText={labelText} | ||
| warnText={warnText} | ||
| warn={warn} | ||
| invalidText={invalidText} | ||
| invalid={invalid} | ||
| disabled={disabled}> | ||
| <SelectItem value="" text="" /> | ||
| <SelectItem value="option-1" text="Option 1" /> | ||
| <SelectItem value="option-2" text="Option 2" /> | ||
| <SelectItem value="option-3" text="Option 3" /> | ||
| <SelectItem value="option-4" text="Option 4" /> | ||
| </FluidSelect> | ||
| ), | ||
| } | ||
| ); |
Oops, something went wrong.