Skip to content

Commit a42620a

Browse files
author
Kurt Doherty
authored
feat: add code connect for Dialog, Drawer, and Menu (#787)
1 parent 5d5cc52 commit a42620a

18 files changed

Lines changed: 198 additions & 1 deletion

File tree

‎figma.config.json‎

Lines changed: 6 additions & 1 deletion
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,divider,empty-data,features,filter-bar,folder-tabs,link,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
4+
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,link,menu,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
55
],
66
"importPaths": {
77
"src/core/*": "@reapit/elements/core/*",
@@ -27,7 +27,9 @@
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",
2929
"<COMPACT_SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=14083-70317",
30+
"<DIALOG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7206-13663",
3031
"<DIVIDER_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11095-10396",
32+
"<DRAWER_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13321-19292",
3133
"<EMPTY_DATA_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=86-1823",
3234
"<FEATURE_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12955-37788",
3335
"<FEATURES_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9645",
@@ -43,6 +45,9 @@
4345
"<FOLDER_TABS_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15272-53111",
4446
"<FOLDER_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-63400",
4547
"<LINK_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11867-66681",
48+
"<MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9952-3115",
49+
"<MENU_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9952-3180",
50+
"<MENU_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9952-3123",
4651
"<SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248",
4752
"<SPLIT_BUTTON_ACTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778",
4853
"<SPLIT_BUTTON_MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149",

‎src/core/dialog/body/body.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,5 @@ export namespace DialogBody {
1818
export function DialogBody({ children, ...rest }: DialogBody.Props) {
1919
return <ElDialogBody {...rest}>{children}</ElDialogBody>
2020
}
21+
22+
DialogBody.displayName = 'Dialog.Body'

‎src/core/dialog/dialog.figma.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Dialog } from './dialog'
2+
import figma from '@figma/code-connect'
3+
4+
figma.connect(Dialog, '<DIALOG_URL>', {
5+
variant: { Footer: true, 'Show title': true },
6+
props: {
7+
footer: figma.children('Button group'),
8+
size: figma.enum('Size', {
9+
Small: 'small',
10+
Medium: 'medium',
11+
Large: 'large',
12+
'Full screen': 'full-screen',
13+
}),
14+
title: figma.textContent('Title'),
15+
},
16+
example: (props) => (
17+
<Dialog size={props.size}>
18+
<Dialog.Header>{props.title}</Dialog.Header>
19+
<Dialog.Body>TODO: Add dialog content</Dialog.Body>
20+
<Dialog.Footer>{props.footer}</Dialog.Footer>
21+
</Dialog>
22+
),
23+
})
24+
25+
figma.connect(Dialog, '<DIALOG_URL>', {
26+
variant: { Footer: true, 'Show title': false },
27+
props: {
28+
footer: figma.children('Button group'),
29+
size: figma.enum('Size', {
30+
Small: 'small',
31+
Medium: 'medium',
32+
Large: 'large',
33+
'Full screen': 'full-screen',
34+
}),
35+
},
36+
example: (props) => (
37+
<Dialog size={props.size}>
38+
<Dialog.Header aria-label="Replace me with an accessible title" />
39+
<Dialog.Body>TODO: Add dialog content</Dialog.Body>
40+
<Dialog.Footer>{props.footer}</Dialog.Footer>
41+
</Dialog>
42+
),
43+
})
44+
45+
figma.connect(Dialog, '<DIALOG_URL>', {
46+
variant: { Footer: false, 'Show title': true },
47+
props: {
48+
size: figma.enum('Size', {
49+
Small: 'small',
50+
Medium: 'medium',
51+
Large: 'large',
52+
'Full screen': 'full-screen',
53+
}),
54+
title: figma.textContent('Title'),
55+
},
56+
example: (props) => (
57+
<Dialog size={props.size}>
58+
<Dialog.Header action={<Dialog.HeaderCloseButton />}>{props.title}</Dialog.Header>
59+
<Dialog.Body>TODO: Add dialog content</Dialog.Body>
60+
</Dialog>
61+
),
62+
})
63+
64+
figma.connect(Dialog, '<DIALOG_URL>', {
65+
variant: { Footer: false, 'Show title': false },
66+
props: {
67+
size: figma.enum('Size', {
68+
Small: 'small',
69+
Medium: 'medium',
70+
Large: 'large',
71+
'Full screen': 'full-screen',
72+
}),
73+
},
74+
example: (props) => (
75+
<Dialog size={props.size}>
76+
<Dialog.Header action={<Dialog.HeaderCloseButton />} aria-label="Replace me with an accessible title" />
77+
<Dialog.Body>TODO: Add dialog content</Dialog.Body>
78+
</Dialog>
79+
),
80+
})

‎src/core/dialog/footer/footer.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,5 @@ export namespace DialogFooter {
1616
export function DialogFooter({ children, ...rest }: DialogFooter.Props) {
1717
return <ElDialogFooter {...rest}>{children}</ElDialogFooter>
1818
}
19+
20+
DialogFooter.displayName = 'Dialog.Footer'

‎src/core/dialog/header/close-button.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@ export function DialogHeaderCloseButton() {
2121
</form>
2222
)
2323
}
24+
25+
DialogHeaderCloseButton.displayName = 'Dialog.HeaderCloseButton'

‎src/core/dialog/header/header.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ export function DialogHeader({ action, children, 'aria-label': ariaLabel, ...res
3333
)
3434
}
3535

36+
DialogHeader.displayName = 'Dialog.Header'
37+
3638
DialogHeader.CloseButton = DialogHeaderCloseButton

‎src/core/drawer/body/body.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,5 @@ export namespace DrawerBody {
1818
export function DrawerBody({ children, ...rest }: DrawerBody.Props) {
1919
return <ElDrawerBody {...rest}>{children}</ElDrawerBody>
2020
}
21+
22+
DrawerBody.displayName = 'Drawer.Body'

‎src/core/drawer/drawer.figma.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Drawer } from './drawer'
2+
import figma from '@figma/code-connect'
3+
4+
figma.connect(Drawer, '<DRAWER_URL>', {
5+
variant: { Variant: 'Simple' },
6+
props: {
7+
overline: figma.string('Overline'),
8+
supplementaryInfo: figma.children('Supplementary info'),
9+
tabs: figma.children('Tabs'),
10+
title: figma.string('Drawer title'),
11+
},
12+
example: (props) => (
13+
<Drawer>
14+
<Drawer.Header
15+
action={<Drawer.HeaderCloseButton />}
16+
overline={props.overline}
17+
supplementaryInfo={props.supplementaryInfo}
18+
tabs={props.tabs}
19+
>
20+
{props.title}
21+
</Drawer.Header>
22+
<Drawer.Body>TODO: Add drawer content</Drawer.Body>
23+
</Drawer>
24+
),
25+
})
26+
27+
figma.connect(Drawer, '<DRAWER_URL>', {
28+
variant: { Variant: 'With footer' },
29+
props: {
30+
footer: figma.children('Button group'),
31+
overline: figma.string('Overline'),
32+
supplementaryInfo: figma.children('Supplementary info'),
33+
title: figma.string('Drawer title'),
34+
},
35+
example: (props) => (
36+
<Drawer>
37+
<Drawer.Header overline={props.overline} supplementaryInfo={props.supplementaryInfo}>
38+
{props.title}
39+
</Drawer.Header>
40+
<Drawer.Body>TODO: Add drawer content</Drawer.Body>
41+
<Drawer.Footer>{props.footer}</Drawer.Footer>
42+
</Drawer>
43+
),
44+
})

‎src/core/drawer/footer/footer.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,5 @@ export namespace DrawerFooter {
1616
export function DrawerFooter({ children, ...rest }: DrawerFooter.Props) {
1717
return <ElDrawerFooter {...rest}>{children}</ElDrawerFooter>
1818
}
19+
20+
DrawerFooter.displayName = 'Drawer.Footer'

‎src/core/drawer/header/close-button.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@ export function DrawerHeaderCloseButton() {
2121
</form>
2222
)
2323
}
24+
25+
DrawerHeaderCloseButton.displayName = 'Drawer.HeaderCloseButton'

0 commit comments

Comments
 (0)