Skip to content

Commit af3eefe

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-6): group review 9/23 updates
1 parent 4e8046b commit af3eefe

File tree

4 files changed

+222
-41
lines changed

4 files changed

+222
-41
lines changed

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

Lines changed: 194 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,170 @@ import { Label, LabelGroup } from '@patternfly/react-core';
33

44
// Documentation for LabelGroups can be found at https://www.patternfly.org/components/label
55

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+
6161
figma.connect(
7162
LabelGroup,
8-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-1075',
163+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
9164
{
10165
props: {
166+
...sharedProps,
11167
// boolean
12168
numLabels: figma.boolean('Has collapsed labels', {
13-
true: 4,
169+
true: 6,
14170
false: undefined
15171
}),
16172

@@ -21,17 +177,43 @@ figma.connect(
21177
Add label
22178
</Label>
23179
)
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
24207
}),
25208

26-
children: figma.children([
27-
'Label in group 1',
28-
'Label in group 2',
29-
'Label in group 3',
30-
'Label in group 4',
31-
'Label in group 5',
32-
'Label in group 6',
33-
'Label Non-status'
34-
])
209+
// enum
210+
addLabelControl: figma.enum('Type', {
211+
'Label management': (
212+
<Label variant="add" onClick={() => {}}>
213+
Add label
214+
</Label>
215+
)
216+
})
35217
},
36218
example: (props) => (
37219
<LabelGroup
@@ -41,7 +223,7 @@ figma.connect(
41223
numLabels={props.numLabels}
42224
onClick={() => {}}
43225
>
44-
{props.children}
226+
{props.editableLabels}
45227
</LabelGroup>
46228
)
47229
}

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

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11
import figma from '@figma/code-connect';
2-
import { Label } from '@patternfly/react-core';
2+
import { Badge, Label } from '@patternfly/react-core';
33

44
// TODO: DESIGN: Reconfigure how numlabels is set. Currently, the text string "more" is not customizable
55
// TODO: DESIGN: Label group should contain label components
66

77
// NOTE: "Label overflow" doesn't appear to be necessary
88
// Documentation for Label can be found at https://www.patternfly.org/components/label-group
99

10-
figma.connect(
11-
Label,
12-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-1067',
13-
{
14-
props: {
15-
labelText: figma.string('Label text'),
16-
isCloseable: figma.boolean('Has Close button', {
17-
true: `{() => {}}`,
18-
false: undefined
19-
})
20-
},
21-
example: (props) => <Label onClose={props.isCloseable}>{props.labelText}</Label>
22-
}
23-
);
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+
});

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

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/code-connect/figma.config.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,19 @@
22
"codeConnect": {
33
"parser": "react",
44
"include": [
5-
"components/Masthead/*.figma.tsx"
5+
"components/JumpLinks/*.figma.tsx",
6+
"components/Label/*.figma.tsx",
7+
"components/LoginPage/*.figma.tsx",
8+
"components/Masthead/*.figma.tsx",
9+
"components/Model/*.figma.tsx"
610
],
711
"paths": {
812
"@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",
913
"@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src"
1014
},
15+
"documentUrlSubstitutions": {
16+
"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
17+
},
1118
"aliases": {
1219
"@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",
1320
"@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src"

0 commit comments

Comments
 (0)