Feature: Add visible inner label for `NcInputField` on border #4394

susnux · 2023-08-02T15:50:38Z

☑️ Resolves

Alternative to #4287 as requested by @marcoambrosini

🖼️ Screenshots

vokoscreenNG-2023-08-02_17-42-57.mp4

🏁 Checklist

⛑️ Tests are included or are not applicable
📘 Component documentation has been extended, updated or is not applicable

marcoambrosini

Looks very good and the text has more space around which makes it more readable. All the while using less height. It's true that the icon is not a problem with the other approach either.
I would probably avoid moving the label left in the transition when there's a leading icon. What do you think @susnux?

dartcafe · 2023-08-04T18:13:22Z

I like it, but the initial state looks like the field already has a content, although it seems to be a placeholder/the label. I fear this could mislead users.

szaimen · 2023-08-09T10:07:24Z

I would probably avoid moving the label left in the transition when there's a leading icon. What do you think @susnux?

I agree. Otherwise looks good to me :)

susnux · 2023-08-11T13:55:06Z

Thank you for your feedback, so far I would change it to:

Do not move label horizontal
Make label --color-text-maxcontrast so it does not look like content

szaimen · 2023-08-11T14:09:13Z

Do not move label horizontal

Make label --color-text-maxcontrast so it does not look like content

Sounds good to me 👍

susnux · 2023-08-18T13:30:15Z

@szaimen @dartcafe @marcoambrosini I fixed the label color and the horizontal shift, it looks like this now:

input.mp4

szaimen

Looks great! :)
But didnt review the code

nimishavijay · 2023-08-18T14:15:27Z

Looks good! :)
I would suggest 2 very small changes:

for the text fields without an icon there is still a horizontal shift of the label when it is focused, so if we do margin-inline: 6px 0; when focused and margin-inline: 10px 0; when unfocused this shift is gone
for success and error variants, the color of the label when focused should be either --color-success-text or --color-error-text, currently it's the primary color for everything

With those fixes it would look like this:

Recording.2023-08-18.160931.mp4

Also, on my system there is some text getting cut off, and it changes according to the zoom level.

1280x720 at 100%

1280x720 at 80%

ccing @marcoambrosini as well :)

JuliaKirschenheuter · 2023-08-18T15:11:49Z

wow, that is great! Thanks a lot!

JuliaKirschenheuter

Looks great! Could you please increase a contrast of labels on not focused state? see nextcloud/server#36948 If contrasts are enough - just ignore it ;)

susnux · 2023-08-18T16:54:09Z

@nimishavijay

* [ ]  for the text fields without an icon there is still a horizontal shift of the label when it is focused, so if we do `margin-inline: 6px 0;` when focused and `margin-inline: 10px 0;` when unfocused this shift is gone

Fixed that, the label is now start-aligned with the input and with the focused label (So the first letter is always on the same x position)

* [ ]  for success and error variants, the color of the label when focused should be either `--color-success-text` or `--color-error-text`, currently it's the primary color for everything

Was a regression of the last commit, fixed again.

On question for me is: Should the text stay that color? Currently it will be max-contrast when not focused to have a visual hover / focus state (as the border color can not change).

Also, on my system there is some text getting cut off, and it changes according to the zoom level.

Would you mind try again? I fixed the label height.

susnux · 2023-08-18T16:58:49Z

@JuliaKirschenheuter

Could you please increase a contrast of labels on not focused state?

The contrast is currently 4.54 : 1
So it should fulfill the requirement :)

nimishavijay · 2023-08-18T19:06:40Z

Would you mind try again? I fixed the label height.

Works now 👍

Should the text stay that color? Currently it will be max-contrast when not focused to have a visual hover / focus state (as the border color can not change).

That's a good point. I would say that it could just stay --color-text-maxcontrast as the mouse cursor is changing to indicate hover feedback anyway. It would be inconsistent to change the color only for success and error variants. Since these variants are used not so often, it is okay to just have the mouse cursor change as the hover feedback :)

The inner label is now visible, to disable any label set `label-outside` to true, `label-visible` property is removed. The label is shown instead of the placeholder if the input is empty and not focussed, when focussed the label is moved up and scaled but always shown. Make label color max-contrast so it does not look like content and remove horizontal label movement Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

…nges with always shown labels Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

susnux · 2023-08-23T19:53:57Z

Squashed the fixup commits

…ield In previous versions the label was shown above the input which gives the text more space which might be better than the inline label from #4394 in some scenarios. This is a breaking change as it renames the previous labelVisible property to a labelOutside property. The label should always be visible with the new NcInputField, however we can optionally decide to have the label outside. Signed-off-by: Julius Härtl <jus@bitgrid.net>

susnux added 3. to review Waiting for reviews discussion Need advices, opinions or ideas on this topic feature: input-field Covering the InputField, TextField, ... labels Aug 2, 2023

susnux requested a review from marcoambrosini August 2, 2023 15:50

susnux mentioned this pull request Aug 2, 2023

Feature: Add visible inner label for NcInputField #4287

Closed

2 tasks

susnux changed the title ~~Feat/ncinput always shown label alt~~ Alternative: Always shown label on NcInputFields Aug 2, 2023

marcoambrosini approved these changes Aug 4, 2023

View reviewed changes

susnux requested a review from szaimen August 8, 2023 13:22

marcoambrosini mentioned this pull request Aug 18, 2023

[BITV] 9.3.3.2/2.1 - Modal dialog "Online status" - The input field "What is your status" has a label, but it is not available to visually impaired users due to the use of "hidden-visually." (1) nextcloud/server#37083

Closed

susnux force-pushed the feat/ncinput-always-shown-label-alt branch from dacb6e8 to d05b825 Compare August 18, 2023 13:24

susnux requested review from raimund-schluessler, Pytal, JuliaKirschenheuter and skjnldsv August 18, 2023 13:30

szaimen approved these changes Aug 18, 2023

View reviewed changes

This comment was marked as outdated.

Sign in to view

susnux force-pushed the feat/ncinput-always-shown-label-alt branch from 277dc6f to cfd6e06 Compare August 18, 2023 14:59

JuliaKirschenheuter assigned susnux Aug 18, 2023

JuliaKirschenheuter reviewed Aug 18, 2023

View reviewed changes

susnux force-pushed the feat/ncinput-always-shown-label-alt branch from cfd6e06 to 0d17b9f Compare August 18, 2023 16:52

susnux requested a review from JuliaKirschenheuter August 18, 2023 16:59

JuliaKirschenheuter approved these changes Aug 21, 2023

View reviewed changes

susnux added 2 commits August 23, 2023 21:53

fix(NcActionInput): Adjust the action input to the NcInputField cha…

916ba53

…nges with always shown labels Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

susnux force-pushed the feat/ncinput-always-shown-label-alt branch from 0d17b9f to 916ba53 Compare August 23, 2023 19:53

susnux added enhancement New feature or request 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews discussion Need advices, opinions or ideas on this topic labels Aug 23, 2023

susnux added this to the 8.0.0 milestone Aug 23, 2023

susnux changed the title ~~Alternative: Always shown label on NcInputFields~~ Feature: Add visible inner label for NcInputField on border Aug 23, 2023

susnux merged commit e03e6c8 into master Aug 25, 2023
17 checks passed

susnux deleted the feat/ncinput-always-shown-label-alt branch August 25, 2023 08:43

susnux mentioned this pull request Aug 25, 2023

RFC: Visible internal label for NcInputFields within the element #4126

Closed

ShGKme mentioned this pull request Aug 25, 2023

NcEmojiPicker: Search label is cut #4473

Closed

juliushaertl mentioned this pull request Aug 30, 2023

Bring back label outside of the input for NcActionInput #4484

Merged

2 tasks

ShGKme mentioned this pull request Sep 26, 2023

[RFC]: NcInputField - visible inner label inside input #4582

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Add visible inner label for `NcInputField` on border #4394

Feature: Add visible inner label for `NcInputField` on border #4394

susnux commented Aug 2, 2023

marcoambrosini left a comment

dartcafe commented Aug 4, 2023

szaimen commented Aug 9, 2023

susnux commented Aug 11, 2023

szaimen commented Aug 11, 2023

susnux commented Aug 18, 2023

szaimen left a comment

nimishavijay commented Aug 18, 2023

This comment was marked as outdated.

JuliaKirschenheuter commented Aug 18, 2023

JuliaKirschenheuter left a comment

susnux commented Aug 18, 2023

susnux commented Aug 18, 2023

nimishavijay commented Aug 18, 2023

susnux commented Aug 23, 2023

Feature: Add visible inner label for NcInputField on border #4394

Feature: Add visible inner label for NcInputField on border #4394

Conversation

susnux commented Aug 2, 2023

☑️ Resolves

🖼️ Screenshots

🏁 Checklist

marcoambrosini left a comment

Choose a reason for hiding this comment

dartcafe commented Aug 4, 2023

szaimen commented Aug 9, 2023

susnux commented Aug 11, 2023

szaimen commented Aug 11, 2023

susnux commented Aug 18, 2023

szaimen left a comment

Choose a reason for hiding this comment

nimishavijay commented Aug 18, 2023

This comment was marked as outdated.

JuliaKirschenheuter commented Aug 18, 2023

JuliaKirschenheuter left a comment

Choose a reason for hiding this comment

susnux commented Aug 18, 2023

susnux commented Aug 18, 2023

nimishavijay commented Aug 18, 2023

susnux commented Aug 23, 2023

Feature: Add visible inner label for `NcInputField` on border #4394

Feature: Add visible inner label for `NcInputField` on border #4394