callstack / callstack/react-native-paper

feat: modernize Badge according to MD3

未关闭
#4,974 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
v6
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

The goal is to modernize the Badge component to the latest Material Design specs by reusing theme tokens (shape, typography, colors etc).

# Current state

## Badge

**MD3 spec:** Badges
**Specs link:** https://m3.material.io/components/badges/specs

### Color tokens

- Background `error` ✅
- Label text `onError` ✅

### Spacing / sizing

- [ ] Default `size` is 20dp. MD3 defines small badge at 6dp (no label) and large badge at 16dp (with label)
- [ ] No small/large distinction. Size should be determined automatically: 6dp when no children, 16dp when children are present
- [ ] `paddingHorizontal: 3`. Spec requires 4dp between badge edge and text
- [ ] `fontSize = size * 0.5` yields 8sp at 16dp. Spec requires 11sp for large badge label text
- [ ] Large badge max character count size (16x34dp) not handled; text currently overflows unconstrained

### Behavior

- [ ] No automatic small vs large variant. Component should render as a 6dp dot when childless and as a 16dp pill when a label is provided

贡献指南

打开贡献指南

调研方向

从现有的 Badge 组件开始,将其当前的尺寸、内边距、排版和溢出行为与链接的 Material Design 3 badge 规范进行比较。完成标准是:无子元素的 badge 渲染为 6dp 的圆点,带标签的 badge 渲染为 16dp 的胶囊,间距和文本大小使用指定值,并且长标签遵守 16x34dp 的限制。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
功能
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
58/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。