* Responsible for rendering helper text and error text. * This element should only be rendered if hint text is set.
()
| 412 | * This element should only be rendered if hint text is set. |
| 413 | */ |
| 414 | private renderHintText() { |
| 415 | const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; |
| 416 | |
| 417 | /** |
| 418 | * undefined and empty string values should |
| 419 | * be treated as not having helper/error text. |
| 420 | */ |
| 421 | const hasHintText = !!helperText || !!errorText; |
| 422 | if (!hasHintText) { |
| 423 | return; |
| 424 | } |
| 425 | |
| 426 | return ( |
| 427 | <div class="toggle-bottom"> |
| 428 | <div id={helperTextId} class="helper-text" part="supporting-text helper-text" aria-live="polite"> |
| 429 | {!isInvalid ? helperText : null} |
| 430 | </div> |
| 431 | <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert"> |
| 432 | {isInvalid ? errorText : null} |
| 433 | </div> |
| 434 | </div> |
| 435 | ); |
| 436 | } |
| 437 | |
| 438 | render() { |
| 439 | const { |