fix(textfield): Fix textarea label from overlapping border.

[moog16]

Removed textarea border to prevent double borders.
Added line-height to textarea label.

Fixes #1608
https://www.pivotaltracker.com/story/show/153034989

[codecov-io]

Codecov Report

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

@@           Coverage Diff           @@
##           master    #1715   +/-   ##
=======================================
  Coverage   99.43%   99.43%           
=======================================
  Files          84       84           
  Lines        3721     3721           
  Branches      484      484           
=======================================
  Hits         3700     3700           
  Misses         21       21

---

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 ae1993a...e1fab5d. Read the comment docs.

[havenchyk]

I'm not 100% sure, but in active state (:focus) textarea should have 2px border (now it's a sum of 1px div border and 1px textarea border) and if you just remove this border from textarea, the whole border will become 1px

[havenchyk]

@moog16 can transparent background solve the initial problem instead of line-height? https://github.com/material-components/material-components-web/blob/master/packages/mdc-textfield/mdc-text-field.scss#L479

[kfranqueiro]

I believe the reason for the non-transparent background is so that the label is still readable in cases where the text entered into the textarea overlaps it due to overflow/scrolling.

[moog16]

So a few things are being addressed in this PR:

1. There was another issue when moving the fullwidth textarea handle horizontally, and the outer element would not collapse/expand with the textarea element. I fixed this with the resize; vertical; property.
2. The 2nd issue would also come up when it was not fullwidth. The textarea wrapper element needed the css property width: fit-content, which allows for the outer div to take the width of the children.
3. I also added line-height to the label, which was also used in normalize.css. There is a conflict with Safari's default line-height that caused the overlap in the top border.

[amsheehan]

LGTM