Skip to content

feat(CC-batch-1): added batch 1 #11827

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
+214 −0
Draft

feat(CC-batch-1): added batch 1 #11827

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e49f563
feat(CC-batch-1): prepared batch 1
mattnolting May 13, 2025
9f6488f
feat(CC-batch-1): moved CC out of react-core
mattnolting May 22, 2025
8c034f0
feat(CC-batch-1): updated props
mattnolting Jun 3, 2025
79a0a79
feat(CC-batch-1): updated props and comments
mattnolting Jun 4, 2025
eae1820
feat(CC-batch-1): updated component link comments
mattnolting Jun 4, 2025
a366810
feat(CC-batch-1): minor formatting updates
mattnolting Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions packages/code-connect/components/AboutModal/AboutModal.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import figma from '@figma/code-connect';
import { AboutModal } from '@patternfly/react-core';

/**
* PatternFly About Modal component integration for Figma Code Connect
*/

figma.connect(
AboutModal,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2879-13973&t=15CEJpGgVui7qP5Q-11',
{
props: {
// string
productName: figma.string('Product name'),

children: figma.children('*')
},
example: (props) => (
<AboutModal
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this be updated to be

example: (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
    setIsModalOpen(!isModalOpen);
  };

  return (
    <>
      {/* The 'toggleModal' function can be placed on any button in a UI to open and close the AboutModal. */}
      <Button variant="primary" onClick={toggleModal}>
        Show about modal
      </Button>
      <AboutModal
        isOpen={isModalOpen}
        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
        productName={props.productName}
        trademark={props.trademark}
        brandImageSrc={props.brandImageSrc}
        brandImageAlt={props.brandImageAlt}
        backgroundImageSrc={props.backgroundImageSrc}
      >
        {props.children}
      </AboutModal>
    </>
  );
};

so that the about modal can be toggled open and closed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicolethoen I tested this, it throws validation errors and can't be used.

Screenshot 2025-06-18 at 12 42 54 PM

productName={props.productName}
trademark="Copyright © 2024"
brandImageSrc="Brand Image Source"
brandImageAlt="Brand Image Alt Text"
backgroundImageSrc="/assets/images/background.png"
>
{props.children}
</AboutModal>
)
}
);
33 changes: 33 additions & 0 deletions packages/code-connect/components/Accordion/Accordion.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import figma from '@figma/code-connect';
import { Accordion } from '@patternfly/react-core';

/**
* PatternFly Accordion component integration for Figma Code Connect
*/

figma.connect(
Accordion,
'https://www.figma.com/file/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2621-623',
{
props: {
// enum
displaySize: figma.enum('Type', {
'Large Bordered': 'lg'
}),
isBordered: figma.enum('Type', {
Bordered: true,
'Large Bordered': true
}),
togglePosition: figma.enum('Caret position', {
Left: 'start'
}),

children: figma.children('*')
},
example: (props) => (
<Accordion togglePosition={props.togglePosition} isBordered={props.isBordered} displaySize={props.displaySize}>
{props.children}
</Accordion>
)
}
);
39 changes: 39 additions & 0 deletions packages/code-connect/components/Accordion/AccordionToggle.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import figma from '@figma/code-connect';
import { AccordionItem, AccordionToggle, AccordionContent } from '@patternfly/react-core';

/**
* PatternFly Accordion component integration for Figma Code Connect
*/

figma.connect(
AccordionToggle,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1423-687&m=dev',
{
props: {
// string
expandText: figma.string('Expand Text'),

// enums
toggleTextExpanded: figma.enum('State', {
Default: figma.string('Toggle Text'),
Hover: figma.string('Toggle Text'),
Expanded: figma.string('Toggle Text Expanded')
}),

// enum
isExpanded: figma.enum('State', {
Expanded: true
}),

children: figma.children('*')
},
example: (props) => (
<AccordionItem isExpanded={props.isExpanded}>
<AccordionToggle>{props.toggleTextExpanded}</AccordionToggle>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The AccordionToggle should have an id="<your-id-here>" or something like that. id` is a required prop.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd also add a comment here recommending they implement an onClick event to toggle the expanded state of this Accordion.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

<AccordionContent>
<p>{props.expandText}</p>
</AccordionContent>
</AccordionItem>
)
}
);
17 changes: 17 additions & 0 deletions packages/code-connect/components/ActionList/ActionList.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import figma from '@figma/code-connect';
import { ActionList } from '@patternfly/react-core';

/**
* PatternFly ActionList integration for Figma Code Connect
*/

figma.connect(
ActionList,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6780-15839&m=dev',
{
props: {
Copy link
Contributor

@kmcfaul kmcfaul May 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it's worth adding the isIconList prop here or if there is no distinction in figma. In React this boolean prop adds a class for icon-only lists that removes some additional padding.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can look for Action icons only, and set isIconList based on that.

children: figma.children('*')
},
example: (props) => <ActionList>{props.children}</ActionList>
}
);
15 changes: 15 additions & 0 deletions packages/code-connect/components/BackgroundImage/BackgroundImage.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import figma from '@figma/code-connect';
import { BackgroundImage } from '@patternfly/react-core';

/**
* PatternFly BackgroundImage component integration for Figma Code Connect
*/

figma.connect(
BackgroundImage,
'https://www.figma.com/file/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=5047-695',
{
props: {},
example: () => <BackgroundImage src="/assets/images/pf-background.svg" />
}
);
26 changes: 26 additions & 0 deletions packages/code-connect/components/ClipboardCopy/ClipboardCopyBasic.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import figma from '@figma/code-connect';
import { ClipboardCopy } from '@patternfly/react-core';

/**
* PatternFly ClipboardCopyInlineCompact component integration for Figma Code Connect
*/

figma.connect(
ClipboardCopy,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9914-75835&m=dev',
{
props: {
// enum
isActive: figma.enum('State', { Active: true }),
isReadOnly: figma.enum('State', { 'Read only': true }),
isExpanded: figma.enum('State', { Expanded: true }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there a way in figma to make an expandable clipboardCopy variant? If so, then isExpanded can be passed, but also the variant needs to be 'expansion'

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can create an expansion var that references figma.enum('State', { Expanded... }

false: undefined should be included to return "undefined" if state === !expanded, otherwise Figma will complain

      expansion: figma.enum('State', { 
        Expanded: 'expansion',
        false: undefined
      }),


children: figma.children('*')
},
example: (props) => (
<ClipboardCopy isReadOnly={props.isReadOnly} isExpanded={props.isExpanded} isActive={props.isActive}>
{props.children}
</ClipboardCopy>
)
}
);
17 changes: 17 additions & 0 deletions packages/code-connect/components/ClipboardCopy/ClipboardCopyInlineCompact.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import figma from '@figma/code-connect';
import { ClipboardCopy } from '@patternfly/react-core';

/**
* PatternFly ClipboardCopyInlineCompact component integration for Figma Code Connect
*/

figma.connect(
ClipboardCopy,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9914-75768&m=dev',
{
props: {
children: figma.children('*')
},
example: (props) => <ClipboardCopy variant="inline-compact">{props.children}</ClipboardCopy>
}
);
33 changes: 33 additions & 0 deletions packages/code-connect/figma.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"codeConnect": {
"parser": "react",
"include": [
"components/AboutModal/*.tsx",
"components/Accordion/*.tsx",
"components/ActionList/*.tsx",
"components/BackgroundImage/*.tsx",
"components/ClipboardCopy/*.tsx"
],
"paths": {
"src/components": "src/components"
},
"aliases": {
"@patternfly/react-core": "."
},
"importPaths": {
"src/components": "src/components"
},
"options": {
"instanceSwapper": {
"enabled": true
},
"development": {
"enabled": true,
"verbose": true
},
"production": {
"enabled": false
}
}
}
}
Loading