From f342375e295e57b966964880e71e734d674c0bf2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 11 May 2022 17:06:07 +0200
Subject: [PATCH] fix(cdk/dialog): add container structural styles (#24905)

Currently the CDK dialog container doesn't come with any styles which means that it's `display: inline`, making it difficult to change its size. These changes add a handful of styles to make it match the specified size in the config.

(cherry picked from commit 32a8b38dcbac09ca1f1e6bf9fa70dbfdb265c936)
---
 src/cdk/dialog/BUILD.bazel              |  8 +++++++-
 src/cdk/dialog/dialog-container.scss    | 13 +++++++++++++
 src/cdk/dialog/dialog-container.ts      |  1 +
 src/dev-app/cdk-dialog/dialog-demo.scss |  6 ------
 src/dev-app/cdk-dialog/dialog-demo.ts   | 20 ++++++++++++++++++--
 5 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/cdk/dialog/dialog-container.scss

diff --git a/src/cdk/dialog/BUILD.bazel b/src/cdk/dialog/BUILD.bazel
index a45bb5b7ea85..1007851774b9 100644
--- a/src/cdk/dialog/BUILD.bazel
+++ b/src/cdk/dialog/BUILD.bazel
@@ -4,6 +4,7 @@ load(
     "ng_module",
     "ng_test_library",
     "ng_web_test_suite",
+    "sass_binary",
 )
 
 package(default_visibility = ["//visibility:public"])
@@ -14,7 +15,7 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    assets = glob(["**/*.html"]),
+    assets = [":dialog-container.css"] + glob(["**/*.html"]),
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",
@@ -61,3 +62,8 @@ filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
 )
+
+sass_binary(
+    name = "dialog_container_scss",
+    src = "dialog-container.scss",
+)
diff --git a/src/cdk/dialog/dialog-container.scss b/src/cdk/dialog/dialog-container.scss
new file mode 100644
index 000000000000..49b3a180db2b
--- /dev/null
+++ b/src/cdk/dialog/dialog-container.scss
@@ -0,0 +1,13 @@
+.cdk-dialog-container {
+  // The container is a custom node so it'll be `display: inline` by default.
+  display: block;
+
+  // The dialog container should completely fill its parent overlay element.
+  width: 100%;
+  height: 100%;
+
+  // Since the dialog won't stretch to fit the parent, if the height
+  // isn't set, we have to inherit the min and max values explicitly.
+  min-height: inherit;
+  max-height: inherit;
+}
diff --git a/src/cdk/dialog/dialog-container.ts b/src/cdk/dialog/dialog-container.ts
index e0f5ca4bae7d..3cd222fcb52b 100644
--- a/src/cdk/dialog/dialog-container.ts
+++ b/src/cdk/dialog/dialog-container.ts
@@ -49,6 +49,7 @@ export function throwDialogContentAlreadyAttachedError() {
 @Component({
   selector: 'cdk-dialog-container',
   templateUrl: './dialog-container.html',
+  styleUrls: ['dialog-container.css'],
   encapsulation: ViewEncapsulation.None,
   // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
   // tslint:disable-next-line:validate-decorators
diff --git a/src/dev-app/cdk-dialog/dialog-demo.scss b/src/dev-app/cdk-dialog/dialog-demo.scss
index 1bdeeec93347..0d305e4f8a86 100644
--- a/src/dev-app/cdk-dialog/dialog-demo.scss
+++ b/src/dev-app/cdk-dialog/dialog-demo.scss
@@ -1,9 +1,3 @@
-.demo-cdk-dialog {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-}
-
 .demo-container {
   button, label {
     margin-right: 8px;
diff --git a/src/dev-app/cdk-dialog/dialog-demo.ts b/src/dev-app/cdk-dialog/dialog-demo.ts
index 072847809200..a3e1bad312b0 100644
--- a/src/dev-app/cdk-dialog/dialog-demo.ts
+++ b/src/dev-app/cdk-dialog/dialog-demo.ts
@@ -75,8 +75,24 @@ export class DialogDemo {
       <button (click)="temporarilyHide()">Hide for 2 seconds</button>
     </div>
   `,
-  encapsulation: ViewEncapsulation.None,
-  styles: [`.hidden-dialog { opacity: 0; }`],
+  styles: [
+    `
+    :host {
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-width: inherit;
+      min-height: inherit;
+    }
+
+    :host-context(.hidden-dialog) {
+      opacity: 0;
+    }
+  `,
+  ],
   standalone: true,
 })
 export class JazzDialog {