feat(CC-batch-5): added batch 5 #11867
+552
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core'; | ||
| import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; | ||
|
|
||
| // TODO: FIGMA: Add Empty state footer | ||
| // TODO: FIGMA: Consolodate empty state examples | ||
| // TODO: FIGMA: Add empty state footer | ||
| // TODO: FIGMA: Add empty state actions | ||
| // TODO: FIGMA: Add empty state icon | ||
| // TODO: FIGMA: Add empty state title | ||
| // TODO: FIGMA: Add empty state body | ||
| // TODO: FIGMA: Add empty state variant | ||
| // TODO: FIGMA: Add empty state status | ||
| // TODO: FIGMA: Add empty state isLoading | ||
| // Based on Code Connect's limitations, this component needs to be overhauled. Using the base component approach present in | ||
| // other components would significantly reduce complexity. | ||
|
|
||
| figma.connect( | ||
| EmptyState, | ||
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7896-37441', | ||
| { | ||
| props: { | ||
| // string | ||
| body: figma.string('Body text'), | ||
| title: figma.string('Header text'), | ||
|
|
||
| // enum | ||
| status: figma.enum('Type', { | ||
| Custom: 'custom', | ||
| Warning: 'warning', | ||
| Success: 'success', | ||
| Danger: 'danger', | ||
| Info: 'info' | ||
| }), | ||
| variant: figma.enum('Size', { | ||
| Basic: undefined, | ||
| 'Extra small': 'xs', | ||
| Small: 'sm', | ||
| Large: 'lg', | ||
| 'Extra large': 'xl' | ||
| }), | ||
|
|
||
| actions: figma.children('Empty state footer') | ||
| }, | ||
| example: (props) => ( | ||
| <EmptyState | ||
| headingLevel="h4" | ||
| icon={<PlusCircleIcon />} | ||
| variant={props.variant} | ||
| status={props.status} | ||
| titleText={props.title} | ||
| > | ||
| <EmptyStateBody>{props.body}</EmptyStateBody> | ||
| <EmptyStateFooter> | ||
| <EmptyStateActions>{props.actions}</EmptyStateActions> | ||
| </EmptyStateFooter> | ||
| </EmptyState> | ||
| ) | ||
| } | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { ExpandableSection } from '@patternfly/react-core'; | ||
|
|
||
| // TODO: FIGMA: 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 toggleContent = ` | ||
| <div> | ||
| <span>You can also use icons </span> | ||
| <CheckCircleIcon /> | ||
| <span> or badges </span> | ||
| <Badge isRead={true}>4</Badge> | ||
| <span> !</span> | ||
| </div> | ||
| `; | ||
|
|
||
| figma.connect( | ||
| ExpandableSection, | ||
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146', | ||
| { | ||
| props: { | ||
| // enum | ||
| isIndented: figma.enum('State', { 'Expanded Indent': true }), | ||
| toggleContent: figma.enum('State', { Expanded: toggleContent }), | ||
| toggleTextCollapsed: figma.enum('State', { Collapsed: figma.string('Toggle Text More') }), | ||
| toggleTextExpanded: figma.enum('State', { Expanded: figma.string('Toggle Text Less') }), | ||
|
|
||
| // boolean | ||
| expandedContentSectionText: figma.enum('State', { | ||
| Default: figma.string('Default Truncate Text'), | ||
| Expanded: figma.string('Expanded Truncate Text') | ||
| }), | ||
| isExpanded: figma.enum('State', { Expanded: true }), | ||
|
|
||
| children: figma.children('*') | ||
| }, | ||
| example: (props) => ( | ||
| <ExpandableSection | ||
| isIndented={props.isIndented} | ||
| toggleContent={props.toggleContent} | ||
| toggleTextCollapsed={props.toggleTextCollapsed} | ||
|
There was a problem hiding this comment. We should not be combining If And So those two props can be commented out by default letting them know in a comment that they can override the default expand/collapse behavior by using those two props. |
||
| toggleTextExpanded={props.toggleTextExpanded} | ||
| variant="truncate" | ||
| > | ||
| {props.expandedContentSectionText} | ||
| </ExpandableSection> | ||
| ) | ||
| } | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { ExpandableSection } from '@patternfly/react-core'; | ||
|
|
||
| // TODO: FIGMA: This component needs to be overhauled. Using the base component approach present in | ||
| // other components would significantly reduce complexity. | ||
| // TODO: FIGMA: 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 toggleContent = ` | ||
| <div> | ||
| <span>You can also use icons </span> | ||
| <CheckCircleIcon /> | ||
| <span> or badges </span> | ||
| <Badge isRead={true}>4</Badge> | ||
| <span> !</span> | ||
| </div> | ||
| `; | ||
|
|
||
| figma.connect( | ||
| ExpandableSection, | ||
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', | ||
| { | ||
| props: { | ||
| // enum | ||
| expandedContentSectionText: figma.string('Expanded Text'), | ||
| isDetached: figma.enum('State', { 'Expand Detached': true }), | ||
| isExpanded: figma.enum('State', { | ||
| 'Expanded Basic': true, | ||
| 'Expand Detached': true, | ||
| 'Expanded Indent': true, | ||
| 'Expanded Custom Content': true, | ||
| 'Expanded Custom with Component swap': true | ||
| }), | ||
| isIndented: figma.enum('State', { 'Expanded Indent': true }), | ||
| toggleContent: figma.enum('State', { | ||
| 'Default Custom Content': toggleContent, | ||
| 'Expanded Custom Content': toggleContent, | ||
| 'Expanded Custom with Component swap': toggleContent | ||
| }), | ||
| toggleTextCollapsed: figma.enum('State', { | ||
| Default: figma.string('Toggle Text More'), | ||
| Hover: figma.string('Toggle Text More'), | ||
| 'Default Custom Content': figma.string('Toggle Text More') | ||
| }), | ||
| toggleTextExpanded: figma.enum('State', { | ||
| 'Expanded Basic': figma.string('Toggle Text Less'), | ||
| 'Expand Detached': figma.string('Toggle Text Less'), | ||
| 'Expanded Indent': figma.string('Toggle Text Less'), | ||
| 'Expanded Custom Content': figma.string('Toggle Text Less'), | ||
| 'Expanded Custom with Component swap': figma.string('Toggle Text Less') | ||
| }) | ||
| }, | ||
| example: (props) => ( | ||
| <ExpandableSection | ||
| isDetached={props.isDetached} | ||
| isExpanded={props.isExpanded} | ||
|
There was a problem hiding this comment. I think this needs to be rewritten based on my comments in the ExpandableSectionTruncate file. |
||
| isIndented={props.isIndented} | ||
| toggleContent={props.toggleContent} | ||
| toggleText={props.toggleTextCollapsed} | ||
| toggleTextExpanded={props.toggleTextExpanded} | ||
| > | ||
| {props.expandedContentSectionText} | ||
| </ExpandableSection> | ||
| ) | ||
| } | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { ExpandableSection } from '@patternfly/react-core'; | ||
|
|
||
| figma.connect( | ||
| ExpandableSection, | ||
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80', | ||
| { | ||
| props: { | ||
| // string | ||
| expandedContentSectionText: figma.string('Expanded Text'), | ||
| toggleTextCollapsed: figma.string('Toggle Text More'), | ||
| toggleTextExpanded: figma.string('Toggle Text Less'), | ||
|
|
||
| // boolean | ||
| isExpanded: figma.enum('State', { | ||
| Expanded: true, | ||
| 'Expand Uncontrolled': true, | ||
| 'Expanded Indent': true, | ||
| 'Expanded Custom Content': true | ||
| }), | ||
| isIndented: figma.enum('State', { 'Expanded Indent': true }), | ||
|
|
||
| children: figma.children('*') | ||
| }, | ||
| example: (props) => ( | ||
| // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section | ||
| <ExpandableSection | ||
| isExpanded={props.isExpanded} | ||
|
There was a problem hiding this comment. I think this needs to be rewritten based on my comments in the ExpandableSectionTruncate file. |
||
| isIndented={props.isIndented} | ||
| toggleContent={props.children} | ||
| toggleTextCollapsed={props.toggleTextCollapsed} | ||
| toggleTextExpanded={props.toggleTextExpanded} | ||
| variant="truncate" | ||
| > | ||
| {props.expandedContentSectionText} | ||
| </ExpandableSection> | ||
| ) | ||
| } | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { | ||
| FileUpload, | ||
| MultipleFileUpload, | ||
| MultipleFileUploadMain, | ||
| MultipleFileUploadStatus, | ||
| MultipleFileUploadStatusItem | ||
| } from '@patternfly/react-core'; | ||
| import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; | ||
|
|
||
| // TODO: FIGMA: Add status toggle text | ||
| // TODO: FIGMA: Add status toggle icon | ||
| // TODO: FIGMA: Add text separator | ||
| // TODO: FIGMA: Add info text | ||
| // TODO: FIGMA: Add status toggle text | ||
| // TODO: FIGMA: Add status toggle icon | ||
|
|
||
| figma.connect( | ||
| FileUpload, | ||
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96128', | ||
| { | ||
| props: { | ||
| // static | ||
| titleText: 'Drag and drop files here', | ||
| titleTextSeparator: 'or', | ||
| infoText: 'Accepted file types: JPEG, Doc, PDF, PNG', | ||
|
|
||
| // enum | ||
| isHorizontal: figma.enum('Layout', { Horizontal: true }), | ||
|
|
||
| children: figma.children('*') | ||
| }, | ||
| example: (props) => ( | ||
| // Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload | ||
| <MultipleFileUpload | ||
| dropzoneProps={{ | ||
| accept: { | ||
| 'image/jpeg': ['.jpg', '.jpeg'], | ||
| 'application/msword': ['.doc'], | ||
| 'application/pdf': ['.pdf'], | ||
| 'image/png': ['.png'] | ||
| } | ||
| }} | ||
| isHorizontal={props.isHorizontal} | ||
| onFileDrop={() => {}} | ||
| > | ||
| <MultipleFileUploadMain | ||
| infoText={props.infoText} | ||
| titleIcon={<UploadIcon />} | ||
| titleText={props.titleText} | ||
| titleTextSeparator={props.titleTextSeparator} | ||
| /> | ||
|
|
||
| <MultipleFileUploadStatus | ||
|
There was a problem hiding this comment.
|
||
| aria-label="Current uploads" | ||
| statusToggleIcon="StatusToggleIcon" | ||
| statusToggleText="Status toggle text" | ||
| > | ||
| <MultipleFileUploadStatusItem | ||
| file="file-upload-file" | ||
| key="file-upload-key" | ||
| onClearClick={() => {}} | ||
| onReadSuccess={() => {}} | ||
| onReadFail={() => {}} | ||
| /> | ||
| </MultipleFileUploadStatus> | ||
| </MultipleFileUpload> | ||
| ) | ||
| } | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem } from '@patternfly/react-core'; | ||
|
|
||
| // TODO: FIGMA: Add filename placeholder | ||
| // TODO: FIGMA: Add browse button text | ||
| // TODO: FIGMA: Add FileUploadHelperText | ||
|
|
||
| figma.connect( | ||
| FileUpload, | ||
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8949-96043', | ||
| { | ||
| props: { | ||
| // boolean | ||
| showHelperText: figma.boolean('Show helper text'), | ||
| hideDefaultPreview: figma.boolean('Show text preview box', { | ||
| true: false, | ||
| false: true | ||
| }), | ||
| helperText: figma.boolean('Show helper text', { | ||
| true: ( | ||
| <FileUploadHelperText> | ||
| <HelperText> | ||
| <HelperTextItem id="helper-text-example-helpText">Upload a CSV file</HelperTextItem> | ||
| </HelperText> | ||
| </FileUploadHelperText> | ||
| ), | ||
| false: undefined | ||
| }), | ||
|
|
||
| // enum | ||
| allowEditingUploadedText: figma.enum('State', { 'Uploaded + Editable': true }), | ||
| isDragActive: figma.enum('State', { | ||
| 'Drag state': true, | ||
| false: undefined | ||
| }), | ||
| isLoading: figma.enum('State', { 'In progress upload': true }), | ||
| isValidated: figma.enum('State', { | ||
| 'Invalid upload': 'error', | ||
| 'Uploaded + Editable': 'success', | ||
| 'Uploaded + Not Editable': 'success' | ||
| }) | ||
| }, | ||
| example: (props) => ( | ||
| // Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload | ||
| <FileUpload | ||
| id="file-upload-id" | ||
| type="text" | ||
| aria-label="File upload example" | ||
| browseButtonText="Upload" | ||
| isLoading={props.isLoading} | ||
| validated={props.isValidated} | ||
| isDragActive={props.isDragActive} | ||
| hideDefaultPreview={props.hideDefaultPreview} | ||
| allowEditingUploadedText={props.allowEditingUploadedText} | ||
| onFileInputChange={() => {}} | ||
| onDataChange={() => {}} | ||
| onTextChange={() => {}} | ||
| onReadStarted={() => {}} | ||
| onReadFinished={() => {}} | ||
| onClearClick={() => {}} | ||
| > | ||
| {props.helperText} | ||
| </FileUpload> | ||
| ) | ||
| } | ||
| ); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should add a comment here indicating that this may need to be updated for accessibility
maybe link to https://www.w3.org/WAI/tutorials/page-structure/headings/