feat(button): Implement stroked button

[yeelan0319]

closes #987

[kfranqueiro]

Discussed offline, but for the record: I noticed that in the demo page, the addition of border actually ends up offsetting the text, and as you add to the border-width, it moves the text in the button down, but doesn't move the bottom border, causing the text to become increasingly off-center vertically. Removing the explicit line-height currently set on buttons seems to resolve this, except when applied to <a> elements which end up with the text aligned to the top. This might be worth more investigation.

[kfranqueiro]

Are we sure this is the correct width? Images I've seen so far make it look more like 2px.

[yeelan0319]

Confirmed with designer that we set the default border to be 2dp instead of 1dp.

[kfranqueiro]

Re-wording suggestion: A contained button that is flush with the surface and has a visible border.

[yeelan0319]

Chatted offline. For record keeping:

Reason:
border is not considered as part of available space to line-height, so specifying line-height on stroked button will make text aligned border-width off from the top.

Solution goes for:
Dynamically calculate the correct line-height for stroked button.
In the button mixin, we will use base-line-height - 2 * border-width to calculate the correct line-height for stoked button. Note: dense button need to be tackle as well since it have a specification in its line-height.

Solution considered:

1. Removing line-height: This method works for all button type but failed on link. It seems link button will create a different baseline to align with when there is no line-height specified.
2. Change to use flexbox: Unfortunately, Safari won't support justify-content to align text horizontally centered

@kfranqueiro Thanks for catching it!

[googlebot]

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this State. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

[googlebot]

CLAs look good, thanks!

[codecov-io]

Codecov Report

Merging #1194 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #1194   +/-   ##
======================================
  Coverage    99.9%   99.9%           
======================================
  Files          69      69           
  Lines        3314    3314           
  Branches      406     406           
======================================
  Hits         3311    3311           
  Misses          3       3

---

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 a8b9099...a581d0e. Read the comment docs.