bug(MatButton): FAB with disabled state using alpha on background collisions
- 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
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
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