angular / angular/components

feat(mat-snackbar): Support to stacked variant from material design

Open
#26,704 0 comments 0 reactions 0 assignees View on GitHub
area: material/snack-bar feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Improve the SimpleSnackBar component to support the css class "mdc-snackbar--stacked" or create a separate component (possibly called "StackedSnackBar").

Native material design example (https://www.npmjs.com/package/@material/snackbar);
```

...

```

Current visual:
![image](https://user-images.githubusercontent.com/18235244/221767589-d4512f5b-96ff-4e71-93ed-622a6353f447.png)

New additional visual feature:
![image](https://user-images.githubusercontent.com/18235244/221767472-8a5cc94c-c2e9-4c26-ad0c-e4530284ba4f.png)

Please indicate the option to develop the function: if you should add the support css class in the real and unique component or create a new one component.

### Use Case

Bottom action button of the message (https://m2.material.io/components/snackbars#specs):
![image](https://user-images.githubusercontent.com/18235244/221767153-008596e1-cfd5-44c7-8bbb-61d1c217dab5.png)

Contributor guide

Open the contributing guide

Research direction

Start at the Angular Material SimpleSnackBar entry point and compare its structure with the linked Material Design stacked snackbar example. Determine whether the existing component can expose the mdc-snackbar--stacked class or needs a separate component; done means the stacked layout and bottom action-button use case are supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.