MDC Dialog does not have 8dp padding between side-by-side buttons

[robzenn92]

What MDC-Web Version are you using?

0.11.1

What browser(s) is this bug affecting?

I tried with Safari 10.1.1 and Firefox 53.0.2 but I think it does happen in all of them.

What OS are you using?

macOS Sierra 10.12.5

What are the steps to reproduce the bug?

Open http://localhost:8080/dialog.html or visit the demo page

What is the expected behavior?

As described in the Material Design guidelines, dialogs should have 8dp padding between side-by-side buttons.

What is the actual behavior?

Dialogs do not have 8dp padding between side-by-side buttons.

Any other information you believe would be useful?

Thank you for your hard work and commitment! Amazing stuff! 🙏

[Garbee]

That should be margin not padding.

[robzenn92]

@Garbee I agree, but I kept the same naming convention written in the Material Design guidelines: "Button width and padding":

Button height: 36dp
Minimum button width: 64dp
Internal button padding: 8dp
Padding between buttons: 8dp

[traviskaufman]

Good catch @robzenn92 ! Marking this as "help wanted" as the fix is relatively straightforward:

• Within the &__footer selector add the following:

&__button {
  margin-right: 8px;
  
  &:last-child {
    margin-right: 0;
  }
}

If stylelint complains that the above declarations cause too many levels of nesting, feel free to flatten it out.