chore(code-connect): test setup & basic implementation

[evwilkin]

Towards #11313

This PR explores basic setup config for code connect between Figma & @patternfly/react-core components. Questions & progress will be tracked here but may be moved to parent epic or new issue as needed.

Completed:

Setup

• figma.config.json file created

Components

• About modal
• Action list
• Avatar
• Back to top
• Backdrop
• Background image
• Badge
• Button
• Checkbox
• Divider
• Hint
• Icon

Icons

• AddCircleOIcon
• ArrowRightIcon
• ExternalLinkAltIcon
• EllipsisVIcon
• TimesIcon

TODO:

• Replace hard coded icons with instance swaps and ensure their imports show in the example code alongside the component import.
  • Started - each icon needs to be individually mapped, can we automate?
• Hint - Likely need to update for children components rather than passing them directly?
• Button - link button has 2 text props, one is commented out for now but it may be related to nested component.

Code connect questions:

• Interactive setup to autogenerate files across all components by running npx figma connect executes with no errors but does not create any output. Manually hitting the API seems to return every component instance/example rather than just the list of total components?
  • Opened Interactive setup runs with no output figma/code-connect#222 as well as a support ticket to track this.

Component questions

• About Modal
  • Can't get trademark (footer) text from Figma, can it go into a variable?
  • When trying to pull children from props it includes masthead logo && close button (which are built into the component)
• Action List
  • Design: Button order can be set by user but examples are opposite in Figma vs in code examples (Next/Back buttons)
  • Design kit shows ActionList around each group of items rather than ActionItemGroup
  • Related to above, need to find way to map children buttons to map & wrap each in ActionListItem component (currently all are wrapped as a single ActionListItem)
• Button
  • Split button is listed under Button in Figma, but is a MenuToggle in the docs.
  • External link button - icon is on right, and React prop is iconPosition=”end”, but Figma still shows Icon right = false (same as plus button link buttons which have left link) - does Figma need to be updated?
  • Buttons use icon: figma.children(['IconWrapper', 'Icon']), which renders an empty prop icon={} if no icons passed, how can we just not render this prop? Could potentially cue off boolean if it existed to use nested properties?
  • IconButtonPlainButton uses icon: figma.children(['IconWrapper', 'Icon']), which works perfectly if state=default but not otherwise; we're only checking state to set isDisabled so unclear what's different causing other examples to add empty react fragment wrapper and not render icon?
• Checkbox
  • isChecked prop can be set to null for indeterminate, but code connect does not allow setting Mixed: null or Mixed disabled: null - throws TS error cannot use “in” operator to search for “kind” in null

[patternfly-build]

Preview: https://patternfly-react-pr-11326.surge.sh

A11y report: https://patternfly-react-pr-11326-a11y.surge.sh