Skip to content

Commit 5c1c4b4

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-5): group review 5 updates
1 parent 02a3244 commit 5c1c4b4

File tree

7 files changed

+99
-96
lines changed

7 files changed

+99
-96
lines changed

‎packages/code-connect/components/DatePicker/CalendarMonth.figma.tsx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,27 @@ import figma from '@figma/code-connect';
22
import { CalendarMonth, Title } from '@patternfly/react-core';
33

44
// Documentation for CalendarMonth can be found at https://www.patternfly.org/components/calendar-month
5+
const sharedProps = {
6+
inlineProps: {
7+
component: 'article',
8+
title: (
9+
<Title headingLevel="h4" id="favorite-date">
10+
Select your favorite date
11+
</Title>
12+
)
13+
}
14+
};
515

616
figma.connect(
717
CalendarMonth,
818
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136846',
919
{
1020
props: {
21+
...sharedProps,
1122
date: '2025-06-16'
1223
},
1324
example: (props) => (
14-
<CalendarMonth
15-
date={props.date}
16-
inlineProps={{ component: 'article', ariaLabelledby: 'favorite-date' }}
17-
onChange={() => {}}
18-
onMonthChange={() => {}}
19-
/>
25+
<CalendarMonth date={props.date} inlineProps={props.inlineProps} onChange={() => {}} onMonthChange={() => {}} />
2026
)
2127
}
2228
);
@@ -25,24 +31,21 @@ figma.connect(
2531
CalendarMonth,
2632
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136846',
2733
{
28-
variant: { Type: 'With date range' },
2934
props: {
30-
rangeStart: new Date(2020, 10, 11),
31-
date: new Date(2020, 10, 24)
35+
...sharedProps,
36+
variant: { Type: 'With date range' },
37+
startDate: new Date(2020, 10, 11),
38+
endDate: new Date(2020, 10, 24)
3239
},
3340
example: (props) => (
34-
<>
35-
<Title headingLevel="h4" id="favorite-date">
36-
Select your favorite date
37-
</Title>
38-
<CalendarMonth
39-
date={props.date}
40-
inlineProps={{ component: 'article', ariaLabelledby: 'favorite-date' }}
41-
onChange={() => {}}
42-
onMonthChange={() => {}}
43-
rangeStart={props.rangeStart}
44-
/>
45-
</>
41+
<CalendarMonth
42+
date={props.endDate}
43+
inlineProps={props.inlineProps}
44+
aria-labelledby="favorite-date"
45+
onChange={() => {}}
46+
onMonthChange={() => {}}
47+
rangeStart={props.startDate}
48+
/>
4649
)
4750
}
4851
);

‎packages/code-connect/components/DatePicker/DateAndTimePicker.figma.tsx‎

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,64 +17,78 @@ import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-c
1717

1818
// Documentation for TimePicker can be found at https://www.patternfly.org/components/time-picker
1919

20-
const time = (
21-
<Dropdown
22-
onSelect={() => {}}
23-
isOpen={false}
24-
onOpenChange={() => {}}
25-
toggle={() => (
26-
<MenuToggle
27-
ref={null}
28-
onClick={() => {}}
29-
isExpanded={false}
30-
aria-label="Time picker"
31-
icon={<OutlinedClockIcon />}
32-
/>
33-
)}
34-
>
35-
<DropdownList>
36-
<DropdownItem value={0} key="action">
37-
Action
38-
</DropdownItem>
39-
<DropdownItem value={1} key="operation">
40-
Operation
41-
</DropdownItem>
42-
</DropdownList>
43-
</Dropdown>
44-
);
45-
46-
const calendarButton = (
47-
<Button variant="control" aria-label="Toggle the calendar" onClick={() => {}} icon={<OutlinedCalendarAltIcon />} />
48-
);
49-
50-
const calendar = <CalendarMonth date={new Date('2025-06-16')} onChange={() => {}} onMonthChange={() => {}} />;
20+
const sharedProps = {
21+
time: (
22+
<Dropdown
23+
onSelect={() => {}}
24+
isOpen={false}
25+
onOpenChange={() => {}}
26+
toggle={(toggleRef) => (
27+
<MenuToggle
28+
ref={toggleRef}
29+
onClick={() => {}}
30+
isExpanded={false}
31+
aria-label="Time picker"
32+
icon={<OutlinedClockIcon />}
33+
/>
34+
)}
35+
>
36+
<DropdownList>
37+
<DropdownItem value={0} key="action">
38+
Action
39+
</DropdownItem>
40+
<DropdownItem value={1} key="operation">
41+
Operation
42+
</DropdownItem>
43+
</DropdownList>
44+
</Dropdown>
45+
),
46+
calendarButton: (
47+
<Button variant="control" aria-label="Toggle the calendar" onClick={() => {}} icon={<OutlinedCalendarAltIcon />} />
48+
),
49+
calendar: <CalendarMonth date={new Date('2025-06-16')} onChange={() => {}} onMonthChange={() => {}} />
50+
};
5151

5252
figma.connect(
5353
TimePicker,
5454
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136824',
5555
{
5656
props: {
57+
...sharedProps,
5758
valueDate: 'MM-DD-YYYY',
5859
valueTime: 'HH:MM'
5960
},
60-
example: (props) => (
61-
<div style={{ width: '300px' }}>
62-
<Popover position="bottom" bodyContent={calendar} showClose={false} isVisible={false} hasNoPadding hasAutoWidth>
63-
<InputGroup>
64-
<InputGroupItem>
65-
<TextInput
66-
type="text"
67-
id="date-time"
68-
aria-label="date and time picker demo"
69-
value={props.valueDate + ' ' + props.valueTime}
70-
readOnlyVariant="default"
71-
/>
72-
</InputGroupItem>
73-
<InputGroupItem>{calendarButton}</InputGroupItem>
74-
<InputGroupItem>{time}</InputGroupItem>
75-
</InputGroup>
76-
</Popover>
77-
</div>
78-
)
61+
example: (props) => {
62+
const calendarButton = props.calendarButton;
63+
const calendar = props.calendar;
64+
const time = props.time;
65+
66+
return (
67+
<div style={{ width: '300px' }}>
68+
<Popover
69+
position="bottom"
70+
bodyContent={calendar}
71+
showClose={false}
72+
isVisible={false}
73+
hasNoPadding
74+
hasAutoWidth
75+
>
76+
<InputGroup>
77+
<InputGroupItem>
78+
<TextInput
79+
type="text"
80+
id="date-time"
81+
aria-label="date and time picker demo"
82+
value={props.valueDate + ' ' + props.valueTime}
83+
readOnlyVariant="default"
84+
/>
85+
</InputGroupItem>
86+
<InputGroupItem>{calendarButton}</InputGroupItem>
87+
<InputGroupItem>{time}</InputGroupItem>
88+
</InputGroup>
89+
</Popover>
90+
</div>
91+
);
92+
}
7993
}
8094
);

‎packages/code-connect/components/DatePicker/TimePicker.figma.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@ figma.connect(
1919
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136830',
2020
{
2121
variant: { State: 'Invalid' },
22-
example: () => <TimePicker is24Hour minTime="9:30" maxTime="17:15" time="18:00" />
22+
example: () => <TimePicker is24Hour minTime="9:30" maxTime="17:15" time="18:00" placeholder="14:00" />
2323
}
2424
);

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

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import figma from '@figma/code-connect';
2-
import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Button } from '@patternfly/react-core';
2+
import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
33
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
44

55
// TODO: DESIGN: Add Empty state footer
@@ -32,7 +32,7 @@ figma.connect(
3232
Info: 'info'
3333
}),
3434
variant: figma.enum('Size', {
35-
Basic: 'full',
35+
Basic: undefined,
3636
'Extra small': 'xs',
3737
Small: 'sm',
3838
Large: 'lg',
@@ -52,17 +52,7 @@ figma.connect(
5252
>
5353
<EmptyStateBody>{props.body}</EmptyStateBody>
5454
<EmptyStateFooter>
55-
<EmptyStateActions>
56-
<Button variant="primary">Primary action</Button>
57-
</EmptyStateActions>
58-
<EmptyStateActions>
59-
<Button variant="link">Multiple</Button>
60-
<Button variant="link">Action Buttons</Button>
61-
<Button variant="link">Can</Button>
62-
<Button variant="link">Go here</Button>
63-
<Button variant="link">In the secondary</Button>
64-
<Button variant="link">Action area</Button>
65-
</EmptyStateActions>
55+
<EmptyStateActions>{props.actions}</EmptyStateActions>
6656
</EmptyStateFooter>
6757
</EmptyState>
6858
)

‎packages/code-connect/components/FileUpload/SimpleFileUpload.figma.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ figma.connect(
2929

3030
// enum
3131
allowEditingUploadedText: figma.enum('State', { 'Uploaded + Editable': true }),
32-
isDragActive: figma.enum('State', {
33-
'Drag state': true,
34-
false: undefined
35-
}),
3632
isLoading: figma.enum('State', { 'In progress upload': true }),
3733
isValidated: figma.enum('State', {
3834
'Invalid upload': 'error',
@@ -49,7 +45,6 @@ figma.connect(
4945
browseButtonText="Upload"
5046
isLoading={props.isLoading}
5147
validated={props.isValidated}
52-
isDragActive={props.isDragActive}
5348
hideDefaultPreview={props.hideDefaultPreview}
5449
allowEditingUploadedText={props.allowEditingUploadedText}
5550
onFileInputChange={() => {}}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@ figma.connect(
5151
isOpen={false}
5252
onSelect={() => {}}
5353
onOpenChange={() => {}}
54-
toggle={() => (
54+
toggle={(toggleRef) => (
5555
<MenuToggle
56+
ref={toggleRef}
5657
aria-label="With title example kebab toggle"
5758
variant="plain"
5859
onClick={() => {}}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
"codeConnect": {
33
"parser": "react",
44
"include": [
5-
"components/Banner/*.tsx",
6-
"components/Brand/*.tsx",
7-
"components/Breadcrumbs/*.tsx",
8-
"components/CodeBlock/*.tsx",
9-
"components/CodeEditor/*.tsx"
5+
"components/DatePicker/*.tsx",
6+
"components/EmptyState/*.tsx",
7+
"components/FileUpload/*.tsx",
8+
"components/Hint/*.tsx",
9+
"components/InlineEdit/*.tsx"
1010
],
1111
"paths": {
1212
"src/components": "src/components"

0 commit comments

Comments
 (0)