From 807f83c62467dd1921cfc2fcecc41cf39e5f88ff Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Wed, 8 Oct 2025 12:00:57 -0400 Subject: [PATCH 1/2] feat(CC-form): init form --- .../components/Form/CheckboxInput.figma.tsx | 20 ++++++ .../components/Form/HelperText.figma.tsx | 44 +++++++++++++ .../components/Form/InputField.figma.tsx | 63 +++++++++++++++++++ .../components/Form/InputGroup.figma.tsx | 15 +++++ .../components/Form/InputGroupItems.figma.tsx | 62 ++++++++++++++++++ .../components/Form/InputLabel.figma.tsx | 24 +++++++ .../Form/LabeledInputGroup.figma.tsx | 23 +++++++ .../Form/NumberInputField.figma.tsx | 47 ++++++++++++++ .../components/Form/TextInputs.figma.tsx | 57 +++++++++++++++++ packages/code-connect/figma.config.json | 13 ++-- 10 files changed, 360 insertions(+), 8 deletions(-) create mode 100644 packages/code-connect/components/Form/CheckboxInput.figma.tsx create mode 100644 packages/code-connect/components/Form/HelperText.figma.tsx create mode 100644 packages/code-connect/components/Form/InputField.figma.tsx create mode 100644 packages/code-connect/components/Form/InputGroup.figma.tsx create mode 100644 packages/code-connect/components/Form/InputGroupItems.figma.tsx create mode 100644 packages/code-connect/components/Form/InputLabel.figma.tsx create mode 100644 packages/code-connect/components/Form/LabeledInputGroup.figma.tsx create mode 100644 packages/code-connect/components/Form/NumberInputField.figma.tsx create mode 100644 packages/code-connect/components/Form/TextInputs.figma.tsx diff --git a/packages/code-connect/components/Form/CheckboxInput.figma.tsx b/packages/code-connect/components/Form/CheckboxInput.figma.tsx new file mode 100644 index 00000000000..027d93d6b76 --- /dev/null +++ b/packages/code-connect/components/Form/CheckboxInput.figma.tsx @@ -0,0 +1,20 @@ +// import React from "react" +// import { CheckboxInput } from "./CheckboxInput" +// import figma from "@figma/code-connect" + +// /** +// * -- This file was auto-generated by Code Connect -- +// * `props` includes a mapping from Figma properties and variants to +// * suggested values. You should update this to match the props of your +// * code component, and update the `example` function to return the +// * code example you'd like to see in Figma +// */ + +// figma.connect( +// CheckboxInput, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-1280&m=dev", +// { +// props: {}, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Form/HelperText.figma.tsx b/packages/code-connect/components/Form/HelperText.figma.tsx new file mode 100644 index 00000000000..aa807fa0179 --- /dev/null +++ b/packages/code-connect/components/Form/HelperText.figma.tsx @@ -0,0 +1,44 @@ +import figma from '@figma/code-connect'; +import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core'; +import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; +import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; + +// Documentation for HelperText can be found at https://www.patternfly.org/components/form + +figma.connect( + HelperText, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=151-1670', + { + props: { + variant: figma.enum('Type', { + Defaut: 'default', + Indeterminate: 'indeterminate', + Warning: 'warning', + Success: 'success', + Error: 'error' + }), + icon: figma.boolean('Icon', { + true: figma.enum('Type', { + Defaut: , + Indeterminate: , + Warning: , + Success: , + Error: + }), + false: undefined + }), + helperText: figma.string('Helper text') + }, + example: (props) => ( + + + + {props.helperText} + + + + ) + } +); diff --git a/packages/code-connect/components/Form/InputField.figma.tsx b/packages/code-connect/components/Form/InputField.figma.tsx new file mode 100644 index 00000000000..0bf568e163e --- /dev/null +++ b/packages/code-connect/components/Form/InputField.figma.tsx @@ -0,0 +1,63 @@ +import figma from '@figma/code-connect'; +import { FormGroup, Popover } from '@patternfly/react-core'; + +// Documentation for InputField can be found at https://www.patternfly.org/components/form + +figma.connect( + FormGroup, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-788&m=dev', + { + props: { + inputField: figma.instance('Input field'), + minusIcon: figma.boolean('Minus icon'), + label: figma.boolean('Label', { + true: 'Input field', + false: undefined + }), + textInput: figma.children('Text inputs'), + helperText: figma.children('HelperText') + }, + example: (props) => ( + + The{' '} + + name + {' '} + of a{' '} + + Person + + + } + bodyContent={ +
+ Often composed of{' '} + + givenName + {' '} + and{' '} + + familyName + + . +
+ } + > + {/* */} + + } + isRequired + fieldId="simple-form-name-01" + > + {props.textInput} + {props.helperText} + + ) + } +); diff --git a/packages/code-connect/components/Form/InputGroup.figma.tsx b/packages/code-connect/components/Form/InputGroup.figma.tsx new file mode 100644 index 00000000000..479ab92677f --- /dev/null +++ b/packages/code-connect/components/Form/InputGroup.figma.tsx @@ -0,0 +1,15 @@ +import figma from '@figma/code-connect'; +import { InputGroup } from '@patternfly/react-core'; + +// Documentation for InputGroup can be found at https://www.patternfly.org/components/input-group + +figma.connect( + InputGroup, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=12700-4200', + { + props: { + children: figma.children('Input Group Items') + }, + example: (props) => {props.children} + } +); diff --git a/packages/code-connect/components/Form/InputGroupItems.figma.tsx b/packages/code-connect/components/Form/InputGroupItems.figma.tsx new file mode 100644 index 00000000000..a2a4d9685e2 --- /dev/null +++ b/packages/code-connect/components/Form/InputGroupItems.figma.tsx @@ -0,0 +1,62 @@ +import figma from '@figma/code-connect'; +import { InputGroupItem, InputGroupText, TextInput } from '@patternfly/react-core'; +import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; +// Documentation for InputGroupItem can be found at https://www.patternfly.org/components/input-group + +const sharedProps = { + validated: figma.enum('State', { + Disabled: 'disabled', + ReadOnly: 'readOnly', + Success: 'success', + Warning: 'warning', + Error: 'error', + Selected: 'selected' + }) +}; + +figma.connect( + InputGroupItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-2806', + { + props: { + ...sharedProps, + + type: figma.enum('Type', { + Icon: ( + + + + ), + Text: ( + + ), + Dropdown: figma.children('*'), + Button: figma.children('*') + }), + state: figma.enum('State', { + Disabled: 'disabled', + ReadOnly: 'readOnly', + Success: 'success', + Warning: 'warning', + Error: 'error', + Selected: 'selected' + }), + textInput: figma.enum('Type', { + Text: ( + + ) + }) + }, + example: (props) => {props.type} + } +); diff --git a/packages/code-connect/components/Form/InputLabel.figma.tsx b/packages/code-connect/components/Form/InputLabel.figma.tsx new file mode 100644 index 00000000000..f61cfece9a5 --- /dev/null +++ b/packages/code-connect/components/Form/InputLabel.figma.tsx @@ -0,0 +1,24 @@ +// import React from "react" +// import { InputLabel } from "./InputLabel" +// import figma from "@figma/code-connect" + +// /** +// * -- This file was auto-generated by Code Connect -- +// * `props` includes a mapping from Figma properties and variants to +// * suggested values. You should update this to match the props of your +// * code component, and update the `example` function to return the +// * code example you'd like to see in Figma +// */ + +// figma.connect( +// InputLabel, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=151-1566&m=dev", +// { +// props: { +// required: figma.boolean("Required"), +// helpIcon: figma.boolean("Help icon"), +// labelText: figma.string("Label text"), +// }, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Form/LabeledInputGroup.figma.tsx b/packages/code-connect/components/Form/LabeledInputGroup.figma.tsx new file mode 100644 index 00000000000..c42ea43eeb8 --- /dev/null +++ b/packages/code-connect/components/Form/LabeledInputGroup.figma.tsx @@ -0,0 +1,23 @@ +// import React from "react" +// import { LabeledInputGroup } from "./LabeledInputGroup" +// import figma from "@figma/code-connect" + +// /** +// * -- This file was auto-generated by Code Connect -- +// * `props` includes a mapping from Figma properties and variants to +// * suggested values. You should update this to match the props of your +// * code component, and update the `example` function to return the +// * code example you'd like to see in Figma +// */ + +// figma.connect( +// LabeledInputGroup, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-3526&m=dev", +// { +// props: { +// label: figma.boolean("Label"), +// helperText: figma.boolean("Helper text"), +// }, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Form/NumberInputField.figma.tsx b/packages/code-connect/components/Form/NumberInputField.figma.tsx new file mode 100644 index 00000000000..18facecae2e --- /dev/null +++ b/packages/code-connect/components/Form/NumberInputField.figma.tsx @@ -0,0 +1,47 @@ +import figma from '@figma/code-connect'; +import { NumberInput } from '@patternfly/react-core'; + +// Documentation for NumberInput can be found at https://www.patternfly.org/components/number-input + +figma.connect( + NumberInput, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-3706', + { + props: { + value: '90', + + // boolean + unitPosition: figma.boolean('Unit at end', { + true: 'before', + false: undefined + }), + + // enum + isDisabled: figma.enum('Status', { Disabled: true }), + unit: figma.enum('Type', { 'With unit': '%' }), + validated: figma.enum('Status', { + Warning: 'warning', + Error: 'error', + Success: 'success' + }) + }, + example: (props) => ( + {}} + onPlus={() => {}} + onChange={() => {}} + plusBtnAriaLabel="plus" + unit={props.unit} + unitPosition={props.unitPosition} + validated={props.validated} + value={props.value} + /> + ) + } +); diff --git a/packages/code-connect/components/Form/TextInputs.figma.tsx b/packages/code-connect/components/Form/TextInputs.figma.tsx new file mode 100644 index 00000000000..e3688a177a2 --- /dev/null +++ b/packages/code-connect/components/Form/TextInputs.figma.tsx @@ -0,0 +1,57 @@ +import figma from '@figma/code-connect'; +import { TextInput } from '@patternfly/react-core'; +import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon'; + +// Documentation for TextInputs can be found at https://www.patternfly.org/components/form + +figma.connect( + TextInput, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=154-71', + { + props: { + // string + placeholder: figma.string('Input text'), + + // boolean + customIcon: figma.boolean('Custom icon', { + true: , + false: undefined + }), + + // enum + isDisabled: figma.enum('State', { Disabled: true }), + isRequired: figma.enum('State', { Error: true }), + readOnlyVariant: figma.enum('State', { + 'Read only': 'default', + 'Read only plain': 'plain' + }), + state: figma.enum('State', { + Active: 'active', + Complete: 'complete', + Success: 'success', + Warning: 'warning', + Error: 'error' + }), + type: figma.enum('Type', { + 'Text box': 'input', + 'Text area': 'textarea' + }), + + children: figma.children(['']) + }, + example: (props) => ( + {}} + placeholder={props.placeholder} + readOnlyVariant={props.readOnlyVariant} + type={props.type} + validated={props.state} + value="Value" + /> + ) + } +); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..2d1f5681f6f 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -1,13 +1,10 @@ { "codeConnect": { "parser": "react", - "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" - ], + "include": ["components/Form/*.tsx"], + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9HiAevBhEc2iYY9rxZtovA/PatternFly-6--Components" + }, "paths": { "src/components": "src/components" }, @@ -30,4 +27,4 @@ } } } -} \ No newline at end of file +} From 624d6efbd1f601835b3d7e26f65ccd1329d64275 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 13 Oct 2025 13:34:48 -0400 Subject: [PATCH 2/2] feat(CC-form): added search input --- .gitignore | 1 + .../components/Form/BasicFormDemo.figma.tsx | 12 +++++ .../Form/BasicSearchInput.figma.tsx | 52 +++++++++++++++++++ .../components/Form/Checkbox.figma.tsx | 41 +++++++++++++++ .../components/Form/CheckboxGroup.figma.tsx | 19 +++++++ .../components/Form/CheckboxInput.figma.tsx | 20 ------- .../components/Form/FieldGroup.figma.tsx | 24 +++++++++ .../components/Form/InputField.figma.tsx | 13 +++-- .../components/Form/InputGroupItems.figma.tsx | 13 ----- .../components/Form/InputLabel.figma.tsx | 24 --------- .../Form/LabeledInputGroup.figma.tsx | 29 +++-------- .../Form/LabeledNumberInput.figma.tsx | 8 +++ .../components/Form/RadioButton.figma.tsx | 45 ++++++++++++++++ .../Form/RadioButtonGroup.figma.tsx | 19 +++++++ .../components/Form/Switch.figma.tsx | 46 ++++++++++++++++ 15 files changed, 283 insertions(+), 83 deletions(-) create mode 100644 packages/code-connect/components/Form/BasicFormDemo.figma.tsx create mode 100644 packages/code-connect/components/Form/BasicSearchInput.figma.tsx create mode 100644 packages/code-connect/components/Form/Checkbox.figma.tsx create mode 100644 packages/code-connect/components/Form/CheckboxGroup.figma.tsx delete mode 100644 packages/code-connect/components/Form/CheckboxInput.figma.tsx create mode 100644 packages/code-connect/components/Form/FieldGroup.figma.tsx delete mode 100644 packages/code-connect/components/Form/InputLabel.figma.tsx create mode 100644 packages/code-connect/components/Form/LabeledNumberInput.figma.tsx create mode 100644 packages/code-connect/components/Form/RadioButton.figma.tsx create mode 100644 packages/code-connect/components/Form/RadioButtonGroup.figma.tsx create mode 100644 packages/code-connect/components/Form/Switch.figma.tsx diff --git a/.gitignore b/.gitignore index 07168936c32..1ea1e95aad4 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,7 @@ lerna-debug.log .history .vscode .yo-rc.json +.env # IDE - VSCode .vscode diff --git a/packages/code-connect/components/Form/BasicFormDemo.figma.tsx b/packages/code-connect/components/Form/BasicFormDemo.figma.tsx new file mode 100644 index 00000000000..92840db6884 --- /dev/null +++ b/packages/code-connect/components/Form/BasicFormDemo.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import { Form } from '@patternfly/react-core'; + +// Documentation for Form can be found at https://www.patternfly.org/components/form + +figma.connect(Form, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-2965', { + props: { + // topAlert: figma.boolean('Top alert'), + children: figma.children('*') + }, + example: (props) =>
{props.children}
+}); diff --git a/packages/code-connect/components/Form/BasicSearchInput.figma.tsx b/packages/code-connect/components/Form/BasicSearchInput.figma.tsx new file mode 100644 index 00000000000..262832e6e90 --- /dev/null +++ b/packages/code-connect/components/Form/BasicSearchInput.figma.tsx @@ -0,0 +1,52 @@ +import figma from '@figma/code-connect'; +import { SearchInput } from '@patternfly/react-core'; + +// Documentation for SearchInput can be found at https://www.patternfly.org/components/search-input + +figma.connect( + SearchInput, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=8065-140137', + { + props: { + placeholder: figma.string('✏️ Placeholder text'), + value: figma.string('✏️ Searched text'), + resultsCount: figma.boolean('Show count', { + true: '3', + false: undefined + }), + showNavigableOptions: figma.boolean('Show navigable options', { + true: { + isNextNavigationButtonDisabled: `currentResult === 3`, + isPreviousNavigationButtonDisabled: `currentResult === 1`, + resultsCount: `${currentResult} / ${resultsCount}`, + onNextClick: () => {}, + onPreviousClick: () => {} + }, + false: undefined + }), + submitSearchButtonLabel: figma.boolean('Show submit button', { + true: { + label: 'Search', + onSearch: () => {} + }, + false: undefined + }) + }, + example: (props) => ( + {}} + onClear={() => {}} + onNextClick={props.showNavigableOptions.onNextClick} + onPreviousClick={props.showNavigableOptions.onPreviousClick} + onSearch={props.submitSearchButtonLabel.onSearch} + placeholder={props.placeholder} + resultsCount={props.showNavigableOptions.resultsCount} + submitSearchButtonLabel={props.submitSearchButtonLabel.label} + value={props.value} + /> + ) + } +); diff --git a/packages/code-connect/components/Form/Checkbox.figma.tsx b/packages/code-connect/components/Form/Checkbox.figma.tsx new file mode 100644 index 00000000000..17daf28631b --- /dev/null +++ b/packages/code-connect/components/Form/Checkbox.figma.tsx @@ -0,0 +1,41 @@ +import figma from '@figma/code-connect'; +import { Checkbox } from '@patternfly/react-core'; + +// Documentation for CheckboxInput can be found at https://www.patternfly.org/components/form/checkbox + +figma.connect( + Checkbox, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-3078', + { + props: { + ariaLabel: figma.enum('Type', { + Standalone: figma.string('Toggle label') + }), + label: figma.enum('Type', { + 'With label': figma.string('Toggle label') + }), + labelPosition: figma.enum('Label placement', { + End: 'end', + Reversed: 'start' + }), + isDisabled: figma.enum('State', { + Disabled: true + }), + description: figma.boolean('Description', { + true: 'Description text', + false: undefined + }) + }, + example: (props) => ( + + ) + } +); diff --git a/packages/code-connect/components/Form/CheckboxGroup.figma.tsx b/packages/code-connect/components/Form/CheckboxGroup.figma.tsx new file mode 100644 index 00000000000..9c3a45793e8 --- /dev/null +++ b/packages/code-connect/components/Form/CheckboxGroup.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect'; +import { FormGroup } from '@patternfly/react-core'; + +// Documentation for CheckboxGroup can be found at https://www.patternfly.org/components/form + +figma.connect( + FormGroup, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-4455', + { + props: { + label: figma.boolean('Label', { + true: 'Input label', + false: undefined + }), + children: figma.children('*') + }, + example: (props) => {props.children} + } +); diff --git a/packages/code-connect/components/Form/CheckboxInput.figma.tsx b/packages/code-connect/components/Form/CheckboxInput.figma.tsx deleted file mode 100644 index 027d93d6b76..00000000000 --- a/packages/code-connect/components/Form/CheckboxInput.figma.tsx +++ /dev/null @@ -1,20 +0,0 @@ -// import React from "react" -// import { CheckboxInput } from "./CheckboxInput" -// import figma from "@figma/code-connect" - -// /** -// * -- This file was auto-generated by Code Connect -- -// * `props` includes a mapping from Figma properties and variants to -// * suggested values. You should update this to match the props of your -// * code component, and update the `example` function to return the -// * code example you'd like to see in Figma -// */ - -// figma.connect( -// CheckboxInput, -// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-1280&m=dev", -// { -// props: {}, -// example: (props) => , -// }, -// ) diff --git a/packages/code-connect/components/Form/FieldGroup.figma.tsx b/packages/code-connect/components/Form/FieldGroup.figma.tsx new file mode 100644 index 00000000000..25d3364d6c7 --- /dev/null +++ b/packages/code-connect/components/Form/FieldGroup.figma.tsx @@ -0,0 +1,24 @@ +import figma from '@figma/code-connect'; +import { FormGroup } from '@patternfly/react-core'; + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from Figma properties and variants to + * suggested values. You should update this to match the props of your + * code component, and update the `example` function to return the + * code example you'd like to see in Figma + */ + +figma.connect( + FormGroup, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=17114-21566&m=dev', + { + props: { + nestedOpen: figma.boolean('Nested - Open'), + nestedNonExpandable: figma.boolean('Nested - Non expandable'), + nestedClosed: figma.boolean('Nested - Closed'), + children: figma.children('*') + }, + example: (props) => {props.children} + } +); diff --git a/packages/code-connect/components/Form/InputField.figma.tsx b/packages/code-connect/components/Form/InputField.figma.tsx index 0bf568e163e..e4afc5bc94f 100644 --- a/packages/code-connect/components/Form/InputField.figma.tsx +++ b/packages/code-connect/components/Form/InputField.figma.tsx @@ -1,5 +1,6 @@ import figma from '@figma/code-connect'; -import { FormGroup, Popover } from '@patternfly/react-core'; +import { Button, FormGroup, FormGroupLabelHelp, Popover } from '@patternfly/react-core'; +import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; // Documentation for InputField can be found at https://www.patternfly.org/components/form @@ -8,12 +9,15 @@ figma.connect( 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-788&m=dev', { props: { - inputField: figma.instance('Input field'), - minusIcon: figma.boolean('Minus icon'), + // boolean label: figma.boolean('Label', { true: 'Input field', false: undefined }), + minusIcon: figma.boolean('Minus icon', { + true: