<mat-dialog-actions>: Button spacing does not match MD spec

Bug, feature request, or proposal:

Buttons that are inside mat-dialog-actions currently have no padding/margin to the left or right. There should be padding between buttons as described in the Material Design spec. Buttons inside mat-card-actions do have a margin left and right of 4px, providing some sort of spacing.

What is the expected behavior?

See Material Design dialogs specs: https://material.io/guidelines/components/dialogs.html#dialogs-specs

What is the current behavior?

See screenshot below taken from the Angular Material example site.

)

What are the steps to reproduce?

Visit the Angular Material example site: https://material.angular.io/components/component/dialog

What is the use-case or motivation for changing an existing behavior?

Match Material Design spec.

[arlowhite]

This is what I do in my SCSS:

.mat-dialog-actions {
  // align buttons to right as shown in Material Design guide
  justify-content: flex-end;

.mat-button {
  &:not(:first-child) {
      margin-left: 1em;
    }
  }
}

.flex-spacer {
  flex: 1 1 auto;
}

If I want to push a button to the left side, I put a greedy span in-between the buttons.

<span class="flex-spacer"></span>

But if you want to support RTL layouts, that’s a whole other issue.

[Splaktar]

@demetrio812 I was able to work around this using the panelClass API of md-dialog, setting my dialog’s ViewEncapsulation.NONE, and applying the following styles to my class:

this.dialog.open(CustomDialogComponent, {panelClass: 'customDialog'})

.customDialog {
  .mat-dialog-container {
    padding: 24px 0 0;

    [mat-dialog-title],
    .mat-dialog-content {
      padding: 0 24px;
    }
    custom-dialog {
      display: flex;
      flex-direction: column;
    }
    .mat-dialog-actions {
      padding: 8px;

      .mat-button {
        padding: 0 8px;
        min-width: 64px;

        &:nth-child(even) {
          margin-left: 8px;
        }
      }
    }
  }
}

These seemed to have the best match with the Material Design spec.