Feature: Add visible inner label for NcInputField

[susnux]

☑️ Resolves

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

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 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

• Maybe adjust the datetime picker to this changes in a followup, @nextcloud/designers ?

🏁 Checklist

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

[dartcafe]

I like it, but shouldn't there be a style guide to prevent, that every developer just follows his personal preference?

@ChristophWurst

[marcoambrosini]

@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?

[susnux]

@marcoambrosini sure, I just got not much time to adjust this here, but it is still on my list :)

[ChristophWurst]

I like it, but shouldn't there be a style guide to prevent, that every developer just follows his personal preference?

@ChristophWurst

https://docs.nextcloud.com/server/latest/developer_manual/design/index.html? :)

[st3iny]

Looks good to me. Is there anything left to be done/discussed?

[susnux]

@marcoambrosini

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?

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".
Also I do not think that the label conflicts with the icon, as the label will always be shorter (due to font size) when shown above than on initial state.

But this is a decision for designers :)

[szaimen]

I like #4394 more 👍

[AndyScherzinger]

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.

[susnux]

Close in favor of #4394