feat(CC-batch-3): added batch 3 #11829
Conversation
|
Preview: https://patternfly-react-pr-11829.surge.sh A11y report: https://patternfly-react-pr-11829-a11y.surge.sh |
|
@mattnolting FYI it looks like the old files within |
@evwilkin Great catch, updated |
| text: figma.string('✏️ Center text'), | ||
|
|
||
| // enum | ||
| color: figma.enum('Color', { |
There was a problem hiding this comment.
valid colors are:
'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple'
There was a problem hiding this comment.
gold=yellow and cyan=teal in React, if Figma is still using gold/cyan in their color options. There is no gray.
| Custom: 'custom' | ||
| }) | ||
| }, | ||
| example: (props) => <Banner status={props.status}>{props.text}</Banner> |
There was a problem hiding this comment.
The screenReaderText prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
| props: { | ||
| children: figma.children('*') | ||
| }, | ||
| example: (props) => <Breadcrumb>{props.children}</Breadcrumb> |
There was a problem hiding this comment.
to make it an interact-able link, it needs a to prop
There was a problem hiding this comment.
This should be for BreadcrumbItem
| Clicked: true | ||
| }) | ||
| }, | ||
| example: (props) => <BreadcrumbItem isActive={props.state} isDropdown /> |
There was a problem hiding this comment.
in addition to isDropdown, this should also accept children, so someone could place a Dropdown in the BreadcrumbItem as a child.
There was a problem hiding this comment.
isActive is unrelated to dropdown and can be removed. I'm unsure what clicked state figma is trying to capture here. Opening the dropdown?
| isExpandable: figma.boolean('Expandable'), | ||
| children: figma.children('*') | ||
| }, | ||
| example: (props) => <CodeBlock>{props.children}</CodeBlock> |
There was a problem hiding this comment.
There is an actions prop on Codeblock which takes in CodeBlockActions... is that a feature in figma?
| }, | ||
| example: (props) => ( | ||
| <CodeEditor | ||
| emptyState={props.isEmptyState} |
There was a problem hiding this comment.
emptyState is not a boolean prop. It expects you to pass it a whole EmptyState component to display when there is no code in the code prop.
isEditable is not a prop. I think you mean isReadOnly and it'd take the inverse of the isEditable figma prop.
There was a problem hiding this comment.
Also curious if 'isLanguageLabelVisible' is a relevant prop to any figma features?
There was a problem hiding this comment.
code="code editor contents" may be useful to stub out for a basic code editor use case.
| 'No link': 'no-link' | ||
| }) | ||
| }, | ||
| example: (props) => <BreadcrumbItem text={props.text} type={props.type} state={props.state} /> |
There was a problem hiding this comment.
These props don't exist on BreadcrumbItem:
text(or the content of the item) should be passed asBreadcrumbItem's children.typeseems to be containing an array of differentBreadcrumbItemcontents, which we could stub out as separate BreadcrumbItems in the return but I'm not sure if the intent here to represent a single item or multiple.stateappears to be defining when aBreadcrumbItemis a link, which is determined by the presence or absence of thetoprop
BreadcrumbItem also has an isActive prop which indicates and styles the breadcrumb of the current page (removing any link styling) if Figma has a notion of that if may be worth including.
| Clicked: true | ||
| }) | ||
| }, | ||
| example: (props) => <BreadcrumbItem isActive={props.state} isDropdown /> |
There was a problem hiding this comment.
isActive is unrelated to dropdown and can be removed. I'm unsure what clicked state figma is trying to capture here. Opening the dropdown?
| 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9802-5857&t=IzSunfrnw18ti37Y-11', | ||
| { | ||
| props: { | ||
| isExpandable: figma.boolean('Expandable'), |
There was a problem hiding this comment.
CodeBlock does not have an isExpandable type of prop itself, ExpandableSection is used as a child of CodeBlock for this use case.
| }, | ||
| example: (props) => ( | ||
| <CodeEditor | ||
| emptyState={props.isEmptyState} |
There was a problem hiding this comment.
code="code editor contents" may be useful to stub out for a basic code editor use case.
Relates to: #11624
Included components:
Component tracker
Figma preview
Resources: