fix(dialog): not applying margins to new button variants (#11961)

A while ago we introduced a few new button variants, however we never updated the button selector in the dialog which means that they won't get the proper margin if they're placed next to each other. With the new variants, the dialog selector will grow exponentially since we have to list every possible button combination, which is why I added a new class to the button which makes it a lot easier to target any button.

Author: crisbeto

src/material/button/button.ts

@@ -94,14 +94,19 @@ export class MatButton extends _MatButtonMixinBase
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string) {
     super(elementRef);
 
-    // For each of the variant selectors that is prevent in the button's host
+    // For each of the variant selectors that is present in the button's host
     // attributes, add the correct corresponding class.
     for (const attr of BUTTON_HOST_ATTRIBUTES) {
       if (this._hasHostAttributes(attr)) {
         (this._getHostElement() as HTMLElement).classList.add(attr);
       }
     }
 
+    // Add a class that applies to all buttons. This makes it easier to target if somebody
+    // wants to target all Material buttons. We do it here rather than `host` to ensure that
+    // the class is applied to derived classes.
+    elementRef.nativeElement.classList.add('mat-button-base');
+
     this._focusMonitor.monitor(this._elementRef, true);
 
     if (this.isRoundButton) {

src/material/dialog/dialog.scss

@@ -61,10 +61,7 @@ $mat-dialog-button-margin: 8px !default;
     justify-content: center;
   }
 
-  .mat-button + .mat-button,
-  .mat-raised-button + .mat-raised-button,
-  .mat-button + .mat-raised-button,
-  .mat-raised-button + .mat-button {
+  .mat-button-base + .mat-button-base {
     margin-left: $mat-dialog-button-margin;
 
     [dir='rtl'] & {