MDCTextField: Rebuild textarea to match spec.

[jamesmfriedman]

Bugs

Follow the template below and include a codepen to ensure the quickest and most accurate response to your issue.

What MDC Web Version are you using?

0.37.1

What browser(s) is this bug affecting?

all

What OS are you using?

MacOS High Sierra

What are the steps to reproduce the bug?

It's a visual bug. I looked through the Material spec and it doesn't specifically talk about Textareas which I'm assuming means they should match non textarea inputs.

• With no additional additional stying. My guess is the texarea should just be underlined
  
• Both with outlined. I'd think this would be a common example and these should match
  
• Both with box. Also seems like a viable example where they should match. This also shows a rendering issue where the textarea label actually has a light background color.
  

What is the expected behavior?

Pending someone telling me the spec says otherwise, they should all match.

What is the actual behavior?

They don't

I'm really looking for opportunities to fix things upstream, this is another one I'd be happy to take on if someone just points me in the right direction.

[acdvorak]

Thanks so much for bringing this to our attention, James!

@kfranqueiro will check with a few folks to see if there's a technical reason it was done this way, or if it was just an oversight/resourcing issue.

My gut tells me we should fix this, though.

[nwpappas]

Design guidelines do imply the visual style should match:

[kfranqueiro]

I checked with @amsheehan about the history of our textarea styles. We wrote what's currently in MDC Web for textarea prior to the updated text field spec being fully fleshed out - meaning that at the time, we only had underline-only text fields, and that clearly wouldn't fly for a textarea.

Now that filled and outlined variants exist, we should update textarea to match.

Note that we might want to try to land #2859 before anyone undertakes this, since otherwise there are likely to be a bunch of conflicts between the two.

[axdemelas]

at this time:

.mdc-text-field--textarea,
.mdc-text-field--focused .mdc-text-field__input:focus {
  border-top-color: transparent!important;
  border-left-color: transparent!important;
  border-right-color: transparent!important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

with autosize lib:

autosize(document.querySelectorAll('textarea'))

results: