fix: Restore broken fullwidth textarea with label (#523)

Fullwidth textareas are allowed (upstream demo has an example) but
wasn't working

Write a console warning instead of silently ignoring invalid config
options. The old behavior had potential to cause confusion.

Add tests of text area and the new warnings.

Fixes: #509

Author: vinaypai

components/text-field/README.md

@@ -142,7 +142,7 @@ data() {
 | dense | Boolean | false | Styles the text field as a dense text field, will be removed in an upcoming release |
 | focused | Boolean | false | Styles the text field as a text field in focus. |
 | textarea | Boolean | false | Indicates the text field is a <textarea>. |
-| useNativeValidation | Boolean | true | Sets whether to check native HTML validity state (true, default) or custom validity state when updating styles (false). | 
+| useNativeValidation | Boolean | true | Sets whether to check native HTML validity state (true, default) or custom validity state when updating styles (false). |
 | valid | Boolean | true | Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless useNativeValidation is also false. |
 
 ### Slots
@@ -210,4 +210,4 @@ Character counter is used if there is a character limit. It displays the ratio o
 
 ### Reference
 
-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-text field
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield

components/text-field/TextField.vue

@@ -37,7 +37,7 @@
       </div>
       <div class="mdc-notched-outline__trailing" />
     </div>
-    <slot v-if="$slots.default && !fullWidth && !textarea && !outlined" />
+    <slot v-if="$slots.default && !textarea && !outlined" />
     <slot name="trailingIcon" />
     <slot
       v-if="!outlined"
@@ -119,14 +119,14 @@ export default {
   computed: {
     classes () {
       return {
-        'mdc-text-field--fullwidth': this.fullWidth && this.noLabel && !this.outlined,
+        'mdc-text-field--fullwidth': this.fullWidth,
         'mdc-text-field--with-leading-icon': this.hasLeadingIcon,
         'mdc-text-field--with-trailing-icon': this.hasTrailingIcon,
-        'mdc-text-field--outlined': this.outlined && !this.fullWidth,
+        'mdc-text-field--outlined': this.outlined,
         'mdc-text-field--dense': this.dense,
         'mdc-text-field--focused': this.focused, // won't change the actual activeElement
         'mdc-text-field--textarea': this.textarea,
-        'mdc-text-field--no-label': this.noLabel && !this.fullWidth
+        'mdc-text-field--no-label': this.noLabel
       }
     }
   },
@@ -165,6 +165,7 @@ export default {
       this.noLabel = this.$el.querySelector('.mdc-floating-label') == null
       this.hasLeadingIcon = this.$slots.leadingIcon != null
       this.hasTrailingIcon = this.$slots.trailingIcon != null
+
       // to make our icons compatible with version 0.x.y
       if (this.hasLeadingIcon) {
         this.$slots.leadingIcon.forEach(n => {
@@ -180,6 +181,8 @@ export default {
           }
         })
       }
+
+      this.checkConfig()
     },
     reInstantiate () {
       this.mdcTextField.destroy()
@@ -215,6 +218,21 @@ export default {
         }
       })
     },
+    checkConfig () {
+      if (this.fullWidth && !this.noLabel && !this.textarea) {
+        console.warn(
+          'Do not use floating label with a full width text input. ' +
+          'See https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield#full-width'
+        )
+      }
+
+      if (this.fullWidth && this.outlined && !this.textarea) {
+        console.warn(
+          'Do not use outlined style on full width text input. ' +
+          'See: https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield#full-width'
+        )
+      }
+    },
     getLabel () {
       return this.mdcTextField.label_
     },

components/text-field/TextFieldCharacterCounter.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="mdc-text-field-character-counter" @_init="onParentInit">
+  <div
+    class="mdc-text-field-character-counter"
+    @_init="onParentInit"
+  >
     {{ currentLength }} / {{ maxLength }}
   </div>
 </template>

components/text-field/__test__/TextField.spec.js

@@ -2,6 +2,7 @@ import 'mutationobserver-shim'
 import { mount } from '@vue/test-utils'
 import TextField from '../TextField.vue'
 import TextFieldIcon from '../TextFieldIcon.vue'
+import FloatingLabel from '../../floating-label/FloatingLabel.vue'
 
 describe('Text Field', () => {
   it('should mount', () => {
@@ -68,6 +69,37 @@ describe('Text Field', () => {
     expect(wrapper.classes()).toContain('mdc-text-field--fullwidth')
   })
 
+  it('should warn of fullWidth text input with floating label', () => {
+    const warnfn = console.warn
+    console.warn = jest.fn()
+    mount(TextField, {
+      propsData: {
+        fullWidth: true
+      },
+      slots: {
+        default: '<m-floating-label>My Label</m-floating-label>'
+      },
+      stubs: {
+        'm-floating-label': FloatingLabel
+      }
+    })
+    expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('floating label'))
+    console.warn = warnfn
+  })
+
+  it('should warn of fullWidth text input with outlined style', () => {
+    const warnfn = console.warn
+    console.warn = jest.fn()
+    mount(TextField, {
+      propsData: {
+        fullWidth: true,
+        outlined: true
+      }
+    })
+    expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('outlined style'))
+    console.warn = warnfn
+  })
+
   it('should render and emit', () => {
     const wrapper = mount(TextField, {
       propsData: {
@@ -100,4 +132,35 @@ describe('Text Field', () => {
     expect(wrapper).toMatchSnapshot()
     expect(wrapper.classes()).toContain('mdc-text-field--with-trailing-icon')
   })
+
+  it('should render textarea', () => {
+    const wrapper = mount(TextField, {
+      propsData: {
+        textarea: true
+      }
+    })
+
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-text-field--textarea')
+  })
+
+  it('should render full-width textarea with outlined label', () => {
+    const wrapper = mount(TextField, {
+      propsData: {
+        textarea: true,
+        fullWidth: true
+      },
+      slots: {
+        default: '<m-floating-label>My Label</m-floating-label>'
+      },
+      stubs: {
+        'm-floating-label': FloatingLabel
+      }
+    })
+
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-text-field--fullwidth')
+    expect(wrapper.classes()).toContain('mdc-text-field--textarea')
+    expect(wrapper.find('.mdc-notched-outline').exists()).toBe(true)
+  })
 })

components/text-field/__test__/__snapshots__/TextField.spec.js.snap

@@ -28,7 +28,7 @@ exports[`Text Field should render as focused 1`] = `
 `;
 
 exports[`Text Field should render as fullWidth 1`] = `
-<div class="mdc-text-field mdc-text-field--fullwidth">
+<div class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--no-label">
   <!----> <input class="mdc-text-field__input">
   <!---->
   <!---->
@@ -50,6 +50,30 @@ exports[`Text Field should render as outlined 1`] = `
 </div>
 `;
 
+exports[`Text Field should render full-width textarea with outlined label 1`] = `
+<div class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--textarea">
+  <!----> <textarea class="mdc-text-field__input"></textarea>
+  <div class="mdc-notched-outline mdc-notched-outline--upgraded">
+    <div class="mdc-notched-outline__leading"></div>
+    <div class="mdc-notched-outline__notch"><label class="mdc-floating-label" style="transition-duration: 0s;">My Label</label></div>
+    <div class="mdc-notched-outline__trailing"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`Text Field should render textarea 1`] = `
+<div class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
+  <!----> <textarea class="mdc-text-field__input"></textarea>
+  <div class="mdc-notched-outline mdc-notched-outline--no-label">
+    <div class="mdc-notched-outline__leading"></div>
+    <!---->
+    <div class="mdc-notched-outline__trailing"></div>
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`Text Field should render with leading icon 1`] = `
 <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--no-label"><i class="mdc-text-field__icon" tabindex="0" role="button"></i>
   <!----> <input class="mdc-text-field__input">

docs/.vuepress/components/TextfieldDemo.vue

@@ -17,7 +17,7 @@
             >
                 <m-text-field-character-counter v-if="checkboxProps[15].value && radioProps[3].value" slot="characterCounter"/>
                 <m-text-field-icon icon="favorite" slot="leadingIcon" v-if="checkboxProps[8].value" :clickable="checkboxProps[10].value"></m-text-field-icon>
-                <m-floating-label v-if="!checkboxProps[11].value || radioProps[1].value"
+                <m-floating-label v-if="!checkboxProps[11].value"
                         for="text-field1">Label
                 </m-floating-label>
                 <m-text-field-icon icon="favorite" slot="trailingIcon" v-if="checkboxProps[9].value" :clickable="checkboxProps[10].value"></m-text-field-icon>