title: Vaadin 14: Mark error message at TextField as warning
body: <p>with Vaadin 14.1.23 TextFields I would like to differentiate visually between red error messages (e.g. "This value is too big.") and yellow warnings (e.g. "System will round your input to two decimals."). And optionally maybe blue info messages.</p>
  
  <p>Therefore I created a TextField with a validator like in this example ( <a href="https://vaadin.com/components/vaadin-text-field/java-examples/validation" rel="noreferrer">https://vaadin.com/components/vaadin-text-field/java-examples/validation</a> ): When you type "1" into the field with label "Min 2 characters" then the field gets red and shows an error: "Minimum 2 characters".</p>
  
  <p><a href="https://i.stack.imgur.com/TzeWf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TzeWf.png" alt="Vaadin TextField with error message"></a></p>
  
  <p><strong>How about showing a (yellow) warning message like this?</strong></p>
  
  <p><a href="https://i.stack.imgur.com/K04tY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/K04tY.png" alt="Wanted Vaadin TextField with warning message"></a></p>
  
  <p>What I tried is this:
  In the apply method of my validator I created a validation result with ErrorLevel WARNING like this:</p>
  
  <pre><code>ValidationResult.create("System will round the decimals.", ErrorLevel.WARNING);
  </code></pre>
  
  <p>But Vaadin generated still a div with part="error-message":</p>
  
  <pre><code>&lt;div part="error-message" aria-live="assertive" aria-hidden="false" id="my-field-error-44"&gt;System will round your input to two decimals.&lt;/div&gt;
  </code></pre>