From a360ff3d8e971ea98d320a87c8e8a0ce2077f16e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 4 May 2021 19:16:46 +0200
Subject: [PATCH] fix(material-experimental/mdc-card): remove extra margin if
 header doesn't have an avatar

The card header margin was set up assuming that there would always be an avatar element, but that's not always the case. These changes add an extra check to avoid the extra margin.

Fixes #19069.
---
 src/dev-app/mdc-card/mdc-card-demo.html      | 11 +++++++++++
 src/material-experimental/mdc-card/card.scss | 17 +++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/dev-app/mdc-card/mdc-card-demo.html b/src/dev-app/mdc-card/mdc-card-demo.html
index 612c56a51175..619ff35066c8 100644
--- a/src/dev-app/mdc-card/mdc-card-demo.html
+++ b/src/dev-app/mdc-card/mdc-card-demo.html
@@ -118,5 +118,16 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
+  <!-- Used to test header without an avatar. -->
+  <mat-card [appearance]="appearance">
+    <mat-card-header>
+      <mat-card-title>Header title</mat-card-title>
+      <mat-card-subtitle>Header subtitle</mat-card-subtitle>
+    </mat-card-header>
+    <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <mat-card-content>
+      <p>Here is some content</p>
+    </mat-card-content>
+  </mat-card>
 
 </div>
diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
index 5f63618075bb..7a777bfe953d 100644
--- a/src/material-experimental/mdc-card/card.scss
+++ b/src/material-experimental/mdc-card/card.scss
@@ -19,13 +19,15 @@ $mat-card-default-padding: 16px !default;
   // Custom elements default to `display: inline`. Reset to 'block'.
   display: block;
 
-  // Apply default padding for a text content 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;
-
   // Titles and subtitles can be set on native header elements which come with
   // their own margin. Clear it since the spacing is done using `padding`.
   margin: 0;
+
+  .mat-mdc-card-avatar ~ .mat-mdc-card-header-text & {
+    // Apply default padding for a text content 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;
+  }
 }
 
 // Header section at the top of a card. MDC does not have a pre-made header section for cards.
@@ -128,8 +130,11 @@ $mat-card-default-padding: 16px !default;
 // `mat-card-title-group` since the padding is captured by parent container already.
 .mat-mdc-card-subtitle ~ .mat-mdc-card-title,
 .mat-mdc-card-title ~ .mat-mdc-card-subtitle,
-.mat-mdc-card-header .mat-mdc-card-title,
-.mat-mdc-card-header .mat-mdc-card-subtitle,
+
+// The `.mat-mdc-card-header-text` here is redundant since the header text
+// wrapper is always there in the header, but we need the extra specificity.
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,
 .mat-mdc-card-title-group .mat-mdc-card-title,
 .mat-mdc-card-title-group .mat-mdc-card-subtitle {
   padding-top: 0;