Skip to content

Commit 7a5d71d

Browse files
mattnoltingmattnolting
authored
feat(CC-batch-5): added batch 5 (#11867)
* feat(CC-batch-5): added batch 5 components * feat(CC-batch-5): updated required props * feat(CC-batch-5): verification complete * feat(CC-batch-5): review-athon round 1 followup * feat(CC-batch-5): removed expandable section * feat(CC-batch-5): updated DatePicker config * feat(CC-batch-5): review-athon 3 followup * feat(CC-batch-5): review-athon 3 updated cal month * feat(CC-batch-5): pulled updates from all components * feat(CC-batch-5): group review 4 followup * feat(CC-batch-5): group review 5 updates * feat(CC-batch-5): updated empty state button set
1 parent 4e706ac commit 7a5d71d

14 files changed

+629
-5
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import figma from '@figma/code-connect';
2+
import { CalendarMonth } from '@patternfly/react-core';
3+
4+
// Documentation for CalendarMonth can be found at https://www.patternfly.org/components/calendar-month
5+
6+
figma.connect(
7+
CalendarMonth,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7741-2677',
9+
{
10+
props: {
11+
date: '2025-06-16'
12+
},
13+
example: (props) => <CalendarMonth date={new Date(props.date)} onChange={() => {}} onMonthChange={() => {}} />
14+
}
15+
);

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import figma from '@figma/code-connect';
2+
import { CalendarMonth, Title } from '@patternfly/react-core';
3+
4+
// 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+
};
15+
16+
figma.connect(
17+
CalendarMonth,
18+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136846',
19+
{
20+
props: {
21+
...sharedProps,
22+
date: '2025-06-16'
23+
},
24+
example: (props) => (
25+
<CalendarMonth date={props.date} inlineProps={props.inlineProps} onChange={() => {}} onMonthChange={() => {}} />
26+
)
27+
}
28+
);
29+
30+
figma.connect(
31+
CalendarMonth,
32+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136846',
33+
{
34+
props: {
35+
...sharedProps,
36+
variant: { Type: 'With date range' },
37+
startDate: new Date(2020, 10, 11),
38+
endDate: new Date(2020, 10, 24)
39+
},
40+
example: (props) => (
41+
<CalendarMonth
42+
date={props.endDate}
43+
inlineProps={props.inlineProps}
44+
aria-labelledby="favorite-date"
45+
onChange={() => {}}
46+
onMonthChange={() => {}}
47+
rangeStart={props.startDate}
48+
/>
49+
)
50+
}
51+
);

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
Button,
4+
CalendarMonth,
5+
Dropdown,
6+
DropdownItem,
7+
DropdownList,
8+
InputGroup,
9+
InputGroupItem,
10+
MenuToggle,
11+
Popover,
12+
TextInput,
13+
TimePicker
14+
} from '@patternfly/react-core';
15+
import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
16+
import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
17+
18+
// Documentation for TimePicker can be found at https://www.patternfly.org/components/time-picker
19+
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+
};
51+
52+
figma.connect(
53+
TimePicker,
54+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136824',
55+
{
56+
props: {
57+
...sharedProps,
58+
valueDate: 'MM-DD-YYYY',
59+
valueTime: 'HH:MM'
60+
},
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+
}
93+
}
94+
);

‎packages/code-connect/components/DatePicker/DatePicker.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 { DatePicker } from '@patternfly/react-core';
3+
4+
// Documentation for DatePicker can be found at https://www.patternfly.org/components/date-picker
5+
6+
figma.connect(
7+
DatePicker,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958:136841',
9+
{
10+
example: () => (
11+
<DatePicker
12+
// eslint-disable-next-line no-console
13+
onBlur={(_event, str, date) => console.log('onBlur', str, date)}
14+
// eslint-disable-next-line no-console
15+
onChange={(_event, str, date) => console.log('onChange', str, date)}
16+
/>
17+
)
18+
}
19+
);
20+
21+
figma.connect(
22+
DatePicker,
23+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958:136841',
24+
{
25+
variant: { State: 'Invalid' },
26+
example: () => <DatePicker requiredDateOptions={{ isRequired: true, emptyDateText: 'Date is required' }} />
27+
}
28+
);

‎packages/code-connect/components/DatePicker/TimePicker.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 { TimePicker } from '@patternfly/react-core';
3+
4+
// Documentation for TimePicker can be found at https://www.patternfly.org/components/time-picker
5+
6+
figma.connect(
7+
TimePicker,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136830',
9+
{
10+
props: {
11+
isDisabled: figma.enum('State', { Disabled: true })
12+
},
13+
example: (props) => <TimePicker isDisabled={props.isDisabled} onChange={() => {}} time="3:35 AM" />
14+
}
15+
);
16+
17+
figma.connect(
18+
TimePicker,
19+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136830',
20+
{
21+
variant: { State: 'Invalid' },
22+
example: () => <TimePicker is24Hour minTime="9:30" maxTime="17:15" time="18:00" placeholder="14:00" />
23+
}
24+
);

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import figma from '@figma/code-connect';
2+
import { TimePicker } from '@patternfly/react-core';
3+
4+
// Documentation for TimePicker can be found at https://www.patternfly.org/components/time-picker
5+
6+
figma.connect(
7+
TimePicker,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136828',
9+
{
10+
example: () => <TimePicker time="3:35 AM" onChange={() => {}} />
11+
}
12+
);

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import figma from '@figma/code-connect';
2+
import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
3+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
4+
5+
// TODO: DESIGN: Add Empty state footer
6+
// TODO: DESIGN: Consolodate empty state examples
7+
// TODO: DESIGN: Add empty state footer
8+
// TODO: DESIGN: Add empty state actions
9+
// TODO: DESIGN: Add empty state icon
10+
// TODO: DESIGN: Add empty state title
11+
// TODO: DESIGN: Add empty state body
12+
// TODO: DESIGN: Add empty state variant
13+
// TODO: DESIGN: Add empty state status
14+
// Based on Code Connect's limitations, this component needs to be overhauled. Using the base component approach present in
15+
// other components would significantly reduce complexity.
16+
17+
figma.connect(
18+
EmptyState,
19+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7896-37441',
20+
{
21+
props: {
22+
// string
23+
body: figma.string('Body text'),
24+
title: figma.string('Header text'),
25+
26+
// enum
27+
status: figma.enum('Type', {
28+
Custom: 'custom',
29+
Warning: 'warning',
30+
Success: 'success',
31+
Danger: 'danger',
32+
Info: 'info'
33+
}),
34+
variant: figma.enum('Size', {
35+
Basic: undefined,
36+
'Extra small': 'xs',
37+
Small: 'sm',
38+
Large: 'lg',
39+
'Extra large': 'xl'
40+
}),
41+
42+
actions: figma.children('Empty state footer')
43+
},
44+
example: (props) => (
45+
<EmptyState
46+
// this may need to be updated for accessibility
47+
headingLevel="h4"
48+
icon={<PlusCircleIcon />}
49+
variant={props.variant}
50+
status={props.status}
51+
titleText={props.title}
52+
>
53+
<EmptyStateBody>{props.body}</EmptyStateBody>
54+
<EmptyStateFooter>
55+
<EmptyStateActions>
56+
<EmptyStateActions>
57+
<Button variant="primary">Primary action</Button>
58+
</EmptyStateActions>
59+
<EmptyStateActions>
60+
<Button variant="link">Multiple</Button>
61+
<Button variant="link">Action Buttons</Button>
62+
<Button variant="link">Can</Button>
63+
<Button variant="link">Go here</Button>
64+
<Button variant="link">In the secondary</Button>
65+
<Button variant="link">Action area</Button>
66+
</EmptyStateActions>
67+
</EmptyStateActions>
68+
</EmptyStateFooter>
69+
</EmptyState>
70+
)
71+
}
72+
);

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
FileUpload,
4+
MultipleFileUpload,
5+
MultipleFileUploadMain,
6+
MultipleFileUploadStatus,
7+
MultipleFileUploadStatusItem
8+
} from '@patternfly/react-core';
9+
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
10+
11+
// TODO: DESIGN: Add status toggle text
12+
// TODO: DESIGN: Add status toggle icon
13+
// TODO: DESIGN: Add text separator
14+
// TODO: DESIGN: Add info text
15+
// TODO: DESIGN: Add status toggle text
16+
// TODO: DESIGN: Add status toggle icon
17+
18+
figma.connect(
19+
FileUpload,
20+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96128',
21+
{
22+
props: {
23+
// static
24+
titleText: 'Drag and drop files here',
25+
titleTextSeparator: 'or',
26+
infoText: 'Accepted file types: JPEG, Doc, PDF, PNG',
27+
28+
// enum
29+
isHorizontal: figma.enum('Layout', { Horizontal: true }),
30+
31+
children: figma.children('*')
32+
},
33+
example: (props) => (
34+
// Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload
35+
<MultipleFileUpload
36+
dropzoneProps={{
37+
accept: {
38+
'image/jpeg': ['.jpg', '.jpeg'],
39+
'application/msword': ['.doc'],
40+
'application/pdf': ['.pdf'],
41+
'image/png': ['.png']
42+
}
43+
}}
44+
isHorizontal={props.isHorizontal}
45+
onFileDrop={() => {}}
46+
>
47+
<MultipleFileUploadMain
48+
infoText={props.infoText}
49+
titleIcon={<UploadIcon />}
50+
titleText={props.titleText}
51+
titleTextSeparator={props.titleTextSeparator}
52+
/>
53+
54+
<MultipleFileUploadStatus
55+
aria-label="Current uploads"
56+
statusToggleIcon="StatusToggleIcon"
57+
statusToggleText="Status toggle text"
58+
>
59+
<MultipleFileUploadStatusItem
60+
file="file-upload-file"
61+
key="file-upload-key"
62+
onClearClick={() => {}}
63+
onReadSuccess={() => {}}
64+
onReadFail={() => {}}
65+
/>
66+
</MultipleFileUploadStatus>
67+
</MultipleFileUpload>
68+
)
69+
}
70+
);

0 commit comments

Comments
 (0)