fix(TextInput): show appropriate icons/colors

Author: hobbitronics

Diff for: components/mdc/TextInput/MoneyInput.svelte

@@ -27,7 +27,8 @@ $: valueLength = value?.toString()?.length
 $: hasExceededMaxLength = maxlength && valueLength > maxlength
 $: hasExceededMaxValue = maxValue && internalValue > maxValue
 $: isLowerThanMinValue = minValue && internalValue < minValue
-$: error = hasExceededMaxValue || isLowerThanMinValue || hasExceededMaxLength || valueNotDivisibleByStep
+$: showErrorIcon = hasExceededMaxValue || isLowerThanMinValue || hasExceededMaxLength || valueNotDivisibleByStep
+$: error = showErrorIcon || (hasFocused && required && !internalValue)
 $: showCounter = maxlength && valueLength / maxlength > 0.85
 $: valueNotDivisibleByStep = internalValue && (internalValue / Number(step)) % 1 !== 0
 $: internalValue = Number(value) || ''
@@ -64,7 +65,7 @@ const focus = (node) => autofocus && node.focus()
   class:mdc-text-field--invalid={error}
   bind:this={element}
 >
-  <i class="material-icons" aria-hidden="true">attach_money</i>
+  <i class="material-icons" class:error aria-hidden="true">attach_money</i>
   <input
     {step}
     type="number"
@@ -86,7 +87,7 @@ const focus = (node) => autofocus && node.focus()
     {disabled}
     {placeholder}
   />
-  {#if error}
+  {#if showErrorIcon}
     <span class="mdc-text-field__affix mdc-text-field__affix--suffix"
       ><i class="material-icons error" aria-hidden="true">error</i></span
     >
@@ -107,8 +108,7 @@ const focus = (node) => autofocus && node.focus()
   <div class="mdc-text-field-helper-text" class:opacity1={required} id="{labelID}-helper-id" aria-hidden="true">
     {#if required && !internalValue}
       <span class="required" class:error={hasFocused}>*Required</span>
-    {/if}
-    {#if hasExceededMaxValue}
+    {:else if hasExceededMaxValue}
       <span class="error">Maximum value allowed is {maxValue}</span>
     {:else if isLowerThanMinValue}
       <span class="error">Minimun value allowed is ({minValue})</span>

Diff for: components/mdc/TextInput/TextArea.svelte

@@ -117,8 +117,7 @@ label {
   <div class="mdc-text-field-helper-text" class:opacity1={required} id="{labelID}-helper-id" aria-hidden="true">
     {#if required && valueIsEmpty}
       <span class="required" class:error={hasFocused}>*Required</span>
-    {/if}
-    {#if hasExceededMaxLength}
+    {:else if hasExceededMaxLength}
       <span class="error">Maximum {maxlength} characters</span>
     {/if}
   </div>

Diff for: components/mdc/TextInput/TextField.svelte

@@ -23,7 +23,7 @@ let hasFocused = false
 
 $: mdcTextField.value = value
 $: hasExceededMaxLength = maxlength && value.length > maxlength
-$: error = hasExceededMaxLength
+$: error = hasExceededMaxLength || (hasFocused && required && !value)
 $: showCounter = maxlength && value.length / maxlength > 0.85
 $: value && addOrRemoveInvalidClass(error, element)
 
@@ -60,7 +60,7 @@ const focus = (node) => autofocus && node.focus()
   class:mdc-text-field--disabled={disabled}
   bind:this={element}
 >
-  <i class="material-icons" aria-hidden="true">{icon}</i>
+  <i class="material-icons" class:error aria-hidden="true">{icon}</i>
   <input
     type="text"
     class="mdc-text-field__input"
@@ -79,7 +79,7 @@ const focus = (node) => autofocus && node.focus()
     maxlength="524288"
     {placeholder}
   />
-  {#if error}
+  {#if hasExceededMaxLength}
     <span class="mdc-text-field__affix mdc-text-field__affix--suffix"
       ><i class="material-icons error" aria-hidden="true">error</i></span
     >
@@ -101,8 +101,7 @@ const focus = (node) => autofocus && node.focus()
   <div class="mdc-text-field-helper-text" class:opacity1={required} id="{labelID}-helper-id" aria-hidden="true">
     {#if required && !value}
       <span class="required" class:error={hasFocused}>*Required</span>
-    {/if}
-    {#if error}
+    {:else if hasExceededMaxLength}
       <span class="error">Maximum {maxlength} characters</span>
     {/if}
   </div>