From de8c71746c99eb7504a612b716a1f1958a441776 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Wed, 11 Jun 2025 18:29:02 -0400 Subject: [PATCH 01/11] feat(CC-batch-6): added batch 6 components --- .../JumpLinks/JumplinkHorizontal.figma.tsx | 25 +++++++++++ .../JumpLinks/JumplinkVertical.figma.tsx | 25 +++++++++++ .../JumpLinks/JumplinksHorizontal.figma.tsx | 19 ++++++++ .../JumpLinks/JumplinksVertical.figma.tsx | 21 +++++++++ .../components/Label/LabelInGroup.figma.tsx | 21 +++++++++ .../components/Label/LabelNonStatus.figma.tsx | 43 +++++++++++++++++++ .../components/Label/LabelStatus.figma.tsx | 30 +++++++++++++ .../LoginPage/DesktopLoginPage.figma.tsx | 32 ++++++++++++++ .../components/Masthead/Masthead.figma.tsx | 36 ++++++++++++++++ .../components/Modal/AlertModal.figma.tsx | 21 +++++++++ .../components/Modal/BasicModal.figma.tsx | 21 +++++++++ packages/code-connect/figma.config.json | 21 +++++---- 12 files changed, 306 insertions(+), 9 deletions(-) create mode 100644 packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx create mode 100644 packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx create mode 100644 packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx create mode 100644 packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx create mode 100644 packages/code-connect/components/Label/LabelInGroup.figma.tsx create mode 100644 packages/code-connect/components/Label/LabelNonStatus.figma.tsx create mode 100644 packages/code-connect/components/Label/LabelStatus.figma.tsx create mode 100644 packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx create mode 100644 packages/code-connect/components/Masthead/Masthead.figma.tsx create mode 100644 packages/code-connect/components/Modal/AlertModal.figma.tsx create mode 100644 packages/code-connect/components/Modal/BasicModal.figma.tsx diff --git a/packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx new file mode 100644 index 00000000000..d4897dd354a --- /dev/null +++ b/packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx @@ -0,0 +1,25 @@ +import figma from '@figma/code-connect'; +import { JumpLinksItem } from '@patternfly/react-core'; + +figma.connect( + JumpLinksItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5286-5330&t=IzSunfrnw18ti37Y-11', + { + props: { + // string + tabText: figma.string('Tab Text'), + + // enum + isActive: figma.enum('State', { Selected: true }), + + children: figma.children('*') + }, + example: (props) => ( + // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links + + {props.tabText} + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx new file mode 100644 index 00000000000..70d7e098154 --- /dev/null +++ b/packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx @@ -0,0 +1,25 @@ +import figma from '@figma/code-connect'; +import { JumpLinksItem } from '@patternfly/react-core'; + +figma.connect( + JumpLinksItem, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8306', + { + props: { + // string + tabText: figma.string('Tab Text'), + + // enum + isActive: figma.enum('State', { Selected: true }), + + children: figma.children('*') + }, + example: (props) => ( + // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links + + {props.tabText} + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx new file mode 100644 index 00000000000..69232dfc121 --- /dev/null +++ b/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect'; +import { JumpLinks } from '@patternfly/react-core'; + +figma.connect( + JumpLinks, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8644-150823&t=IzSunfrnw18ti37Y-11', + { + props: { + // boolean + label: figma.boolean('Show label', { true: figma.children('Label') }), + + children: figma.children('*') + }, + example: (props) => ( + // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links + {props.children} + ) + } +); diff --git a/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx new file mode 100644 index 00000000000..afddd2306d1 --- /dev/null +++ b/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx @@ -0,0 +1,21 @@ +import figma from '@figma/code-connect'; +import { JumpLinks } from '@patternfly/react-core'; + +figma.connect( + JumpLinks, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8542&t=IzSunfrnw18ti37Y-11', + { + props: { + // boolean + label: figma.boolean('Show Label', { true: figma.children('Label') }), + + children: figma.children('*') + }, + example: (props) => ( + // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Label/LabelInGroup.figma.tsx b/packages/code-connect/components/Label/LabelInGroup.figma.tsx new file mode 100644 index 00000000000..78f38b2af0e --- /dev/null +++ b/packages/code-connect/components/Label/LabelInGroup.figma.tsx @@ -0,0 +1,21 @@ +import figma from '@figma/code-connect'; +import { LabelGroup } from '@patternfly/react-core'; + +figma.connect( + LabelGroup, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-1075', + { + props: { + // string + categoryName: figma.string('Label group name'), + isCollapsed: figma.boolean('Has collapsed labels'), + children: figma.children('Label') + }, + // Documentation for LabelGroup can be found at https://www.patternfly.org/components/label-group + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Label/LabelNonStatus.figma.tsx b/packages/code-connect/components/Label/LabelNonStatus.figma.tsx new file mode 100644 index 00000000000..be538d751f4 --- /dev/null +++ b/packages/code-connect/components/Label/LabelNonStatus.figma.tsx @@ -0,0 +1,43 @@ +import figma from '@figma/code-connect'; +import { Label } from '@patternfly/react-core'; + +/** + * PatternFly Label component integration for Figma Code Connect + * @see https://www.patternfly.org/components/label + */ + +figma.connect( + Label, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-609', + { + props: { + // string + text: figma.string('Text'), + + // boolean + isEditable: figma.boolean('Is Editable'), + + // enum + color: figma.enum('Color', { + Red: 'red', + Orange: 'orange', + 'Orange Red': 'orangered', + Green: 'green', + Blue: 'blue', + Purple: 'purple', + Grey: 'grey' + }), + variant: figma.enum('Type', { + Filled: 'filled', + Outlined: 'outline' + }), + isCompact: figma.enum('Type', { Compact: true }) + }, + example: (props) => ( + // Documentation for Label can be found at https://www.patternfly.org/components/label + + ) + } +); diff --git a/packages/code-connect/components/Label/LabelStatus.figma.tsx b/packages/code-connect/components/Label/LabelStatus.figma.tsx new file mode 100644 index 00000000000..6e23dcb3333 --- /dev/null +++ b/packages/code-connect/components/Label/LabelStatus.figma.tsx @@ -0,0 +1,30 @@ +import figma from '@figma/code-connect'; +import { Label } from '@patternfly/react-core'; + +figma.connect( + Label, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-488', + { + props: { + text: figma.string('Text'), + status: figma.enum('State', { + Danger: 'danger', + Warning: 'warning', + Success: 'success', + Info: 'info', + Custom: 'custom' + }), + type: figma.enum('Type', { + Filled: 'filled', + Outlined: 'outline' + }), + isCompact: figma.enum('Size', { Compact: true }) + }, + example: (props) => ( + // Documentation for Label can be found at https://www.patternfly.org/components/label + + ) + } +); diff --git a/packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx b/packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx new file mode 100644 index 00000000000..e0e133bae14 --- /dev/null +++ b/packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx @@ -0,0 +1,32 @@ +import figma from '@figma/code-connect'; +import { LoginPage } from '@patternfly/react-core'; + +// TODO: Map Figma component to these properties + +figma.connect( + LoginPage, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-4180', + { + props: { + children: figma.children('*') + }, + example: (props) => ( + // Documentation for LoginPage can be found at https://www.patternfly.org/components/login-page + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Masthead/Masthead.figma.tsx b/packages/code-connect/components/Masthead/Masthead.figma.tsx new file mode 100644 index 00000000000..81c79623d31 --- /dev/null +++ b/packages/code-connect/components/Masthead/Masthead.figma.tsx @@ -0,0 +1,36 @@ +import figma from '@figma/code-connect'; +import { + Button, + Masthead, + MastheadBrand, + MastheadContent, + MastheadLogo, + MastheadMain, + MastheadToggle +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; + +// TODO: Map Figma component to these properties. + +figma.connect( + Masthead, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-6642', + { + props: {}, + example: () => ( + + + + + { + setIsOpen(!isOpen); + }} + variant={props.variant} + > + + + {props.modalContent} + + {props.modalFooter} + + + + ); + } } ); diff --git a/packages/code-connect/components/Modal/BasicModal.figma.tsx b/packages/code-connect/components/Modal/BasicModal.figma.tsx index d0a18744805..107cbe08108 100644 --- a/packages/code-connect/components/Modal/BasicModal.figma.tsx +++ b/packages/code-connect/components/Modal/BasicModal.figma.tsx @@ -12,30 +12,12 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2937-158', { props: { - // TODO: DESIGN: Create ModalHeader component - // hasHelpIcon: figma.boolean('Help icon', { - // true: ( - // Help Popover} - // bodyContent={ - //
- // Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. - //
- // } - // footerContent="Popover Footer" - // > - // + {}} // handles the close button + variant={props.variant} + > + + {props.modalContent} + {props.modalFooter} + + + + ); + } } ); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index f5e379651f5..f113e3d66e1 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -2,8 +2,7 @@ "codeConnect": { "parser": "react", "include": [ - "components/Label/*.figma.tsx", - "components/LoginPage/*.figma.tsx" + "components/Masthead/*.figma.tsx" ], "paths": { "@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src", From b587cc7e72e10e6e8bafab2282ac8a7e1e4950ef Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Fri, 5 Sep 2025 11:31:40 -0400 Subject: [PATCH 07/11] feat(CC-batch-6): removed isEditable from label group --- packages/code-connect/components/Label/LabelGroups.figma.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/code-connect/components/Label/LabelGroups.figma.tsx b/packages/code-connect/components/Label/LabelGroups.figma.tsx index 731657bd36e..30efeb61155 100644 --- a/packages/code-connect/components/Label/LabelGroups.figma.tsx +++ b/packages/code-connect/components/Label/LabelGroups.figma.tsx @@ -41,7 +41,6 @@ figma.connect( addLabelControl={props.addLabelControl} categoryName="Group label" isClosable - isEditable numLabels={props.numLabels} onClick={() => {}} > From 9b5a068c52380ea054349ca94ea589b43364e3ea Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Sat, 13 Sep 2025 00:03:42 -0400 Subject: [PATCH 08/11] feat(CC-batch-6): @kmcfaul review 7 updates --- .../components/JumpLinks/JumplinksHorizontal.figma.tsx | 6 +++++- .../components/JumpLinks/JumplinksVertical.figma.tsx | 2 +- .../code-connect/components/Label/LabelGroups.figma.tsx | 3 --- packages/code-connect/components/Modal/AlertModal.figma.tsx | 2 +- packages/code-connect/components/Modal/BasicModal.figma.tsx | 6 +++--- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx index 62ef7ce4978..10ba1868643 100644 --- a/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx +++ b/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx @@ -16,6 +16,10 @@ figma.connect( children: figma.children('*') }, - example: (props) => {props.children} + example: (props) => ( + + {props.children} + + ) } ); diff --git a/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx index 565ec19ba29..e0d18ce0d57 100644 --- a/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx +++ b/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx @@ -17,7 +17,7 @@ figma.connect( children: figma.children('*') }, example: (props) => ( - + {props.children} ) diff --git a/packages/code-connect/components/Label/LabelGroups.figma.tsx b/packages/code-connect/components/Label/LabelGroups.figma.tsx index 30efeb61155..37032b5ec1b 100644 --- a/packages/code-connect/components/Label/LabelGroups.figma.tsx +++ b/packages/code-connect/components/Label/LabelGroups.figma.tsx @@ -8,9 +8,6 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-1075', { props: { - // string - labelGroupName: figma.string('Label group name'), - // boolean numLabels: figma.boolean('Has collapsed labels', { true: 4, diff --git a/packages/code-connect/components/Modal/AlertModal.figma.tsx b/packages/code-connect/components/Modal/AlertModal.figma.tsx index 1b607f588d4..ef4589e5a6a 100644 --- a/packages/code-connect/components/Modal/AlertModal.figma.tsx +++ b/packages/code-connect/components/Modal/AlertModal.figma.tsx @@ -69,7 +69,7 @@ figma.connect( aria-labelledby="" aria-describedby="" isOpen={true} - onClick={() => { + onClose={() => { setIsOpen(!isOpen); }} variant={props.variant} diff --git a/packages/code-connect/components/Modal/BasicModal.figma.tsx b/packages/code-connect/components/Modal/BasicModal.figma.tsx index 107cbe08108..75f01fab136 100644 --- a/packages/code-connect/components/Modal/BasicModal.figma.tsx +++ b/packages/code-connect/components/Modal/BasicModal.figma.tsx @@ -46,7 +46,7 @@ figma.connect( }, example: (props) => { /* eslint-disable */ - const [isOpen, setIsOpen] = React.useState(false); + const [isModalOpen, setIsOpen] = React.useState(false); /* eslint-enable */ return ( @@ -54,7 +54,7 @@ figma.connect(