callstack / callstack/react-native-paper
Color Picker Popup Is Obscured On "Guides -> Theming -> Creating Dynamic Theme Colors" Documentation On Both v5 and v6
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
Color picker popup is not fully shown. I can't fill the color manually because the input is obscured. This happens for primary, secondary, and tertiary color pickers. I don't know if this happens on another platform, but I'm currently using Firefox 155.0 at the time of writing.
### Expected behaviour
The color picker should be fully shown.
### How to reproduce?
1. Go to **React Native Paper** documentation site (v5 or v6).
2. Navigate to **Guides -> Theming -> Creating Dynamic Theme Colors**.
3. Scroll down to the custom theme builder / color picker section and click any color input.
### Preview
**Primary Color Picker**
**Secondary Color Picker**
**Tertiary Color Picker**
### What have you tried so far?
I was able to show the whole thing by changing the "div" element with "color-picker-popup" class, "position" style to "relative" instead of "absolute". But it also grows the parent "tr" element.
**Modified Element**
### Your Environment
| software | version
| --------------------- | -------
| ios | N/A
| android | N/A
| react-native | N/A
| react-native-paper | v5 / v6 (docs site)
| node | N/A
| npm or yarn | N/A
| expo sdk | N/A
| Firefox | 155.0
Contributor guide
Research direction
Start at the React Native Paper documentation page for Guides → Theming → Creating Dynamic Theme Colors and inspect the custom theme builder, especially the element using the color-picker-popup class. Reproduce the issue in Firefox with each color picker, then verify that the popup and manual color input are fully visible without breaking the surrounding layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- documentation, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100