Update form input css

[hurradieweltgehtunter]

Description

Updates layout for form inputs, labels & textareas

Motivation and Context

Text inputs looked condensed and not unified styled.

How Has This Been Tested?

• Firefox
• Chrome
• Safari
• IE

Screenshots (if appropriate):

Form layout

Before:

After:

Input focus highlight

The highlight border uses the gradient of web primary button gradient background.
Before:

After:

Comboboxes/Select uses same layout like input

Before:

After:

Disabled comboboxes look more disabled & cursor is disabled

Before:

After:

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:

Open tasks:

• ...

[ownclouders]

Results for e2e-tests oCIS https://drone.owncloud.com/owncloud/web/34107/12/1

💥 To see the trace, please open the link in the console ...

npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34107/tracing/admin-deletes-group-admin-2023-3-23-02-02-33.zip

npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34107/tracing/user-group-assignments-can-be-handled-via-batch-actions-admin-2023-3-23-02-04-07.zip

npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34107/tracing/user-login-can-be-managed-in-the-admin-settings-admin-2023-3-23-02-03-38.zip

npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34107/tracing/user-login-can-be-managed-in-the-admin-settings-admin-2023-3-23-02-03-44.zip

npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/34107/tracing/user-login-can-be-managed-in-the-admin-settings-alice-2023-3-23-02-03-43.zip

💥 The e2e-ocis tests pipeline failed. The build has been cancelled.

[ChrisEdS]

I love it! It's the details that make the difference! I celebrate every one of your pull requests hard!

[lookacat]

Very good improvement, looks much better 👍🏼

[JammingBen]

Awesome design, as always! 🙂

Oppose to your screenshots, all input fields have a grey (=disabled) background color for me (besides those in modals and drops). Does it happen for you as well?

[hurradieweltgehtunter]

Oppose to your screenshots, all input fields have a grey (=disabled) background color for me (besides those in modals and drops). Does it happen for you as well?

Yep, you were right. fixed.

[hurradieweltgehtunter]

Added new component OcAlert with different variants:

• info
• success
• warning
• danger
• closeable: Renders a close button
• hasIcon: Renders an Icon
• customIcon: Renders a custom Icon; enter icon name

[kulmann]

Added new component OcAlert with different variants:

• info
• success
• warning
• danger
• closeable: Renders a close button
• hasIcon: Renders an Icon
• customIcon: Renders a custom Icon; enter icon name

While I like the visuals of the OcAlert component I don't agree with the usage in the particular case. The OcAlert seems to be very much standalone, rather disconnected from the OcSelect for the quota. At a glance I don't get the connection of the OcSelect and the OcAlert. I'd prefer to use the line below the (disabled) OcSelect to show the very same message you now show in the OcAlert. E.g. OcTextInput follows the same approach where the line below can be used for a description/explanation but is then reused for an error message if there is e.g. an input validation error.

[hurradieweltgehtunter]

While I like the visuals of the OcAlert component I don't agree with the usage in the particular case. The OcAlert seems to be very much standalone, rather disconnected from the OcSelect for the quota. At a glance I don't get the connection of the OcSelect and the OcAlert. I'd prefer to use the line below the (disabled) OcSelect to show the very same message you now show in the OcAlert. E.g. OcTextInput follows the same approach where the line below can be used for a description/explanation but is then reused for an error message if there is e.g. an input validation error.

Ok, I can understand and I would agree. Some explanation why I decided to use an alert:

Using it like you proposed, my guess is that the message is not visible enough and the user might oversee this.
Also, I would understand it that the subtitle of an input field is for feedback of an input validation - so, depending on the content of that field, e.g. in case of an incorrect input ("Please enter a valid email address"). But in this case it is not dependent on the input, but a general hint. Using the subtitle for this hint would contradict its concept IMO.

But, In the end, it is your decision :)

[hurradieweltgehtunter]

Improved alerts in dark mode:

[ChrisEdS]

Should that be a info message in any case? I mean there isn't "something wrong", right.

[kulmann]

Using it like you proposed, my guess is that the message is not visible enough and the user might oversee this. Also, I would understand it that the subtitle of an input field is for feedback of an input validation - so, depending on the content of that field, e.g. in case of an incorrect input ("Please enter a valid email address"). But in this case it is not dependent on the input, but a general hint. Using the subtitle for this hint would contradict its concept IMO.

That's not what I meant. Have a look at the red error message below the text input here: https://owncloud.design/#/oC%20Components/OcTextInput
I'd prefer to be consistent and implement the same behaviour for the OcSelect. Means, removing the Select a quota option or enter your own value and instead show To set an individual quota, the user needs to have logged in once as a warning message. That way it's clear that the message belongs to the OcSelect.

[hurradieweltgehtunter]

ok, gotcha. Like this?

[kulmann]

ok, gotcha. Like this?

Yes 👍

[hurradieweltgehtunter]

done from my side, i think. Would need someone to check the added test, which fails, but I don't know why.
@JammingBen could you help me out, again? :)

[kulmann]

Love where this is going! Inputs / form elements feel much better already.

Apart from my comments two things that I'd like to discuss:

1. we had a lot of (negative!) feedback in the past that the web ui was too big/clumsy in general. With your changes, form fields become bigger - to an extent that forms (e.g. editing a user in the admin settings) use up noticeably more vertical screen space than before. In my opinion a little bit too much. Could you try to reduce that a little bit again?
2. the blue-ish borders of focussed input fields in dark mode don't match the general appearance of the dark mode in my opinion. I would prefer white. 🤔 Screenshot of the blue-ish border attached.

[JammingBen]

done from my side, i think. Would need someone to check the added test, which fails, but I don't know why. @JammingBen could you help me out, again? :)

Sure, I'll try to look into it this afternoon 🙂

[JammingBen]

I ran the linter and fixed the unit tests. Found some tiny nitpicks on the way:

Text inputs and select inputs now differ in height. Also, select inputs still have that grey background for me 🤔

The sharing invite input also has the grey background:

[hurradieweltgehtunter]

I ran the linter and fixed the unit tests. Found some tiny nitpicks on the way:

Text inputs and select inputs now differ in height. Also, select inputs still have that grey background for me 🤔

The sharing invite input also has the grey background:

ah damn... yeah. will fix it.
thx

[hurradieweltgehtunter]

the blue-ish borders of focussed input fields in dark mode don't match the general appearance of the dark mode in my opinion. I would prefer white. 🤔 Screenshot of the blue-ish border attached.

changed the border-color.
Light mode:

dark mode:

[JammingBen]

One last nitpick, then this is good to go from my side 🚀

You decreased the vertical size of the inputs like Benedikt suggested (which I also prefer), but the select options still have that increased padding you had before:

[hurradieweltgehtunter]

One last nitpick, then this is good to go from my side 🚀

You decreased the vertical size of the inputs like Benedikt suggested (which I also prefer), but the select options still have that increased padding you had before:

Love your attention to details :) will fix

[hurradieweltgehtunter]

What is this SonarCloud Code Coverage fail?

[JammingBen]

It fails because of the condition coverage. But that's okay IMO since this PR (mainly) tackles visual things.

[JammingBen]

Nice work! Please remove the duplicated block, then we can merge it :)

[sonarcloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

32.3% Coverage
0.0% Duplication

[kulmann]

Really nice job! Found a tiny sizing issue, will post a followup issue since I don't want to delay this PR any further. Thank you!

[hurradieweltgehtunter]

fix here: #8724