From 9ac5ac92bf017be592d7e7b5fc6f270599287375 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 12 Jun 2025 19:39:44 -0400 Subject: [PATCH 01/14] feat(CC-batch-8): added batch 8 files --- .../components/Slider/Slider.figma.tsx | 37 +++++++++++++++++++ .../components/Spinner/Spinner.figma.tsx | 22 +++++++++++ .../components/Splitter/Splitter.figma.tsx | 18 +++++++++ .../Tabs/HorizontalSubTabs.figma.tsx | 27 ++++++++++++++ .../components/Tabs/HorizontalTab.figma.tsx | 28 ++++++++++++++ .../components/Tabs/HorizontalTabs.figma.tsx | 22 +++++++++++ .../components/Tabs/VerticalTabs.figma.tsx | 27 ++++++++++++++ .../components/TimeStamp/Timestamp.figma.tsx | 34 +++++++++++++++++ .../ToggleGroup/ToggleGroup.figma.tsx | 33 +++++++++++++++++ .../components/Tooltip/Tooltip.figma.tsx | 37 +++++++++++++++++++ 10 files changed, 285 insertions(+) create mode 100644 packages/code-connect/components/Slider/Slider.figma.tsx create mode 100644 packages/code-connect/components/Spinner/Spinner.figma.tsx create mode 100644 packages/code-connect/components/Splitter/Splitter.figma.tsx create mode 100644 packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx create mode 100644 packages/code-connect/components/Tabs/HorizontalTab.figma.tsx create mode 100644 packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx create mode 100644 packages/code-connect/components/Tabs/VerticalTabs.figma.tsx create mode 100644 packages/code-connect/components/TimeStamp/Timestamp.figma.tsx create mode 100644 packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx create mode 100644 packages/code-connect/components/Tooltip/Tooltip.figma.tsx diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx new file mode 100644 index 00000000000..0696603db9e --- /dev/null +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -0,0 +1,37 @@ +import figma from '@figma/code-connect'; +import { Slider } from '@patternfly/react-core'; + +figma.connect( + Slider, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3155-97956&t=IzSunfrnw18ti37Y-11', + { + props: { + // boolean + leftAction: figma.boolean('Left action'), + minmaxValues: figma.boolean('Min/max values'), + rightAction: figma.boolean('Right action'), + valueInput: figma.boolean('Value input'), + + // enum + state: figma.enum('State', { + Default: 'default', + Active: 'active', + Disabled: 'disabled', + Hover: 'hover' + }), + type: figma.enum('Type', { + Continuous: 'continuous', + Discrete: 'discrete' + }) + }, + example: (props) => ( + // Documentation for Slider can be found at https://www.patternfly.org/components/slider + + ) + } +); diff --git a/packages/code-connect/components/Spinner/Spinner.figma.tsx b/packages/code-connect/components/Spinner/Spinner.figma.tsx new file mode 100644 index 00000000000..60f2bdb14e8 --- /dev/null +++ b/packages/code-connect/components/Spinner/Spinner.figma.tsx @@ -0,0 +1,22 @@ +import figma from '@figma/code-connect'; +import { Spinner } from '@patternfly/react-core'; + +figma.connect( + Spinner, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-332&t=IzSunfrnw18ti37Y-11', + { + props: { + // enum + size: figma.enum('Size', { + sm: 'sm', + md: 'md', + lg: 'lg', + xl: 'xl' + }) + }, + example: (props) => ( + // Documentation for Spinner can be found at https://www.patternfly.org/components/spinner + + ) + } +); diff --git a/packages/code-connect/components/Splitter/Splitter.figma.tsx b/packages/code-connect/components/Splitter/Splitter.figma.tsx new file mode 100644 index 00000000000..5837687e987 --- /dev/null +++ b/packages/code-connect/components/Splitter/Splitter.figma.tsx @@ -0,0 +1,18 @@ +import figma from '@figma/code-connect'; + +figma.connect( + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8034-8230&m=dev', + { + props: { + // enum + type: figma.enum('Type', { + Overlay: 'overlay', + Vertical: 'vertical' + }) + }, + example: (props) => ( + // Documentation for Spinner can be found at https://www.patternfly.org/components/spinner + <>{props.type} + ) + } +); diff --git a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx new file mode 100644 index 00000000000..645d3552f8c --- /dev/null +++ b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx @@ -0,0 +1,27 @@ +import figma from '@figma/code-connect'; +import { Tabs } from '@patternfly/react-core'; + +figma.connect( + Tabs, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6583&m=dev', + { + props: { + children: figma.children('*'), + isBox: figma.enum('Type', { + Boxed: false, + 'Boxed Light': true + }) + }, + example: (props) => ( + {}} + role="region" + > + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx new file mode 100644 index 00000000000..ed4bcff826a --- /dev/null +++ b/packages/code-connect/components/Tabs/HorizontalTab.figma.tsx @@ -0,0 +1,28 @@ +import figma from '@figma/code-connect'; +import { Tab, TabTitleText, Timestamp } from '@patternfly/react-core'; + +figma.connect( + Timestamp, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6161', + { + props: { + // string + tabText: figma.string('Tab Text'), + + // enum + isDisabled: figma.enum('State', { + Disabled: true + }) + }, + example: (props) => ( + {props.tabText}} + aria-label="Default content" + > + {props.tabText} + + ) + } +); diff --git a/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx new file mode 100644 index 00000000000..24cec4b0224 --- /dev/null +++ b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx @@ -0,0 +1,22 @@ +import figma from '@figma/code-connect'; +import { Tabs } from '@patternfly/react-core'; + +figma.connect( + Tabs, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6503', + { + props: { + children: figma.children('*'), + isBox: figma.enum('Type', { + Boxed: false, + 'Boxed Light': true + }) + }, + example: (props) => ( + // Documentation for Tabs can be found at https://www.patternfly.org/components/tabs + {}} isBox={props.isBox} aria-label="Tabs example" role="region"> + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx new file mode 100644 index 00000000000..413d44bf4c6 --- /dev/null +++ b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx @@ -0,0 +1,27 @@ +import figma from '@figma/code-connect'; +import { Tabs } from '@patternfly/react-core'; + +figma.connect( + Tabs, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=14327-6656', + { + props: { + children: figma.children('*'), + isBox: figma.enum('Type', { + Boxed: false, + 'Boxed Light': true, + 'Inset Boxed': true + }), + inset: figma.enum('Type', { + Inset: { default: 'insetMd' }, + 'Inset Boxed': { default: 'insetMd' } + }) + }, + example: (props) => ( + // Documentation for Tabs can be found at https://www.patternfly.org/components/tabs + {}} role="region"> + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx new file mode 100644 index 00000000000..1ee78a39ea6 --- /dev/null +++ b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx @@ -0,0 +1,34 @@ +import figma from '@figma/code-connect'; +import { Timestamp } from '@patternfly/react-core'; + +figma.connect( + Timestamp, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7472-6718', + { + props: { + // string + abbreviatedContent: figma.string('✏️ Abbreviated content'), + defaultTimestampContent: figma.string('✏️ Default timestamp content'), + numericContent: figma.string('✏️ Numeric content'), + withoutDay: figma.string('✏️ Without day'), + withoutTime: figma.string('✏️ Without time'), + + // boolean + tooltipUnderline: figma.boolean('With tooltip underline'), + + // enum + content: figma.enum('Format', { + Default: figma.string('✏️ Default timestamp content'), + 'Without time': figma.string('✏️ Without time'), + 'Without day': figma.string('✏️ Without day'), + Abbreviated: figma.string('✏️ Abbreviated content'), + Numeric: figma.string('✏️ Numeric content') + }), + children: figma.children('*') + }, + example: (props) => ( + // Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp + + ) + } +); diff --git a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx new file mode 100644 index 00000000000..e278100da1d --- /dev/null +++ b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx @@ -0,0 +1,33 @@ +import figma from '@figma/code-connect'; +import { ToggleGroup } from '@patternfly/react-core'; + +figma.connect( + ToggleGroup, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7644-56919', + { + props: { + // enum + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }), + + // nested props + leftItem: figma.nestedProps('Base components/Toggle groups parts', { + text: figma.string('Text') + }), + middleItem1: figma.nestedProps('Base components/Toggle groups parts', { + text: figma.string('Text') + }), + middleItem2: figma.nestedProps('Base components/Toggle groups parts', { + text: figma.string('Text') + }), + rightItem: figma.nestedProps('Base components/Toggle groups parts', { + text: figma.string('Text') + }), + + children: figma.children('*') + }, + example: (props) => {props.children} + } +); diff --git a/packages/code-connect/components/Tooltip/Tooltip.figma.tsx b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx new file mode 100644 index 00000000000..3429393c2cc --- /dev/null +++ b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx @@ -0,0 +1,37 @@ +import figma from '@figma/code-connect'; +import { Tooltip } from '@patternfly/react-core'; + +figma.connect( + Tooltip, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6598-70985', + { + props: { + // string + content: figma.string('Text'), + + // enum + position: figma.enum('Type', { + 'Bottom-left': 'bottom-start', + 'Bottom-middle': 'bottom', + 'Bottom-right': 'bottom-end', + 'Left-bottom': 'left-end', + 'Left-middle': 'left', + 'Left-top': 'left-start', + 'Right-bottom': 'right-end', + 'Right-middle': 'right', + 'Right-top': 'right-start', + 'Top-left': 'top-start', + 'Top-middle': 'top', + 'Top-right': 'top-end' + }), + + children: figma.children('*') + }, + example: (props) => ( + // Documentation for Tooltip can be found at https://www.patternfly.org/components/tooltip + + {props.children} + + ) + } +); From 9c68b4c35c035f5a41992e5d7fff38780e7c5f42 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 17 Jun 2025 09:27:49 -0400 Subject: [PATCH 02/14] feat(CC-batch-8): updated required props --- packages/code-connect/components/Slider/Slider.figma.tsx | 9 +++++---- .../components/Tabs/HorizontalSubTabs.figma.tsx | 2 +- .../code-connect/components/Tabs/VerticalTabs.figma.tsx | 2 +- .../components/ToggleGroup/ToggleGroup.figma.tsx | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx index 0696603db9e..839c292ab12 100644 --- a/packages/code-connect/components/Slider/Slider.figma.tsx +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -14,11 +14,12 @@ figma.connect( // enum state: figma.enum('State', { - Default: 'default', + Default: undefined, Active: 'active', Disabled: 'disabled', Hover: 'hover' }), + isDisabled: figma.enum('State', { Disabled: true }), type: figma.enum('Type', { Continuous: 'continuous', Discrete: 'discrete' @@ -27,10 +28,10 @@ figma.connect( example: (props) => ( // Documentation for Slider can be found at https://www.patternfly.org/components/slider ) } diff --git a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx index 645d3552f8c..8add074f8ca 100644 --- a/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx +++ b/packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx @@ -8,7 +8,7 @@ figma.connect( props: { children: figma.children('*'), isBox: figma.enum('Type', { - Boxed: false, + Boxed: true, 'Boxed Light': true }) }, diff --git a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx index 413d44bf4c6..722c764d8f7 100644 --- a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx +++ b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx @@ -8,7 +8,7 @@ figma.connect( props: { children: figma.children('*'), isBox: figma.enum('Type', { - Boxed: false, + Boxed: true, 'Boxed Light': true, 'Inset Boxed': true }), diff --git a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx index e278100da1d..8493f8a66da 100644 --- a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx +++ b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx @@ -8,7 +8,7 @@ figma.connect( props: { // enum size: figma.enum('Size', { - Default: 'default', + Default: undefined, Compact: 'compact' }), From d54ca0f3fc730c1cba9bdbbfda656ffaf74bee5a Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 24 Jun 2025 11:21:21 -0400 Subject: [PATCH 03/14] feat(CC-batch-8): verification complete --- .../components/Slider/Slider.figma.tsx | 44 ++++++++----- .../components/Spinner/Spinner.figma.tsx | 7 +-- .../components/Splitter/Splitter.figma.tsx | 28 ++++----- .../Tabs/HorizontalSubTabs.figma.tsx | 4 +- .../components/Tabs/HorizontalTab.figma.tsx | 54 +++++++++++++--- .../components/Tabs/HorizontalTabs.figma.tsx | 5 +- .../components/Tabs/TabVertical.figma.tsx | 62 +++++++++++++++++++ .../components/Tabs/VerticalTabs.figma.tsx | 14 +++-- .../components/TimeStamp/Timestamp.figma.tsx | 42 ++++++++----- .../ToggleGroup/ToggleGroup.figma.tsx | 2 + .../components/Tooltip/Tooltip.figma.tsx | 7 ++- 11 files changed, 199 insertions(+), 70 deletions(-) create mode 100644 packages/code-connect/components/Tabs/TabVertical.figma.tsx diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx index 839c292ab12..34c67c25b60 100644 --- a/packages/code-connect/components/Slider/Slider.figma.tsx +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -1,5 +1,10 @@ import figma from '@figma/code-connect'; -import { Slider } from '@patternfly/react-core'; +import { Button, Slider } from '@patternfly/react-core'; +import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; + +// TODO: FIGMA: Define left/right actions +// Documentation for Slider can be found at https://www.patternfly.org/components/slider figma.connect( Slider, @@ -7,31 +12,36 @@ figma.connect( { props: { // boolean - leftAction: figma.boolean('Left action'), + isInputVisible: figma.boolean('Value input'), minmaxValues: figma.boolean('Min/max values'), - rightAction: figma.boolean('Right action'), valueInput: figma.boolean('Value input'), - - // enum - state: figma.enum('State', { - Default: undefined, - Active: 'active', - Disabled: 'disabled', - Hover: 'hover' + startActions: figma.boolean('Left action', { + true: ) } From 44d931cf92f0e0d968128dd46257f6fa1b696614 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 26 Jun 2025 16:48:11 -0400 Subject: [PATCH 04/14] Update packages/code-connect/components/Slider/Slider.figma.tsx Co-authored-by: Evan --- packages/code-connect/components/Slider/Slider.figma.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx index 34c67c25b60..3b5c79e24d3 100644 --- a/packages/code-connect/components/Slider/Slider.figma.tsx +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -24,7 +24,6 @@ figma.connect( false: undefined }), // enum - isActive: figma.enum('State', { Active: true }), isContinuous: figma.enum('Type', { Continuous: true }), isDisabled: figma.enum('State', { Disabled: true }), showTicks: figma.enum('Type', { Discrete: true }) From d73faf68807719cba7d20c7eac1d9f3a0142bbaa Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 26 Jun 2025 16:48:19 -0400 Subject: [PATCH 05/14] Update packages/code-connect/components/Slider/Slider.figma.tsx Co-authored-by: Evan --- packages/code-connect/components/Slider/Slider.figma.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx index 3b5c79e24d3..03c14e083c7 100644 --- a/packages/code-connect/components/Slider/Slider.figma.tsx +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -20,7 +20,7 @@ figma.connect( false: undefined }), endActions: figma.boolean('Right action', { - true: +
{props.text}
) } diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 67bbeb62bfd..3175f3860f2 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -5,7 +5,7 @@ "components/Slider/*.tsx", "components/Spinner/*.tsx", "components/Tabs/*.tsx", - "components/TimeStamps/*.tsx", + "components/Timestamp/*.tsx", "components/ToggleGroup/*.tsx", "components/Tooltip/*.tsx" ], From 0dbd0a7188c9945d7454a91cc8823bb5b99daba1 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Fri, 26 Sep 2025 08:28:22 -0400 Subject: [PATCH 12/14] feat(CC-batch-8): group review 9/23 updates --- .../components/Slider/Slider.figma.tsx | 5 +- .../components/Spinner/Spinner.figma.tsx | 2 +- .../Tabs/HorizontalSubTabs.figma.tsx | 19 ------ .../components/Tabs/HorizontalTab.figma.tsx | 60 ------------------- .../components/Tabs/HorizontalTabs.figma.tsx | 21 ++++++- .../components/Tabs/TabVertical.figma.tsx | 58 ------------------ .../components/Tabs/VerticalTabs.figma.tsx | 52 ++++++++-------- .../BaseComponentsToggleGroupsParts.figma.tsx | 5 +- .../ToggleGroup/ToggleGroup.figma.tsx | 22 ++----- .../components/Tooltip/Tooltip.figma.tsx | 8 +-- packages/code-connect/figma.config.json | 5 +- 11 files changed, 61 insertions(+), 196 deletions(-) delete mode 100644 packages/code-connect/components/Tabs/HorizontalSubTabs.figma.tsx delete mode 100644 packages/code-connect/components/Tabs/HorizontalTab.figma.tsx delete mode 100644 packages/code-connect/components/Tabs/TabVertical.figma.tsx diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx index db858b81025..bb90238a959 100644 --- a/packages/code-connect/components/Slider/Slider.figma.tsx +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -8,12 +8,11 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; figma.connect( Slider, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components?node-id=3155-97956', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3155-97956', { props: { // boolean isInputVisible: figma.boolean('Value input'), - showBoundaries: figma.boolean('Min/max values'), startActions: figma.boolean('Left action', { true: ) } diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 3175f3860f2..46613939317 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -9,6 +9,9 @@ "components/ToggleGroup/*.tsx", "components/Tooltip/*.tsx" ], + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/e1OeQDrgPKW13FswRqSP3I/PatternFly-6--Components" + }, "paths": { "src/components": "src/components" }, @@ -31,4 +34,4 @@ } } } -} \ No newline at end of file +} From eb6bc49b1233b85e03bae44a8b0af6c3adb2d289 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 29 Sep 2025 11:54:50 -0400 Subject: [PATCH 13/14] feat(CC-batch-8): new tabs sub-component files --- .gitignore | 1 + .../Tabs/SubTabsItemHorizontal.figma.tsx | 29 +++++++++ .../Tabs/TabItemsHorizontal.figma.tsx | 61 ++++++++++++++++++ .../Tabs/TabItemsVertical.figma.tsx | 62 +++++++++++++++++++ .../auto-generate-figma.config.json | 7 +++ .../components/bafigma.config.json | 36 +++++++++++ 6 files changed, 196 insertions(+) create mode 100644 packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx create mode 100644 packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx create mode 100644 packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx create mode 100644 packages/code-connect/components/auto-generate-figma.config.json create mode 100644 packages/code-connect/components/bafigma.config.json diff --git a/.gitignore b/.gitignore index 07168936c32..414d50220e1 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ coverage .tmp .eslintcache package-lock.json +.env # package managers yarn-error.log diff --git a/packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx b/packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx new file mode 100644 index 00000000000..cf40629adae --- /dev/null +++ b/packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx @@ -0,0 +1,29 @@ +import figma from '@figma/code-connect'; +import { Tabs } from '@patternfly/react-core'; + +// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs + +figma.connect( + Tabs, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6284&m=dev', + { + props: { + children: figma.children('*'), + isBox: figma.enum('Type', { + Boxed: true, + 'Boxed Light': true + }) + }, + example: (props) => ( + {}} + role="region" + > + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx b/packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx new file mode 100644 index 00000000000..80c047cb433 --- /dev/null +++ b/packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx @@ -0,0 +1,61 @@ +import figma from '@figma/code-connect'; +import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import { ref } from 'node:process'; + +// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey +// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs + +const shareProps = { + popover: figma.boolean('Help button', { + true: ( + Help popover} + bodyContent={ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + footerContent="Popover footer" + triggerRef={ref} + /> + ), + false: undefined + }), + icon: figma.boolean('Icon', { + true: ( + <> + + + {' '} + + ), + false: undefined + }) +}; + +figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6161', { + props: { + ...shareProps, + // string + tabText: figma.string('Tab text'), + + // enum + isDisabled: figma.enum('State', { Disabled: true }) + }, + example: (props) => ( + + {props.icon} + {props.tabText} + + } + > + {props.tabText} + + ) +}); diff --git a/packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx b/packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx new file mode 100644 index 00000000000..8c288e9de06 --- /dev/null +++ b/packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx @@ -0,0 +1,62 @@ +import figma from '@figma/code-connect'; +import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import { ref } from 'node:process'; + +// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey +// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs + +const shareProps = { + popover: 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" + triggerRef={ref} + /> + ), + false: undefined + }), + icon: figma.boolean('Icon at start', { + true: ( + <> + + + + {''} + + ), + false: undefined + }) +}; + +figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6407', { + props: { + ...shareProps, + // string + tabText: figma.string('Text'), + + // enum + isDisabled: figma.enum('State', { Disabled: true }) + }, + example: (props) => ( + + {props.icon} + {props.tabText} + + } + > + {props.tabText} + + ) +}); diff --git a/packages/code-connect/components/auto-generate-figma.config.json b/packages/code-connect/components/auto-generate-figma.config.json new file mode 100644 index 00000000000..80b3c01654a --- /dev/null +++ b/packages/code-connect/components/auto-generate-figma.config.json @@ -0,0 +1,7 @@ +{ + "codeConnect": { + "include": ["../../**/*.{tsx,jsx}"], + "label": "React", + "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components" + } +} diff --git a/packages/code-connect/components/bafigma.config.json b/packages/code-connect/components/bafigma.config.json new file mode 100644 index 00000000000..a1b9a9916e8 --- /dev/null +++ b/packages/code-connect/components/bafigma.config.json @@ -0,0 +1,36 @@ +{ + "codeConnect": { + "label": "React", + "include": [ + "components/NotificationDrawer/*.tsx", + "components/Pagination/*.tsx", + "components/Popover/*.tsx", + "components/SimpleList/*.tsx", + "components/Skeleton/*.tsx" + ], + "paths": { + "components": "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": "." + }, + "importPaths": { + "components": "components" + }, + "options": { + "instanceSwapper": { + "enabled": true + }, + "development": { + "enabled": true, + "verbose": true + }, + "production": { + "enabled": false + } + } + } +} From cdf84bac839b03acc7763fb50b1e1d043d663b71 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 30 Sep 2025 08:05:33 -0400 Subject: [PATCH 14/14] feat(CC-batch-8): cleanup unused imports, organized code --- .../components/Slider/Slider.figma.tsx | 8 +++---- .../components/Tabs/HorizontalTabs.figma.tsx | 16 +++++++++----- .../Tabs/SubTabsItemHorizontal.figma.tsx | 6 +++-- .../Tabs/TabItemsHorizontal.figma.tsx | 22 +++++++++---------- .../Tabs/TabItemsVertical.figma.tsx | 5 ++--- .../components/Tabs/VerticalTabs.figma.tsx | 6 +++-- .../components/TimeStamp/Timestamp.figma.tsx | 1 - .../BaseComponentsToggleGroupsParts.figma.tsx | 1 + 8 files changed, 36 insertions(+), 29 deletions(-) diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx index bb90238a959..83a1f8be6cc 100644 --- a/packages/code-connect/components/Slider/Slider.figma.tsx +++ b/packages/code-connect/components/Slider/Slider.figma.tsx @@ -13,14 +13,14 @@ figma.connect( props: { // boolean isInputVisible: figma.boolean('Value input'), - startActions: figma.boolean('Left action', { - true: