bug(bottom sheet): align bottom sheet with m3 specs
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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
Hi Angular Material team!
I would like to highlight that the bottom sheet implementation and Material 3 specification seems to have diverged.
There is a specification for sizes and responsive behaviour of bottom sheet mentioned here: https://m3.material.io/components/bottom-sheets/specs
Right now, the workaround is to modify some CSS manually. Unfortunately, the required values are not exposed via `--mat-sys` CSS variables, so the workaround ends up using internal CSS classes selectors. In some cases, it might require using `!import` if styles are not wrapper in some parent CSS class - which is considered an anti-pattern.
Here is a version with bottom sheet styles overwrites to match Material 3 specification:
https://stackblitz.com/edit/3dhv1nhh?file=src%2Fstyles.css
Please let me know if you need any help with this in case the bug or story gets picked up — happy to support!
### Reproduction
StackBlitz link (from official material.angular.io page): https://stackblitz.com/run?file=src%2Fexample%2Fbottom-sheet-overview-example.ts&startScript=start
Steps to reproduce:
1. Open side sheet on mobile, tablet and desktop breakpoints
### Expected Behavior
- bottom sheet implementation is aligned with Material 3 specification
- with responsive width of bottom sheet, mat-bottom-sheet-container-medium, mat-bottom-sheet-container-large and mat-bottom-sheet-container-xlarge are no longer needed.
### Actual Behavior
- bottom sheet does not comply with Material 3 specification
### Environment
- Angular: 20.2.0
- CDK/Material: 20.2.0
- Browser(s): Chrome (and any other)
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 26 (and any other)
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par les spécifications Material 3 des bottom sheets et par l’exemple officiel dans src/example/bottom-sheet-overview-example.ts ; comparez son comportement aux breakpoints mobile, tablette et bureau avec les styles présentés dans src/styles.css. Le travail est terminé lorsque le bottom sheet respecte le dimensionnement responsive spécifié sans nécessiter de sélecteurs CSS internes, de !important ni des classes de conteneur medium, large et xlarge.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- design, frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100