Vuetify: [Feature Request] Update Outline Inputs to Match Material Guidelines

[samuelcolburn]

Problem to solve

The current implementation of outlined inputs is not consistent with the current Material Design Guidelines for outlined fields.

Vuetify inputs keep the label inside the input area in active states, whereas MD spec positions the label over the top border.

Example

I've created a quick example for text fields, to show what I'm talking about.
CodePen

Benefits

More consistent with Material Design, looks better.

Proposed solution

Update outline styles to match the Material Guidelines.

Before I worked on the other inputs that would need this change (textarea, autocomplete, select, combobox) or created a pull request I thought I'd create this thread in case there's a reason why the current style is the way it is or I'm overlooking something.

[KaelWD]

We made that before it was added to the MD spec. We do intend to update to the new styles eventually, but it isn't a priority right now.

[johnleider]

Since the MD2 update is part of a larger effort and already planned, closing this issue. We fully plan to support all of the new features, but as @KaelWD pointed out, MD 2 was released right in the middle of our v1.1 beta

[chanlito]

Should we open this issue back for version 2?

[MajesticPotatoe]

Should we open this issue back for version 2?

Not needed as it is already implied to be done as part of spec update.

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.