Md3 #186
Md3 #186
Conversation
To make branch merging easier
There was a problem hiding this comment.
Pull request overview
This pull request migrates the application from Angular Material Design 2 (M2) to Material Design 3 (M3), introducing significant theming, styling, and component API changes.
Key Changes
- Updated dependencies:
@ecodev/fab-speed-dial(20.0.0 → 21.0.0),@ecodev/natural(65.0.2 → 66.0.7), and@ecodev/natural-editor(65.0.2 → 66.0.7) - Replaced M2 theme system with M3 custom theme using CSS custom properties (--mat-sys-*)
- Migrated typography classes (mat-h1 → mat-font-headline-sm, mat-body-2 → nat-bold, etc.)
- Updated button APIs (mat-raised-button → matButton="filled", mat-icon-button → matIconButton)
- Renamed color attributes (warn → error, accent → tertiary)
Reviewed changes
Copilot reviewed 92 out of 95 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated @Ecodev package versions to support M3 |
| yarn.lock | Lockfile updates for dependency changes |
| client/styles/ichtus.scss | New M3 theme definition with custom color tokens |
| client/styles/_themes.scss | Removed M2 theme configuration file |
| client/styles.scss | Updated to use M3 mat.theme() mixin and CSS custom properties |
| client/main.ts | Added provideThemes(['ichtus']) for M3 theme support |
| client/index.html | Removed mat-typography class from body |
| Multiple HTML templates | Migrated typography classes, button attributes, and color names across 50+ components |
| Multiple component SCSS files | Moved theme-dependent styles from _*.theme.scss files to component SCSS using CSS custom properties |
| angular.json | Updated styles array to include new ichtus.scss theme file |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
client/app/shared/components/bookable-price/bookable-price.component.html
Outdated
Show resolved
Hide resolved
client/app/shared/components/bookable-price/bookable-price.component.html
Outdated
Show resolved
Hide resolved
client/app/booking/components/code-input/code-input.component.html
Outdated
Show resolved
Hide resolved
client/app/profile/components/formation/formations/formations.component.html
Outdated
Show resolved
Hide resolved
client/app/profile/components/formation/formation/formation.component.html
Outdated
Show resolved
Hide resolved
client/app/shared/components/bookable-price/bookable-price.component.html
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 92 out of 95 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
client/app/profile/components/formation/formations/formations.component.html
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 92 out of 95 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 93 out of 96 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
And stop publishing on GitHub Packages because it does not provide any value
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 93 out of 96 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Because why not
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 93 out of 96 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div class="nat-vertical nat-gap-10 nat-expand"> | ||
| <a | ||
| mat-button | ||
| matButton |
There was a problem hiding this comment.
The button directive matButton should have a value assigned to it. In MD3, matButton without a value is deprecated. Consider using matButton="basic" or matButton="text" instead of just matButton.
|
|
||
| @if (bookings && bookings.length > bookings.items.length) { | ||
| <button mat-button (click)="nextPage()">Voir plus</button> | ||
| <button matButton (click)="nextPage()">Voir plus</button> |
There was a problem hiding this comment.
The button directive matButton should have a value assigned to it. In MD3, matButton without a value is deprecated. Consider using matButton="basic" or matButton="text" instead of just matButton.
Custom script `extract-material-icons` found 201/6410 (3.1%) icons probably used
So no need to provide themes
This avoids name collision with fragments whose usage should be prioritized over queries.
This avoids name collision with fragments whose usage should be prioritized over queries.
It is a drop-in replacement for `MatCellDef` with the additional input
of `dataSource` that allows to strongly type the cell element.
Usage:
```html
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th *matHeaderCellDef mat-header-cell>Name</th>
<td *matCellDef="let element; dataSource: dataSource" mat-cell>
{{ element.name }}
</td>
</ng-container>
</table>
```
No description provided.