From 8bee18405894036c942b6903494dbbbf0023a328 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 25 Jul 2023 12:08:53 -0400 Subject: [PATCH 1/6] fix(material/dialog): css structure change * change the css structure of the dialog surface and it's children --- .../_mdc-dialog-structure-overrides.scss | 22 ++++++++++-------- src/material/dialog/dialog.ts | 23 +++++++++++++++++++ 2 files changed, 35 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..e045f710ca70 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 it's panel with the `mat-mdc-dialog-component-panel` 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-panel .mat-mdc-dialog-surface > * { + display: contents; + } } diff --git a/src/material/dialog/dialog.ts b/src/material/dialog/dialog.ts index cac91135b832..e48c132e0d21 100644 --- a/src/material/dialog/dialog.ts +++ b/src/material/dialog/dialog.ts @@ -165,6 +165,18 @@ export class MatDialog implements OnDestroy { config.id = config.id || `mat-mdc-dialog-${uniqueId++}`; config.scrollStrategy = config.scrollStrategy || this._scrollStrategy(); + // 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 it's panel with the `mat-mdc-dialog-component-panel` 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. + if (!(componentOrTemplateRef instanceof TemplateRef)) { + this._appendPanelClass(config, 'mat-mdc-dialog-component-panel'); + } + const cdkRef = this._dialog.open(componentOrTemplateRef, { ...config, positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(), @@ -252,4 +264,15 @@ export class MatDialog implements OnDestroy { dialogs[i].close(); } } + + /** Appends the given class name to the panel via the dialog config. */ + private _appendPanelClass(config: MatDialogConfig, className: string) { + if (Array.isArray(config.panelClass)) { + config.panelClass.push(className); + } else if (typeof config.panelClass === 'string') { + config.panelClass = [config.panelClass, className]; + } else { + config.panelClass = className; + } + } } From 63f48bb1db5e88879f2eb73fb538d18ec2c53b36 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 3 Aug 2023 11:32:38 -0400 Subject: [PATCH 2/6] fixup! fix(material/dialog): css structure change --- src/material/dialog/_mdc-dialog-structure-overrides.scss | 7 +++++-- src/material/dialog/dialog.ts | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/material/dialog/_mdc-dialog-structure-overrides.scss b/src/material/dialog/_mdc-dialog-structure-overrides.scss index e045f710ca70..9a78494ff51b 100644 --- a/src/material/dialog/_mdc-dialog-structure-overrides.scss +++ b/src/material/dialog/_mdc-dialog-structure-overrides.scss @@ -46,13 +46,16 @@ // 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 + // actions. To fix this, we make the component host `display: flex` by // marking it's panel with the `mat-mdc-dialog-component-panel` 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-panel .mat-mdc-dialog-surface > * { - display: contents; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; } } diff --git a/src/material/dialog/dialog.ts b/src/material/dialog/dialog.ts index e48c132e0d21..1b9a43fe12f3 100644 --- a/src/material/dialog/dialog.ts +++ b/src/material/dialog/dialog.ts @@ -167,7 +167,7 @@ export class MatDialog implements OnDestroy { // 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 + // actions. To fix this, we make the component host `display: flex` by // marking it's panel with the `mat-mdc-dialog-component-panel` class. // // Note that this problem does not exist when a template ref is used since From f67866b70d8a760faff2dff3a117169c71230e4a Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 3 Aug 2023 13:46:06 -0400 Subject: [PATCH 3/6] fixup! fix(material/dialog): css structure change --- .../_mdc-dialog-structure-overrides.scss | 8 ++++--- src/material/dialog/dialog-container.ts | 16 +++++++++++++ src/material/dialog/dialog.ts | 23 ------------------- tools/public_api_guard/material/dialog.md | 3 +++ 4 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/material/dialog/_mdc-dialog-structure-overrides.scss b/src/material/dialog/_mdc-dialog-structure-overrides.scss index 9a78494ff51b..34e6152bbb3d 100644 --- a/src/material/dialog/_mdc-dialog-structure-overrides.scss +++ b/src/material/dialog/_mdc-dialog-structure-overrides.scss @@ -31,7 +31,9 @@ // this for the dialog content scrolling (as explained above), and since we allow for // custom positioning through overlay configuration, we remove the rectangle // restrictions and scale based on the CDK overlay container. - &, .mdc-dialog__container, .mdc-dialog__surface { + &, + .mdc-dialog__container, + .mdc-dialog__surface { max-height: inherit; min-height: inherit; min-width: inherit; @@ -47,12 +49,12 @@ // 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: flex` by - // marking it's panel with the `mat-mdc-dialog-component-panel` class. + // 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-panel .mat-mdc-dialog-surface > * { + .mat-mdc-dialog-component-host { display: flex; flex-direction: column; width: 100%; diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index 3338af7948c0..f8d12b24357e 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 impl clearTimeout(this._animationTimer); } } + + override attachComponentPortal(portal: ComponentPortal): ComponentRef { + // 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: flex` 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/src/material/dialog/dialog.ts b/src/material/dialog/dialog.ts index 1b9a43fe12f3..cac91135b832 100644 --- a/src/material/dialog/dialog.ts +++ b/src/material/dialog/dialog.ts @@ -165,18 +165,6 @@ export class MatDialog implements OnDestroy { config.id = config.id || `mat-mdc-dialog-${uniqueId++}`; config.scrollStrategy = config.scrollStrategy || this._scrollStrategy(); - // 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: flex` by - // marking it's panel with the `mat-mdc-dialog-component-panel` 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. - if (!(componentOrTemplateRef instanceof TemplateRef)) { - this._appendPanelClass(config, 'mat-mdc-dialog-component-panel'); - } - const cdkRef = this._dialog.open(componentOrTemplateRef, { ...config, positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(), @@ -264,15 +252,4 @@ export class MatDialog implements OnDestroy { dialogs[i].close(); } } - - /** Appends the given class name to the panel via the dialog config. */ - private _appendPanelClass(config: MatDialogConfig, className: string) { - if (Array.isArray(config.panelClass)) { - config.panelClass.push(className); - } else if (typeof config.panelClass === 'string') { - config.panelClass = [config.panelClass, className]; - } else { - config.panelClass = className; - } - } } diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md index c459d3eb63dc..f62d8179a3b8 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'; @@ -185,6 +186,8 @@ export class MatDialogContainer extends CdkDialogContainer impl // (undocumented) protected _captureInitialFocus(): void; // (undocumented) + attachComponentPortal(portal: ComponentPortal): ComponentRef; + // (undocumented) protected _contentAttached(): void; // (undocumented) ngOnDestroy(): void; From 796a31596e2ebef49f2eabe0afbd8d2b63267cc1 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 3 Aug 2023 13:59:39 -0400 Subject: [PATCH 4/6] fixup! fix(material/dialog): css structure change --- src/material/dialog/_mdc-dialog-structure-overrides.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/material/dialog/_mdc-dialog-structure-overrides.scss b/src/material/dialog/_mdc-dialog-structure-overrides.scss index 34e6152bbb3d..788b09f39ad9 100644 --- a/src/material/dialog/_mdc-dialog-structure-overrides.scss +++ b/src/material/dialog/_mdc-dialog-structure-overrides.scss @@ -31,9 +31,7 @@ // this for the dialog content scrolling (as explained above), and since we allow for // custom positioning through overlay configuration, we remove the rectangle // restrictions and scale based on the CDK overlay container. - &, - .mdc-dialog__container, - .mdc-dialog__surface { + &, .mdc-dialog__container, .mdc-dialog__surface { max-height: inherit; min-height: inherit; min-width: inherit; From 95f86bf30a62fd25d56f46d1163d55b273fbeff6 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 9 Aug 2023 23:22:07 -0400 Subject: [PATCH 5/6] fixup! fix(material/dialog): css structure change --- src/material/dialog/_mdc-dialog-structure-overrides.scss | 7 ++----- src/material/dialog/dialog-container.ts | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/material/dialog/_mdc-dialog-structure-overrides.scss b/src/material/dialog/_mdc-dialog-structure-overrides.scss index 788b09f39ad9..037fd7c8887c 100644 --- a/src/material/dialog/_mdc-dialog-structure-overrides.scss +++ b/src/material/dialog/_mdc-dialog-structure-overrides.scss @@ -46,16 +46,13 @@ // 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: flex` by + // 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: flex; - flex-direction: column; - width: 100%; - height: 100%; + display: contents; } } diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index f8d12b24357e..538c2bfb0139 100644 --- a/src/material/dialog/dialog-container.ts +++ b/src/material/dialog/dialog-container.ts @@ -265,7 +265,7 @@ export class MatDialogContainer extends CdkDialogContainer impl override attachComponentPortal(portal: ComponentPortal): ComponentRef { // 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: flex` by + // 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 From f2ce83b8bc9cc5685aaf5259551159f65a9f552e Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 5 Sep 2023 22:33:13 -0400 Subject: [PATCH 6/6] fixup! fix(material/dialog): css structure change --- tools/public_api_guard/material/dialog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md index f62d8179a3b8..5ca3250aef2c 100644 --- a/tools/public_api_guard/material/dialog.md +++ b/tools/public_api_guard/material/dialog.md @@ -184,10 +184,10 @@ export class MatDialogContainer extends CdkDialogContainer impl _animationsEnabled: boolean; _animationStateChanged: EventEmitter; // (undocumented) - protected _captureInitialFocus(): void; - // (undocumented) attachComponentPortal(portal: ComponentPortal): ComponentRef; // (undocumented) + protected _captureInitialFocus(): void; + // (undocumented) protected _contentAttached(): void; // (undocumented) ngOnDestroy(): void;