From cac7a41f7b7a6034d8049be77fe53a082c3aa5f2 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 6 Sep 2023 08:07:11 -0400
Subject: [PATCH] fix(material/dialog): css structure change (#27510)

* fix(material/dialog): css structure change

* change the css structure of the dialog surface and it's children

* fixup! fix(material/dialog): css structure change

* fixup! fix(material/dialog): css structure change

* fixup! fix(material/dialog): css structure change

* fixup! fix(material/dialog): css structure change

* fixup! fix(material/dialog): css structure change
---
 .../_mdc-dialog-structure-overrides.scss      | 22 ++++++++++---------
 src/material/dialog/dialog-container.ts       | 16 ++++++++++++++
 tools/public_api_guard/material/dialog.md     |  3 +++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/material/dialog/_mdc-dialog-structure-overrides.scss b/src/material/dialog/_mdc-dialog-structure-overrides.scss
index a2056fadfd9b..037fd7c8887c 100644
--- a/src/material/dialog/_mdc-dialog-structure-overrides.scss
+++ b/src/material/dialog/_mdc-dialog-structure-overrides.scss
@@ -38,19 +38,21 @@
       max-width: inherit;
     }
 
-    // MDC by default sets the `surface` to `display: flex`. MDC does this in order to
-    // be able to make the content scrollable while locking the title and actions. This
-    // does not work in our dialog anyway because due to the content projection, arbitrary
-    // components can be immediate children of the surface and make this a noop. If only
-    // templates or DOM elements are projected, the flex display could cause unexpected
-    // alignment issues as explained in our coding standards (see `CODING_STANDARDS.md`).
-    // Additionally, the surface by default should expand based on the parent overlay
-    // boundaries (so that boundaries for the overlay config are respected). The surface
-    // by default would only expand based on its content.
     .mdc-dialog__surface {
-      display: block;
       width: 100%;
       height: 100%;
     }
   }
+
+  // When a component is passed into the dialog, the host element interrupts
+  // the `display:flex` from affecting the dialog title, content, and
+  // actions. To fix this, we make the component host `display: contents` by
+  // marking its host with the `mat-mdc-dialog-component-host` class.
+  //
+  // Note that this problem does not exist when a template ref is used since
+  // the title, contents, and actions are then nested directly under the
+  // dialog surface.
+  .mat-mdc-dialog-component-host {
+    display: contents;
+  }
 }
diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts
index 3338af7948c0..538c2bfb0139 100644
--- a/src/material/dialog/dialog-container.ts
+++ b/src/material/dialog/dialog-container.ts
@@ -12,6 +12,7 @@ import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  ComponentRef,
   ElementRef,
   EventEmitter,
   Inject,
@@ -24,6 +25,7 @@ import {MatDialogConfig} from './dialog-config';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {CdkDialogContainer} from '@angular/cdk/dialog';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {ComponentPortal} from '@angular/cdk/portal';
 
 /** Event that captures the state of dialog container animations. */
 interface LegacyDialogAnimationEvent {
@@ -259,6 +261,20 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
       clearTimeout(this._animationTimer);
     }
   }
+
+  override attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
+    // When a component is passed into the dialog, the host element interrupts
+    // the `display:flex` from affecting the dialog title, content, and
+    // actions. To fix this, we make the component host `display: contents` by
+    // marking its host with the `mat-mdc-dialog-component-host` class.
+    //
+    // Note that this problem does not exist when a template ref is used since
+    // the title, contents, and actions are then nested directly under the
+    // dialog surface.
+    const ref = super.attachComponentPortal(portal);
+    ref.location.nativeElement.classList.add('mat-mdc-dialog-component-host');
+    return ref;
+  }
 }
 
 const TRANSITION_DURATION_PROPERTY = '--mat-dialog-transition-duration';
diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md
index c459d3eb63dc..5ca3250aef2c 100644
--- a/tools/public_api_guard/material/dialog.md
+++ b/tools/public_api_guard/material/dialog.md
@@ -7,6 +7,7 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentFactoryResolver } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -183,6 +184,8 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
     _animationsEnabled: boolean;
     _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
     // (undocumented)
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    // (undocumented)
     protected _captureInitialFocus(): void;
     // (undocumented)
     protected _contentAttached(): void;