fix(ui-library): align counter to right for text area with or without error

[ashk1996]

closes #1064

[angsherpa456]

LGTM

[thrbnhrtmnn]

I just had a quick look and found one issue. If you add an error message and error message icon, they are right aligned, but they should be left aligned.

Here is how it should look according to design:

[ashk1996]

I just had a quick look and found one issue. If you add an error message and error message icon, they are right aligned, but they should be left aligned.

Here is how it should look according to design:

Hi @thrbnhrtmnn
Just doubled checked, I see that it is left aligned.

[thrbnhrtmnn]

I just had a quick look and found one issue. If you add an error message and error message icon, they are right aligned, but they should be left aligned.
Here is how it should look according to design:

Hi @thrbnhrtmnn Just doubled checked, I see that it is left aligned.

Hey @ashk1996 , in your example hasHint = true. In this case it looks good. But if hasHint = false and only hasError = true and errorMessage is not empty, then the error message is not left aligned but right aligned, as seen in my screenshot above.

While looking at it again, if errorMessageIcon is not undefined and errorMessage is empty, the icon should also be displayed right aligned, but currently it is not displayed at all in this case. It will only appear once errorMessage is not empty anymore.

If you want we can have a quick huddle about this :-)

[ashk1996]

I just had a quick look and found one issue. If you add an error message and error message icon, they are right aligned, but they should be left aligned.
Here is how it should look according to design:

Hi @thrbnhrtmnn Just doubled checked, I see that it is left aligned.

Hey @ashk1996 , in your example hasHint = true. In this case it looks good. But if hasHint = false and only hasError = true and errorMessage is not empty, then the error message is not left aligned but right aligned, as seen in my screenshot above.

While looking at it again, if errorMessageIcon is not undefined and errorMessage is empty, the icon should also be displayed right aligned, but currently it is not displayed at all in this case. It will only appear once errorMessage is not empty anymore.

If you want we can have a quick huddle about this :-)

Thanks for pointing out. I have fixed this in the latest commit.
However the icon not showing up when error message is empty is a bug on develop branch as well. Do we want to address it as part of this ticket. Is this the initial requirement just wanted to check before creating a fix.

[thrbnhrtmnn]

Hey @ashk1996 , as discussed today the icon not being displayed if the corresponding message is empty is not an issue, because this would just be a user mistake. There should not be an icon when there is no message. Neither for errors nor for hints.

After looking again the only point I found is that in case the hasHint = true, but message and icon are empty / undefined, the counter will be left aligned. As just discussed we should fix this, as long it is not a huge effort. Again this would be an user mistake, but if we can prevent it easily we should always do so.

Once this is updated, I can review again and approve :-)