angular / angular/components

bug(MatButton): FAB with disabled state using alpha on background collisions

Đang mở
#28,291 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/button P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Screenshot 2023-12-15 at 2 33 55 PM

Because the disabled state background color is defined with alpha, FAB collide with page contents when disabled. There's no guideline anywhere stating that FAB should never get disabled, and a disabled FAB is even part of the documentation.

FAB stands for Floating Action Button according to https://m3.material.io/components/floating-action-button/overview so it should be assumed most uses will be with absolute or fixed positioning.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/4rnhsm?file=src%2Findex.html,src%2Fexample%2Fbutton-overview-example.html,src%2Fexample%2Fbutton-overview-example.css
Steps to reproduce:
1. Have a FAB button
2. Make it disabled

### Expected Behavior

The button doesn't get visually mixed with the page contents. One potential solution would be to make the disabled state not use alpha.

### Actual Behavior

Page contents as partially visible background on the button decrease its readability.

### Environment

- Angular: 17.0
- CDK/Material: 17.0
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any

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 trên StackBlitz, đặc biệt là src/index.html, src/example/button-overview-example.html và src/example/button-overview-example.css, đồng thời xác nhận sự va chạm nền của FAB bị vô hiệu hóa. Theo dõi kiểu MatButton của FAB bị vô hiệu hóa từ bản tái hiện và xác minh rằng nội dung của FAB bị vô hiệu hóa vẫn dễ đọc trên nội dung trang mà không phụ thuộc vào một hạn chế định vị chưa được tài liệu hóa.

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

Đánh giá

Công nghệ
angular, css, typescript
Lĩnh vực
design, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/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.