From a6dfc02778daae44c29a3cf7895697384a11818e Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 12 Jun 2025 19:33:01 -0400 Subject: [PATCH 1/5] feat(CC-batch-7): added batch 7 comps --- .../NotificationDrawer.figma.tsx | 24 +++++++ .../NotificationDrawerGroups.figma.tsx | 32 +++++++++ .../NotificationDrawerHeader.figma.tsx | 24 +++++++ .../NotificationDrawerItem.figma.tsx | 39 +++++++++++ .../Pagination/Pagination.figma.tsx | 32 +++++++++ .../components/PopOver/Popover.figma.tsx | 69 +++++++++++++++++++ .../SimpleList/SimpleList.figma.tsx | 16 +++++ .../SimpleList/SimpleListGroup.figma.tsx | 16 +++++ .../SimpleList/SimpleListItem.figma.tsx | 28 ++++++++ .../components/Skeleton/Skeleton.figma.tsx | 28 ++++++++ 10 files changed, 308 insertions(+) create mode 100644 packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx create mode 100644 packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx create mode 100644 packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx create mode 100644 packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx create mode 100644 packages/code-connect/components/Pagination/Pagination.figma.tsx create mode 100644 packages/code-connect/components/PopOver/Popover.figma.tsx create mode 100644 packages/code-connect/components/SimpleList/SimpleList.figma.tsx create mode 100644 packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx create mode 100644 packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx create mode 100644 packages/code-connect/components/Skeleton/Skeleton.figma.tsx diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx new file mode 100644 index 00000000000..2b21b0d6851 --- /dev/null +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx @@ -0,0 +1,24 @@ +import figma from '@figma/code-connect'; +import { NotificationDrawer, NotificationDrawerBody, NotificationDrawerList } from '@patternfly/react-core'; + +figma.connect( + NotificationDrawer, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015', + { + props: { + notificationDrawerHeader: figma.children('Notification drawer header'), + notificationDrawerGroup: figma.children('Notification drawer group'), + notificationDrawerNotifications: figma.children(['Notifications', 'Notification drawer item']) + }, + example: (props) => ( + // Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer + + {props.notificationDrawerHeader} + + {props.notificationDrawerGroup} + {props.notificationDrawerNotifications} + + + ) + } +); diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx new file mode 100644 index 00000000000..b9c1a57ed9d --- /dev/null +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx @@ -0,0 +1,32 @@ +import figma from '@figma/code-connect'; +import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/react-core'; + +// TODO: FIGMA: Split unread count into a separate prop + +figma.connect( + NotificationDrawerGroup, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3172-18190&m=dev', + { + props: { + showUnreadCount: figma.boolean('Has count', { + true: 3, + false: NaN + }), + headingText: figma.string('Group title'), + isExpanded: figma.enum('Type', { + Collapsed: false, + Expanded: true + }), + hasCount: figma.boolean('Has count', { + true: figma.children('Badge'), + false: undefined + }), + children: figma.children('*') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx new file mode 100644 index 00000000000..a22b8207a25 --- /dev/null +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx @@ -0,0 +1,24 @@ +import { NotificationDrawerHeader } from '@patternfly/react-core'; +import figma from '@figma/code-connect'; + +figma.connect( + NotificationDrawerHeader, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev', + { + props: { + showUnreadCount: figma.boolean('Show unread count', { + true: 3, + false: NaN + }), + hasActionsMenu: figma.boolean('Has actions menu'), + unreadCount: figma.string('Unread count'), + headingText: figma.string('Heading text'), + children: figma.children('*') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx new file mode 100644 index 00000000000..92105425cba --- /dev/null +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -0,0 +1,39 @@ +import figma from '@figma/code-connect'; +import { + NotificationDrawerListItem, + NotificationDrawerListItemBody, + NotificationDrawerListItemHeader +} from '@patternfly/react-core'; + +figma.connect( + NotificationDrawerListItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861&m=dev', + { + props: { + isRead: figma.enum('Type', { + Unread: false, + Read: true + }), + isHoverable: figma.enum('State', { + Default: false, + Hover: true + }), + status: figma.enum('Status', { + Info: 'info', + Success: 'success', + Warning: 'warning', + Danger: 'danger' + }), + alertTitle: figma.children('Alert title'), + alertDescription: figma.children('Description') + }, + example: (props) => ( + + + {props.alertTitle} + + {props.alertDescription} + + ) + } +); diff --git a/packages/code-connect/components/Pagination/Pagination.figma.tsx b/packages/code-connect/components/Pagination/Pagination.figma.tsx new file mode 100644 index 00000000000..1b6cb39f546 --- /dev/null +++ b/packages/code-connect/components/Pagination/Pagination.figma.tsx @@ -0,0 +1,32 @@ +import figma from '@figma/code-connect'; +import { Pagination } from '@patternfly/react-core'; + +// TODO: Split perPage and Page into separate properties + +figma.connect( + Pagination, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5047-695', + { + props: { + // enum + isExpanded: figma.enum('Menu', { Open: true, Closed: false }), + isCompact: figma.enum('Type', { Compact: true, Closed: false }), + + // nested + pageQuantity: figma.nestedProps('Page quantity selector', { + itemCount: figma.string('Total quantity'), + state: figma.enum('State', { Disabled: true }) + }) + }, + example: (props) => ( + // Documentation for Pagination can be found at https://www.patternfly.org/components/pagination + + ) + } +); diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx new file mode 100644 index 00000000000..be1b7a05e2c --- /dev/null +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -0,0 +1,69 @@ +import figma from '@figma/code-connect'; +import { Popover } from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; + +// TODO: FIGMA: Add buttons boolean to footerContent +// TODO: REACT: Add iconWrapper support + +figma.connect( + Popover, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5857-2066', + { + props: { + // hasFooter: figma.boolean('Has footer', {}), + bodyContent: figma.string('Popover description'), + headerContent: figma.string('Popover Heading'), + footerContent: figma.boolean('Has footer', { + true: figma.string('Popover footer'), + false: undefined + }), + status: figma.enum('Status', { + Default: { + state: undefined, + icon: undefined + }, + Success: { + state: 'success', + icon: + }, + Info: { + state: 'info', + icon: + }, + Warning: { + state: 'warning', + icon: + }, + Danger: { + state: 'danger', + icon: + } + }), + position: figma.enum('Position', { + 'Top-left': 'top-start', + 'Top-middle': 'top', + 'Top-right': 'top-end', + 'Bottom-left': 'bottom-start', + 'Bottom-middle': 'bottom', + 'Bottom-right': 'bottom-end' + }), + + children: figma.children('*') + }, + example: (props) => ( + // Documentation for Popover can be found at https://www.patternfly.org/components/popover + + ) + } +); diff --git a/packages/code-connect/components/SimpleList/SimpleList.figma.tsx b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx new file mode 100644 index 00000000000..e8a2298850a --- /dev/null +++ b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx @@ -0,0 +1,16 @@ +import figma from '@figma/code-connect'; +import { SimpleList } from '@patternfly/react-core'; + +figma.connect( + SimpleList, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691', + { + props: { + children: figma.children(['Simple list group', 'Simple list item']) + }, + example: (props) => ( + // Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list + {props.children} + ) + } +); diff --git a/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx new file mode 100644 index 00000000000..30384474126 --- /dev/null +++ b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx @@ -0,0 +1,16 @@ +import figma from '@figma/code-connect'; +import { SimpleListGroup } from '@patternfly/react-core'; + +figma.connect( + SimpleListGroup, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20708', + { + props: { + children: figma.children('*') + }, + example: (props) => ( + // Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list + {props.children} + ) + } +); diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx new file mode 100644 index 00000000000..8d75d2edbd2 --- /dev/null +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -0,0 +1,28 @@ +import figma from '@figma/code-connect'; +import { SimpleListItem } from '@patternfly/react-core'; + +figma.connect( + SimpleListItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20664', + { + props: { + text: figma.string('Text'), + state: figma.enum('State', { + Default: 'default', + 'Hover - Light': 'hover---light', + 'Hover - Dark': 'hover---dark', + 'Selected - Light': 'selected---light', + 'Selected - Dark': 'selected---dark', + Disabled: 'disabled' + }), + type: figma.enum('Type', { + Default: 'default', + Link: 'link' + }) + }, + example: (props) => ( + // Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list + {props.text} + ) + } +); diff --git a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx new file mode 100644 index 00000000000..9738eef1307 --- /dev/null +++ b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx @@ -0,0 +1,28 @@ +import figma from '@figma/code-connect'; +import { Skeleton } from '@patternfly/react-core'; + +figma.connect( + Skeleton, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288', + { + props: { + size: figma.enum('Size', { + S: 'sm', + M: 'md', + L: 'lg', + XL: 'xl', + '2XL': '2xl', + '3XL': '3xl', + '4XL': '4xl' + }), + type: figma.enum('Type', { + Rectangle: 'square', + Circle: 'circle' + }) + }, + example: (props) => ( + // Documentation for Skeleton can be found at https://www.patternfly.org/components/skeleton + + ) + } +); From fb7df1a5e0c810bb944dbf0dfe5f785593d71b0b Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 17 Jun 2025 09:25:09 -0400 Subject: [PATCH 2/5] feat(CC-batch-7): updated required props --- packages/code-connect/components/PopOver/Popover.figma.tsx | 4 ++-- .../components/SimpleList/SimpleListItem.figma.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx index be1b7a05e2c..bfc8729d189 100644 --- a/packages/code-connect/components/PopOver/Popover.figma.tsx +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -6,7 +6,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; // TODO: FIGMA: Add buttons boolean to footerContent -// TODO: REACT: Add iconWrapper support +// TODO: REACT: Add icon support figma.connect( Popover, @@ -62,7 +62,7 @@ figma.connect( footerContent={props.footerContent} position={props.position} headerIcon={props.status.icon} - alertSeverityVariant={props.status.state} + alertSeverityVariant={props.status.state as any} /> ) } diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index 8d75d2edbd2..5f82b7d1072 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -8,7 +8,7 @@ figma.connect( props: { text: figma.string('Text'), state: figma.enum('State', { - Default: 'default', + Default: undefined, 'Hover - Light': 'hover---light', 'Hover - Dark': 'hover---dark', 'Selected - Light': 'selected---light', @@ -16,7 +16,7 @@ figma.connect( Disabled: 'disabled' }), type: figma.enum('Type', { - Default: 'default', + Default: undefined, Link: 'link' }) }, From beb486ff630183a4ecc84a384be26d744d19df51 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 24 Jun 2025 11:20:20 -0400 Subject: [PATCH 3/5] feat(CC-batch-7): verification complete --- .../NotificationDrawerHeader.figma.tsx | 55 ++++++++++-- .../NotificationDrawerItem.figma.tsx | 83 +++++++++++++++---- .../Pagination/Pagination.figma.tsx | 2 +- .../components/PopOver/Popover.figma.tsx | 15 ++-- .../SimpleList/ListHeading.figma.tsx | 21 +++++ .../SimpleList/SimpleList.figma.tsx | 7 +- .../SimpleList/SimpleListGroup.figma.tsx | 7 +- .../SimpleList/SimpleListItem.figma.tsx | 7 +- .../components/Skeleton/Skeleton.figma.tsx | 7 +- 9 files changed, 157 insertions(+), 47 deletions(-) create mode 100644 packages/code-connect/components/SimpleList/ListHeading.figma.tsx diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx index a22b8207a25..715e2814bbb 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx @@ -1,23 +1,62 @@ -import { NotificationDrawerHeader } from '@patternfly/react-core'; import figma from '@figma/code-connect'; +import { Dropdown, DropdownItem, DropdownList, MenuToggle, NotificationDrawerHeader } from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/icons/ellipsis-v-icon/dist/esm/icons/ellipsis-v-icon'; figma.connect( NotificationDrawerHeader, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev', { props: { + // string + headingText: figma.string('Heading text'), + + // boolean + hasActionsMenu: figma.boolean('Has actions menu', { + true: { + dropdown: ( + {}} + isOpen={false} + onOpenChange={() => {}} + popperProps={{ position: 'right' }} + toggle={() => ( + {}} + isExpanded={false} + onClick={() => {}} + variant="plain" + aria-label={`Basic example header kebab toggle`} + icon={} + /> + )} + > + + Item 1 + Item 2 + Item 3 + + + ), + onClose: () => {} + }, + false: { + dropdown: undefined, + onClose: undefined + } + }), showUnreadCount: figma.boolean('Show unread count', { true: 3, false: NaN - }), - hasActionsMenu: figma.boolean('Has actions menu'), - unreadCount: figma.string('Unread count'), - headingText: figma.string('Heading text'), - children: figma.children('*') + }) }, example: (props) => ( - - {props.children} + + {props.hasActionsMenu.dropdown} ) } diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx index 92105425cba..fc9e69e9fde 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -1,38 +1,87 @@ import figma from '@figma/code-connect'; import { + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, NotificationDrawerListItem, NotificationDrawerListItemBody, - NotificationDrawerListItemHeader + NotificationDrawerListItemHeader, + Timestamp } from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + +// Documentation for NotificationDrawerListItem can be found at https://www.patternfly.org/components/notification-drawer figma.connect( NotificationDrawerListItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861&m=dev', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861', { props: { - isRead: figma.enum('Type', { - Unread: false, - Read: true - }), - isHoverable: figma.enum('State', { - Default: false, - Hover: true - }), - status: figma.enum('Status', { + timestamp: , + + // enum + isRead: figma.enum('Type', { Read: true }), + isHoverable: figma.enum('State', { Hover: true }), + variant: figma.enum('Status', { Info: 'info', Success: 'success', Warning: 'warning', Danger: 'danger' }), - alertTitle: figma.children('Alert title'), - alertDescription: figma.children('Description') + + // boolean + listItemDropdown: { + dropdown: ( + {}} + isOpen={false} + onOpenChange={() => {}} + popperProps={{ position: 'right' }} + toggle={() => ( + {}} + isExpanded={false} + onClick={() => {}} + variant="plain" + aria-label={`Basic example header kebab toggle`} + icon={} + /> + )} + > + + Item 1 + Item 2 + Item 3 + + + ), + onClose: () => {} + }, + + // TODO: FIGMA: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item + alertDescription: 'Description', + + // TODO: FIGMA: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item + alertTitle: 'Notification title' }, example: (props) => ( - - - {props.alertTitle} + {}} + variant={props.variant} + > + + {props.listItemDropdown.dropdown} - {props.alertDescription} + + {props.alertDescription} + ) } diff --git a/packages/code-connect/components/Pagination/Pagination.figma.tsx b/packages/code-connect/components/Pagination/Pagination.figma.tsx index 1b6cb39f546..1c70c107100 100644 --- a/packages/code-connect/components/Pagination/Pagination.figma.tsx +++ b/packages/code-connect/components/Pagination/Pagination.figma.tsx @@ -2,6 +2,7 @@ import figma from '@figma/code-connect'; import { Pagination } from '@patternfly/react-core'; // TODO: Split perPage and Page into separate properties +// Documentation for Pagination can be found at https://www.patternfly.org/components/pagination figma.connect( Pagination, @@ -19,7 +20,6 @@ figma.connect( }) }, example: (props) => ( - // Documentation for Pagination can be found at https://www.patternfly.org/components/pagination , false: undefined }), status: figma.enum('Status', { @@ -54,15 +60,14 @@ figma.connect( children: figma.children('*') }, example: (props) => ( - // Documentation for Popover can be found at https://www.patternfly.org/components/popover ) } diff --git a/packages/code-connect/components/SimpleList/ListHeading.figma.tsx b/packages/code-connect/components/SimpleList/ListHeading.figma.tsx new file mode 100644 index 00000000000..1df3623a90e --- /dev/null +++ b/packages/code-connect/components/SimpleList/ListHeading.figma.tsx @@ -0,0 +1,21 @@ +import figma from '@figma/code-connect'; +import { SimpleListGroup } from '@patternfly/react-core'; + +// TODO: FIGMA: Create list group title component +// Documentation for ListHeading can be found at https://www.patternfly.org/components/simple-list + +figma.connect( + SimpleListGroup, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20689&m=dev', + { + props: { + listGroupTitle: 'List group title', + children: figma.children('*') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/SimpleList/SimpleList.figma.tsx b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx index e8a2298850a..7d1fac6a905 100644 --- a/packages/code-connect/components/SimpleList/SimpleList.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx @@ -1,6 +1,8 @@ import figma from '@figma/code-connect'; import { SimpleList } from '@patternfly/react-core'; +// Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list + figma.connect( SimpleList, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691', @@ -8,9 +10,6 @@ figma.connect( props: { children: figma.children(['Simple list group', 'Simple list item']) }, - example: (props) => ( - // Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list - {props.children} - ) + example: (props) => {props.children} } ); diff --git a/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx index 30384474126..7b9785e8f84 100644 --- a/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx @@ -1,6 +1,8 @@ import figma from '@figma/code-connect'; import { SimpleListGroup } from '@patternfly/react-core'; +// Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list + figma.connect( SimpleListGroup, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20708', @@ -8,9 +10,6 @@ figma.connect( props: { children: figma.children('*') }, - example: (props) => ( - // Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list - {props.children} - ) + example: (props) => {props.children} } ); diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index 5f82b7d1072..c24a0a71cf4 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -1,6 +1,8 @@ import figma from '@figma/code-connect'; import { SimpleListItem } from '@patternfly/react-core'; +// Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list + figma.connect( SimpleListItem, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20664', @@ -20,9 +22,6 @@ figma.connect( Link: 'link' }) }, - example: (props) => ( - // Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list - {props.text} - ) + example: (props) => {props.text} } ); diff --git a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx index 9738eef1307..94775ef99dc 100644 --- a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx +++ b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx @@ -1,6 +1,8 @@ import figma from '@figma/code-connect'; import { Skeleton } from '@patternfly/react-core'; +// Documentation for Skeleton can be found at https://www.patternfly.org/components/skeleton + figma.connect( Skeleton, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288', @@ -20,9 +22,6 @@ figma.connect( Circle: 'circle' }) }, - example: (props) => ( - // Documentation for Skeleton can be found at https://www.patternfly.org/components/skeleton - - ) + example: (props) => } ); From a4bbd9f7e13e9758f88e7c5542d9f8a48f08bdf0 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 26 Jun 2025 10:44:10 -0400 Subject: [PATCH 4/5] feat(CC-batch-7): added SimpleListItem update --- .../SimpleList/SimpleListItem.figma.tsx | 36 +++++++++++++------ 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index c24a0a71cf4..e24dc77626d 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -1,6 +1,7 @@ import figma from '@figma/code-connect'; import { SimpleListItem } from '@patternfly/react-core'; +// TODO: FIGMA: Add support for SimpleListGroup // Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list figma.connect( @@ -9,19 +10,32 @@ figma.connect( { props: { text: figma.string('Text'), - state: figma.enum('State', { - Default: undefined, - 'Hover - Light': 'hover---light', - 'Hover - Dark': 'hover---dark', - 'Selected - Light': 'selected---light', - 'Selected - Dark': 'selected---dark', - Disabled: 'disabled' + + // enum + isActive: figma.enum('State', { + 'Selected - Light': true, + 'Selected - Dark': true }), - type: figma.enum('Type', { - Default: undefined, - Link: 'link' + isLink: figma.enum('Type', { + Default: { + component: undefined, + href: undefined + }, + Link: { + component: 'a', + href: '#' + } }) }, - example: (props) => {props.text} + example: (props) => ( + + {props.text} + + ) } ); From f1546dce1fadcb486e09090a9ae6f2d42a1f47f8 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 30 Jun 2025 16:29:21 -0400 Subject: [PATCH 5/5] feat(CC-batch-7): review-athon round 1 followup --- .../NotificationDrawer/NotificationDrawerGroups.figma.tsx | 2 +- .../NotificationDrawer/NotificationDrawerItem.figma.tsx | 4 ++-- packages/code-connect/components/PopOver/Popover.figma.tsx | 2 +- .../code-connect/components/SimpleList/ListHeading.figma.tsx | 2 +- .../components/SimpleList/SimpleListItem.figma.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx index b9c1a57ed9d..b16b4b4f764 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx @@ -1,7 +1,7 @@ import figma from '@figma/code-connect'; import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/react-core'; -// TODO: FIGMA: Split unread count into a separate prop +// TODO: DESIGN: Split unread count into a separate prop figma.connect( NotificationDrawerGroup, diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx index fc9e69e9fde..800146379ba 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -59,10 +59,10 @@ figma.connect( onClose: () => {} }, - // TODO: FIGMA: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item + // TODO: DESIGN: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item alertDescription: 'Description', - // TODO: FIGMA: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item + // TODO: DESIGN: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item alertTitle: 'Notification title' }, example: (props) => ( diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx index 470952fe746..3149349b2a0 100644 --- a/packages/code-connect/components/PopOver/Popover.figma.tsx +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -6,7 +6,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; -// TODO: FIGMA: Add buttons boolean to footerContent +// TODO: DESIGN: Add buttons boolean to footerContent // TODO: REACT: Add icon support // Documentation for Popover can be found at https://www.patternfly.org/components/popover diff --git a/packages/code-connect/components/SimpleList/ListHeading.figma.tsx b/packages/code-connect/components/SimpleList/ListHeading.figma.tsx index 1df3623a90e..a5eb0cf775d 100644 --- a/packages/code-connect/components/SimpleList/ListHeading.figma.tsx +++ b/packages/code-connect/components/SimpleList/ListHeading.figma.tsx @@ -1,7 +1,7 @@ import figma from '@figma/code-connect'; import { SimpleListGroup } from '@patternfly/react-core'; -// TODO: FIGMA: Create list group title component +// TODO: DESIGN: Create list group title component // Documentation for ListHeading can be found at https://www.patternfly.org/components/simple-list figma.connect( diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index e24dc77626d..55d60088f7b 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -1,7 +1,7 @@ import figma from '@figma/code-connect'; import { SimpleListItem } from '@patternfly/react-core'; -// TODO: FIGMA: Add support for SimpleListGroup +// TODO: DESIGN: Add support for SimpleListGroup // Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list figma.connect(