feat(CC-batch-5): added batch 5 #11867
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,65 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core'; | ||
|
|
||
| // 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 | ||
| icon: figma.enum('Type', { | ||
| Default: 'CubesIcon', // placeholder icon | ||
| Loading: 'Spinner' | ||
| }), | ||
| 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' | ||
| }), | ||
|
|
||
| // children | ||
| actions: figma.children(['Button', 'Link Button']) | ||
| }, | ||
| example: (props) => ( | ||
| // Documentation for EmptyState can be found at https://www.patternfly.org/components/empty-state | ||
| <EmptyState | ||
| headingLevel="h4" | ||
| icon={props.icon as any} | ||
| 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,50 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { ExpandableSection } from '@patternfly/react-core'; | ||
|
|
||
| // TODO: FIGMA: Create toggle component | ||
| 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) => ( | ||
| // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section | ||
| <ExpandableSection | ||
| // 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 | ||
| 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,75 @@ | ||
| 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: | ||
|
|
||
| // TODO: FIGMA: Create toggle component | ||
| 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 | ||
| isIndented: figma.enum('State', { 'Expanded Indent': true }), | ||
| 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 | ||
| }), | ||
| toggleContent: figma.enum('State', { | ||
| 'Default Custom Content': toggleContent, | ||
| 'Expanded Custom Content': toggleContent, | ||
| 'Expanded Custom with Component swap': toggleContent | ||
| }), | ||
| 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') | ||
| }), | ||
| expandedContentSectionText: figma.enum('State', { | ||
| 'Expanded Basic': figma.string('Expanded Text'), | ||
| 'Expand Detached': figma.string('Expanded Text'), | ||
| 'Expanded Indent': figma.string('Expanded Text'), | ||
| 'Expanded Custom Content': figma.string('Expanded Text'), | ||
| 'Expanded Custom with Component swap': figma.string('Expanded Text') | ||
| }), | ||
| toggleTextCollapsed: figma.enum('State', { | ||
| Default: figma.string('Toggle Text More'), | ||
| Hover: figma.string('Toggle Text More'), | ||
| 'Default Custom Content': figma.string('Toggle Text More') | ||
| }) | ||
| }, | ||
| example: (props) => ( | ||
| // Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section | ||
| <ExpandableSection | ||
| // 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 | ||
| isIndented={props.isIndented} | ||
| toggleContent={props.toggleContent} | ||
| 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,41 @@ | ||
| 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 | ||
| isIndented: figma.enum('State', { | ||
| 'Expanded Indent': true | ||
| }), | ||
| isExpanded: figma.enum('State', { | ||
| Expanded: true, | ||
| 'Expand Uncontrolled': true, | ||
| 'Expanded Indent': true, | ||
| 'Expanded Custom Content': 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,66 @@ | ||
| 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&m=dev', | ||
| { | ||
| props: { | ||
| isHorizontal: figma.enum('Layout', { Horizontal: true }), | ||
| titleText: 'Drag and drop files here', | ||
| titleTextSeparator: 'or', | ||
| infoText: 'Accepted file types: JPEG, Doc, PDF, PNG', | ||
| children: figma.children('*') | ||
| }, | ||
| example: (props) => ( | ||
| // Documentation for FileUpload can be found at https://www.patternfly.org/components/file-upload | ||
| <MultipleFileUpload | ||
| isHorizontal={props.isHorizontal} | ||
| onFileDrop={() => {}} | ||
| dropzoneProps={{ | ||
| accept: { | ||
| 'image/jpeg': ['.jpg', '.jpeg'], | ||
| 'application/msword': ['.doc'], | ||
| 'application/pdf': ['.pdf'], | ||
| 'image/png': ['.png'] | ||
| } | ||
| }} | ||
| > | ||
| <MultipleFileUploadMain | ||
| titleIcon={<UploadIcon />} | ||
| titleText={props.titleText} | ||
| titleTextSeparator={props.titleTextSeparator} | ||
| infoText={props.infoText} | ||
| /> | ||
|
|
||
| <MultipleFileUploadStatus | ||
|
There was a problem hiding this comment.
|
||
| statusToggleText="Status toggle text" | ||
| statusToggleIcon="StatusToggleIcon" | ||
| aria-label="Current uploads" | ||
| > | ||
| <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&m=dev', | ||
| { | ||
| 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/