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 |
packages/code-connect/components/Breadcrumbs/Breadcrumbs.figma.tsx
Outdated
Show resolved
Hide resolved
packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx
Outdated
Show resolved
Hide resolved
| }, | ||
| 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.
There was a problem hiding this comment.
Also curious if 'isLanguageLabelVisible' is a relevant prop to any figma features?
@nicolethoen No, it is not at this time a feature of Figma.
There was a problem hiding this comment.
Added a note for design followup. The buttons are presented in alternative order to the documentation.
| '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.
packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx
Outdated
Show resolved
Hide resolved
| '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.
mattnolting
force-pushed
the
feat-CC-batch-3
branch
from
70529b1 to
9f9703c
Compare
| }, | ||
| example: (props) => ( | ||
| // Documentation for BreadcrumbItem can be found at https://www.patternfly.org/components/breadcrumb | ||
| <BreadcrumbItem isDropdown>{props.children}</BreadcrumbItem> |
There was a problem hiding this comment.
in figma, if they select that they want a dropdown, do they have to pick the dropdown? adding this prop doesn't create a dropdown, just changes some padding, so if we need to ship the dropdown as part of the code here, that'll need to be added.
There was a problem hiding this comment.
Good point, the menuToggles/dropdowns will be rendered as children in this case, we shouldn't need isDropdown
There was a problem hiding this comment.
if they are passing a dropdown as children, then they will need the isDropdown prop.
| expandableSection: figma.boolean('Expandable', { | ||
| true: ( | ||
| <ExpandableSectionToggle ontoggle={() => {}} contentId="code-block-id" direction="up"> | ||
| {isExpanded ? 'Show Less' : 'Show More'} |
There was a problem hiding this comment.
in this case, isExpanded is not defined so they will get an ReferenceError: isExpanded is not defined
| example: (props) => ( | ||
| // Documentation for CodeBlock can be found at https://www.patternfly.org/components/code-block | ||
| <CodeBlock actions={props.actions}> | ||
| <CodeBlock>{/* {props.codeBlockCode} */}</CodeBlock> |
There was a problem hiding this comment.
is this codeBlockCode prop supposed to be commented out?
There was a problem hiding this comment.
Yes, I'll include a note describing why I did this and update to placeholder text.
packages/code-connect/components/CodeEditor/CodeEditor.figma.tsx
Outdated
Show resolved
Hide resolved
mattnolting
force-pushed
the
feat-CC-batch-3
branch
from
de437c8 to
e106426
Compare
Relates to: #11624
Included components:
Component tracker
Figma preview
Resources: