bug(bottom sheet): align bottom sheet with m3 specs
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 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)
Contributor guide
Research direction
Start with the Material 3 bottom-sheet specifications and the official example at src/example/bottom-sheet-overview-example.ts; compare its behavior across mobile, tablet, and desktop breakpoints with the styles shown in src/styles.css. Done means the bottom sheet follows the specified responsive sizing without requiring internal CSS selectors, !important, or the medium, large, and xlarge container classes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100