Merge pull request #176 from Tangerine-Community/fix-bgcolor-warn-text

Fix for #warn-text bg color displaying when empty
Tangerine-Community · Oct 6, 2020 · 457d45c · 457d45c
2 parents b6d5712 + 4310aa1
commit 457d45c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 48 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -249,6 +249,31 @@ <h3>Custom warning messages and custom warning logic</h3>
           <tangy-form id="my-form-2" title="My Form 2">
             <tangy-form-item id="item1">
               <tangy-input type="text" allowed-pattern="" inner-label="g/dL" name="hb" required="" question-number="" label="Hb result" hint-text="1 decimal place" valid-if="/^[0-9]+\.[0-9]$/.test(input.value) " error-text="ERROR: Please enter to the first decimal place. " warn-if="parseFloat(getValue('hb')) > '18.0' || parseFloat(getValue('hb')) < '1.0'" warn-text="WARNING: The expected range for this response is 1.0-18.0, but values outside of this range will be accepted. Please review the response and correct any data entry errors before continuing." class="" style=""></tangy-input>
+              <tangy-select name="warn_fruit_selection_2"
+                            label="What is your <b>second favorite</b> fruit?"
+                            hint-text="This is <b>hint text</b>."
+                            warn-if="getValue('warn_fruit_selection_2') === 'Orange'"
+                            warn-text="WARNING: Nerd! Tangerines are better."
+                            error-text="ERROR: Please select the correct value. "
+                            required="">
+                <option name="orange">Orange</option>
+                <option name="banana">Banana</option>
+                <option name="tangerine"><b>Tangerine</b></option>
+              </tangy-select>
+              <tangy-radio-buttons
+                      name="input1"
+                      label="Answer No or Maybe and this question will be flagged with a warning. Answer No and this question will be flagged with a discrepancy. If your selection causes a discrepancy or warning to be flagged, you may click submit again to proceed. If however you selected No, submitted, then selected Maybe, because you changed your selection you will be required to click submit one last time."
+                      warn-if="getValue('input1') === 'maybe' || getValue('input1') === 'no'"
+                      discrepancy-if="getValue('input1') === 'no'"
+                      discrepancy-text="This is a discrepancy."
+                      warn-text="This is a warning."
+              >
+                <option value="maybe">Maybe</option>
+                <option value="no">No</option>
+                <option value="yes">Yes</option>
+              </tangy-radio-buttons>
+              <tangy-input type="text" allowed-pattern="" name="simple" required="" question-number="" label="Simple input"  class="" style=""></tangy-input>
+<!--              <tangy-location name="location" show-levels="county,school" filter-by="school1,school4" location-src="./location-list.json"></tangy-location>-->
           </tangy-form>
         </template>
       </demo-snippet>

diff --git a/input/tangy-input.js b/input/tangy-input.js
@@ -37,11 +37,12 @@ export class TangyInput extends PolymerElement {
       <div id="qnum-number"></div>
       <div id="qnum-content">
         <div id="container"></div>
+        <div id="error-text"></div>    
+        <div id="warn-text"></div>
+        <div id="discrepancy-text"></div>
       </div>
     </div>
-    <div id="error-text"></div>    
-    <div id="warn-text"></div>
-    <div id="discrepancy-text"></div>
+    
   `
   }
 

diff --git a/input/tangy-location.js b/input/tangy-location.js
@@ -669,12 +669,7 @@ class TangyLocation extends PolymerElement {
             : ''
           }
         </div>
-        <div id="warn-text">
-          ${this.hasWarning
-            ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
-            : ''
-          }
-        </div>
+        <div id="warn-text"></div>
         <div id="discrepancy-text">
           ${this.hasDiscrepancy
             ? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
@@ -821,6 +816,14 @@ class TangyLocation extends PolymerElement {
       this.render()
     }
   }
+
+  onWarnChange(value) {
+    if (this.shadowRoot.querySelector('#warn-text')) {
+      this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
+          ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
+          : ''
+    }
+  }
 
 }
 

diff --git a/input/tangy-select.js b/input/tangy-select.js
@@ -20,21 +20,19 @@ class TangySelect extends PolymerElement {
     <style include="tangy-element-styles"></style>
     <style include="tangy-common-styles"></style>
     <style include="mdc-select-style"></style>
-
     <style>
-    #errorText {
-      padding: 10px 10px 10px 0px;
-      font-size: medium;
-      font-weight: bold;
-      color: var(--error-color);
-    }
- 
+      #error-text, #errorText {
+        margin-top: 2em;
+        margin-bottom: 1em;
+      }
     </style>
-
     <div class="flex-container m-y-25">
       <div id="qnum-number"></div>
       <div id="qnum-content">
-        <div id="container">
+        <div id="container"></div>
+        <div id="error-text"></div>
+        <div id="warn-text"></div>
+        <div id="discrepancy-text"></div>
       </div>
     </div>
     `;
@@ -107,8 +105,8 @@ class TangySelect extends PolymerElement {
       },
       invalid: {
         type: Boolean,
-        observer: 'onInvalidChange',
         value: false,
+        observer: 'onInvalidChange',
         reflectToAttribute: true
       },
       incomplete: {
@@ -175,25 +173,6 @@ class TangySelect extends PolymerElement {
         </select>
         <div class="mdc-select__bottom-line"></div>
       </div>
-      <label id="error-text">
-        ${
-          this.invalid
-            ? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
-            : ''
-        }
-      </label>
-      <div id="warn-text">
-        ${this.hasWarning
-          ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
-          : ''
-        }
-      </div>
-      <div id="discrepancy-text">
-        ${this.hasDiscrepancy
-          ? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
-          : ''
-        }
-      </div>
     `
     this._onChangeListener = this
       .shadowRoot
@@ -202,15 +181,6 @@ class TangySelect extends PolymerElement {
     this.dispatchEvent(new CustomEvent('render'))
   }
 
-  onInvalidChange(value) {
-    // @TODO I'm not sure this hook is what ends up causing the error message to be displayed.
-    if (this.shadowRoot.querySelector('#error-text')) {
-      this.shadowRoot.querySelector('#error-text').innerHTML = this.invalid
-        ? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
-        : ''
-    }
-  }
-
   onChange(event) {
     this.value = event.target.value 
     this.dispatchEvent(new CustomEvent('change'))
@@ -233,5 +203,30 @@ class TangySelect extends PolymerElement {
     }
   }
 
+  onInvalidChange(value) {
+    // @TODO I'm not sure this hook is what ends up causing the error message to be displayed.
+    if (this.shadowRoot.querySelector('#error-text')) {
+      this.shadowRoot.querySelector('#error-text').innerHTML = this.invalid
+          ? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
+          : ''
+    }
+  }
+
+  onDiscrepancyChange(value) {
+    if (this.shadowRoot.querySelector('#discrepancy-text')) {
+      this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
+          ? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
+          : ''
+    }
+  }
+
+  onWarnChange(value) {
+    if (this.shadowRoot.querySelector('#warn-text')) {
+      this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
+          ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
+          : ''
+    }
+  }
+
 }
 window.customElements.define(TangySelect.is, TangySelect);