From 57893136ca349617676d0750c11225fc6ab4a712 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 12 Jun 2025 19:33:01 -0400 Subject: [PATCH 01/10] 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 bc9eb25a262d1f0fc451ac766828b131f869d847 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 17 Jun 2025 09:25:09 -0400 Subject: [PATCH 02/10] 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 c1a17edbb45806ab980435b347ccf334a8275415 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 24 Jun 2025 11:20:20 -0400 Subject: [PATCH 03/10] 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 ab356e36d3c851d40163a62ebe32ae3b364595b0 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 26 Jun 2025 10:44:10 -0400 Subject: [PATCH 04/10] 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 43b050211149de31bb2d325b9e6b4e96f5c84d16 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 30 Jun 2025 16:29:21 -0400 Subject: [PATCH 05/10] 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( From d44113b90b2acb3c56e06d9797c89460076e3d38 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 4 Sep 2025 10:40:09 -0400 Subject: [PATCH 06/10] feat(CC-batch-7): group review 6 followup --- .../NotificationDrawer.figma.tsx | 1 + .../NotificationDrawerGroups.figma.tsx | 14 ++++-- .../NotificationDrawerHeader.figma.tsx | 11 +++-- .../NotificationDrawerItem.figma.tsx | 44 +++++++------------ .../components/PopOver/Popover.figma.tsx | 27 +++++++----- .../SimpleList/ListHeading.figma.tsx | 21 --------- .../SimpleList/SimpleList.figma.tsx | 2 +- .../SimpleList/SimpleListGroup.figma.tsx | 8 +++- .../SimpleList/SimpleListItem.figma.tsx | 2 +- .../components/Skeleton/Skeleton.figma.tsx | 11 ++--- packages/code-connect/figma.config.json | 10 ++--- 11 files changed, 67 insertions(+), 84 deletions(-) delete mode 100644 packages/code-connect/components/SimpleList/ListHeading.figma.tsx diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx index 2b21b0d6851..3d22e76f59d 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx @@ -6,6 +6,7 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015', { props: { + // children notificationDrawerHeader: figma.children('Notification drawer header'), notificationDrawerGroup: figma.children('Notification drawer group'), notificationDrawerNotifications: figma.children(['Notifications', 'Notification drawer item']) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx index b16b4b4f764..fdeb1d1d810 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx @@ -8,19 +8,25 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3172-18190&m=dev', { props: { + // boolean + hasCount: figma.boolean('Has count', { + true: figma.children('Badge'), + false: undefined + }), showUnreadCount: figma.boolean('Has count', { true: 3, false: NaN }), + + // enum headingText: figma.string('Group title'), + + // string isExpanded: figma.enum('Type', { Collapsed: false, Expanded: true }), - hasCount: figma.boolean('Has count', { - true: figma.children('Badge'), - false: undefined - }), + children: figma.children('*') }, example: (props) => ( diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx index 715e2814bbb..112dbb42cff 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx @@ -1,15 +1,12 @@ 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'; +import EllipsisVIcon from '@patternfly/react-icons/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: { @@ -47,14 +44,16 @@ figma.connect( showUnreadCount: figma.boolean('Show unread count', { true: 3, false: NaN - }) + }), + + // string + headingText: figma.string('Heading text') }, example: (props) => ( {props.hasActionsMenu.dropdown} diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx index 800146379ba..55d2095b0f1 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -30,17 +30,28 @@ figma.connect( Danger: 'danger' }), - // boolean - listItemDropdown: { - dropdown: ( + // TODO: DESIGN: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item + alertDescription: 'Description', + + // TODO: DESIGN: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item + alertTitle: 'Notification title' + }, + example: (props) => ( + {}} + variant={props.variant} + > + {}} isOpen={false} onOpenChange={() => {}} popperProps={{ position: 'right' }} - toggle={() => ( + toggle={(toggleRef) => ( {}} + ref={toggleRef} isExpanded={false} onClick={() => {}} variant="plain" @@ -55,29 +66,6 @@ figma.connect( Item 3 - ), - onClose: () => {} - }, - - // TODO: DESIGN: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item - alertDescription: 'Description', - - // TODO: DESIGN: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item - alertTitle: 'Notification title' - }, - example: (props) => ( - {}} - variant={props.variant} - > - - {props.listItemDropdown.dropdown} {props.alertDescription} diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx index 3149349b2a0..7a6f17dca8f 100644 --- a/packages/code-connect/components/PopOver/Popover.figma.tsx +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -14,10 +14,9 @@ figma.connect( Popover, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5857-2066', { + // enum props: { - // hasFooter: figma.boolean('Has footer', {}), - bodyContent: figma.string('Popover description'), - headerContent: figma.string('Popover Heading'), + // boolean footerContent: figma.boolean('Has footer', { true: 'Popover footer', false: undefined @@ -26,6 +25,20 @@ figma.connect( true: , false: undefined }), + + // string + bodyContent: figma.string('Popover description'), + headerContent: figma.string('Popover Heading'), + + // enum + 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' + }), status: figma.enum('Status', { Default: { state: undefined, @@ -48,14 +61,6 @@ figma.connect( 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('*') }, diff --git a/packages/code-connect/components/SimpleList/ListHeading.figma.tsx b/packages/code-connect/components/SimpleList/ListHeading.figma.tsx deleted file mode 100644 index a5eb0cf775d..00000000000 --- a/packages/code-connect/components/SimpleList/ListHeading.figma.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import figma from '@figma/code-connect'; -import { SimpleListGroup } from '@patternfly/react-core'; - -// TODO: DESIGN: 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 7d1fac6a905..a69c74088db 100644 --- a/packages/code-connect/components/SimpleList/SimpleList.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx @@ -8,7 +8,7 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691', { props: { - children: figma.children(['Simple list group', 'Simple list item']) + children: figma.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 7b9785e8f84..a4fec820c8b 100644 --- a/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx @@ -8,8 +8,12 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20708', { props: { - children: figma.children('*') + simpleListItems: figma.children('Simple list item') }, - example: (props) => {props.children} + example: (props) => ( + + {props.simpleListItems} + + ) } ); diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index 55d60088f7b..16867234e39 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -32,7 +32,7 @@ figma.connect( component={props.isLink.component} href={props.isLink.href} isActive={props.isActive} - key="simple-list-key" + key="simple-list-item-key" > {props.text} diff --git a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx index 94775ef99dc..8d8b9180169 100644 --- a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx +++ b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx @@ -8,6 +8,11 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288', { props: { + // enum + type: figma.enum('Type', { + Square: 'square', + Circle: 'circle' + }), size: figma.enum('Size', { S: 'sm', M: 'md', @@ -16,12 +21,8 @@ figma.connect( '2XL': '2xl', '3XL': '3xl', '4XL': '4xl' - }), - type: figma.enum('Type', { - Rectangle: 'square', - Circle: 'circle' }) }, - example: (props) => + example: (props) => } ); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..e13569c8c70 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -2,11 +2,11 @@ "codeConnect": { "parser": "react", "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" + "components/NotificationDrawer/*.tsx", + "components/Pagination/*.tsx", + "components/Popover/*.tsx", + "components/SimpleList/*.tsx", + "components/Skeleton/*.tsx" ], "paths": { "src/components": "src/components" From 386b7ef8f66936e45387d81c59db014bb88ee93e Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Fri, 5 Sep 2025 14:45:09 -0400 Subject: [PATCH 07/10] feat(CC-batch-7): updated notification group/list --- .../NotificationDrawer.figma.tsx | 35 ++++++++++++++++--- .../NotificationDrawerItem.figma.tsx | 7 +--- .../components/Skeleton/Skeleton.figma.tsx | 2 ++ 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx index 3d22e76f59d..6b3fe1978c7 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx @@ -1,5 +1,32 @@ import figma from '@figma/code-connect'; -import { NotificationDrawer, NotificationDrawerBody, NotificationDrawerList } from '@patternfly/react-core'; +import { + NotificationDrawer, + NotificationDrawerBody, + NotificationDrawerGroupList, + NotificationDrawerList +} from '@patternfly/react-core'; + +figma.connect( + NotificationDrawer, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015', + { + variant: { Type: 'Grouped' }, + props: { + // children + notificationDrawerHeader: figma.children('Notification drawer header'), + notificationDrawerGroup: figma.children('Notification drawer groups') + }, + example: (props) => ( + // Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer + + {props.notificationDrawerHeader} + + {props.notificationDrawerGroup} + + + ) + } +); figma.connect( NotificationDrawer, @@ -8,16 +35,14 @@ figma.connect( props: { // children notificationDrawerHeader: figma.children('Notification drawer header'), - notificationDrawerGroup: figma.children('Notification drawer group'), - notificationDrawerNotifications: figma.children(['Notifications', 'Notification drawer item']) + notificationDrawerItems: 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} + {props.notificationDrawerItems} ) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx index 55d2095b0f1..b135eda97cb 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -37,12 +37,7 @@ figma.connect( alertTitle: 'Notification title' }, example: (props) => ( - {}} - variant={props.variant} - > + {}} diff --git a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx index 8d8b9180169..734186849d6 100644 --- a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx +++ b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx @@ -10,6 +10,8 @@ figma.connect( props: { // enum type: figma.enum('Type', { + Default: undefined, + Rectangle: undefined, Square: 'square', Circle: 'circle' }), From 9ef89d8718df2c70659c45dfd9f0428abbae1f1f Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Sat, 13 Sep 2025 00:24:13 -0400 Subject: [PATCH 08/10] feat(CC-batch-8): updated node urls --- .../NotificationDrawer/NotificationDrawer.figma.tsx | 4 ++-- .../NotificationDrawerGroups.figma.tsx | 12 ++++-------- .../NotificationDrawerHeader.figma.tsx | 2 +- .../NotificationDrawerItem.figma.tsx | 2 +- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx index 6b3fe1978c7..9ead8326967 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx @@ -8,7 +8,7 @@ import { figma.connect( NotificationDrawer, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=7172-99015', { variant: { Type: 'Grouped' }, props: { @@ -30,7 +30,7 @@ figma.connect( figma.connect( NotificationDrawer, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=7172-99015', { props: { // children diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx index fdeb1d1d810..d83c3b445e9 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx @@ -5,17 +5,13 @@ import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/rea figma.connect( NotificationDrawerGroup, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3172-18190&m=dev', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3172-18190', { props: { // boolean hasCount: figma.boolean('Has count', { - true: figma.children('Badge'), - false: undefined - }), - showUnreadCount: figma.boolean('Has count', { - true: 3, - false: NaN + true: figma.string('Text'), + false: 0 }), // enum @@ -30,7 +26,7 @@ figma.connect( 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 index 112dbb42cff..c1ab1d8532c 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx @@ -4,7 +4,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons//ellipsis-v-ic figma.connect( NotificationDrawerHeader, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3170-17841', { props: { // boolean diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx index b135eda97cb..3ecd7efb527 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -15,7 +15,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico figma.connect( NotificationDrawerListItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=3164-16861', { props: { timestamp: , From 38e6df3fe918ceca87af2cd1ee0f1ab1dc1e2051 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 23 Sep 2025 15:34:07 -0400 Subject: [PATCH 09/10] feat(CC-batch-7): group review 9/23 --- .../NotificationDrawer/NotificationDrawerHeader.figma.tsx | 4 ++-- .../components/Pagination/Pagination.figma.tsx | 3 +-- packages/code-connect/components/PopOver/Popover.figma.tsx | 2 +- .../components/SimpleList/SimpleListItem.figma.tsx | 7 +------ .../code-connect/components/Skeleton/Skeleton.figma.tsx | 6 ++++-- packages/code-connect/figma.config.json | 3 +++ 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx index c1ab1d8532c..c11b30a9937 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx @@ -16,9 +16,9 @@ figma.connect( isOpen={false} onOpenChange={() => {}} popperProps={{ position: 'right' }} - toggle={() => ( + toggle={(refToggle) => ( {}} + ref={refToggle} isExpanded={false} onClick={() => {}} variant="plain" diff --git a/packages/code-connect/components/Pagination/Pagination.figma.tsx b/packages/code-connect/components/Pagination/Pagination.figma.tsx index 1c70c107100..b3bf9af1c6b 100644 --- a/packages/code-connect/components/Pagination/Pagination.figma.tsx +++ b/packages/code-connect/components/Pagination/Pagination.figma.tsx @@ -15,8 +15,7 @@ figma.connect( // nested pageQuantity: figma.nestedProps('Page quantity selector', { - itemCount: figma.string('Total quantity'), - state: figma.enum('State', { Disabled: true }) + itemCount: figma.string('Total quantity') }) }, example: (props) => ( diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx index 7a6f17dca8f..6609a2831a3 100644 --- a/packages/code-connect/components/PopOver/Popover.figma.tsx +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -12,7 +12,7 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; figma.connect( Popover, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5857-2066', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5857-2066', { // enum props: { diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index 16867234e39..9b978fd7c26 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -28,12 +28,7 @@ figma.connect( }) }, 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 734186849d6..d6bbfdc175a 100644 --- a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx +++ b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx @@ -9,7 +9,7 @@ figma.connect( { props: { // enum - type: figma.enum('Type', { + shape: figma.enum('Type', { Default: undefined, Rectangle: undefined, Square: 'square', @@ -25,6 +25,8 @@ figma.connect( '4XL': '4xl' }) }, - example: (props) => + example: (props) => ( + + ) } ); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index e13569c8c70..24d0c931825 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -11,6 +11,9 @@ "paths": { "src/components": "src/components" }, + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components" + }, "aliases": { "@patternfly/react-core": "." }, From 545c34699ad8428e99f185807d20660b1c93db15 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 25 Sep 2025 15:52:28 -0400 Subject: [PATCH 10/10] feat(CC-batch-7): group review 9/23 updates --- .../NotificationDrawer.figma.tsx | 18 ++++++++------ .../NotificationDrawerGroups.figma.tsx | 24 ++++++++++++------- .../NotificationDrawerItem.figma.tsx | 9 +++---- .../components/PopOver/Popover.figma.tsx | 2 +- .../SimpleList/SimpleList.figma.tsx | 2 +- .../SimpleList/SimpleListGroup.figma.tsx | 2 +- .../SimpleList/SimpleListItem.figma.tsx | 2 +- .../components/Skeleton/Skeleton.figma.tsx | 2 +- packages/code-connect/figma.config.json | 17 +++++++------ 9 files changed, 45 insertions(+), 33 deletions(-) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx index 9ead8326967..c690f7a14fd 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawer.figma.tsx @@ -6,43 +6,47 @@ import { NotificationDrawerList } from '@patternfly/react-core'; +// Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer + +// Default figma.connect( NotificationDrawer, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=7172-99015', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7172-99015', { - variant: { Type: 'Grouped' }, props: { // children notificationDrawerHeader: figma.children('Notification drawer header'), - notificationDrawerGroup: figma.children('Notification drawer groups') + notificationDrawerItems: 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.notificationDrawerItems} ) } ); +// Grouped figma.connect( NotificationDrawer, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=7172-99015', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7172-99015', { + variant: { Type: 'Grouped' }, props: { // children notificationDrawerHeader: figma.children('Notification drawer header'), - notificationDrawerItems: figma.children(['Notifications', 'Notification drawer item']) + notificationDrawerGroup: figma.children('Notification drawer groups') }, example: (props) => ( // Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer {props.notificationDrawerHeader} - {props.notificationDrawerItems} + {props.notificationDrawerGroup} ) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx index d83c3b445e9..57b467b0f8f 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx @@ -8,25 +8,33 @@ figma.connect( 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3172-18190', { props: { + // string + headingText: figma.string('Group title'), + count: 3, + // boolean - hasCount: figma.boolean('Has count', { - true: figma.string('Text'), - false: 0 + badgeProps: figma.boolean('Has count', { + true: figma.nestedProps('Badge', { + count: figma.string('Text') + }), + false: { count: undefined } }), // enum - headingText: figma.string('Group title'), - - // string isExpanded: figma.enum('Type', { Collapsed: false, Expanded: true }), - children: figma.children('*') + children: figma.children('Notification drawer item') }, example: (props) => ( - + {}} + > {props.children} ) diff --git a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx index 3ecd7efb527..cef832a768e 100644 --- a/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx +++ b/packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx @@ -6,8 +6,7 @@ import { MenuToggle, NotificationDrawerListItem, NotificationDrawerListItemBody, - NotificationDrawerListItemHeader, - Timestamp + NotificationDrawerListItemHeader } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; @@ -15,11 +14,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico figma.connect( NotificationDrawerListItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=3164-16861', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3164-16861', { props: { - timestamp: , - // enum isRead: figma.enum('Type', { Read: true }), isHoverable: figma.enum('State', { Hover: true }), @@ -62,7 +59,7 @@ figma.connect( - + {props.alertDescription} diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx index 6609a2831a3..683e406d5b7 100644 --- a/packages/code-connect/components/PopOver/Popover.figma.tsx +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -18,7 +18,7 @@ figma.connect( props: { // boolean footerContent: figma.boolean('Has footer', { - true: 'Popover footer', + true: figma.string('Popover footer'), false: undefined }), headerIcon: figma.boolean('Show header icon', { diff --git a/packages/code-connect/components/SimpleList/SimpleList.figma.tsx b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx index a69c74088db..6010513926d 100644 --- a/packages/code-connect/components/SimpleList/SimpleList.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleList.figma.tsx @@ -5,7 +5,7 @@ import { SimpleList } from '@patternfly/react-core'; figma.connect( SimpleList, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20691', { props: { children: figma.children('*') diff --git a/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx index a4fec820c8b..41d00a15936 100644 --- a/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx @@ -5,7 +5,7 @@ import { SimpleListGroup } from '@patternfly/react-core'; figma.connect( SimpleListGroup, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20708', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20708', { props: { simpleListItems: figma.children('Simple list item') diff --git a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx index 9b978fd7c26..eeb96eaa01c 100644 --- a/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx +++ b/packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx @@ -6,7 +6,7 @@ import { SimpleListItem } from '@patternfly/react-core'; figma.connect( SimpleListItem, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20664', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20664', { props: { text: figma.string('Text'), diff --git a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx index d6bbfdc175a..dbbc5ecbb19 100644 --- a/packages/code-connect/components/Skeleton/Skeleton.figma.tsx +++ b/packages/code-connect/components/Skeleton/Skeleton.figma.tsx @@ -5,7 +5,7 @@ import { Skeleton } from '@patternfly/react-core'; figma.connect( Skeleton, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=790-288&', { props: { // enum diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 24d0c931825..074bc4c0752 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -8,14 +8,16 @@ "components/SimpleList/*.tsx", "components/Skeleton/*.tsx" ], - "paths": { - "src/components": "src/components" - }, "documentUrlSubstitutions": { - "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components" + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/e1OeQDrgPKW13FswRqSP3I/PatternFly-6--Components" + }, + "paths": { + "@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src", + "@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src" }, "aliases": { - "@patternfly/react-core": "." + "@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src", + "@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src" }, "importPaths": { "src/components": "src/components" @@ -31,6 +33,7 @@ "production": { "enabled": false } - } + }, + "exclude": ["node_modules/**", "scripts/**"] } -} \ No newline at end of file +}