docs: use proper shadow classes in examples (#33494)

crisbeto · web-flow · commit 76f5be03a272 · 2026-07-06T10:10:25.000+02:00
Updates the various examples so they use the new `mat-shadow-*` classes. Fixes #33459.
diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
     <mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </mat-header-cell>
diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
     <th mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </th>
diff --git a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html
@@ -1,4 +1,4 @@
-<table mat-table columnResize [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+<table mat-table columnResize [dataSource]="dataSource" class="mat-shadow-2 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
     <th mat-header-cell *matHeaderCellDef resizable [matResizableMaxWidthPx]="100"> No. </th>
diff --git a/src/components-examples/material/core/elevation-overview/elevation-overview-example.html b/src/components-examples/material/core/elevation-overview/elevation-overview-example.html
@@ -1,6 +1,4 @@
-<div class="example-container"
-    [class.mat-elevation-z2]="!isActive"
-    [class.mat-elevation-z8]="isActive">
+<div class="example-container" [class.mat-shadow-1]="!isActive" [class.mat-shadow-4]="isActive">
   Example
 </div>
 
diff --git a/src/components-examples/material/core/ripple-overview/ripple-overview-example.html b/src/components-examples/material/core/ripple-overview/ripple-overview-example.html
@@ -12,7 +12,7 @@
 </mat-form-field>
 
 
-<div class="example-ripple-container mat-elevation-z4"
+<div class="example-ripple-container mat-shadow-2"
      matRipple
      [matRippleCentered]="centered"
      [matRippleDisabled]="disabled"
diff --git a/src/components-examples/material/table/table-basic/table-basic-example.html b/src/components-examples/material/table/table-basic/table-basic-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
 
   <!--- Note that these columns can be defined in any order.
         The actual rendered columns are set as a property on the row definition" -->
diff --git a/src/components-examples/material/table/table-column-styling/table-column-styling-example.html b/src/components-examples/material/table/table-column-styling/table-column-styling-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="demo-position">
     <th mat-header-cell *matHeaderCellDef> No. </th>
diff --git a/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html
@@ -1,4 +1,4 @@
-<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropList (cdkDropListDropped)="drop($event)"
+<mat-table #table [dataSource]="dataSource" class="mat-shadow-2" cdkDropList (cdkDropListDropped)="drop($event)"
   cdkDropListData="dataSource">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html
@@ -11,7 +11,7 @@
   </button>
 </div>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef>No.</th>
diff --git a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
@@ -2,7 +2,7 @@
 <button matButton="elevated" (click)="removeColumn()"> Remove column </button>
 <button matButton="elevated" (click)="shuffle()"> Shuffle </button>
 
-<table mat-table [dataSource]="data" class="mat-elevation-z8">
+<table mat-table [dataSource]="data" class="mat-shadow-2">
   @for (column of displayedColumns; track column) {
     <ng-container [matColumnDef]="column">
       <th mat-header-cell *matHeaderCellDef> {{column}} </th>
diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html
@@ -11,7 +11,7 @@
   </button>
 </div>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef>No.</th>
diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
@@ -1,6 +1,6 @@
 <table mat-table
        [dataSource]="dataSource" multiTemplateDataRows
-       class="mat-elevation-z8">
+       class="mat-shadow-2">
   @for (column of columnsToDisplay; track column) {
     <ng-container matColumnDef="{{column}}">
       <th mat-header-cell *matHeaderCellDef>{{column}}</th>
diff --git a/src/components-examples/material/table/table-filtering/table-filtering-example.html b/src/components-examples/material/table/table-filtering/table-filtering-example.html
@@ -3,7 +3,7 @@
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
 </mat-form-field>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
 
   <!-- Position Column -->
   <ng-container matColumnDef="position">
diff --git a/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.html b/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
@@ -25,4 +25,4 @@
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+</mat-table>
diff --git a/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
@@ -25,4 +25,4 @@
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+</mat-table>
diff --git a/src/components-examples/material/table/table-footer-row/table-footer-row-example.html b/src/components-examples/material/table/table-footer-row/table-footer-row-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
+<table mat-table [dataSource]="transactions" class="mat-shadow-2">
   <!-- Item Column -->
   <ng-container matColumnDef="item">
     <th mat-header-cell *matHeaderCellDef> Item </th>
diff --git a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   @for (column of columns; track column) {
     <ng-container [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef>
diff --git a/src/components-examples/material/table/table-http/table-http-example.html b/src/components-examples/material/table/table-http/table-http-example.html
@@ -1,4 +1,4 @@
-<div class="example-container mat-elevation-z8">
+<div class="example-container mat-shadow-2">
   @if (isLoadingResults || isRateLimitReached) {
     <div class="example-loading-shade">
       @if (isLoadingResults) {
diff --git a/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.html b/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
+<table mat-table [dataSource]="transactions" class="mat-shadow-2">
   <!-- Item Column -->
   <ng-container matColumnDef="item">
     <th mat-header-cell *matHeaderCellDef> Item </th>
diff --git a/src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html b/src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html
@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="mat-shadow-2">
   <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
     <!-- Position Column -->
     <ng-container matColumnDef="position">
diff --git a/src/components-examples/material/table/table-overview/table-overview-example.html b/src/components-examples/material/table/table-overview/table-overview-example.html
@@ -3,7 +3,7 @@
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
 </mat-form-field>
 
-<div class="mat-elevation-z8">
+<div class="mat-shadow-2">
   <table mat-table [dataSource]="dataSource" matSort>
 
     <!-- ID Column -->
diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.html b/src/components-examples/material/table/table-pagination/table-pagination-example.html
@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="mat-shadow-2">
   <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
diff --git a/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html b/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html
@@ -1,4 +1,4 @@
-<table class="example-table mat-elevation-z8" mat-table recycleRows [dataSource]="dataSource">
+<table class="example-table mat-shadow-2" mat-table recycleRows [dataSource]="dataSource">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef> No. </th>
diff --git a/src/components-examples/material/table/table-row-binding/table-row-binding-example.html b/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef>No.</th>
diff --git a/src/components-examples/material/table/table-row-context/table-row-context-example.html b/src/components-examples/material/table/table-row-context/table-row-context-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="data" class="mat-elevation-z8">
+<table mat-table [dataSource]="data" class="mat-shadow-2">
   <!-- Implicit Column -->
   <ng-container matColumnDef="$implicit">
     <th mat-header-cell *matHeaderCellDef> $implicit </th>
diff --git a/src/components-examples/material/table/table-selection/table-selection-example.html b/src/components-examples/material/table/table-selection/table-selection-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
 
   <!-- Checkbox Column -->
   <ng-container matColumnDef="select">
diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.html b/src/components-examples/material/table/table-sorting/table-sorting-example.html
@@ -1,5 +1,5 @@
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
-       class="mat-elevation-z8">
+       class="mat-shadow-2">
 
   <!-- Position Column -->
   <ng-container matColumnDef="position">
diff --git a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html b/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html
@@ -1,4 +1,4 @@
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   <table mat-table [dataSource]="dataSource">
 
     <!-- Name Column -->
diff --git a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
@@ -35,7 +35,7 @@
   </mat-button-toggle-group>
 </div>
 
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   @for (table of tables; track table) {
     <mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
@@ -35,7 +35,7 @@
   </mat-button-toggle-group>
 </div>
 
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   @for (table of tables; track table) {
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
diff --git a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html
@@ -1,4 +1,4 @@
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   <table mat-table [dataSource]="transactions">
     <!-- Item Column -->
     <ng-container matColumnDef="item">
diff --git a/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html b/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html
@@ -1,4 +1,4 @@
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
diff --git a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.html b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <mat-text-column name="position" [headerText]="headerText"></mat-text-column>
 
   <!-- Change the header text. -->
diff --git a/src/components-examples/material/table/table-text-column/table-text-column-example.html b/src/components-examples/material/table/table-text-column/table-text-column-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <mat-text-column name="position"></mat-text-column>
   <mat-text-column name="name"></mat-text-column>
   <mat-text-column name="weight"></mat-text-column>
diff --git a/src/components-examples/material/table/table-with-ripples/table-with-ripples-example.html b/src/components-examples/material/table/table-with-ripples/table-with-ripples-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <ng-container matColumnDef="name">
     <mat-header-cell mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
     <mat-cell mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
diff --git a/src/components-examples/material/table/table-wrapped/wrapper-table.html b/src/components-examples/material/table/table-wrapped/wrapper-table.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource()" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource()" class="mat-shadow-2">
   <ng-content></ng-content>
 
   <!-- Position Column -->
diff --git a/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html b/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html
@@ -2,12 +2,12 @@
 <mat-tab-group dynamicHeight>
 <!-- #enddocregion dynamic-height -->
   <mat-tab label="Short tab">
-    <div class="example-small-box mat-elevation-z4">
+    <div class="example-small-box mat-shadow-2">
       Small content
     </div>
   </mat-tab>
   <mat-tab label="Long tab">
-    <div class="example-large-box mat-elevation-z4">
+    <div class="example-large-box mat-shadow-2">
       Large content
     </div>
   </mat-tab>
diff --git a/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.html b/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.html
@@ -1,4 +1,4 @@
-<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
+<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-shadow-2">
   <mat-tab label="First"> Content 1 </mat-tab>
   <mat-tab label="Second"> Content 2 </mat-tab>
   <mat-tab label="Third"> Content 3 </mat-tab>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">`
	`1`	`+<mat-table [dataSource]="dataSource" class="mat-shadow-2 example-table">`
`2`	`2`	`<!-- Position Column -->`
`3`	`3`	`<ng-container matColumnDef="position" sticky>`
`4`	`4`	`<mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </mat-header-cell>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">`
	`1`	`+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 example-table">`
`2`	`2`	`<!-- Position Column -->`
`3`	`3`	`<ng-container matColumnDef="position" sticky>`
`4`	`4`	`<th mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </th>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<table mat-table columnResize [dataSource]="dataSource" class="mat-elevation-z8 example-table">`
	`1`	`+<table mat-table columnResize [dataSource]="dataSource" class="mat-shadow-2 example-table">`
`2`	`2`	`<!-- Position Column -->`
`3`	`3`	`<ng-container matColumnDef="position" sticky>`
`4`	`4`	`<th mat-header-cell *matHeaderCellDef resizable [matResizableMaxWidthPx]="100"> No. </th>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropList (cdkDropListDropped)="drop($event)"`
	`1`	`+<mat-table #table [dataSource]="dataSource" class="mat-shadow-2" cdkDropList (cdkDropListDropped)="drop($event)"`
`2`	`2`	`cdkDropListData="dataSource">`
`3`	`3`	`<!-- Position Column -->`
`4`	`4`	`<ng-container matColumnDef="position" sticky>`