-
Notifications
You must be signed in to change notification settings - Fork 84
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Add visible inner label for NcInputField
#4287
Conversation
I like it, but shouldn't there be a style guide to prevent, that every developer just follows his personal preference? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@susnux I still think that the label should move on the border as this will conflict with leading icons like search can we still change this?
@marcoambrosini sure, I just got not much time to adjust this here, but it is still on my list :) |
https://docs.nextcloud.com/server/latest/developer_manual/design/index.html? :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me. Is there anything left to be done/discussed?
109dbf8
to
149da8d
Compare
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. Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
…nges with always shown labels Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
149da8d
to
20cf616
Compare
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
I created an alternative with the label inside the border here: #4394 . So you can compare both on the preview deployments. I personally think that the label within the border is cleaner, is allows to have multiple input elements (input field, buttons, NcSelect) side by side and all having the same "border-height". But this is a decision for designers :) |
I like #4394 more 👍 |
Label on the border would also match Material Design 2 and 3 btw which seems to be what we usually try to use or be inspired by. |
Close in favor of #4394 |
☑️ Resolves
NcInputField
s within the element #4126The 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 focused, when focused the label is moved up and scaled but always shown.
Also the action input is adjusted for this change.
🖼️ Screenshots
NcInputField
NcActionInput
🚧 Tasks
🏁 Checklist