Skip to content

Commit e62095b

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-4): updated props and comments
1 parent 985d1c6 commit e62095b

File tree

6 files changed

+92
-50
lines changed

6 files changed

+92
-50
lines changed

‎packages/code-connect/components/DataList/DataList.figma.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
1-
import { DataList } from '@patternfly/react-core';
21
import figma from '@figma/code-connect';
3-
4-
/**
5-
* PatternFly DataList component integration for Figma Code Connect
6-
*/
2+
import { DataList } from '@patternfly/react-core';
73

84
figma.connect(
95
DataList,
10-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-80542&m=dev',
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6649-80542',
117
{
128
props: {
139
// enum
1410
isCompact: figma.enum('Size', { Compact: true }),
15-
isExpanded: figma.boolean('Expandable'),
1611

1712
children: figma.children('*')
1813
},
19-
example: (props) => (
20-
<DataList isExpanded={props.isExpanded} isCompact={props.isCompact}>
21-
{props.children}
22-
</DataList>
23-
)
14+
example: (props) => <DataList isCompact={props.isCompact}>{props.children}</DataList>
2415
}
2516
);

‎packages/code-connect/components/DescriptionList/DescriptionList.figma.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
import { DescriptionList } from '@patternfly/react-core';
22
import figma from '@figma/code-connect';
33

4-
/**
5-
* PatternFly DescriptionList component integration for Figma Code Connect
6-
*/
7-
84
figma.connect(
95
DescriptionList,
10-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3946&m=dev',
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1121-3946',
117
{
128
props: {
139
// enum
14-
isCompact: figma.enum('Spacing', { Compact: true }),
15-
isFluid: figma.enum('Orientation', { 'Horizontal - Fluid': true }),
10+
isCompact: figma.enum('Spacing', {
11+
Compact: true
12+
}),
1613
isHorizontal: figma.enum('Orientation', {
1714
'Horizontal - Fixed': true,
1815
'Horizontal - Fluid': true
1916
}),
17+
isFluid: figma.enum('Orientation', {
18+
'Horizontal - Fluid': true
19+
}),
2020

2121
children: figma.children('*')
2222
},
2323
example: (props) => (
24+
// Documentation for DescriptionList can be found at https://www.patternfly.org/components/description-list
2425
<DescriptionList isFluid={props.isFluid} isCompact={props.isCompact} isHorizontal={props.isHorizontal}>
2526
{props.children}
2627
</DescriptionList>

‎packages/code-connect/components/Divider/Divider.figma.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,18 @@ figma.connect(
1010
* TODO: This is a good example of how properties in Figma and props in React would benefit from naming consistency
1111
* React is looking for orientation, figma is defining orientation as 'Direction'
1212
*/
13-
isHorizontal: figma.enum('Direction', {
14-
Horizontal: { default: 'horizontal' }
15-
}),
13+
orientation: figma.enum('Direction', { Vertical: { default: 'vertical' } }),
1614
/**
1715
* TODO: Figma allows optional insets, but default to insetMd
1816
*/
1917
inset: figma.boolean('With insets', {
20-
true: { default: 'insetMd' }
18+
true: { default: 'insetMd' },
19+
false: { default: 'insetNone' }
2120
})
2221
},
23-
example: (props) => <Divider orientation={props.isHorizontal} inset={props.inset} />
22+
example: (props) => (
23+
// Documentation for Divider can be found at https://www.patternfly.org/components/divider
24+
<Divider orientation={props.orientation} inset={props.inset} />
25+
)
2426
}
2527
);

‎packages/code-connect/components/Drawer/Drawer.figma.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import figma from '@figma/code-connect';
2-
import { Drawer } from '@patternfly/react-core';
3-
4-
/**
5-
* PatternFly Drawer component integration for Figma Code Connect
6-
*/
2+
import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
73

84
figma.connect(
95
Drawer,
@@ -12,18 +8,38 @@ figma.connect(
128
props: {
139
// boolean
1410
isExpanded: figma.boolean('Show Footer actions'),
15-
isInline: figma.enum('Type', { Inline: true }),
1611
isResizable: figma.boolean('Is resizable'),
17-
isStatic: figma.boolean('Has action icon'),
1812

1913
// enum
20-
isLeft: figma.enum('Position', { Left: 'start' }),
14+
isInline: figma.enum('Type', {
15+
Overlay: undefined,
16+
Inline: true
17+
}),
18+
position: figma.enum('Position', {
19+
'Left In Main Content Area': 'start',
20+
'Right - Full Page': undefined,
21+
'Left - Full Page': 'start',
22+
'Right Full Page': undefined,
23+
'Bottom Full Page': 'end',
24+
'Bottom In Main Content Area': 'end',
25+
'Right In Main Content Area': undefined
26+
}),
2127

22-
children: figma.children('*')
28+
panelContent: figma.children('*')
2329
},
2430
example: (props) => (
25-
<Drawer isExpanded={props.isExpanded} isInline={props.isInline} isStatic={props.isStatic} position={props.isLeft}>
26-
{props.children}
31+
// Documentation for Drawer can be found at https://www.patternfly.org/components/drawer
32+
<Drawer
33+
id="<drawer-id>"
34+
isExpanded={props.isExpanded}
35+
isInline={props.isInline}
36+
position={props.position}
37+
onResize={() => {}}
38+
onExpand={() => {}}
39+
>
40+
<DrawerContent panelContent={props.panelContent}>
41+
<DrawerContentBody>Drawer content</DrawerContentBody>
42+
</DrawerContent>
2743
</Drawer>
2844
)
2945
}

‎packages/code-connect/components/DualListSelector/DualListHeader.figma.tsx‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,54 @@
11
import figma from '@figma/code-connect';
2-
import { DualListSelectorPane } from '@patternfly/react-core';
3-
4-
/**
5-
* PatternFly DualListSelectorHeader component integration for Figma Code Connect
6-
*/
2+
import { Button, ButtonVariant, DualListSelectorPane } from '@patternfly/react-core';
3+
import PficonSortCommonAscIcon from '@patternfly/react-icons/icons/pficon-sort-common-asc-icon/dist/esm/icons/pficon-sort-common-asc-icon';
74

85
figma.connect(
96
DualListSelectorPane,
10-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=21279-116172&m=dev',
7+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=21279-116172&t=IzSunfrnw18ti37Y-11',
118
{
129
props: {
1310
// string
14-
headerText: figma.string('Header text'),
11+
title: figma.string('Header text'),
1512
itemInformation: figma.string('Item information'),
1613

14+
// boolean
15+
isSearchable: figma.boolean('Has search bar'),
16+
onSearch: figma.boolean('Has search bar', {
17+
true: () => {},
18+
false: undefined
19+
}),
20+
21+
hasSort: figma.boolean('Has search bar', {
22+
true: [
23+
<Button
24+
variant={ButtonVariant.plain}
25+
onClick={() => {}}
26+
aria-label="Sort Chosen"
27+
key="chosenSortButton"
28+
isDisabled={isDisabled}
29+
icon={<PficonSortCommonAscIcon />}
30+
/>,
31+
<Button
32+
variant={ButtonVariant.plain}
33+
onClick={() => {}}
34+
aria-label="Sort Available"
35+
key="availableSortButton"
36+
isDisabled={isDisabled}
37+
icon={<PficonSortCommonAscIcon />}
38+
/>
39+
]
40+
}),
41+
1742
children: figma.children('*')
1843
},
19-
example: (props) => <DualListSelectorPane title={props.headerText}>{props.children}</DualListSelectorPane>
44+
example: (props) => (
45+
// Documentation for DualListHeader can be found at https://www.patternfly.org/components/dual-list-selector
46+
<DualListSelectorPane
47+
searchInput={props.isSearchable}
48+
onSearch={props.onSearch}
49+
actions={props.hasSort}
50+
title={props.title}
51+
></DualListSelectorPane>
52+
)
2053
}
2154
);

‎packages/code-connect/components/DualListSelector/DualListSelector.figma.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import figma from '@figma/code-connect';
21
import { DualListSelector } from '@patternfly/react-core';
3-
4-
/**
5-
* PatternFly DualListSelector component integration for Figma Code Connect
6-
*/
2+
import figma from '@figma/code-connect';
73

84
figma.connect(
95
DualListSelector,
10-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=29667-231683&m=dev',
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=29667-231683',
117
{
128
props: {
139
children: figma.children('*')
1410
},
15-
example: (props) => <DualListSelector>{props.children}</DualListSelector>
11+
example: (props) => (
12+
// Documentation for DualListSelector can be found at https://www.patternfly.org/components/dual-list-selector
13+
<DualListSelector>{props.children}</DualListSelector>
14+
)
1615
}
1716
);

0 commit comments

Comments
 (0)