Skip to content
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

fix(NcInputField): Adjust styling of the internal label #4578

Merged
merged 1 commit into from Oct 5, 2023

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Sep 26, 2023

☑️ Resolves

From today's design review call:

  • Add note that the internal label is only recommended when the background matches
  • Make border of the internal label rounded (needed to adjust the padding as well)
  • Perfect pixel align label, placeholder and content

🖼️ Screenshots

(added background color to make the border more visible, e.g. like on the login)

🏚️ Before 🏡 After
Screenshot 2023-09-26 at 15-55-49 Nextcloud Vue Style Guide Screenshot 2023-09-26 at 15-55-20 Nextcloud Vue Style Guide

🏁 Checklist

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

@susnux susnux added bug Something isn't working 3. to review Waiting for reviews design Design, UX, interface and interaction design feature: input-field Covering the InputField, TextField, ... labels Sep 26, 2023
Copy link

@nimishavijay nimishavijay left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Much better already!

Copy link
Contributor

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much better! But shouldn’t we use variables in all those places, based on e.g. var(--default-grid-baseline)?

Copy link
Contributor

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd go for 4px border-radius, not pill

src/components/NcInputField/NcInputField.vue Outdated Show resolved Hide resolved
* Add note that the internal label is only recommended when the background matches
* Make border of the internal label rounded (needed to adjust the padding as well)
* Perfect pixel align label, placeholder and content

Co-authored-by: Marco <marcoambrosini@icloud.com>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux susnux dismissed jancborchardt’s stale review October 4, 2023 19:52

outdated, source was updated

@susnux susnux merged commit 407b31a into master Oct 5, 2023
15 checks passed
@susnux susnux deleted the fix/input-field-style branch October 5, 2023 13:51
@Pytal Pytal mentioned this pull request Oct 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug Something isn't working design Design, UX, interface and interaction design feature: input-field Covering the InputField, TextField, ...
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants