Skip to content

Commit 86d3134

Browse files
author
Kurt Doherty
authored
feat: add code connect for Divider, EmptyData, SelectNative, and SplitButton (#784)
1 parent 2c6e080 commit 86d3134

16 files changed

Lines changed: 157 additions & 6 deletions

‎figma.config.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"codeConnect": {
33
"include": [
4-
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,features,link,tag,tag-group}/**/*.{tsx,jsx}"
4+
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,link,select-native,split-button,tag,tag-group}/**/*.{tsx,jsx}"
55
],
66
"importPaths": {
77
"src/core/*": "@reapit/elements/core/*",
@@ -26,10 +26,16 @@
2626
"<CHIP_SELECT_OPTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12386-27991",
2727
"<CHIP_SELECT_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12386-28584",
2828
"<CHIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7051-11054",
29-
"<COMPACT_SELECT_NAVTIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=14083-70317",
29+
"<COMPACT_SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=14083-70317",
30+
"<DIVIDER_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11095-10396",
31+
"<EMPTY_DATA_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=86-1823",
3032
"<FEATURE_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12955-37788",
3133
"<FEATURES_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9645",
3234
"<LINK_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11867-66681",
35+
"<SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248",
36+
"<SPLIT_BUTTON_ACTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778",
37+
"<SPLIT_BUTTON_MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149",
38+
"<SPLIT_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2356-10273",
3339
"<TAG_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272",
3440
"<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982"
3541
}

‎src/core/button/button.figma.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ figma.connect(Button, '<BUTTON_URL>', {
2525
}),
2626
},
2727
example: (props) => (
28-
// NOTE: Use AnchorButton when needing to navigate
2928
<Button
29+
// NOTE: Use AnchorButton when needing to navigate
3030
disabled={props.disabled}
3131
hasNoPadding={props.hasNoPadding}
3232
iconLeft={props.iconLeft}

‎src/core/compact-select-native/compact-select-native.figma.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { CompactSelectNative } from './compact-select-native'
22
import figma from '@figma/code-connect'
33

4-
figma.connect(CompactSelectNative, '<COMPACT_SELECT_NAVTIVE_URL>', {
4+
figma.connect(CompactSelectNative, '<COMPACT_SELECT_NATIVE_URL>', {
55
props: {
6-
// These props were automatically mapped based on your linked code:
76
size: figma.enum('Size', {
87
Small: 'small',
98
Medium: 'medium',

‎src/core/divider/divider.figma.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Divider } from './divider'
2+
import figma from '@figma/code-connect'
3+
4+
figma.connect(Divider, '<DIVIDER_URL>', {
5+
props: {},
6+
example: () => <Divider />,
7+
})

‎src/core/empty-data/action/action-button.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,5 @@ export type EmptyDataActionButtonProps = EmptyDataActionButton.Props
2020
export function EmptyDataActionButton(props: EmptyDataActionButton.Props) {
2121
return <Button {...props} size="medium" variant="tertiary" useLinkStyle />
2222
}
23+
24+
EmptyDataActionButton.displayName = 'EmptyData.ActionButton'

‎src/core/empty-data/action/action.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ export type EmptyDataActionProps = EmptyDataAction.Props
2727
export function EmptyDataAction(props: EmptyDataAction.Props) {
2828
return <AnchorButton {...props} size="medium" variant="tertiary" useLinkStyle />
2929
}
30+
31+
EmptyDataAction.displayName = 'EmptyData.Action'

‎src/core/empty-data/description/description.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ export function EmptyDataDescription({ children, secondaryText, ...rest }: Empty
2727
</ElEmptyDataDescription>
2828
)
2929
}
30+
31+
EmptyDataDescription.displayName = 'EmptyData.Description'

‎src/core/empty-data/empty-data.figma.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { EmptyData } from './empty-data'
2+
import figma from '@figma/code-connect'
3+
4+
figma.connect(EmptyData, '<EMPTY_DATA_URL>', {
5+
variant: { Content: 'Description & Action' },
6+
props: {
7+
action: figma.nestedProps('Button', {
8+
label: figma.string('Label'),
9+
}),
10+
description: figma.textContent('Description'),
11+
secondaryText: figma.enum('Content', {
12+
'Description & Action': figma.textContent('Secondary text'),
13+
}),
14+
},
15+
example: (props) => (
16+
<EmptyData>
17+
<EmptyData.Description secondaryText={props.secondaryText}>{props.description}</EmptyData.Description>
18+
{/* NOTE: for actions that should act as a button, use EmptyData.ActionButton */}
19+
<EmptyData.Action href="#replace-me">{props.action.label}</EmptyData.Action>
20+
</EmptyData>
21+
),
22+
})
23+
24+
figma.connect(EmptyData, '<EMPTY_DATA_URL>', {
25+
variant: { Content: 'Description' },
26+
props: {
27+
description: figma.textContent('Description'),
28+
secondaryText: figma.enum('Content', {
29+
Description: figma.textContent('Secondary text'),
30+
}),
31+
},
32+
example: (props) => (
33+
<EmptyData>
34+
<EmptyData.Description secondaryText={props.secondaryText}>{props.description}</EmptyData.Description>
35+
</EmptyData>
36+
),
37+
})
38+
39+
figma.connect(EmptyData, '<EMPTY_DATA_URL>', {
40+
variant: { Content: 'Action' },
41+
props: {
42+
action: figma.nestedProps('Button', {
43+
label: figma.string('Label'),
44+
}),
45+
},
46+
example: (props) => (
47+
<EmptyData>
48+
{/* NOTE: for actions that should act as a button, use EmptyData.ActionButton */}
49+
<EmptyData.Action href="#replace-me">{props.action.label}</EmptyData.Action>
50+
</EmptyData>
51+
),
52+
})

‎src/core/select-native/select-native.figma.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import figma from '@figma/code-connect'
2+
import { SelectNative } from './select-native'
3+
4+
figma.connect(SelectNative, '<SELECT_NATIVE_URL>', {
5+
props: {
6+
size: figma.enum('Size', {
7+
Small: 'small',
8+
Medium: 'medium',
9+
Large: 'large',
10+
}),
11+
disabled: figma.enum('State', {
12+
Disabled: true,
13+
}),
14+
selectionLabel: figma.string('Selection label'),
15+
},
16+
example: (props) => (
17+
<SelectNative disabled={props.disabled} size={props.size}>
18+
<option>{props.selectionLabel}</option>
19+
{/* TODO: add remaining options */}
20+
</SelectNative>
21+
),
22+
})

‎src/core/split-button/action/action.figma.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import figma from '@figma/code-connect'
2+
import { SplitButton } from '../split-button'
3+
4+
figma.connect(SplitButton.Action, '<SPLIT_BUTTON_ACTION_URL>', {
5+
props: {
6+
children: figma.string('Label'),
7+
disabled: figma.enum('State', {
8+
Disabled: true,
9+
}),
10+
},
11+
example: (props) => (
12+
<SplitButton.Action disabled={props.disabled}>
13+
{/* Use SplitButton.AnchorAction for main actions that involve navigation */}
14+
{props.children}
15+
</SplitButton.Action>
16+
),
17+
})

0 commit comments

Comments
 (0)