From 44c787bc42180d1f59aa4982de918a5895063398 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 22 Jul 2025 09:52:33 -0400 Subject: [PATCH 1/5] feat(CC-expandable-section): separated expandable section variants --- .../ExandableSectionTruncate.figma.tsx | 49 ++++++ .../ExpandableSection.figma.tsx | 158 ++++++++++++++++++ .../ExpandableSectionDisclosure.figma.tsx | 128 ++++++++++++++ 3 files changed, 335 insertions(+) create mode 100644 packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx create mode 100644 packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx create mode 100644 packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx diff --git a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx new file mode 100644 index 00000000000..08626983796 --- /dev/null +++ b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx @@ -0,0 +1,49 @@ +import figma from '@figma/code-connect'; +import { ExpandableSection } from '@patternfly/react-core'; + +// // TODO: DESIGN: Create toggle component +// // onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing +// // isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing + +// // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146', + { + props: { + toggleText: figma.string('Toggle Text More') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + > + This content is visible only when the component is expanded. + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146', + { + variant: { State: 'Expanded' }, + props: { + toggleText: figma.string('Toggle Text Less'), + defaultContentSectionText: figma.string('Default Truncate Text') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + variant="truncate" + > + {props.defaultContentSectionText} + + ) + } +); diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx new file mode 100644 index 00000000000..6c859fd339a --- /dev/null +++ b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx @@ -0,0 +1,158 @@ +import figma from '@figma/code-connect'; +import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; + +// TODO: DESIGN: This component needs to be overhauled. Using the base component approach present in +// other components would significantly reduce complexity. +// TODO: DESIGN: Create toggle component +// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing +// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing + +// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section + +const customToggleContent = ` +
+ You can also use icons + + or badges + 4 + ! +
+`; + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + props: { + toggleText: figma.string('Toggle Text More') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + > + This content is visible only when the component is expanded. + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + variant: { State: 'Expanded Basic' }, + props: { + // enum + expandedContentSectionText: figma.string('Expanded Text'), + toggleText: figma.string('Toggle Text Less') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + > + {props.expandedContentSectionText} + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + variant: { State: 'Expand Detached' }, + props: { + // enum + expandedContentSectionText: figma.string('Expanded Text'), + toggleText: figma.string('Toggle Text Less'), + toggleId: 'toggle-id', + contentId: 'content-id' + }, + example: (props) => ( + + + + {props.expandedContentSectionText} + + + + {}} + toggleId={props.toggleId} + contentId={props.contentId} + direction="up" + > + {isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + + + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + variant: { State: 'Expanded Indent' }, + props: { + // enum + expandedContentSectionText: figma.string('Expanded Text'), + toggleText: figma.string('Toggle Text Less'), + toggleId: 'toggle-id', + contentId: 'content-id' + }, + example: (props) => ( + {}} + > + {props.expandedContentSectionText} + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + variant: { State: 'Default Custom Content' }, + example: () => ( + {}}> + This content is visible only when the component is expanded. + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + variant: { State: 'Expanded Custom Content' }, + example: () => ( + {}}> + This content is visible only when the component is expanded. + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + { + variant: { State: 'Expanded Custom with Component swap' }, + example: () => ( + {}}> + This content is visible only when the component is expanded. + + ) + } +); diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx new file mode 100644 index 00000000000..3bfc90b51cb --- /dev/null +++ b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx @@ -0,0 +1,128 @@ +import figma from '@figma/code-connect'; +import { ExpandableSection } from '@patternfly/react-core'; + +const customToggleContent = ` +
+ You can also use icons + + or badges + 4 + ! +
+`; + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + { + props: { + toggleText: figma.string('Toggle Text More') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + > + This content is visible only when the component is expanded. + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + { + variant: { State: 'Expanded' }, + props: { + toggleText: figma.string('Toggle Text Less'), + expandedContentSectionText: figma.string('Expanded Text') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? `${props.toggleText}` : 'Show more basic example content'} + > + {props.expandedContentSectionText} + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + { + variant: { State: 'Expand Uncontrolled' }, + props: { + toggleText: figma.string('Toggle Text More'), + expandedContentSectionText: figma.string('Expanded Text') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + > + {props.expandedContentSectionText} + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + { + variant: { State: 'Expanded Indent' }, + props: { + toggleText: figma.string('Toggle Text More'), + expandedContentSectionText: figma.string('Expanded Text') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + > + {props.expandedContentSectionText} + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + { + variant: { State: 'Default Custom Content' }, + example: () => ( + {}}> + This content is visible only when the component is expanded. + + ) + } +); + +figma.connect( + ExpandableSection, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + { + variant: { State: 'Expanded Custom Content' }, + props: { + toggleText: figma.string('Toggle Text More'), + expandedContentSectionText: figma.string('Expanded Text') + }, + example: (props) => ( + {}} + toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + > + {props.expandedContentSectionText} + + ) + } +); From a93350c57264c2ab1b614ad5030060c8d3ab42fc Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 22 Jul 2025 14:13:10 -0400 Subject: [PATCH 2/5] feat(CC-expandable-section): remove double comments --- .../ExpandableSection/ExandableSectionTruncate.figma.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx index 08626983796..03b3b9558ec 100644 --- a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx @@ -1,11 +1,11 @@ import figma from '@figma/code-connect'; import { ExpandableSection } from '@patternfly/react-core'; -// // TODO: DESIGN: Create toggle component -// // onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing -// // isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing +// TODO: DESIGN: Create toggle component +// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing +// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing -// // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section +// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section figma.connect( ExpandableSection, From 0b1ccf40a0046c5ccf34f81be5e9e8fe88265ed4 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 31 Jul 2025 15:43:29 -0400 Subject: [PATCH 3/5] feat(CC-expandable-section): group review 4 followup --- .../ExandableSectionTruncate.figma.tsx | 14 ++++---- .../ExpandableSection.figma.tsx | 6 ++-- .../ExpandableSectionDisclosure.figma.tsx | 35 +++++++++++-------- 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx index 03b3b9558ec..ee1b39cd94d 100644 --- a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx @@ -12,13 +12,14 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146', { props: { - toggleText: figma.string('Toggle Text More') + toggleText: figma.string('Toggle Text More'), + isExpanded: false }, example: (props) => ( {}} - toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`} > This content is visible only when the component is expanded. @@ -33,13 +34,14 @@ figma.connect( variant: { State: 'Expanded' }, props: { toggleText: figma.string('Toggle Text Less'), - defaultContentSectionText: figma.string('Default Truncate Text') + defaultContentSectionText: figma.string('Default Truncate Text'), + isExpanded: true }, example: (props) => ( {}} - toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`} variant="truncate" > {props.defaultContentSectionText} diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx index 6c859fd339a..0ab02245273 100644 --- a/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx @@ -124,7 +124,7 @@ figma.connect( { variant: { State: 'Default Custom Content' }, example: () => ( - {}}> + {}}> This content is visible only when the component is expanded. ) @@ -137,7 +137,7 @@ figma.connect( { variant: { State: 'Expanded Custom Content' }, example: () => ( - {}}> + {}}> This content is visible only when the component is expanded. ) @@ -150,7 +150,7 @@ figma.connect( { variant: { State: 'Expanded Custom with Component swap' }, example: () => ( - {}}> + {}}> This content is visible only when the component is expanded. ) diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx index 3bfc90b51cb..fd4a6cd190d 100644 --- a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx @@ -16,13 +16,14 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', { props: { - toggleText: figma.string('Toggle Text More') + toggleText: figma.string('Toggle Text More'), + isExpanded: false }, example: (props) => ( {}} - toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} + toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`} > This content is visible only when the component is expanded. @@ -37,13 +38,14 @@ figma.connect( variant: { State: 'Expanded' }, props: { toggleText: figma.string('Toggle Text Less'), - expandedContentSectionText: figma.string('Expanded Text') + expandedContentSectionText: figma.string('Expanded Text'), + isExpanded: true }, example: (props) => ( {}} - toggleText={isExpanded ? `${props.toggleText}` : 'Show more basic example content'} + toggleText={props.isExpanded ? `${props.toggleText}` : 'Show more basic example content'} > {props.expandedContentSectionText} @@ -58,13 +60,14 @@ figma.connect( variant: { State: 'Expand Uncontrolled' }, props: { toggleText: figma.string('Toggle Text More'), - expandedContentSectionText: figma.string('Expanded Text') + expandedContentSectionText: figma.string('Expanded Text'), + isExpanded: true }, example: (props) => ( {}} - toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'} > {props.expandedContentSectionText} @@ -78,14 +81,15 @@ figma.connect( { variant: { State: 'Expanded Indent' }, props: { + expandedContentSectionText: figma.string('Expanded Text'), toggleText: figma.string('Toggle Text More'), - expandedContentSectionText: figma.string('Expanded Text') + isExpanded: true }, example: (props) => ( {}} - toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'} > {props.expandedContentSectionText} @@ -113,13 +117,14 @@ figma.connect( variant: { State: 'Expanded Custom Content' }, props: { toggleText: figma.string('Toggle Text More'), - expandedContentSectionText: figma.string('Expanded Text') + expandedContentSectionText: figma.string('Expanded Text'), + isExpanded: true }, example: (props) => ( {}} - toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'} > {props.expandedContentSectionText} From 98d536a474f0449b3300af75be749da803ca668c Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 22 Sep 2025 14:24:46 -0400 Subject: [PATCH 4/5] feat(CC-expandable-section): updated prop mapping --- .../ExandableSectionTruncate.figma.tsx | 61 ++-- .../ExpandableSection.figma.tsx | 264 +++++++++++------- .../ExpandableSectionDisclosure.figma.tsx | 206 ++++++++------ packages/code-connect/figma.config.json | 10 +- 4 files changed, 323 insertions(+), 218 deletions(-) diff --git a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx index ee1b39cd94d..58415dc740d 100644 --- a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx @@ -9,43 +9,50 @@ import { ExpandableSection } from '@patternfly/react-core'; figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2769-146', { props: { - toggleText: figma.string('Toggle Text More'), - isExpanded: false + truncateText: figma.string('Default truncate text') }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`} - > - This content is visible only when the component is expanded. - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.truncateText} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2769-146', { - variant: { State: 'Expanded' }, props: { - toggleText: figma.string('Toggle Text Less'), - defaultContentSectionText: figma.string('Default Truncate Text'), - isExpanded: true + truncateText: figma.string('Expanded truncate text') }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`} - variant="truncate" - > - {props.defaultContentSectionText} - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.truncateText} + + ); + } } ); diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx index 0ab02245273..86096a49d2c 100644 --- a/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx @@ -1,5 +1,6 @@ import figma from '@figma/code-connect'; -import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; +import { Badge, ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; // TODO: DESIGN: This component needs to be overhauled. Using the base component approach present in // other components would significantly reduce complexity. @@ -9,150 +10,225 @@ import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@p // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section -const customToggleContent = ` +const sharedProps = { + customToggleContent: (
- You can also use icons - - or badges - 4 - ! -
-`; + You can also use icons + + or badges + 4 + ! + + ) +}; figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { props: { - toggleText: figma.string('Toggle Text More') + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} - > - This content is visible only when the component is expanded. - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + This content is visible only when the component is expanded. + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { - variant: { State: 'Expanded Basic' }, + variant: { State: 'Expanded basic' }, props: { // enum - expandedContentSectionText: figma.string('Expanded Text'), - toggleText: figma.string('Toggle Text Less') + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} - > - {props.expandedContentSectionText} - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.expandedContentSectionText} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { - variant: { State: 'Expand Detached' }, + variant: { State: 'Expand detached' }, props: { // enum - expandedContentSectionText: figma.string('Expanded Text'), - toggleText: figma.string('Toggle Text Less'), - toggleId: 'toggle-id', - contentId: 'content-id' + contentId: 'content-id', + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button', + toggleId: 'toggle-id' }, - example: (props) => ( - - - - {props.expandedContentSectionText} - - - - {}} - toggleId={props.toggleId} - contentId={props.contentId} - direction="up" - > - {isExpanded ? `${props.toggleText}` : 'Show less basic example content'} - - - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + + + {props.expandedContentSectionText} + + + + + {isExpanded ? `${props.toggleText}` : 'Show less basic example content'} + + + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { - variant: { State: 'Expanded Indent' }, + variant: { State: 'Expanded indent' }, props: { // enum - expandedContentSectionText: figma.string('Expanded Text'), - toggleText: figma.string('Toggle Text Less'), - toggleId: 'toggle-id', - contentId: 'content-id' + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' }, - example: (props) => ( - {}} - > - {props.expandedContentSectionText} - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.expandedContentSectionText} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { - variant: { State: 'Default Custom Content' }, - example: () => ( - {}}> - This content is visible only when the component is expanded. - - ) + variant: { State: 'Default custom content' }, + props: { + ...sharedProps, + toggleText: 'Button' + }, + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.customToggleContent} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { - variant: { State: 'Expanded Custom Content' }, - example: () => ( - {}}> - This content is visible only when the component is expanded. - - ) + variant: { State: 'Expanded indent' }, + props: { + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' + }, + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(true); + /* eslint-enable */ + + return ( + + {props.expandedContentSectionText} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2404-21', { - variant: { State: 'Expanded Custom with Component swap' }, - example: () => ( - {}}> - This content is visible only when the component is expanded. - - ) + variant: { State: 'Expanded indent' }, + props: { + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' + }, + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(true); + /* eslint-enable */ + + return ( + + {props.expandedContentSectionText} + + ); + } } ); diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx index fd4a6cd190d..dbeaff27676 100644 --- a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx @@ -1,133 +1,161 @@ import figma from '@figma/code-connect'; -import { ExpandableSection } from '@patternfly/react-core'; +import { Badge, ExpandableSection } from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -const customToggleContent = ` +const sharedProps = { + customToggleContent: (
- You can also use icons - - or badges - 4 - ! -
-`; + You can also use icons + + or badges + 4 + ! + + ) +}; figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', { props: { - toggleText: figma.string('Toggle Text More'), - isExpanded: false + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`} - > - This content is visible only when the component is expanded. - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + This content is visible only when the component is expanded. + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', { - variant: { State: 'Expanded' }, + variant: { State: 'Expanded indent' }, props: { - toggleText: figma.string('Toggle Text Less'), - expandedContentSectionText: figma.string('Expanded Text'), - isExpanded: true + // enum + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? `${props.toggleText}` : 'Show more basic example content'} - > - {props.expandedContentSectionText} - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.expandedContentSectionText} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', { - variant: { State: 'Expand Uncontrolled' }, + variant: { State: 'Default custom content' }, props: { - toggleText: figma.string('Toggle Text More'), - expandedContentSectionText: figma.string('Expanded Text'), - isExpanded: true + ...sharedProps, + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'} - > - {props.expandedContentSectionText} - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(false); + /* eslint-enable */ + + return ( + + {props.customToggleContent} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', { - variant: { State: 'Expanded Indent' }, + variant: { State: 'Expanded indent' }, props: { - expandedContentSectionText: figma.string('Expanded Text'), - toggleText: figma.string('Toggle Text More'), - isExpanded: true + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'} - > - {props.expandedContentSectionText} - - ) - } -); + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(true); + /* eslint-enable */ -figma.connect( - ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', - { - variant: { State: 'Default Custom Content' }, - example: () => ( - {}}> - This content is visible only when the component is expanded. - - ) + return ( + + {props.expandedContentSectionText} + + ); + } } ); figma.connect( ExpandableSection, - 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', { - variant: { State: 'Expanded Custom Content' }, + variant: { State: 'Expanded indent' }, props: { - toggleText: figma.string('Toggle Text More'), - expandedContentSectionText: figma.string('Expanded Text'), - isExpanded: true + expandedContentSectionText: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + toggleText: 'Button' }, - example: (props) => ( - {}} - toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'} - > - {props.expandedContentSectionText} - - ) + example: (props) => { + /* eslint-disable */ + const [isExpanded, setIsExpanded] = useState(true); + /* eslint-enable */ + + return ( + + {props.expandedContentSectionText} + + ); + } } ); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..c2434448a46 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -1,13 +1,7 @@ { "codeConnect": { "parser": "react", - "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" - ], + "include": ["components/ExpandableSection/*"], "paths": { "src/components": "src/components" }, @@ -30,4 +24,4 @@ } } } -} \ No newline at end of file +} From 4d4986506eac2d78df39ad12840f72129390e1a2 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 22 Sep 2025 16:40:23 -0400 Subject: [PATCH 5/5] feat(CC-expandable-section): updated prop mapping --- .../ExandableSectionTruncate.figma.tsx | 5 +++-- .../ExpandableSectionDisclosure.figma.tsx | 10 +++++----- packages/code-connect/figma.config.json | 3 +++ 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx index 58415dc740d..e34b2cb4fc8 100644 --- a/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx @@ -9,7 +9,7 @@ import { ExpandableSection } from '@patternfly/react-core'; figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2769-146', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2769-146', { props: { truncateText: figma.string('Default truncate text') @@ -34,8 +34,9 @@ figma.connect( figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2769-146', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2769-146', { + variant: { State: 'Expanded' }, props: { truncateText: figma.string('Expanded truncate text') }, diff --git a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx index dbeaff27676..271299e9239 100644 --- a/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx +++ b/packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx @@ -16,7 +16,7 @@ const sharedProps = { figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80', { props: { toggleText: 'Button' @@ -42,7 +42,7 @@ figma.connect( figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80', { variant: { State: 'Expanded indent' }, props: { @@ -73,7 +73,7 @@ figma.connect( figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80', { variant: { State: 'Default custom content' }, props: { @@ -102,7 +102,7 @@ figma.connect( figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80', { variant: { State: 'Expanded indent' }, props: { @@ -132,7 +132,7 @@ figma.connect( figma.connect( ExpandableSection, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components?node-id=2810-80', + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2810-80', { variant: { State: 'Expanded indent' }, props: { diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index c2434448a46..e6c355ca466 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -5,6 +5,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": "." },