Skip to content

Commit e63a8b6

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

4 files changed

Lines changed: 92 additions & 75 deletions

File tree

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

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
import figma from '@figma/code-connect';
2-
import { CalendarMonth, Title } from '@patternfly/react-core';
2+
import { CalendarMonth, CalendarMonthInlineProps, Title } from '@patternfly/react-core';
33

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

615
figma.connect(
716
CalendarMonth,
@@ -11,12 +20,7 @@ figma.connect(
1120
date: '2025-06-16'
1221
},
1322
example: (props) => (
14-
<CalendarMonth
15-
date={props.date}
16-
inlineProps={{ component: 'article', ariaLabelledby: 'favorite-date' }}
17-
onChange={() => {}}
18-
onMonthChange={() => {}}
19-
/>
23+
<CalendarMonth date={props.date} inlineProps={inlineProps} onChange={() => {}} onMonthChange={() => {}} />
2024
)
2125
}
2226
);
@@ -27,22 +31,17 @@ figma.connect(
2731
{
2832
variant: { Type: 'With date range' },
2933
props: {
30-
rangeStart: new Date(2020, 10, 11),
31-
date: new Date(2020, 10, 24)
34+
startDate: new Date(2020, 10, 11),
35+
endDate: new Date(2020, 10, 24)
3236
},
3337
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-
</>
38+
<CalendarMonth
39+
date={props.startDate}
40+
inlineProps={inlineProps}
41+
onChange={() => {}}
42+
onMonthChange={() => {}}
43+
rangeStart={props.endDate}
44+
/>
4645
)
4746
}
4847
);

‎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: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ figma.connect(
88
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136830',
99
{
1010
props: {
11-
isDisabled: figma.enum('State', { Disabled: true })
11+
isDisabled: figma.enum('State', { Disabled: true }),
12+
isOpen: figma.enum('State', { Open: true })
1213
},
13-
example: (props) => <TimePicker isDisabled={props.isDisabled} onChange={() => {}} time="3:35 AM" />
14+
example: (props) => (
15+
<TimePicker isDisabled={props.isDisabled} isOpen={props.isOpen} onChange={() => {}} time="3:35 AM" />
16+
)
1417
}
1518
);
1619

@@ -19,6 +22,6 @@ figma.connect(
1922
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136830',
2023
{
2124
variant: { State: 'Invalid' },
22-
example: () => <TimePicker is24Hour minTime="9:30" maxTime="17:15" time="18:00" />
25+
example: () => <TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />
2326
}
2427
);

‎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={() => {}}

0 commit comments

Comments
 (0)