angular / angular/components

bug(bottom sheet): align bottom sheet with m3 specs

オープン
#32,095 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: material/bottom-sheet P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Material 3 の bottom-sheet 仕様と src/example/bottom-sheet-overview-example.ts の公式例から始め、モバイル、タブレット、デスクトップの各ブレークポイントにおける動作を、src/styles.css に示されているスタイルと比較します。内部 CSS セレクター、!important、または medium、large、xlarge のコンテナクラスを必要とせずに、bottom sheet が指定されたレスポンシブなサイズに従えば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
design, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。