[Text Input]: validationMessage doesn't showed with isInvalid flag

[AlexeyNovomlinets]

Description (optional)

There is no message for invalid input with provided validationMessage.

Steps to Reproduce

1. Open Text Input component in sandbox.
2. Add isInvalid and validationMessage properties
3. There is no validationMessage

Actual result

There is no validationMessage

Expected result

Show invalid message

Environment

• UUI version: v.5.1.1
• Browser name: Chrome
• Operating System: Win11

[AlexeyNovomlinets]

Could you please provide any details?

[AlekseyManetov]

Hi @AlexeyNovomlinets,

The validationMessage is rendered by the LabeledInput component. You can find the documentation and examples for it here - LabeledInput Documentation.

Our approach is that components should not render anything outside their border-box, which is why the validation message is rendered by LabeledInput. However, we also have the same prop in the TextInput interface, which might seem confusing. This was done because we follow a pattern with our forms, where we spread the lens to the component and to the LabeledInput, making it complicated to eliminate the 'validationMessage' prop from lens.

We will improve our documentation, to make this part more clear.