Skip to content

feat(CC-batch-6): added batch 6 #11868

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 3 commits into
base: main
Choose a base branch
from
Draft

feat(CC-batch-6): added batch 6 #11868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff681a6
feat(CC-batch-6): added batch 6 components
mattnolting Jun 11, 2025
78ad70d
update
mattnolting Jun 12, 2025
80d95d1
feat(CC-batch-6): updated required props
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
25 changes: 25 additions & 0 deletions packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import figma from '@figma/code-connect';
import { JumpLinksItem } from '@patternfly/react-core';

figma.connect(
JumpLinksItem,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5286-5330&t=IzSunfrnw18ti37Y-11',
{
props: {
// string
tabText: figma.string('Tab Text'),

// enum
isActive: figma.enum('State', { Selected: true }),

children: figma.children('*')
},
example: (props) => (
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
<JumpLinksItem href="#" isActive={props.isActive}>
{props.tabText}
{props.children}
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't see any JumpLinksItem in our docs with any text in them other than the tabText. Do you know what this is intended to show?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think children can be removed for this and JumpLinkVertical.

I also think these files could be combined and renamed to JumpLinksItem since they're identical, but I don't know if figma needs these to be separate.

</JumpLinksItem>
)
}
);
22 changes: 22 additions & 0 deletions packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import figma from '@figma/code-connect';
import { JumpLinksItem } from '@patternfly/react-core';

figma.connect(
JumpLinksItem,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8306',
{
props: {
// string
tabText: figma.string('Tab Text'),

// enum
isActive: figma.enum('State', { Selected: true })
},
example: (props) => (
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
<JumpLinksItem href="#" isActive={props.isActive}>
{props.tabText}
</JumpLinksItem>
)
}
);
19 changes: 19 additions & 0 deletions packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import figma from '@figma/code-connect';
import { JumpLinks } from '@patternfly/react-core';

figma.connect(
JumpLinks,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8644-150823&t=IzSunfrnw18ti37Y-11',
{
props: {
// boolean
label: figma.boolean('Show label', { true: figma.children('Label') }),

children: figma.children('*')
},
example: (props) => (
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
<JumpLinks label={props.label}>{props.children}</JumpLinks>
)
}
);
24 changes: 24 additions & 0 deletions packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import figma from '@figma/code-connect';
import { JumpLinks } from '@patternfly/react-core';

figma.connect(
JumpLinks,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8542&t=IzSunfrnw18ti37Y-11',
{
props: {
// boolean
label: figma.boolean('Show Label', {
true: figma.children('Label'),
false: undefined
}),

children: figma.children('*')
},
example: (props) => (
// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
<JumpLinks isVertical label={props.label}>
{props.children}
</JumpLinks>
)
}
);
21 changes: 21 additions & 0 deletions packages/code-connect/components/Label/LabelInGroup.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import figma from '@figma/code-connect';
import { LabelGroup } from '@patternfly/react-core';

figma.connect(
LabelGroup,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-1075',
{
props: {
// string
categoryName: figma.string('Label group name'),
isCollapsed: figma.boolean('Has collapsed labels'),
children: figma.children('Label')
},
// Documentation for LabelGroup can be found at https://www.patternfly.org/components/label-group
example: (props) => (
<LabelGroup categoryName={props.categoryName} numLabels={5}>
{props.children}
</LabelGroup>
)
}
);
43 changes: 43 additions & 0 deletions packages/code-connect/components/Label/LabelNonStatus.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import figma from '@figma/code-connect';
import { Label } from '@patternfly/react-core';

/**
* PatternFly Label component integration for Figma Code Connect
* @see https://www.patternfly.org/components/label
*/

figma.connect(
Label,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-609',
{
props: {
// string
text: figma.string('Text'),

// boolean
isEditable: figma.boolean('Is Editable'),

// enum
color: figma.enum('Color', {
Red: 'red',
Orange: 'orange',
'Orange Red': 'orangered',
Green: 'green',
Blue: 'blue',
Purple: 'purple',
Grey: 'grey'
Copy link
Contributor

Choose a reason for hiding this comment

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

teal and yellow are also valid colors for Label.

}),
variant: figma.enum('Type', {
Filled: 'filled',
Outlined: 'outline'
}),
isCompact: figma.enum('Type', { Compact: true })
},
example: (props) => (
// Documentation for Label can be found at https://www.patternfly.org/components/label
<Label color={props.color} variant={props.variant} isCompact={props.isCompact} isEditable={props.isEditable}>
Copy link
Contributor

Choose a reason for hiding this comment

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

If a label is editable, it needs a suite of extra props as well:

        isEditable 
        onEditCancel={(_event, prevText) => {}} // Callback when an editable label cancels an edit.
        onEditComplete={(_event, newText) => {}} // Callback when an editable label completes an edit.
        editableProps={{
          'aria-label': `Editable label with text ${label1}`,
          id: 'editable-label-1'
        }} // Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control.

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

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

figma.connect(
Label,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-609',
{
props: {
text: figma.string('Text'),
variant: figma.enum('Type', {
Filled: 'filled',
Outlined: 'outlined'
}),
isCompact: figma.enum('Type', {
Compact: true
})
},
example: (props) => (
// Documentation for Label can be found at https://www.patternfly.org/components/label
<Label
color={props.color}
variant={props.variant}
isCompact={props.isCompact}
isEditable={props.isEditable}
isDismissable={props.isDismissable}
text={props.text}
hasIcon={props.hasIcon}
/>
)
}
);
30 changes: 30 additions & 0 deletions packages/code-connect/components/Label/LabelStatus.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 { Label } from '@patternfly/react-core';

figma.connect(
Label,
Copy link
Contributor

Choose a reason for hiding this comment

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

Does figma have a 'clickable' variant for labels? or do any of their labels have close buttons? those are two features that are highlighted in our docs that don't seem covered by these examples..

'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-488',
{
props: {
text: figma.string('Text'),
status: figma.enum('State', {
Danger: 'danger',
Warning: 'warning',
Success: 'success',
Info: 'info',
Custom: 'custom'
}),
type: figma.enum('Type', {
Filled: 'filled',
Outlined: 'outline'
}),
isCompact: figma.enum('Size', { Compact: true })
},
example: (props) => (
// Documentation for Label can be found at https://www.patternfly.org/components/label
<Label isCompact={props.isCompact} status={props.status} variant={props.type}>
{props.text}
</Label>
)
}
);
32 changes: 32 additions & 0 deletions packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import figma from '@figma/code-connect';
import { LoginPage } from '@patternfly/react-core';

// TODO: Map Figma component to these properties

figma.connect(
LoginPage,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-4180',
{
props: {
children: figma.children('*')
},
example: (props) => (
// Documentation for LoginPage can be found at https://www.patternfly.org/components/login-page
<LoginPage
brandImgSrc={brandImg}
brandImgAlt="PatternFly logo"
backgroundImgSrc="/assets/images/pfbg-icon.svg"
footerListItems={listItem}
textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
loginTitle="Log in to your account"
loginSubtitle="Enter your single sign-on LDAP credentials."
socialMediaLoginContent={socialMediaLoginContent}
socialMediaLoginAriaLabel="Log in with social media"
signUpForAccountMessage={signUpForAccountMessage}
forgotCredentials={forgotCredentialsprops.isInvalid}
>
{props.children}
Copy link
Contributor

Choose a reason for hiding this comment

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

these children should be a form, right?

</LoginPage>
)
}
);
36 changes: 36 additions & 0 deletions packages/code-connect/components/Masthead/Masthead.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import figma from '@figma/code-connect';
import {
Button,
Masthead,
MastheadBrand,
MastheadContent,
MastheadLogo,
MastheadMain,
MastheadToggle
} from '@patternfly/react-core';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';

// TODO: Map Figma component to these properties.

figma.connect(
Masthead,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-6642',
{
props: {},
example: () => (
<Masthead id="<masthead-id>" inset={{ default: 'insetSm' }}>
<MastheadMain>
<MastheadToggle>
<Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
Copy link
Contributor

Choose a reason for hiding this comment

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

ReferenceError: BarsIcon is not defined

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we expect these stubs to include import statements though right? Masthead and co. are also not imported in the stub and aren't expected to already be imported wherever they're pasted (our docs I think just import a bunch of things automatically).

</MastheadToggle>
<MastheadBrand>
<MastheadLogo component="a">Logo</MastheadLogo>
</MastheadBrand>
</MastheadMain>
<MastheadContent>
<span>Content</span>
</MastheadContent>
</Masthead>
)
}
);
13 changes: 13 additions & 0 deletions packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import figma from '@figma/code-connect';
import { MastheadToggle } from '@patternfly/react-core';

figma.connect(
MastheadToggle,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-6713&m=dev',
{
props: {
children: figma.children('*')
},
example: (props) => <MastheadToggle>{props.children}</MastheadToggle>
Copy link
Contributor

Choose a reason for hiding this comment

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

should we tell them that this is intended to be a button with an onClick handler for toggling open and closed the sidebar nav?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be a good comment to have.

}
);
21 changes: 21 additions & 0 deletions packages/code-connect/components/Modal/AlertModal.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import figma from '@figma/code-connect';
import { Modal } from '@patternfly/react-core';

figma.connect(
Modal,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2940-18403&t=IzSunfrnw18ti37Y-11',
{
props: {
size: figma.enum('Size', {
Small: 'small',
Medium: 'medium',
Large: 'large'
}),
children: figma.children('*')
},
example: (props) => (
// Documentation for Modal can be found at https://www.patternfly.org/components/modal
<Modal variant={props.size}>{props.children}</Modal>
Copy link
Contributor

Choose a reason for hiding this comment

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

we don't have alert modals?

we have a title icon which lets them specify a status to add the correct icon to the header?
https://www.patternfly.org/components/modal#title-icon

)
}
);
21 changes: 21 additions & 0 deletions packages/code-connect/components/Modal/BasicModal.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import figma from '@figma/code-connect';
import { Modal } from '@patternfly/react-core';

figma.connect(
Modal,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2937-158&t=IzSunfrnw18ti37Y-11',
{
props: {
size: figma.enum('Size', {
Small: 'small',
Medium: 'medium',
Large: 'large'
}),
children: figma.children('*')
},
example: (props) => (
// Documentation for Modal can be found at https://www.patternfly.org/components/modal
<Modal variant={props.size}>{props.children}</Modal>
Copy link
Contributor

Choose a reason for hiding this comment

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

This will have the same issues as the AboutModal where the Modal will not appear unless it has isOpen={true} but really they probably want a button which will allow them to open/close the modal...

Copy link
Contributor

Choose a reason for hiding this comment

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

This also invalid...
It needs a header, body, and footer. It'll also need a close button of some kind

Screenshot 2025-06-12 at 10 44 01 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

This applies for the AlertModal figma cc as well, it also needs the header/body/footer. children probably maps to the ModalBody content I would expect, and the rest could be stubbed out.

Modal would also benefit from having aria-labelledby and aria-describedby stubbed out with ids matching the respective ModalHeader and ModalBody.

)
}
);
39 changes: 39 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,39 @@
{
"codeConnect": {
"parser": "react",
"include": [
"components/JumpLinks/*.figma.tsx",
"components/Label/*.figma.tsx",
"components/LoginPage/*.figma.tsx",
"components/Masthead/*.figma.tsx",
"components/Modal/*.figma.tsx"
],
"paths": {
"@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",
"@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src"
},
"aliases": {
"@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",
"@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src"
},
"importPaths": {
"src/components": "src/components"
},
"options": {
"instanceSwapper": {
"enabled": true
},
"development": {
"enabled": true,
"verbose": true
},
"production": {
"enabled": false
}
},
"exclude": [
"node_modules/**",
"scripts/**"
]
}
}
Loading