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

Use NcTextField for NcActionInput #3784

Merged
merged 1 commit into from Feb 22, 2023
Merged

Conversation

raimund-schluessler
Copy link
Contributor

@raimund-schluessler raimund-schluessler commented Feb 18, 2023

This PR introduces the NcTextField and NcPasswordField to the NcActionInput component to unify the appearance.

Before After
Screenshot 2023-02-22 at 10-42-12 Nextcloud Vue Style Guide Screenshot 2023-02-22 at 10-43-10 Nextcloud Vue Style Guide

I had to enhance the NcInputField component a bit, to allow type number and enable adding a class to its input field.

@jancborchardt @nimishavijay Could you especially have a look at the color picker please? Before we used an input field of type color which gave the native colorpicker, now we use the colorpicker from nextcloud/vue.

@raimund-schluessler raimund-schluessler added 2. developing Work in progress feature: actions Related to the actions components feature: select Related to the NcSelect* components technical debt labels Feb 19, 2023
@raimund-schluessler raimund-schluessler changed the title Use NcSelect for NcActionInput type text Use NcSelect for NcActionInput type text Feb 20, 2023
@raimund-schluessler raimund-schluessler changed the title Use NcSelect for NcActionInput type text Use NcTextField for NcActionInput type text Feb 20, 2023
@raimund-schluessler raimund-schluessler force-pushed the fix/3743/action-input-textfield branch 5 times, most recently from 4ccdae5 to fc0aefa Compare February 22, 2023 08:53
@raimund-schluessler raimund-schluessler marked this pull request as ready for review February 22, 2023 09:20
@raimund-schluessler raimund-schluessler force-pushed the fix/3743/action-input-textfield branch 2 times, most recently from a725143 to ddcafdf Compare February 22, 2023 09:49
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
@raimund-schluessler raimund-schluessler added 3. to review Waiting for reviews design Design, UX, interface and interaction design feature: input-field Covering the InputField, TextField, ... and removed 2. developing Work in progress feature: select Related to the NcSelect* components labels Feb 22, 2023
@raimund-schluessler raimund-schluessler added this to the 7.7.0 milestone Feb 22, 2023
@raimund-schluessler raimund-schluessler changed the title Use NcTextField for NcActionInput type text Use NcTextField for NcActionInput Feb 22, 2023
Copy link
Contributor

@mejo- mejo- left a comment

Choose a reason for hiding this comment

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

Code looks good to me 👍

Copy link
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

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

And design looks good! Finally the actions have an (almost) consistent look.

@mejo- mejo- modified the milestones: 7.7.0, 7.8.0 Feb 22, 2023
@mejo- mejo- merged commit 11162fc into master Feb 22, 2023
@mejo- mejo- deleted the fix/3743/action-input-textfield branch February 22, 2023 14:43
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.

Could you especially have a look at the color picker please? Before we used an input field of type color which gave the native colorpicker, now we use the colorpicker from nextcloud/vue.

Main question here would be if it's still accessible. In other places we tend to go with native solutions since they often are the closest to being accessible. Is it possible to make the element look like it does in your proposal but still use the input type color?

Also cc @Pytal @JuliaKirschenheuter regarding accessibility.

@nickvergessen nickvergessen mentioned this pull request Feb 24, 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 design Design, UX, interface and interaction design feature: actions Related to the actions components feature: input-field Covering the InputField, TextField, ... technical debt
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants