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

mattnolting · 2025-06-12T11:53:46Z

Relates to: #11624

Included components:

Component tracker

Figma preview

Resources:

Getting started

patternfly-build · 2025-06-12T11:57:59Z

Preview: https://patternfly-react-pr-11868.surge.sh

A11y report: https://patternfly-react-pr-11868-a11y.surge.sh

nicolethoen · 2025-06-12T14:26:04Z

packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx

+      // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+        {props.children}


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?

nicolethoen · 2025-06-12T14:26:07Z

packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx

+      // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+        {props.children}


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?

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.

nicolethoen · 2025-06-12T14:30:59Z

packages/code-connect/components/Label/LabelNonStatus.figma.tsx

+    },
+    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}>


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.

nicolethoen · 2025-06-12T14:34:15Z

packages/code-connect/components/Label/LabelStatus.figma.tsx

+import { Label } from '@patternfly/react-core';
+
+figma.connect(
+  Label,


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..

nicolethoen · 2025-06-12T14:37:12Z

packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx

+        signUpForAccountMessage={signUpForAccountMessage}
+        forgotCredentials={forgotCredentialsprops.isInvalid}
+      >
+        {props.children}


these children should be a form, right?

nicolethoen · 2025-06-12T14:37:50Z

packages/code-connect/components/Masthead/Masthead.figma.tsx

+      <Masthead id="<masthead-id>" inset={{ default: 'insetSm' }}>
+        <MastheadMain>
+          <MastheadToggle>
+            <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />


ReferenceError: BarsIcon is not defined

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).

nicolethoen · 2025-06-12T14:38:44Z

packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx

+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <MastheadToggle>{props.children}</MastheadToggle>


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

I think it would be a good comment to have.

nicolethoen · 2025-06-12T14:42:46Z

packages/code-connect/components/Modal/BasicModal.figma.tsx

+    },
+    example: (props) => (
+      // Documentation for Modal can be found at https://www.patternfly.org/components/modal
+      <Modal variant={props.size}>{props.children}</Modal>


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...

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

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.

nicolethoen · 2025-06-12T14:45:29Z

packages/code-connect/components/Modal/AlertModal.figma.tsx

+    },
+    example: (props) => (
+      // Documentation for Modal can be found at https://www.patternfly.org/components/modal
+      <Modal variant={props.size}>{props.children}</Modal>


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

kmcfaul · 2025-06-12T18:26:55Z

packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx

+      // Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+        {props.children}


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.

kmcfaul · 2025-06-12T18:30:58Z

packages/code-connect/components/Label/LabelNonStatus.figma.tsx

+        Green: 'green',
+        Blue: 'blue',
+        Purple: 'purple',
+        Grey: 'grey'


teal and yellow are also valid colors for Label.

kmcfaul · 2025-06-12T18:34:17Z

packages/code-connect/components/Masthead/Masthead.figma.tsx

+      <Masthead id="<masthead-id>" inset={{ default: 'insetSm' }}>
+        <MastheadMain>
+          <MastheadToggle>
+            <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />


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).

kmcfaul · 2025-06-12T18:35:54Z

packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx

+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <MastheadToggle>{props.children}</MastheadToggle>


I think it would be a good comment to have.

kmcfaul · 2025-06-12T18:39:06Z

packages/code-connect/components/Modal/BasicModal.figma.tsx

+    },
+    example: (props) => (
+      // Documentation for Modal can be found at https://www.patternfly.org/components/modal
+      <Modal variant={props.size}>{props.children}</Modal>


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.

mattnolting added 2 commits June 12, 2025 07:50

feat(CC-batch-6): added batch 6 components

ff681a6

update

78ad70d

mattnolting marked this pull request as ready for review June 12, 2025 11:57

mattnolting requested review from evwilkin and kmcfaul June 12, 2025 11:57

nicolethoen self-requested a review June 12, 2025 14:13

nicolethoen requested changes Jun 12, 2025

View reviewed changes

kmcfaul reviewed Jun 12, 2025

View reviewed changes

feat(CC-batch-6): updated required props

80d95d1

mattnolting marked this pull request as draft June 17, 2025 14:54

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

mattnolting commented Jun 12, 2025

Uh oh!

patternfly-build commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jun 12, 2025 •

edited

Loading