Clarity: Need to set "width:100%" to input in login-group class.

[chunghha]

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

To get proper tooltip position, should not need to set my own style to the username and password inputs with tooltip-validation class. ( with style="width:100%;" )

Actual behavior

Need to set "width:100%" to the username input (same password input), otherwise can't get the tooltip displayed in proper position. ( without style="width:100%;" )

Reproduction of behavior

I am testing with this login page component.
https://vmware.github.io/clarity/documentation/login

and, added tooltip-validation as this code. Please see with/without style="width:100%;" to reproduce this issue.

      <label for="login_username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-sm"
        [class.invalid]="loginForm.get('username').invalid && (loginForm.get('username').dirty || loginForm.get('username').touched)">
        <input class="username" style="width:100%;" type="text" id="login_username" formControlName="username" placeholder="Username">
        <span class="tooltip-content">Username is required.</span>
      </label>
      <input class="password" type="password" id="login_password" formControlName="password" placeholder="Password">

Environment details

• Angular version: 2.4.2

• Clarity version: 0.8.1

• OS and version: Windows 7

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[adityarb88]

Thanks for reporting this @chunghha. I will investigate and get this fixed soon.

[adityarb88]

@chunghha: Actually using validation on individual input fields is something that we dont recommend. If you read our design and guidelines section on the login page documentation you will see that we mention that there:

We do provide a section for validation in the login form and I recommend you use that instead.

<div class="error active">
                Invalid user name or password
            </div>

I will close this issue but feel free to reopen it if you have any other questions.

[chunghha]

@adityarb88, I did read the design doc before opening this issue and like to ask re-opening because of two reasons below.

1. visual discrepancy: please look and compare field size of username in the 2nd screenshot above with other input fields on the login page. Whether adding tooltip to an input field shouldn't be a matter to field size, in my opinion. And, since username has its own style class defined by Clarity, a fix should be made to the class too.

2. use case: I also display kind of "Invalid user name or password" message to login page if login failed by checking with login server as the doc concerns security. But, the above issue is about doing preliminary checking on input field before making server call for the case of checking required/minimum length of input which is not related to security concern so I can help my users visually by displaying exact error message as much as possible on client side.

Besides, adding the width style to username/password classes won't be harmful to the design doc if developers don't use the tooltip-validation with the inputs as the example in the doc but at same time, it can help developers use the tooltip-validation without adding the width style by themselves.

If you think these reasons are not valid to re-open this issue then just let me know.

[adityarb88]

@chunghha: Thanks for your feedback. After reading the explanation that you provided, I think you are right. We should have that style in login forms. I will mark this as a bug and add this to our queue to be fixed.

Thanks again!

[chunghha]

@adityarb88, works like a charm with v0.8.2! Thanks.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.