MetaMask / MetaMask/metamask-design-system
Follow up: Align SectionHeader titleWrapperProps gap contract
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
Overview
Follow-up from #1175 (feat: [DSRN] Added SectionHeader).
SectionHeaderProps['titleWrapperProps'] is typed and documented as a passthrough to the inner BoxRow, excluding only children, endAccessory, and textProps.
Because gap is not omitted from the type, consumers can pass:
<SectionHeader
title="Assets"
titleWrapperProps={{ gap: 2 }}
/>
But SectionHeader.tsx spreads titleWrapperProps before gap={1}, so the explicit prop is overwritten and has no runtime effect.
Acceptance Criteria
- Decide whether inner title-row gap should be configurable.
- If configurable, spread
titleWrapperPropsafter default row props while keeping controlled fields (children,endAccessory,textProps) protected. - If not configurable, omit
gapfromtitleWrapperPropsand update the README type table/description to match. - Add or update a focused test that locks in the chosen contract.
References
- PR: https://github.com/MetaMask/metamask-design-system/pull/1175
- Current implementation:
packages/design-system-react-native/src/components/SectionHeader/SectionHeader.tsx - Docs:
packages/design-system-react-native/src/components/SectionHeader/README.md
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/design-system-react-native/src/components/SectionHeader/SectionHeader.tsx and compare its titleWrapperProps typing and spread order with the README type table in packages/design-system-react-native/src/components/SectionHeader/README.md. Confirm the intended gap contract, then update the implementation or documentation and add or update a focused SectionHeader test that verifies the chosen behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100