refactor(material/dialog): reduce action selector specificity

Reworks the dialog to reduce the specificity of the selector targeting dialogs with an action section. This is an attempt at making the change easier to land internally.

Author: crisbeto

src/material/dialog/dialog-container.ts

@@ -68,6 +68,7 @@ export const CLOSE_ANIMATION_DURATION = 75;
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
     '[class._mat-animation-noopable]': '!_animationsEnabled',
+    '[class.mat-mdc-dialog-container-with-actions]': '_actionSectionCount > 0',
   },
 })
 export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> implements OnDestroy {
@@ -77,6 +78,9 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
   /** Whether animations are enabled. */
   _animationsEnabled: boolean = this._animationMode !== 'NoopAnimations';
 
+  /** Number of actions projected in the dialog. */
+  protected _actionSectionCount = 0;
+
   /** Host element of the dialog container component. */
   private _hostElement: HTMLElement = this._elementRef.nativeElement;
   /** Duration of the dialog open animation. */
@@ -194,6 +198,15 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
     }
   }
 
+  /**
+   * Updates the number action sections.
+   * @param delta Increase/decrease in the number of sections.
+   */
+  _updateActionSectionCount(delta: number) {
+    this._actionSectionCount += delta;
+    this._changeDetectorRef.markForCheck();
+  }
+
   /**
    * Completes the dialog open by clearing potential animation classes, trapping
    * focus and emitting an opened event.

src/material/dialog/dialog-content-directives.ts

@@ -88,39 +88,27 @@ export class MatDialogClose implements OnInit, OnChanges {
   }
 }
 
-/**
- * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
- */
-@Directive({
-  selector: '[mat-dialog-title], [matDialogTitle]',
-  exportAs: 'matDialogTitle',
-  standalone: true,
-  host: {
-    'class': 'mat-mdc-dialog-title mdc-dialog__title',
-    '[id]': 'id',
-  },
-})
-export class MatDialogTitle implements OnInit, OnDestroy {
-  @Input() id: string = `mat-mdc-dialog-title-${dialogElementUid++}`;
-
+@Directive({standalone: true})
+export abstract class MatDialogLayoutSection implements OnInit, OnDestroy {
   constructor(
     // The dialog title directive is always used in combination with a `MatDialogRef`.
     // tslint:disable-next-line: lightweight-tokens
-    @Optional() private _dialogRef: MatDialogRef<any>,
+    @Optional() protected _dialogRef: MatDialogRef<any>,
     private _elementRef: ElementRef<HTMLElement>,
     private _dialog: MatDialog,
   ) {}
 
+  protected abstract _onAdd(): void;
+  protected abstract _onRemove(): void;
+
   ngOnInit() {
     if (!this._dialogRef) {
       this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
     }
 
     if (this._dialogRef) {
       Promise.resolve().then(() => {
-        // Note: we null check the queue, because there are some internal
-        // tests that are mocking out `MatDialogRef` incorrectly.
-        this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);
+        this._onAdd();
       });
     }
   }
@@ -132,12 +120,38 @@ export class MatDialogTitle implements OnInit, OnDestroy {
 
     if (instance) {
       Promise.resolve().then(() => {
-        instance._removeAriaLabelledBy?.(this.id);
+        this._onRemove();
       });
     }
   }
 }
 
+/**
+ * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
+ */
+@Directive({
+  selector: '[mat-dialog-title], [matDialogTitle]',
+  exportAs: 'matDialogTitle',
+  standalone: true,
+  host: {
+    'class': 'mat-mdc-dialog-title mdc-dialog__title',
+    '[id]': 'id',
+  },
+})
+export class MatDialogTitle extends MatDialogLayoutSection {
+  @Input() id: string = `mat-mdc-dialog-title-${dialogElementUid++}`;
+
+  protected _onAdd() {
+    // Note: we null check the queue, because there are some internal
+    // tests that are mocking out `MatDialogRef` incorrectly.
+    this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);
+  }
+
+  protected override _onRemove(): void {
+    this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);
+  }
+}
+
 /**
  * Scrollable content container of a dialog.
  */
@@ -162,11 +176,19 @@ export class MatDialogContent {}
     '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
   },
 })
-export class MatDialogActions {
+export class MatDialogActions extends MatDialogLayoutSection {
   /**
    * Horizontal alignment of action buttons.
    */
   @Input() align?: 'start' | 'center' | 'end';
+
+  protected _onAdd() {
+    this._dialogRef._containerInstance?._updateActionSectionCount?.(1);
+  }
+
+  protected override _onRemove(): void {
+    this._dialogRef._containerInstance?._updateActionSectionCount?.(-1);
+  }
 }
 
 /**

src/material/dialog/dialog.scss

@@ -15,6 +15,11 @@ $mat-dialog-content-max-height: 65vh !default;
 // don't expose this value as variable.
 $mat-dialog-button-horizontal-margin: 8px !default;
 
+// Whether to emit fallback values for the structural styles. Previously MDC was emitting
+// paddings in the static styles which meant that users would get them even if they didn't
+// include the `dialog-base`. Eventually we should clean up the usages of this flag.
+$_emit-fallbacks: true;
+
 // Note that we disable fallback declarations, but we don't disable fallback
 // values, because there are a lot of internal apps that don't include a proper
 // theme in their tests.
@@ -55,21 +60,31 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   }
 }
 
+@mixin _use-mat-tokens {
+  @include mdc-helpers.disable-mdc-fallback-declarations {
+    @include token-utils.use-tokens(tokens-mat-dialog.$prefix,
+      tokens-mat-dialog.get-token-slots()) {
+      @content;
+    }
+  }
+}
+
 // This needs extra specificity so it doesn't get overwritten by the CDK structural styles.
 .cdk-overlay-pane.mat-mdc-dialog-panel {
-  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
-    @include token-utils.create-token-slot(max-width, container-max-width);
-    @include token-utils.create-token-slot(min-width, container-min-width);
+  @include _use-mat-tokens {
+    @include token-utils.create-token-slot(max-width, container-max-width, $_emit-fallbacks);
+    @include token-utils.create-token-slot(min-width, container-min-width, $_emit-fallbacks);
 
     @media (variables.$xsmall) {
-      @include token-utils.create-token-slot(max-width, container-small-max-width);
+      @include token-utils.create-token-slot(max-width, container-small-max-width,
+        $_emit-fallbacks);
     }
   }
 }
 
 .mat-mdc-dialog-title {
-  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
-    @include token-utils.create-token-slot(padding, headline-padding);
+  @include _use-mat-tokens {
+    @include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks);
   }
 }
 
@@ -78,14 +93,17 @@ $mat-dialog-button-horizontal-margin: 8px !default;
 .mat-mdc-dialog-content {
   display: block;
 
-  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
+  @include _use-mat-tokens {
     // These styles need a bit more specificity.
     .mat-mdc-dialog-container & {
-      @include token-utils.create-token-slot(padding, content-padding);
+      @include token-utils.create-token-slot(padding, content-padding, $_emit-fallbacks);
     }
 
-    .mat-mdc-dialog-container:has(.mat-mdc-dialog-actions) & {
-      @include token-utils.create-token-slot(padding, with-actions-content-padding);
+    // Note: we can achieve this with a `:has` selector, but it results in an
+    // increased specificity which breaks a lot of internal clients.
+    .mat-mdc-dialog-container-with-actions & {
+      @include token-utils.create-token-slot(padding, with-actions-content-padding,
+        $_emit-fallbacks);
     }
   }
 
@@ -97,9 +115,9 @@ $mat-dialog-button-horizontal-margin: 8px !default;
 .mat-mdc-dialog-actions {
   // For backwards compatibility, actions align at start by default. MDC usually
   // aligns actions at the end of the container.
-  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
-    @include token-utils.create-token-slot(padding, actions-padding);
-    @include token-utils.create-token-slot(justify-content, actions-alignment);
+  @include _use-mat-tokens {
+    @include token-utils.create-token-slot(padding, actions-padding, $_emit-fallbacks);
+    @include token-utils.create-token-slot(justify-content, actions-alignment, $_emit-fallbacks);
   }
 
   // .mat-mdc-dialog-actions-align-{start|center|end} are set by directive input "align"

src/material/dialog/public-api.ts

@@ -9,7 +9,12 @@
 export * from './dialog';
 export * from './dialog-config';
 export * from './dialog-ref';
-export * from './dialog-content-directives';
+export {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogTitle,
+  MatDialogContent,
+} from './dialog-content-directives';
 export {MatDialogContainer} from './dialog-container';
 export * from './module';
 export {matDialogAnimations, _defaultParams} from './dialog-animations';

tools/public_api_guard/material/dialog.md

@@ -113,9 +113,13 @@ export class MatDialog implements OnDestroy {
 }
 
 // @public
-export class MatDialogActions {
+export class MatDialogActions extends MatDialogLayoutSection {
     align?: 'start' | 'center' | 'end';
     // (undocumented)
+    protected _onAdd(): void;
+    // (undocumented)
+    protected _onRemove(): void;
+    // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
@@ -184,6 +188,7 @@ export class MatDialogConfig<D = any> {
 // @public (undocumented)
 export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> implements OnDestroy {
     constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, _document: any, dialogConfig: MatDialogConfig, interactivityChecker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
+    protected _actionSectionCount: number;
     _animationsEnabled: boolean;
     _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
     // (undocumented)
@@ -196,6 +201,7 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
     ngOnDestroy(): void;
     protected _openAnimationDone(totalTime: number): void;
     _startExitAnimation(): void;
+    _updateActionSectionCount(delta: number): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, true, never>;
     // (undocumented)
@@ -253,18 +259,17 @@ export enum MatDialogState {
 }
 
 // @public
-export class MatDialogTitle implements OnInit, OnDestroy {
-    constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
+export class MatDialogTitle extends MatDialogLayoutSection {
     // (undocumented)
     id: string;
     // (undocumented)
-    ngOnDestroy(): void;
+    protected _onAdd(): void;
     // (undocumented)
-    ngOnInit(): void;
+    protected _onRemove(): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, never>;
 }
 
 // (No @packageDocumentation comment for this package)