feat: update version to 20.2.0 and enhance snack bar styles with addi… #127
Conversation
✅ Deploy Preview for ng-kit ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR updates the package version to 20.2.0 and enhances the snack bar styling options by expanding supported panelClass types and refining visual aspects. Key changes include:
- Expanded MatSnackBarOptions panelClass to accept string or array values along with updated doc comments.
- Updated snack-bar component templates to include inline style changes for mat-icon font sizes.
- Enhanced CSS/SCSS assets with additional snack bar theme configurations and the inclusion of new asset entries in ng-package.json.
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/ng-kit/src/lib/services/mat-snack-bar.service.ts | Updated documentation and type for panelClass in MatSnackBarOptions. |
| projects/ng-kit/src/lib/components/snack-bar/success-snack-bar/success-snack-bar.component.ts | Adjusted inline styling for the success icon in the template. |
| projects/ng-kit/src/lib/components/snack-bar/error-snack-bar/error-snack-bar.component.ts | Adjusted inline styling for the error icon in the template. |
| projects/ng-kit/src/assets/app-mat-snack-bar.css | Added additional snack bar themes with !important flags. |
| projects/ng-kit/package.json | Updated package version to 20.2.0. |
| projects/ng-kit/ng-package.json | Added asset configuration for snack bar styles. |
| projects/ng-kit-demo/src/assets/app-mat-snack-bar.scss | Synchronized SCSS snack bar styles updates with CSS changes. |
| package.json | Updated package version to 20.2.0. |
|
|
||
| @Component({ | ||
| selector: 'app-success-snack-bar', | ||
| imports: [MatButtonModule, MatIconModule], | ||
| template: ` | ||
| <div class="custom-flex-center success-snackbar"> | ||
| <mat-icon>check_circle</mat-icon> | ||
| <mat-icon style="font-size:1.3rem">check_circle</mat-icon> |
There was a problem hiding this comment.
Consider moving the inline style (font-size) for the mat-icon to a CSS class in the component's stylesheet to improve consistency and maintainability.
Copilot uses AI. Check for mistakes.
|
|
||
| @Component({ | ||
| selector: 'app-error-snack-bar', | ||
| imports: [MatIconModule, MatButtonModule], | ||
| template: ` | ||
| <div class="custom-flex-center error-snackbar"> | ||
| <mat-icon>error</mat-icon> | ||
| <mat-icon style="font-size:1.3rem">error</mat-icon> |
There was a problem hiding this comment.
Consider moving the inline style (font-size) for the mat-icon to a CSS class in the component's stylesheet to ensure consistency across components.
Copilot uses AI. Check for mistakes.
| --mdc-snackbar-container-color: var(--success-color) !important; | ||
| --mat-mdc-snack-bar-button-color: var(--white-color) !important; | ||
| } | ||
|
|
||
| .success-snackbar .mdc-snackbar__surface { | ||
| background-color: var(--success-color) !important; | ||
| color: white !important; | ||
| } | ||
|
|
||
| .success-snackbar .mat-mdc-snack-bar-action { | ||
| color: var(--white-color) !important; |
There was a problem hiding this comment.
[nitpick] Review the necessity of using !important flags in your CSS rules; if specific selectors can be applied, removing !important may enhance future maintainability.
| --mdc-snackbar-container-color: var(--success-color) !important; | |
| --mat-mdc-snack-bar-button-color: var(--white-color) !important; | |
| } | |
| .success-snackbar .mdc-snackbar__surface { | |
| background-color: var(--success-color) !important; | |
| color: white !important; | |
| } | |
| .success-snackbar .mat-mdc-snack-bar-action { | |
| color: var(--white-color) !important; | |
| .app-container .success-snackbar { | |
| --mdc-snackbar-container-color: var(--success-color); | |
| --mat-mdc-snack-bar-button-color: var(--white-color); | |
| } | |
| } | |
| .success-snackbar .mdc-snackbar__surface { | |
| .app-container .success-snackbar .mdc-snackbar__surface { | |
| background-color: var(--success-color); | |
| color: white; | |
| } | |
| } | |
| .success-snackbar .mat-mdc-snack-bar-action { | |
| .app-container .success-snackbar .mat-mdc-snack-bar-action { | |
| color: var(--white-color); | |
| } |
Copilot uses AI. Check for mistakes.
# Conflicts: # package.json # projects/ng-kit/package.json
…tional options