callstack / callstack/react-native-paper

Input component labels in outlined mode need some work

Đang mở
#4,235 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour

1. When background and primary are close to each other we are not able to style text-color of labels on input-components separately from primary color in theme. It's weird that primary is used both in backgrounds and texts without escape hatches.
2. When placing a **rounded** `` with `mode="outlined"` and `outlineStyle={{borderColor:'transparent'}}` on a elevated ``, then the backgroundColor of the label gets a weird shape.

### Expected behaviour

I expect:
- The rounding of the input to hide the label background
- The label background to be styleable without creating a label element
- Each of the inputs parts to have to have escapeHatches for styling, such as these props, or a style function that takes it's state(focused, normal, disabled) `labelStyle`, `activeLabelStyle`, `inputStyle`, `activeInputStyle`,

### How to reproduce?

https://snack.expo.dev/t8WLJwSQ6

### Preview

### **Background is dark to show low contrast between background and primary text**
![IMG_2656](https://github.com/callstack/react-native-paper/assets/457653/25b938a3-03e3-4468-a8b6-a8d9c6035d76)
### **Background is set to red to highlight the weird shape of the label**
![IMG_2655](https://github.com/callstack/react-native-paper/assets/457653/9780026f-bb2e-45e4-b97d-7bcb872d1402)

### What have you tried so far?

Creating custom label components without getting it to work consistently across platforms (android & iOS)
### Your Environment

| software | version
| --------------------- | -------
| ios | 17.1.2
| android | 13
| react-native | 0.72.1
| react-native-paper | 5.11.4
| node | 18.13.0
| npm or yarn | 9.6.3
| expo sdk | any/not-applicable/47 in snack

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện Snack được liên kết và TextInput có viền, bo tròn được render trên một Surface. Theo dõi cách nền và màu của nhãn TextInput được xử lý trong các trạng thái đang được focus và bình thường trên Android và iOS. Hoàn tất khi nền bo tròn của nhãn hiển thị chính xác về mặt trực quan và màu của nhãn và ô nhập liệu có thể được tạo kiểu độc lập thông qua API của component.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
design, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.