angular / angular/components

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

Đang mở
#32,095 1 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: material/bottom-sheet P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với các đặc tả Material 3 cho bottom sheet và ví dụ chính thức tại src/example/bottom-sheet-overview-example.ts; so sánh hành vi của nó trên các breakpoint cho mobile, tablet và desktop với các style được thể hiện trong src/styles.css. Hoàn tất khi bottom sheet tuân theo kích thước responsive được chỉ định mà không cần các bộ chọn CSS nội bộ, !important hoặc các class container medium, large và xlarge.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
design, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.