Skip to content

Commit df33fa3

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-3): review-athon round 2 followup
1 parent e106426 commit df33fa3

4 files changed

Lines changed: 118 additions & 46 deletions

File tree

‎packages/code-connect/components/Breadcrumbs/BreadcrumbItem.figma.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,11 @@ figma.connect(
1212
text: figma.string('Text'),
1313

1414
// enum
15-
isActive: figma.enum('State', {
16-
'No link': true
17-
}),
1815
to: figma.enum('State', {
1916
Link: '#',
2017
Hover: '#'
2118
})
2219
},
23-
example: (props) => (
24-
<BreadcrumbItem to={props.to} isActive={props.isActive}>
25-
{props.text}
26-
</BreadcrumbItem>
27-
)
20+
example: (props) => <BreadcrumbItem to={props.to}>{props.text}</BreadcrumbItem>
2821
}
2922
);

‎packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx‎

Lines changed: 83 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,93 @@
11
import figma from '@figma/code-connect';
2-
import { BreadcrumbItem } from '@patternfly/react-core';
2+
import { Badge, BreadcrumbItem, Dropdown, DropdownItem, DropdownList, Icon, MenuToggle } from '@patternfly/react-core';
3+
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
34

45
// Documentation for BreadcrumbItem can be found at https://www.patternfly.org/components/breadcrumb
56

67
figma.connect(
78
BreadcrumbItem,
89
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=19922-43760',
910
{
10-
props: {
11-
children: figma.children('*')
12-
},
13-
// TODO: MATT: Add dropdown for isDropdown
14-
example: (props) => <BreadcrumbItem isDropdown>{props.children}</BreadcrumbItem>
11+
props: {},
12+
example: () => (
13+
<BreadcrumbItem isDropdown>
14+
<Dropdown
15+
onSelect={() => {}}
16+
onOpenChange={() => {}}
17+
toggle={() => (
18+
<MenuToggle
19+
size="sm"
20+
badge={
21+
<Badge isRead screenReaderText="additional items">
22+
01
23+
</Badge>
24+
}
25+
onClick={() => {}}
26+
isExpanded={false}
27+
variant="plainText"
28+
/>
29+
)}
30+
isOpen={false}
31+
>
32+
<DropdownList>
33+
<BreadcrumbItem isDropdown>
34+
<Dropdown
35+
onSelect={() => {}}
36+
onOpenChange={() => {}}
37+
toggle={() => (
38+
<MenuToggle
39+
size="sm"
40+
badge={
41+
<Badge isRead screenReaderText="additional items">
42+
01
43+
</Badge>
44+
}
45+
onClick={() => {}}
46+
isExpanded={false}
47+
variant="plainText"
48+
/>
49+
)}
50+
isOpen={false}
51+
>
52+
<DropdownList>
53+
<DropdownItem
54+
icon={
55+
<Icon shouldMirrorRTL>
56+
<AngleLeftIcon />
57+
</Icon>
58+
}
59+
key="edit"
60+
>
61+
Edit
62+
</DropdownItem>
63+
,
64+
<DropdownItem
65+
icon={
66+
<Icon shouldMirrorRTL>
67+
<AngleLeftIcon />
68+
</Icon>
69+
}
70+
key="action"
71+
>
72+
Deployment
73+
</DropdownItem>
74+
,
75+
<DropdownItem
76+
icon={
77+
<Icon shouldMirrorRTL>
78+
<AngleLeftIcon />
79+
</Icon>
80+
}
81+
key="apps"
82+
>
83+
Applications
84+
</DropdownItem>
85+
</DropdownList>
86+
</Dropdown>
87+
</BreadcrumbItem>
88+
</DropdownList>
89+
</Dropdown>
90+
</BreadcrumbItem>
91+
)
1592
}
1693
);

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

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,42 @@
11
import figma from '@figma/code-connect';
22
import { CodeBlock, CodeBlockCode, ExpandableSection, ExpandableSectionToggle } from '@patternfly/react-core';
33

4+
// TODO: DESIGN: Configure Actions layer to contain CodeBlockAction components
5+
46
figma.connect(
57
CodeBlock,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9802-5857',
79
{
810
props: {
9-
// TODO: DESIGN: Configure Editor Text as a base component for CodeBlock
10-
// Currently using placeholder string, but should be a multi-select property with options like "Copy", "Download", "Edit", "Share", "Delete"
1111
editorText: 'code block code',
1212

13-
// TODO: DESIGN: Configure Actions layer to contain CodeBlockAction components
14-
// Currently using placeholder string, but should be a multi-select property with options like "Copy", "Download", "Edit", "Share", "Delete"
1513
actions: `action1, action2, action3, action4, action5`,
1614

17-
// TODO: DESIGN: ExpandableSectionToggle needs proper configuration
18-
// Current implementation has undefined variables and function calls
19-
expandableSectionContent: figma.boolean('Expandable', {
20-
true: (
21-
<ExpandableSection isExpanded={true} isDetached contentId="code-block-expand">
22-
Expandable content
23-
</ExpandableSection>
24-
),
25-
false: undefined
26-
}),
15+
// boolean
2716
expandableSectionToggle: figma.boolean('Expandable', {
2817
true: (
2918
<ExpandableSectionToggle onToggle={() => {}} contentId="code-block-id">
3019
Show More
3120
</ExpandableSectionToggle>
3221
),
3322
false: undefined
23+
}),
24+
expandableSectionContent: figma.boolean('Expandable', {
25+
true: (
26+
<ExpandableSection isExpanded={true} isDetached contentId="code-block-expand">
27+
Expandable content
28+
</ExpandableSection>
29+
),
30+
false: undefined
3431
})
3532
},
3633
example: (props) => (
3734
<CodeBlock actions={props.actions}>
3835
<CodeBlockCode>
3936
{props.editorText}
40-
{props.expandableSectionToggle}
37+
{props.expandableSectionContent}
4138
</CodeBlockCode>
42-
{props.expandableSectionContent}
39+
{props.expandableSectionToggle}
4340
</CodeBlock>
4441
)
4542
}

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

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,40 @@ import { CodeEditor } from '@patternfly/react-code-editor';
33

44
// TODO: DESIGN: Add support for actions, wrap each action in the appropriate compnent
55
// TODO: DESIGN: When shortcuts is removed, presentation breaks
6+
// TODO: DESIGN: configure options for actions
7+
// TODO: DESIGN: Add viewshortcuts
8+
// TODO: DESIGN: ifshortcuts is true
69
// Documentation for CodeEditor can be found at https://www.patternfly.org/components/code-editor
710

811
figma.connect(
912
CodeEditor,
1013
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=16994-184502',
1114
{
1215
props: {
13-
// TODO: DESIGN: configure options for actions
14-
actions: 'action1, action2, action3, action4, action5',
15-
1616
// boolean
17+
hasCustomControls: '<your-actions-here>',
18+
isUploadEnabled: figma.boolean('Action 1'),
19+
isCopyEnabled: figma.boolean('Action 2'),
20+
isDownloadEnabled: figma.boolean('Action 3'),
1721
showsLineNumbers: figma.boolean('Show Line Numbers'),
1822

1923
// enum
20-
isMinimapVisible: figma.enum('Type', { 'Mini Map': true }),
21-
22-
children: figma.children('*')
23-
24-
// Add viewshortcuts
25-
// ifshortcuts is true
24+
isMinimapVisible: figma.enum('Type', { 'Mini Map': true })
2625
},
2726
example: (props) => (
28-
<CodeEditor
29-
isLineNumbersVisible={props.showsLineNumbers}
30-
isMinimapVisible={props.isMinimapVisible}
31-
/* if no content is passed to code and isUploadEnabled is true, the editor will be display EmptyState */
32-
code="code editor contents"
33-
height="400px"
34-
/>
27+
<>
28+
<CodeEditor
29+
code="code editor contents"
30+
height="400px"
31+
isCopyEnabled={props.isCopyEnabled}
32+
isDownloadEnabled={props.isDownloadEnabled}
33+
isLineNumbersVisible={props.showsLineNumbers}
34+
isMinimapVisible={props.isMinimapVisible}
35+
isUploadEnabled={props.isUploadEnabled}
36+
customControls={props.customControls}
37+
/* if no content is passed to code and isUploadEnabled is true, the editor will be display EmptyState */
38+
/>
39+
</>
3540
)
3641
}
3742
);

0 commit comments

Comments
 (0)