Remove Material Legacy Modules (#453)

jfcere · May 6, 2023 · f4b56ff · f4b56ff
1 parent bd6f195
commit f4b56ff
Show file tree

Hide file tree

Showing 17 changed files with 60 additions and 58 deletions.
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -14,16 +14,18 @@ <h1>ngx-markdown</h1>
   </mat-toolbar-row>
 </mat-toolbar>
 
-<nav mat-tab-nav-bar backgroundColor="primary" disableRipple #tabHeader>
-  <a mat-tab-link fxLayout="row" fxLayoutGap="8px" *ngFor="let route of routes" #tabLink="routerLinkActive"
+<nav mat-tab-nav-bar [tabPanel]="tabPanel" mat-stretch-tabs="false" backgroundColor="primary" disableRipple fitInkBarToContent #tabHeader>
+  <a mat-tab-link *ngFor="let route of routes" #tabLink="routerLinkActive"
     [active]="tabLink.isActive"
     [routerLink]="route.path"
     routerLinkActive>
-    <img src="assets/icon-{{route.path}}.svg">
-    <span>{{ route.data?.['label'] }}</span>
+    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
+      <img src="assets/icon-{{route.path}}.svg">
+      <span>{{ route.data?.['label'] }}</span>
+    </div>
   </a>
 </nav>
 
-<div class="outlet-wrapper" [@routeAnimation]="getRouteAnimation(outlet)" (@routeAnimation.Done)="handleFragment()">
+<mat-tab-nav-panel class="outlet-wrapper" [@routeAnimation]="getRouteAnimation(outlet)" (@routeAnimation.Done)="handleFragment()" #tabPanel>
   <router-outlet #outlet="outlet"></router-outlet>
-</div>
+</mat-tab-nav-panel>
diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
@@ -23,54 +23,58 @@ $viewport-offset-x: 16px;
   display: block;
 }
 
-.mat-tab-nav-bar--sticky {
+.mat-mdc-tab-nav-bar--sticky {
   @include mat.elevation(6);
   transition: box-shadow .3s ease-out;
 }
 
-.mat-tab-nav-bar ::ng-deep {
+.mat-mdc-tab-nav-bar ::ng-deep {
   position: sticky;
   top: 0;
   z-index: 24;
 
-  .mat-ink-bar {
+  .mdc-tab-indicator__content--underline {
     border-radius: 3px 3px 0 0;
-    height: 3px;
+    border-top-width: 3px;
+    transition-duration: 500ms;
   }
 
-  .mat-tab-link {
+  .mat-mdc-tab-link {
     font-size: 14px;
     font-weight: 500;
+    letter-spacing: normal;
     margin: 0 $viewport-offset-x;
     min-width: 0;
+    opacity: 0.6;
     padding: 0;
     text-decoration: none;
     transition: all 0.2s ease-out;
   }
 
-  .mat-tab-link:not(.mat-tab-label-active):hover {
+  .mat-mdc-tab-link:not(.mdc-tab--active):hover {
     transform: translateY(-1px);
   }
 
-  .mat-tab-link:hover,
-  .mat-tab-label-active {
+  .mat-mdc-tab-link:hover,
+  .mdc-tab--active {
     opacity: 1;
   }
 
-  .mat-tab-link-container {
+  .mat-mdc-tab-link-container {
     @include viewport-width($padding: false);
+    overflow: auto;
   }
 
-  // start - workaround for responsive tabs
-  .mat-tab-header-pagination {
-    display: none !important;
+  .mdc-tab__ripple {
+    opacity: 0;
   }
 
-  .mat-tab-link-container {
-    overflow: auto;
+  // start - workaround for responsive tabs
+  .mat-mdc-tab-header-pagination {
+    display: none !important;
   }
 
-  .mat-tab-list {
+  .mat-mdc-tab-list {
     transform: unset !important;
   }
   // end - workaround
@@ -93,6 +97,7 @@ $viewport-offset-x: 16px;
 
 .outlet-wrapper {
   @include viewport-width();
+  display: block;
   margin-top: $viewport-offset-x;
   margin-bottom: $viewport-offset-x;
   position: relative;

diff --git a/demo/src/app/app.component.theme.scss b/demo/src/app/app.component.theme.scss
@@ -11,7 +11,7 @@
     background: linear-gradient(90deg, $primary-color 15%, darken($primary-color, 4%) 100%);
   }
 
-  .mat-tab-nav-bar.mat-background-primary {
+  .mat-mdc-tab-nav-bar.mat-background-primary {
     background: $primary-color;
   }
 }
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -16,13 +16,13 @@ import { isTheme, Theme } from './app.models';
 })
 export class AppComponent implements OnInit {
 
-  private readonly stickyClassName = 'mat-tab-nav-bar--sticky';
+  private readonly stickyClassName = 'mat-mdc-tab-nav-bar--sticky';
 
   routes: Route[];
   theme = DEFAULT_THEME;
 
   @ViewChild('tabHeader', { read: ElementRef, static: true })
-  tabHeader: ElementRef | undefined;
+  tabHeader: ElementRef<HTMLElement> | undefined;
 
   @HostListener('document:click', ['$event'])
   onDocumentClick(event: Event): void {
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit {
     if (this.tabHeader == null) {
       return;
     }
-    const tabHeader = this.tabHeader.nativeElement as HTMLElement;
+    const tabHeader = this.tabHeader.nativeElement;
     const tabHeaderOffset = Math.ceil(tabHeader.offsetTop);
     const windowOffset = Math.ceil(window.pageYOffset);
     const hasStickyClass = tabHeader.classList.contains(this.stickyClassName);

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -1,8 +1,8 @@
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule, SecurityContext } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ClipboardOptions, MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';

diff --git a/demo/src/app/bindings/bindings.module.ts b/demo/src/app/bindings/bindings.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';

diff --git a/demo/src/app/plugins/plugins.component.ts b/demo/src/app/plugins/plugins.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ClipboardOptions, MermaidAPI } from 'ngx-markdown';
 
 import { ClipboardButtonComponent } from '@shared/clipboard-button';

diff --git a/demo/src/app/plugins/plugins.module.ts b/demo/src/app/plugins/plugins.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatInputModule} from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ClipboardButtonModule } from '@shared/clipboard-button';

diff --git a/demo/src/app/rerender/rerender.module.ts b/demo/src/app/rerender/rerender.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';

diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.component.scss b/demo/src/app/shared/clipboard-button/clipboard-button.component.scss
@@ -1,9 +1,7 @@
 .btn-clipboard {
-  height: 30px;
-  width: 30px;
-  line-height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #1E1E1E;
+  &.mat-mdc-icon-button {
+    height: 30px;
+    width: 30px;
+    padding: 0;
+  }
 }
diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.component.ts b/demo/src/app/shared/clipboard-button/clipboard-button.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-clipboard-button',

diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.module.ts b/demo/src/app/shared/clipboard-button/clipboard-button.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import { MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
+import { MatButtonModule} from '@angular/material/button';
+import { MatSnackBarModule} from '@angular/material/snack-bar';
 
 import { ClipboardButtonComponent } from './clipboard-button.component';
 

diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.scss b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.scss
@@ -8,13 +8,6 @@
   }
 }
 
-.mat-fab,
-.mat-mini-fab {
-  img {
-    margin-bottom: 2px;
-  }
-}
-
 .sticky {
   position: sticky;
   top: 80px;
@@ -28,4 +21,8 @@
     bottom: 16px;
     right: 16px;
   }
+
+  img {
+    display: flex;
+  }
 }
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ScrollspyNavModule } from '@shared/scrollspy-nav/scrollspy-nav.module';

diff --git a/demo/src/scss/_typography.scss b/demo/src/scss/_typography.scss
@@ -1,5 +1,9 @@
 @use '@angular/material' as mat;
 
 $font-family: "Google Sans", "Helvetica Neue", sans-serif;
+$body-1: mat.define-typography-level($font-size: 15px);
 
-$mat-typography-config: mat.define-typography-config($font-family);
+$mat-typography-config: mat.define-typography-config(
+  $font-family,
+  $body-1,
+);
diff --git a/demo/src/scss/material-theme.scss b/demo/src/scss/material-theme.scss
@@ -72,13 +72,6 @@
     // all components
     @include mat.all-component-themes($theme);
 
-    // legacy components
-    @include mat.legacy-button-theme($theme);
-    @include mat.legacy-form-field-theme($theme);
-    @include mat.legacy-input-theme($theme);
-    @include mat.legacy-snack-bar-theme($theme);
-    @include mat.legacy-tabs-theme($theme);
-
     // app components
     @include app-component.theme($theme);
     @include scrollspy-nav-component.theme($theme);

diff --git a/demo/src/styles.scss b/demo/src/styles.scss
@@ -71,8 +71,11 @@ table {
   }
 }
 
+input,
 textarea {
   font-family: monospace !important;
+  font-size: 15px !important;
+  line-height: 1.125 !important;
 }
 
 [hidden] {