Revert "Add helper text API and slot (#410)" (#464)

This reverts commit d719168. # Conflicts: # src/vaadin-text-field-mixin.html # theme/lumo/vaadin-text-field-styles.html
vaadin · Apr 7, 2020 · 04657db · 04657db
1 parent 315045a
commit 04657db
Show file tree

Hide file tree

Showing 24 changed files with 18 additions and 297 deletions.
diff --git a/demo/text-field-basic-demos.html b/demo/text-field-basic-demos.html
@@ -15,6 +15,7 @@ <h3>Basic text field</h3>
       </template>
     </vaadin-demo-snippet>
 
+
     <h3>Disabled and read-only</h3>
     <vaadin-demo-snippet id="text-field-basic-demos-states">
       <template preserve-content>
@@ -39,16 +40,6 @@ <h3>Display the clear button</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Helper text</h3>
-    <p>Use the <code>helper-text</code> attribute or add content to the <code>helper</code> slot to set helper content.</p>
-    <vaadin-demo-snippet id="text-field-basic-demos-helper-text">
-      <template preserve-content>
-        <vaadin-text-field label="Username">
-          <span slot="helper">Typically "firstname.lastname"</span>
-        </vaadin-text-field>
-        <vaadin-password-field label="Password" helper-text="Choose a strong password"></vaadin-password-field>
-      </template>
-    </vaadin-demo-snippet>
 
   </template>
   <script>

diff --git a/demo/text-field-theme-demos.html b/demo/text-field-theme-demos.html
@@ -23,14 +23,6 @@ <h3>Small size</h3>
         <vaadin-text-field theme="small" label="Label" placeholder="Text field"></vaadin-text-field>
       </template>
     </vaadin-demo-snippet>
-
-    <h3>Helper text position</h3>
-    <vaadin-demo-snippet id="text-field-theme-demos-sizes">
-      <template preserve-content>
-        <vaadin-text-field helper-text="helper text below text field"></vaadin-text-field>
-        <vaadin-text-field helper-text="helper text above text field" theme="helper-above-field"></vaadin-text-field>
-      </template>
-    </vaadin-demo-snippet>
 
 
   </template>

diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html
@@ -17,9 +17,8 @@
         min-height: inherit; /* MSIE 11 */
       }
 
-      /* The label, helper text and the error message should neither grow nor shrink. */
+      /* The label and the error message should neither grow nor shrink. */
       [part="label"],
-      [part="helper-text"],
       [part="error-message"] {
         flex: none;
       }
@@ -66,10 +65,6 @@
 
       </div>
 
-      <div part="helper-text" on-click="focus" id="[[_helperTextId]]">
-        <slot name="helper">[[helperText]]</slot>
-      </div>
-
       <div part="error-message"
         id="[[_errorId]]"
         aria-live="assertive"
@@ -122,8 +117,6 @@
        * `disabled` | Set to a disabled text field | :host
        * `has-value` | Set when the element has a value | :host
        * `has-label` | Set when the element has a label | :host
-       * `has-helper` | Set when the element has helper text | :host
-       * `has-error-message` | Set when the element has an error message | :host
        * `invalid` | Set when the element is invalid | :host
        * `focused` | Set when the element is focused | :host
        * `focus-ring` | Set when the element is keyboard focused | :host

diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -189,8 +189,7 @@
          */
         errorMessage: {
           type: String,
-          value: '',
-          observer: '_errorMessageChanged'
+          value: ''
         },
 
         /**
@@ -222,15 +221,6 @@
           observer: '_labelChanged'
         },
 
-        /**
-         * String used for the helper text.
-         */
-        helperText: {
-          type: String,
-          value: '',
-          observer: '_helperTextChanged'
-        },
-
         /**
          * Maximum number of characters (in Unicode code points) that the user can enter.
          */
@@ -327,23 +317,19 @@
 
         _labelId: String,
 
-        _helperTextId: String,
-
         _errorId: String,
 
-        _inputId: String,
-
-        _hasSlottedHelper: Boolean
+        _inputId: String
       };
     }
 
     static get observers() {
       return ['_stateChanged(disabled, readonly, clearButtonVisible, hasValue)',
         '_hostPropsChanged(' + HOST_PROPS.default.join(', ') + ')',
         '_hostAccessiblePropsChanged(' + HOST_PROPS.accessible.join(', ') + ')',
-        '_getActiveErrorId(invalid, errorMessage, _errorId, helperText, _helperTextId, _hasSlottedHelper)',
+        '_getActiveErrorId(invalid, errorMessage, _errorId)',
         '_getActiveLabelId(label, _labelId, _inputId)',
-        '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
+        '__observeOffsetHeight(errorMessage, invalid, label)',
         '__enabledCharPatternChanged(_enabledCharPattern)'
       ];
     }
@@ -464,28 +450,10 @@
     }
 
     _labelChanged(label) {
-      this._setOrToggleAttribute('has-label', label === 0 || !!label, this);
-    }
-
-    _helperTextChanged(helperText) {
-      this._setOrToggleAttribute('has-helper', helperText === 0 || !!helperText, this);
-    }
-
-    _errorMessageChanged(errorMessage) {
-      this._setOrToggleAttribute('has-error-message', errorMessage === 0 || !!errorMessage, this);
-    }
-
-    _onHelperSlotChange() {
-      const slottedNodes = this.root.querySelector(`[name="helper"]`).assignedNodes();
-      // Only has slotted helper if not a text node
-      // Text nodes are added by the helperText prop and not the helper slot
-      // The filter is added due to shady DOM triggering this slotchange event on helperText prop change
-      this._hasSlottedHelper = slottedNodes.filter(node => node.nodeType !== 3).length;
-
-      if (this._hasSlottedHelper) {
-        this.setAttribute('has-helper', 'slotted');
-      } else if (this.helperText === '' || this.helperText === null) {
-        this.removeAttribute('has-helper');
+      if (label !== '' && label != null) {
+        this.setAttribute('has-label', '');
+      } else {
+        this.removeAttribute('has-label');
       }
     }
 
@@ -626,9 +594,6 @@
       this.shadowRoot.querySelector('[name="input"], [name="textarea"]')
         .addEventListener('slotchange', this._onSlotChange.bind(this));
 
-      this._onHelperSlotChange();
-      this.shadowRoot.querySelector('[name="helper"]').addEventListener('slotchange', this._onHelperSlotChange.bind(this));
-
       if (!(window.ShadyCSS && window.ShadyCSS.nativeCss)) {
         this.updateStyles();
       }
@@ -641,7 +606,6 @@
       var uniqueId = Vaadin.TextFieldMixin._uniqueId = 1 + Vaadin.TextFieldMixin._uniqueId || 0;
       this._errorId = `${this.constructor.is}-error-${uniqueId}`;
       this._labelId = `${this.constructor.is}-label-${uniqueId}`;
-      this._helperTextId = `${this.constructor.is}-helper-${uniqueId}`;
       this._inputId = `${this.constructor.is}-input-${uniqueId}`;
 
       // Lumo theme defines a max-height transition for the "error-message"
@@ -782,15 +746,10 @@
       }
     }
 
-    _getActiveErrorId(invalid, errorMessage, errorId, helperText, helperTextId, hasSlottedHelper) {
-      const ids = [];
-      if (helperText || hasSlottedHelper) {
-        ids.push(helperTextId);
-      }
-      if (errorMessage && invalid) {
-        ids.push(errorId);
-      }
-      this._setOrToggleAttribute('aria-describedby', ids.join(' '), this.focusElement);
+    _getActiveErrorId(invalid, errorMessage, errorId) {
+      this._setOrToggleAttribute('aria-describedby',
+        (errorMessage && invalid ? errorId : undefined),
+        this.focusElement);
     }
 
     _getActiveLabelId(label, _labelId, _inputId) {

diff --git a/src/vaadin-text-field.html b/src/vaadin-text-field.html
@@ -31,10 +31,6 @@
 
       </div>
 
-      <div part="helper-text" on-click="focus" id="[[_helperTextId]]">
-        <slot name="helper">[[helperText]]</slot>
-      </div>
-
       <div part="error-message"
         id="[[_errorId]]"
         aria-live="assertive"
@@ -93,8 +89,6 @@
        * `disabled` | Set to a disabled text field | :host
        * `has-value` | Set when the element has a value | :host
        * `has-label` | Set when the element has a label | :host
-       * `has-helper` | Set when the element has helper text or slot | :host
-       * `has-error-message` | Set when the element has an error message | :host
        * `invalid` | Set when the element is invalid | :host
        * `input-prevented` | Temporarily set when invalid input is prevented | :host
        * `focused` | Set when the element is focused | :host

diff --git a/test/accessibility.html b/test/accessibility.html
@@ -73,14 +73,6 @@
     </template>
   </test-fixture>
 
-  <test-fixture id="vaadin-text-field-with-slotted-helper">
-    <template>
-      <vaadin-text-field required error-message="ERR">
-        <div slot="helper">foo</div>
-      </vaadin-text-field>
-    </template>
-  </test-fixture>
-
   <test-fixture id="vaadin-text-area-default">
     <template>
       <vaadin-text-area></vaadin-text-area>
@@ -141,14 +133,6 @@
     </template>
   </test-fixture>
 
-  <test-fixture id="vaadin-text-area-with-slotted-helper">
-    <template>
-      <vaadin-text-area required error-message="ERR">
-        <div slot="helper">foo</div>
-      </vaadin-text-area>
-    </template>
-  </test-fixture>
-
   <script>
     ['', 'with slotted input'].forEach(condition => {
       let fixtureName = '';
@@ -275,13 +259,12 @@
           });
 
           describe(`error ${condition}`, function() {
-            let tf, err, input, helperText;
+            let tf, err, input;
 
             beforeEach(function() {
               tf = fixture(`${el}-error-fixture${fixtureName}`);
               input = tf.inputElement;
               err = tf.root.querySelector('[part=error-message]');
-              helperText = tf.root.querySelector('[part=helper-text]');
             });
 
             it('should have an error element', function() {
@@ -304,37 +287,15 @@
               expect(err.getAttribute('aria-hidden')).to.equal('true');
             });
 
-            it('should not have aria-describedby attribute if valid and no helper text', function() {
+            it('should not have aria-describedby attribute if valid', function() {
               expect(input.hasAttribute('aria-describedby')).to.be.false;
             });
 
-            it('should have aria-describedby attribute with error message when invalid', function() {
+            it('should have aria-describedby attribute when invalid', function() {
               tf.validate();
               expect(input.getAttribute('aria-describedby')).to.equal(err.id);
             });
 
-            it('should have aria-describedby attribute with helper text when helper property is set', function() {
-              tf.helperText = 'foo';
-              expect(input.getAttribute('aria-describedby')).to.equal(helperText.id);
-            });
-
-            it('should have aria-describedby with helper text and error message when helper property is set and input invalid', function() {
-              tf.helperText = 'foo';
-              tf.validate();
-              expect(input.getAttribute('aria-describedby')).to.equal(`${helperText.id} ${err.id}`);
-            });
-
-            it('should have aria-describedby with helper text and error message if slotted helper is set and input invalid', function() {
-              const tf = fixture(`${el}-with-slotted-helper`);
-              const input = tf.inputElement;
-              const err = tf.root.querySelector('[part=error-message]');
-              const helperText = tf.root.querySelector('[part=helper-text]');
-              const evt = new CustomEvent('slotchange');
-              tf.validate();
-              tf.shadowRoot.querySelector('[name="helper"]').dispatchEvent(evt);
-              expect(input.getAttribute('aria-describedby')).to.equal(`${helperText.id} ${err.id}`);
-            });
-
             it('should have appropriate aria-live attribute', function() {
               expect(err.getAttribute('aria-live')).to.equal('assertive');
             });