chore: Add Code Connect for HeaderStandard - #1359
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
One functional issue with the subtitle mapping — the manual testing step that verifies toggling withSubtitle (Figma Only) updates the snippet won't pass with the current implementation. Everything else looks correct: startAccessory/endAccessory map to real HeaderBaseProps props, figma.slot() is the right choice, and the omission of onBack/onClose is appropriate for a Code Connect example.
| { | ||
| props: { | ||
| title: figma.string('title'), | ||
| subtitle: figma.string('subtitle'), |
There was a problem hiding this comment.
figma.string('subtitle') always injects a subtitle into the snippet regardless of whether withSubtitle (Figma Only) is toggled in Figma. The manual testing step expects toggling that property to update the snippet — that requires a boolean wrapper:
subtitle: figma.boolean('withSubtitle (Figma Only)', {
true: figma.string('subtitle'),
false: undefined,
}),| */ | ||
|
|
||
| figma.connect( | ||
| HeaderStandard, |
There was a problem hiding this comment.
non-blocking: The URL points to the Figma branch (branch/w2n6gtbyemD7VTNoACgrqm). Once the Figma branch merges, this will need updating to the main file URL before republishing — the PR description already notes this, but worth making sure it's tracked as a follow-up so the file doesn't sit published with a stale branch URL.
| title: figma.string('title'), | ||
| subtitle: figma.string('subtitle'), | ||
| startAccessory: figma.slot('startAccessory'), | ||
| endAccessory: figma.slot('endAccessory'), |
There was a problem hiding this comment.
figma.slot() is for Figma SLOT properties — the component playground panel shows startAccessory and endAccessory are instance/nested-component properties, not slots. Using figma.slot() here will either fail to resolve or produce the wrong mapping. These should be mapped with figma.instance() or figma.nestedProps() depending on how the Figma component exposes them.
| endAccessory: figma.slot('endAccessory'), | ||
| }, | ||
| example: ({ title, subtitle, startAccessory, endAccessory }) => ( | ||
| <HeaderStandard |
There was a problem hiding this comment.
The generated snippet (visible in Dev Mode) passes raw <ButtonIcon> to startAccessory/endAccessory, which is exactly what HeaderStandard's higher-level props are designed to prevent. For a back button use onBack (standardises IconName.ArrowLeft and size automatically), for a close button use onClose (standardises IconName.Close), and for additional end-side buttons use endButtonIconProps (accepts an array of ButtonIconProps). The example should demonstrate these props rather than reaching past them to startAccessory — otherwise every consumer who copies the snippet will wire up raw ButtonIcon and bypass the size/icon standardisation entirely.
## **Description** Bump `@figma/code-connect` from `1.4.8` to `1.4.9` in the root workspace and both `@metamask/design-system-react` and `@metamask/design-system-react-native`. 1.4.9 improves how slot contents are rendered by adopting the augmented getSlot API from [Code Connect v1.4.9](https://github.com/figma/code-connect/releases/tag/v1.4.9). getSlot('SlotName') still renders as before, and the return value now also exposes connectedInstances — the connected instances directly in the slot. That lets us render a slot’s connected children inline. This may resolve the review comment on [PR #1359](#1359 (comment)) about mapping `startAccessory` / `endAccessory` via slots vs connected instances. ## **Related issues** Fixes: N/A ## **Manual testing steps** 1. Confirm `@figma/code-connect` resolves to `1.4.9` (`yarn why @figma/code-connect`). 2. Run a Code Connect parse/publish dry-run for React and React Native packages to confirm the CLI still works. 3. Spot-check that existing `.figma.tsx` mappings still load as expected. ## **Screenshots/Recordings** N/A — dependency bump only. ### **Before** N/A ### **After** N/A ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. Made with [Cursor](https://cursor.com) Co-authored-by: Cursor <cursoragent@cursor.com>
2 participants
Description
Adds Figma Code Connect mappings for React Native
HeaderStandard, targeting the updated component on the Figma branch (slot-basedstartAccessory/endAccessory).HeaderStandard.figma.tsx
New
HeaderStandard.figma.tsxfor React NativeMatched props
title→titlesubtitle→subtitlestartAccessory→startAccessory(viafigma.slot())endAccessory→endAccessory(viafigma.slot())Intentionally omits Figma-only properties:
withSubtitle (Figma Only)Figma link: HeaderStandard
Related issues
Manual testing steps
withSubtitle (Figma Only)and verify the subtitle in the snippet updatesstartAccessoryandendAccessoryslots render correctly in the example snippetyarn figma:connect:publish:react-nativeand re-verify in Dev Mode on mainScreenshots/Recordings
Before
NA
After
Screen.Recording.2026-07-06.at.11.35.34.PM.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Made with Cursor