callstack / callstack/react-native-paper
[Surface] `shadowColor` should follow the current theme by default
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### Current behaviour
It looks like the `shadowColor` of the `Surface` component has been hardcoded to pure black [here](https://github.com/callstack/react-native-paper/blob/366e0d63fd5ae0d5dc7799dbd97eee8e4062134c/src/components/Surface.tsx#L98).
That causes the shadow not to show up on other components that are backed by `Surface` (e.g. `Card`).
### Expected behaviour
I'm not 100% sure of what the spec says but I believe the `shadowColor` should be set to something like `theme.colors.onBackground` by default to provide the necessary contrast.
### How to reproduce?
1. set a dark theme (e.g. where `theme.colors.background = 'black'`)
2. place a `Card` on the screen
### Preview
* With the current `shadowColor`:
* With the `shadowColor` set to `theme.colors.onBackground`:
### What have you tried so far?
I need to manually set `shadowColor` on each elevated component that requires a shadow.
### Your Environment
| software | version
| --------------------- | -------
| ios | Unnecessary
| android | Unnecessary
| react-native | Unnecessary
| react-native-paper | 5.13.1
| node | Unnecessary
| npm or yarn | Unnecessary
| expo sdk | Unnecessary
贡献指南
调研方向
从 src/components/Surface.tsx 第 98 行附近开始,issue 在此处指出了硬编码的 shadowColor,并使用深色主题和 Card 复现该行为。将当前结果与建议的基于主题的阴影颜色进行比较。当 Card 等具有 elevation 的组件无需在每个组件上手动设置 shadowColor,默认即可显示合适的阴影时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100