fix(material/card): don't add extra padding around mat-card-title-group (#25292)

* fix(material/card): don't add extra padding around mat-card-title-group

The card demo page forgot to include mat-card-header which caused many
of the cards to look strange. At some point it looks like padding was
added to mat-card-title-group to compensate in some cases. This PR
removes that padding and adds the missing mat-card-header blocks
instead.

* fixup! fix(material/card): don't add extra padding around mat-card-title-group

Author: mmalerba

src/dev-app/mdc-card/mdc-card-demo.html

@@ -13,8 +13,10 @@
   </mat-card>
 
   <mat-card [appearance]="appearance">
-    <mat-card-subtitle>Subtitle</mat-card-subtitle>
-    <mat-card-title>Card with title and footer</mat-card-title>
+    <mat-card-header>
+      <mat-card-subtitle>Subtitle</mat-card-subtitle>
+      <mat-card-title>Card with title and footer</mat-card-title>
+    </mat-card-header>
     <mat-card-content>
       <p>This is supporting text.</p>
       <p>{{longText}}</p>
@@ -26,8 +28,10 @@
   </mat-card>
 
   <mat-card [appearance]="appearance">
-    <mat-card-subtitle>Subtitle</mat-card-subtitle>
-    <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
+    <mat-card-header>
+      <mat-card-subtitle>Subtitle</mat-card-subtitle>
+      <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
+    </mat-card-header>
     <mat-card-content>
       <p>This is supporting text.</p>
       <p>{{longText}}</p>
@@ -41,7 +45,9 @@
 
   <mat-card [appearance]="appearance">
     <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
-    <mat-card-title>Content Title</mat-card-title>
+    <mat-card-header>
+      <mat-card-title>Content Title</mat-card-title>
+    </mat-card-header>
     <mat-card-content>
       <p>Here is some content</p>
     </mat-card-content>
@@ -64,7 +70,9 @@
   </mat-card>
 
   <mat-card class="demo-card-blue mat-card-flat" [appearance]="appearance">
-    <mat-card-title>Easily customizable</mat-card-title>
+    <mat-card-header>
+      <mat-card-title>Easily customizable</mat-card-title>
+    </mat-card-header>
     <mat-card-actions>
       <button mat-button>First</button>
       <button mat-button>Second</button>
@@ -75,44 +83,52 @@
   <h2>Cards with media area</h2>
 
   <mat-card [appearance]="appearance">
-    <mat-card-title-group>
-      <mat-card-title>Card</mat-card-title>
-      <mat-card-subtitle>Small</mat-card-subtitle>
-      <img mat-card-sm-image>
-    </mat-card-title-group>
+    <mat-card-header>
+      <mat-card-title-group>
+        <mat-card-title>Card</mat-card-title>
+        <mat-card-subtitle>Small</mat-card-subtitle>
+        <img mat-card-sm-image>
+      </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       {{longText}}
     </mat-card-content>
   </mat-card>
 
   <mat-card [appearance]="appearance">
-    <mat-card-title-group>
-      <mat-card-title>Card</mat-card-title>
-      <mat-card-subtitle>Medium</mat-card-subtitle>
-      <img mat-card-md-image>
-    </mat-card-title-group>
+    <mat-card-header>
+      <mat-card-title-group>
+        <mat-card-title>Card</mat-card-title>
+        <mat-card-subtitle>Medium</mat-card-subtitle>
+        <img mat-card-md-image>
+      </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       {{longText}}
     </mat-card-content>
   </mat-card>
 
   <mat-card [appearance]="appearance">
-    <mat-card-title-group>
-      <mat-card-title>Card</mat-card-title>
-      <mat-card-subtitle>Large</mat-card-subtitle>
-      <img mat-card-lg-image>
-    </mat-card-title-group>
+    <mat-card-header>
+      <mat-card-title-group>
+        <mat-card-title>Card</mat-card-title>
+        <mat-card-subtitle>Large</mat-card-subtitle>
+        <img mat-card-lg-image>
+      </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       {{longText}}
     </mat-card-content>
   </mat-card>
 
   <mat-card [appearance]="appearance">
-    <mat-card-title-group>
-      <mat-card-title>Card</mat-card-title>
-      <mat-card-subtitle>Extra large</mat-card-subtitle>
-      <img mat-card-xl-image>
-    </mat-card-title-group>
+    <mat-card-header>
+      <mat-card-title-group>
+        <mat-card-title>Card</mat-card-title>
+        <mat-card-subtitle>Extra large</mat-card-subtitle>
+        <img mat-card-xl-image>
+      </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       {{longText}}
     </mat-card-content>

src/material/card/card.scss

@@ -1,4 +1,3 @@
-@use 'sass:math';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '@material/card' as mdc-card;
 
@@ -44,13 +43,6 @@ $mat-card-default-padding: 16px !default;
   // Apply default padding for the header region. Omit any bottom padding because we assume
   // this region will be followed by another region that includes top padding.
   padding: $mat-card-default-padding $mat-card-default-padding 0;
-
-  // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with
-  // the title, and add a margin bottom to create space underneath the header.
-  .mat-mdc-card-subtitle {
-    margin-top: -(math.div($mat-card-default-padding, 2));
-    margin-bottom: $mat-card-default-padding;
-  }
 }
 
 // Primary card content. MDC does not have a pre-made section for primary content.
@@ -81,10 +73,7 @@ $mat-card-default-padding: 16px !default;
   // and subtitle go first (projected into a single div), followed by the media.
   display: flex;
   justify-content: space-between;
-
-  // Apply default padding for the title-group region. Omit any bottom padding because we assume
-  // this region will be followed by another region that includes top padding.
-  padding: $mat-card-default-padding $mat-card-default-padding 0;
+  width: 100%;
 }
 
 // Avatar image for a card. MDC does not specifically have a card avatar or a "common" avatar.
@@ -96,10 +85,20 @@ $mat-card-default-padding: 16px !default;
   width: $mat-card-header-size;
   border-radius: 50%;
   flex-shrink: 0;
+  margin-bottom: $mat-card-default-padding;
 
   // Makes `<img>` tags behave like `background-size: cover`. Not supported
   // in IE, but we're using it as a progressive enhancement.
   object-fit: cover;
+
+  // When a title and subtitle are used alongside an avatar,
+  // reduce the spacing between them to better align with the avatar.
+  & ~ .mat-mdc-card-header-text {
+    .mat-mdc-card-subtitle,
+    .mat-mdc-card-title {
+      line-height: normal;
+    }
+  }
 }
 
 // Specifically sized small image, specific to Angular Material.