bug(bottom sheet): align bottom sheet with m3 specs
- 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
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)
Beitragsleitfaden
Rechercherichtung
Beginne mit den Material 3-Spezifikationen für Bottom Sheets und dem offiziellen Beispiel unter src/example/bottom-sheet-overview-example.ts; vergleiche sein Verhalten bei den Breakpoints für Mobilgeräte, Tablets und Desktops mit den in src/styles.css gezeigten Styles. Das Ziel ist erreicht, wenn das Bottom Sheet der spezifizierten responsiven Größenanpassung folgt, ohne interne CSS-Selektoren, !important oder die Containerklassen medium, large und xlarge zu erfordern.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- design, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100