callstack / callstack/react-native-paper
feat: modernize Tooltip to the latest Material Design specs
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
The goal is to modernize the Tooltip according to the latest specs - see below.
# Current State
## Tooltip
**MD3 spec:** Tooltips
**Specs link:** https://m3.material.io/components/tooltips/specs
### Color tokens
- [ ] Container background uses `theme.colors.onSurface`; spec requires `inverseSurface`
- [ ] Text color uses `theme.colors.surface`; spec requires `inverseOnSurface`
### Shape
- `borderRadius: theme.roundness` = 4dp matches `corner.extraSmall` ✅
### Spacing / sizing
- Container height 32dp ✅
- [ ] Text variant is `labelLarge` (14sp); spec requires `bodySmall` (12sp)
### Behavior
- [ ] Rich tooltip variant not implemented. MD3 defines two variants: plain (text only) and rich (optional title, body text, link, and action buttons). The current `title: string` prop cannot support rich content
- No pointer/caret indicator (not required by spec) ✅
### Animation
- [ ] No enter/exit animation. MD3 specifies a fade transition on show/hide
Contributor guide
Research direction
Start at the existing Tooltip implementation and compare its current behavior with the linked Material Design 3 Tooltip specs. Review the checklist, including color tokens, text sizing, rich content support, and fade transitions; the existing title prop is specifically called out. Done means the listed unchecked requirements are implemented while the already matching behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- design, frontend, mobile
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100