angular / angular/components

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

Offen
#28,291 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/button P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der StackBlitz-Reproduktion, insbesondere mit src/index.html, src/example/button-overview-example.html und src/example/button-overview-example.css, und bestätige die Hintergrundkollision des deaktivierten FAB. Verfolge das MatButton-Styling des deaktivierten FAB von der Reproduktion aus und überprüfe, dass der Inhalt des deaktivierten FAB über dem Seiteninhalt lesbar bleibt, ohne auf eine undokumentierte Positionierungsbeschränkung angewiesen zu sein.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, css, typescript
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.