refactor(button): Add ripple target as an inner element.

[joyzhong]

BREAKING CHANGE: This changes the structure of the button element by moving the ripple from the outer element to an inner mdc-button__ripple element.

OLD

<button class="mdc-button">
  <span class="mdc-button__label">Hello World</span>
</button>

NEW

<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Hello World</span>
</button>

[joyzhong]

Note that I updated screenshots due to the button label text now overflowing as a result of removing overflow: hidden from button. Filed #4894 to fix the button label bug.

[mdc-web-bot]

🤖 Beep boop!

Screenshot test report 🚦

14 screenshots changed from develop on commit d7b372b:

• https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/18_10_45_320/report/report.html?utm_source=github&utm_medium=pr_comment

Details

14 Changed:

• spec/mdc-dialog/classes/overflow-accessible-font-size.html

• spec/mdc-dialog/classes/overflow-bottom.html

• spec/mdc-dialog/classes/overflow-top.html

• spec/mdc-dialog/mixins/max-height.html

• spec/mdc-dialog/mixins/max-width.html

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (develop@08dbe69). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             develop   #4890   +/-   ##
=========================================
  Coverage           ?   98.9%           
=========================================
  Files              ?     119           
  Lines              ?    5830           
  Branches           ?     779           
=========================================
  Hits               ?    5766           
  Misses             ?      63           
  Partials           ?       1

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 08dbe69...597f6b3. Read the comment docs.

[mdc-web-bot]

🤖 Beep boop!

Screenshot test report 🚦

14 screenshots changed from develop on commit 282c791:

• https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/11/18_38_46_127/report/report.html?utm_source=github&utm_medium=pr_comment

Details

14 Changed:

• spec/mdc-dialog/classes/overflow-accessible-font-size.html

• spec/mdc-dialog/classes/overflow-bottom.html

• spec/mdc-dialog/classes/overflow-top.html

• spec/mdc-dialog/mixins/max-height.html

• spec/mdc-dialog/mixins/max-width.html

[mdc-web-bot]

🤖 Beep boop!

Screenshot test report 🚦

29 screenshots changed from develop on commit 753eee7:

• https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/01_20_23_503/report/report.html?utm_source=github&utm_medium=pr_comment

Details

29 Changed:

• spec/mdc-button/classes/baseline-button-with-icons.html

• spec/mdc-button/classes/baseline-button-with-trailing-icons.html

• spec/mdc-button/classes/baseline-button-without-icons.html

• spec/mdc-button/classes/dense-button-with-icons.html

• spec/mdc-button/classes/dense-button-with-trailing-icons.html

• spec/mdc-button/classes/dense-button-without-icons.html

• spec/mdc-button/mixins/horizontal-padding-baseline.html

• spec/mdc-button/mixins/horizontal-padding-dense.html

• spec/mdc-button/mixins/shape-radius.html

• spec/mdc-button/mixins/stroke-color.html

• spec/mdc-button/mixins/stroke-width.html

• spec/mdc-dialog/classes/overflow-accessible-font-size.html

• spec/mdc-dialog/classes/overflow-bottom.html

• spec/mdc-dialog/classes/overflow-top.html

• spec/mdc-dialog/mixins/max-height.html

• spec/mdc-dialog/mixins/max-width.html

[mdc-web-bot]

🤖 Beep boop!

Screenshot test report 🚦

14 screenshots changed from develop on commit 597f6b3:

• https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/17_24_59_342/report/report.html?utm_source=github&utm_medium=pr_comment

Details

14 Changed:

• spec/mdc-dialog/classes/overflow-accessible-font-size.html

• spec/mdc-dialog/classes/overflow-bottom.html

• spec/mdc-dialog/classes/overflow-top.html

• spec/mdc-dialog/mixins/max-height.html

• spec/mdc-dialog/mixins/max-width.html

[joyzhong]

Ready for review.

[abhiomkar]

LGTM.

[mdc-web-bot]

🤖 Beep boop!

Screenshot test report 🚦

14 screenshots changed from develop on commit 597f6b3:

• https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/19_36_27_377/report/report.html?utm_source=github&utm_medium=pr_comment

Details

14 Changed:

• spec/mdc-dialog/classes/overflow-accessible-font-size.html

• spec/mdc-dialog/classes/overflow-bottom.html

• spec/mdc-dialog/classes/overflow-top.html

• spec/mdc-dialog/mixins/max-height.html

• spec/mdc-dialog/mixins/max-width.html