angular / angular/components

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

Abierto
#28,291 2 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/button P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción de StackBlitz, especialmente con src/index.html, src/example/button-overview-example.html y src/example/button-overview-example.css, y confirma la colisión del fondo del FAB deshabilitado. Sigue el estilo de MatButton del FAB deshabilitado desde la reproducción y verifica que el contenido del FAB deshabilitado siga siendo legible sobre el contenido de la página sin depender de una restricción de posicionamiento no documentada.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, css, typescript
Área
design, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.