feat(EmptyState): Code connect #8402
Conversation
✅ Deploy Preview for carbon-for-ibm-products ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for ibm-products-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
RichKummer
requested review from
amal-k-joy and
jlongshore
and removed request for
a team
| 'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=420-2434&t=lbewdWdJ4JB5izcw-4', | ||
| { | ||
| props: { | ||
| action: figma.boolean('Button'), |
There was a problem hiding this comment.
action looks like it should be an object in the form of EmptyStateAction. Should still be set through a boolean like that, but undefined for false, but on true set to an object, similar to this:
action: figma.boolean('Button', {
true: {
text: 'Button',
onClick: () => console.log("clicked empty state action button'),"),
renderIcon: (props) => <Add size={20} {...props} />,
iconDescription: 'Add icon',
},
false: undefined,
}),^ If you follow this verbatim, be sure to add the Add icon in your imports at the top:
import { Add } from '@carbon/icons-react';| { | ||
| props: { | ||
| action: figma.boolean('Button'), | ||
| link: figma.boolean('Link'), |
There was a problem hiding this comment.
Similar to action, link should be an object rather than a boolean. It should still flow through this boolean switch, on false set the value to undefined as above... but on true, the link should be set to an object that conforms to the type CustomLink... Similar to this:
link: figma.boolean('Link', {
true: {
text: 'Link',
href: 'https://www.carbondesignsystem.com',
target: '_blank',
},
false: undefined,
}),| Large: 'lg', | ||
| Small: 'sm', | ||
| }), | ||
| illustrationPosition: figma.enum('Illustration position', { |
There was a problem hiding this comment.
To go hand in hand with illustrationPosition, we could add an "illustration' value. There is an illustration boolean switch we could key off of, and then just set it to a path to communicate intent. Something similar to:
illustration: figma.boolean('Illustration', {
true: './path/to/illustration.svg',
false: undefined,
}),| title={props.title} | ||
| subtitle={props.subtitle} | ||
| size={props.size} | ||
| illustrationPosition={props.illustrationPosition} |
There was a problem hiding this comment.
If you add the illustration prop above, be sure to include it here:
illustration={props.illustration}2 participants
Closes #8194
This PR covers the basics of EmptyState code connect, but does not account for the different
EmptyStatecomponents in code such asEmptyErrorState,UnauthorizedEmptyState, etc. Those will be handled in a separate PR in issue #8416selection✅selection✅boolean✅boolean✅string✅string✅What did you change?
How did you test and verify your work?
PR Checklist
As the author of this PR, before marking ready for review, confirm you:
More details can be found in the pull request section of
our contributing docs.