Skip to content

Commit d316364

Browse files
mattnoltingmattnolting
authored
feat(CC-batch-6): added batch 6 (#11868)
* feat(CC-batch-6): added batch 6 components * update * feat(CC-batch-6): updated required props * feat(CC-batch-6): verification complete * feat(CC-batch-6): review-athon round 1 followup * feat(CC-batch-6): group review 6 updates * feat(CC-batch-6): removed isEditable from label group * feat(CC-batch-6): @kmcfaul review 7 updates * feat(CC-batch-6): @kmcfaul review 7 updates * feat(CC-batch-6): review 7 updated modal onClose() * feat(CC-batch-6): group review 9/23 updates
1 parent 6d6f85b commit d316364

14 files changed

+788
-9
lines changed

‎packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import figma from '@figma/code-connect';
2+
import { JumpLinksItem } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: FIGMA: Remove icons, help popup, and close button
5+
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
6+
7+
figma.connect(
8+
JumpLinksItem,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5286-5330',
10+
{
11+
props: {
12+
// string
13+
tabText: figma.string('Tab Text'),
14+
15+
// enum
16+
isActive: figma.enum('State', { Selected: true })
17+
},
18+
example: (props) => (
19+
<JumpLinksItem href="#" isActive={props.isActive}>
20+
{props.tabText}
21+
</JumpLinksItem>
22+
)
23+
}
24+
);

‎packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import figma from '@figma/code-connect';
2+
import { JumpLinksItem } from '@patternfly/react-core';
3+
4+
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
5+
6+
figma.connect(
7+
JumpLinksItem,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8306',
9+
{
10+
props: {
11+
// string
12+
tabText: figma.string('Tab Text'),
13+
14+
// enum
15+
isActive: figma.enum('State', { Selected: true })
16+
},
17+
example: (props) => (
18+
<JumpLinksItem href="#" isActive={props.isActive}>
19+
{props.tabText}
20+
</JumpLinksItem>
21+
)
22+
}
23+
);

‎packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import figma from '@figma/code-connect';
2+
import { JumpLinks } from '@patternfly/react-core';
3+
4+
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
5+
6+
figma.connect(
7+
JumpLinks,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8644-150823',
9+
{
10+
props: {
11+
// boolean
12+
label: figma.boolean('Show label', {
13+
true: 'Jump to section',
14+
false: undefined
15+
}),
16+
17+
children: figma.children('*')
18+
},
19+
example: (props) => (
20+
<JumpLinks aria-label={props.label} label={props.label}>
21+
{props.children}
22+
</JumpLinks>
23+
)
24+
}
25+
);

‎packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import figma from '@figma/code-connect';
2+
import { JumpLinks } from '@patternfly/react-core';
3+
4+
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
5+
6+
figma.connect(
7+
JumpLinks,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8542',
9+
{
10+
props: {
11+
// boolean
12+
label: figma.boolean('Show Label', {
13+
true: 'Jump to section',
14+
false: undefined
15+
}),
16+
17+
children: figma.children('*')
18+
},
19+
example: (props) => (
20+
<JumpLinks aria-label={props.label} isVertical label={props.label}>
21+
{props.children}
22+
</JumpLinks>
23+
)
24+
}
25+
);

‎packages/code-connect/components/Label/LabelGroups.figma.tsx‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
import figma from '@figma/code-connect';
2+
import { Label, LabelGroup } from '@patternfly/react-core';
3+
4+
// Documentation for LabelGroups can be found at https://www.patternfly.org/components/label
5+
6+
const sharedProps = {
7+
closableLabels: (
8+
<>
9+
<Label onClose={() => {}}>Label</Label>
10+
<Label onClose={() => {}}>Label</Label>
11+
<Label onClose={() => {}}>Label</Label>
12+
<Label onClose={() => {}}>Label</Label>
13+
<Label onClose={() => {}}>Label</Label>
14+
<Label onClose={() => {}}>Label</Label>
15+
<Label onClose={() => {}}>Label</Label>
16+
<Label onClose={() => {}}>Label</Label>
17+
<Label onClose={() => {}}>Label</Label>
18+
</>
19+
),
20+
editableLabels: (
21+
<>
22+
<Label
23+
color="grey"
24+
isCompact
25+
onClose={() => {}}
26+
closeBtnAriaLabel="Custom close button for compact editable label"
27+
onEditCancel={() => {}}
28+
onEditComplete={() => {}}
29+
isEditable
30+
editableProps={{
31+
'aria-label': `Editable compact label with text`,
32+
id: 'compact-editable-label1'
33+
}}
34+
>
35+
Label
36+
</Label>
37+
<Label
38+
color="grey"
39+
isCompact
40+
onClose={() => {}}
41+
closeBtnAriaLabel="Custom close button for compact editable label"
42+
onEditCancel={() => {}}
43+
onEditComplete={() => {}}
44+
isEditable
45+
editableProps={{
46+
'aria-label': `Editable compact label with text`,
47+
id: 'compact-editable-label1'
48+
}}
49+
>
50+
Label
51+
</Label>
52+
<Label
53+
color="grey"
54+
isCompact
55+
onClose={() => {}}
56+
closeBtnAriaLabel="Custom close button for compact editable label"
57+
onEditCancel={() => {}}
58+
onEditComplete={() => {}}
59+
isEditable
60+
editableProps={{
61+
'aria-label': `Editable compact label with text`,
62+
id: 'compact-editable-label2'
63+
}}
64+
>
65+
Label
66+
</Label>
67+
<Label
68+
color="grey"
69+
isCompact
70+
onClose={() => {}}
71+
closeBtnAriaLabel="Custom close button for compact editable label"
72+
onEditCancel={() => {}}
73+
onEditComplete={() => {}}
74+
isEditable
75+
editableProps={{
76+
'aria-label': `Editable compact label with text`,
77+
id: 'compact-editable-label3'
78+
}}
79+
>
80+
Label
81+
</Label>
82+
<Label
83+
color="grey"
84+
isCompact
85+
onClose={() => {}}
86+
closeBtnAriaLabel="Custom close button for compact editable label"
87+
onEditCancel={() => {}}
88+
onEditComplete={() => {}}
89+
isEditable
90+
editableProps={{
91+
'aria-label': `Editable compact label with text`,
92+
id: 'compact-editable-label4'
93+
}}
94+
>
95+
Label
96+
</Label>
97+
<Label
98+
color="grey"
99+
isCompact
100+
onClose={() => {}}
101+
closeBtnAriaLabel="Custom close button for compact editable label"
102+
onEditCancel={() => {}}
103+
onEditComplete={() => {}}
104+
isEditable
105+
editableProps={{
106+
'aria-label': `Editable compact label with text`,
107+
id: 'compact-editable-label5'
108+
}}
109+
>
110+
Label
111+
</Label>
112+
<Label
113+
color="grey"
114+
isCompact
115+
onClose={() => {}}
116+
closeBtnAriaLabel="Custom close button for compact editable label"
117+
onEditCancel={() => {}}
118+
onEditComplete={() => {}}
119+
isEditable
120+
editableProps={{
121+
'aria-label': `Editable compact label with text`,
122+
id: 'compact-editable-label6'
123+
}}
124+
>
125+
Label
126+
</Label>
127+
<Label
128+
color="grey"
129+
isCompact
130+
onClose={() => {}}
131+
closeBtnAriaLabel="Custom close button for compact editable label"
132+
onEditCancel={() => {}}
133+
onEditComplete={() => {}}
134+
isEditable
135+
editableProps={{
136+
'aria-label': `Editable compact label with text`,
137+
id: 'compact-editable-label7'
138+
}}
139+
>
140+
Label
141+
</Label>
142+
<Label
143+
color="grey"
144+
isCompact
145+
onClose={() => {}}
146+
closeBtnAriaLabel="Custom close button for compact editable label"
147+
onEditCancel={() => {}}
148+
onEditComplete={() => {}}
149+
isEditable
150+
editableProps={{
151+
'aria-label': `Editable compact label with text`,
152+
id: 'compact-editable-label8'
153+
}}
154+
>
155+
Label
156+
</Label>
157+
</>
158+
)
159+
};
160+
161+
figma.connect(
162+
LabelGroup,
163+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
164+
{
165+
props: {
166+
...sharedProps,
167+
// boolean
168+
numLabels: figma.boolean('Has collapsed labels', {
169+
true: 6,
170+
false: undefined
171+
}),
172+
173+
// enum
174+
addLabelControl: figma.enum('Type', {
175+
'Label management': (
176+
<Label variant="add" onClick={() => {}}>
177+
Add label
178+
</Label>
179+
)
180+
})
181+
},
182+
example: (props) => (
183+
<LabelGroup
184+
addLabelControl={props.addLabelControl}
185+
categoryName="Group label"
186+
isClosable
187+
numLabels={props.numLabels}
188+
onClick={() => {}}
189+
>
190+
{props.closableLabels}
191+
</LabelGroup>
192+
)
193+
}
194+
);
195+
196+
figma.connect(
197+
LabelGroup,
198+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
199+
{
200+
variant: { Type: 'Label management' },
201+
props: {
202+
...sharedProps,
203+
// boolean
204+
numLabels: figma.boolean('Has collapsed labels', {
205+
true: 6,
206+
false: undefined
207+
}),
208+
209+
// enum
210+
addLabelControl: figma.enum('Type', {
211+
'Label management': (
212+
<Label variant="add" onClick={() => {}}>
213+
Add label
214+
</Label>
215+
)
216+
})
217+
},
218+
example: (props) => (
219+
<LabelGroup
220+
addLabelControl={props.addLabelControl}
221+
categoryName="Group label"
222+
isClosable
223+
numLabels={props.numLabels}
224+
onClick={() => {}}
225+
>
226+
{props.editableLabels}
227+
</LabelGroup>
228+
)
229+
}
230+
);

‎packages/code-connect/components/Label/LabelInGroup.figma.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import figma from '@figma/code-connect';
2+
import { Badge, Label } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: Reconfigure how numlabels is set. Currently, the text string "more" is not customizable
5+
// TODO: DESIGN: Label group should contain label components
6+
7+
// NOTE: "Label overflow" doesn't appear to be necessary
8+
// Documentation for Label can be found at https://www.patternfly.org/components/label-group
9+
10+
figma.connect(Label, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1067', {
11+
props: {
12+
labelText: figma.string('Label text'),
13+
isCloseable: figma.boolean('Has Close button', {
14+
true: `{() => {}}`,
15+
false: undefined
16+
}),
17+
badge: figma.boolean('Has counter', {
18+
true: <Badge>06</Badge>,
19+
false: undefined
20+
})
21+
},
22+
example: (props) => (
23+
<Label onClose={props.isCloseable}>
24+
{props.labelText}
25+
{props.badge}
26+
</Label>
27+
)
28+
});

0 commit comments

Comments
 (0)