Skip to content

Commit

Permalink
fix(material/dialog): css structure change (#27510)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
wagnermaciel authored Sep 6, 2023
1 parent 8eb494e commit cac7a41
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 10 deletions.
22 changes: 12 additions & 10 deletions src/material/dialog/_mdc-dialog-structure-overrides.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
16 changes: 16 additions & 0 deletions src/material/dialog/dialog-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {DOCUMENT} from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
ComponentRef,
ElementRef,
EventEmitter,
Inject,
Expand All @@ -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 {
Expand Down Expand Up @@ -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';
Expand Down
3 changes: 3 additions & 0 deletions tools/public_api_guard/material/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit cac7a41

Please sign in to comment.