Md3 #186
Open
Md3 #186
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
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>
```
This annoys me way too often ==;
This might be applied to a single `h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`. Or it can be applied to a container containing those. So usage is like: ```html <div> <p>no margins</p> <p class="nat-margin-standard">with margins</p> </div> ``` ```html <div class="nat-margin-standard"> <h1>All with margins</h1> <p>with margins</p> </div> ```
This makes it easier to select any button in e2e tests
… #11936 This makes it easier to select any button in e2e tests
Amongst other things, this update eslint and their rules, helping us prepare for incoming Angular 21.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.