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

Adjust NcSelect styling #3798

Closed
1 of 3 tasks
raimund-schluessler opened this issue Feb 20, 2023 · 2 comments · Fixed by #3818
Closed
1 of 3 tasks

Adjust NcSelect styling #3798

raimund-schluessler opened this issue Feb 20, 2023 · 2 comments · Fixed by #3818
Assignees
Labels
1. to develop Accepted and waiting to be taken care of design Design, UX, interface and interaction design feature: select Related to the NcSelect* components

Comments

@raimund-schluessler
Copy link
Contributor

raimund-schluessler commented Feb 20, 2023

3 things:

  • Style-wise it coukd look a bit more like the ActionMenu component, with the entries not expanding the whole width, but having a bit of margin and having a birder-radius Rounded select dropdown options #3818
  • The contrast of the highlight seems to not be enough for accessibility, here we should also do it however we make the ActionMenu entry hover/focus accessible cc @JuliaKirschenheuter @Pytal
  • Detail: The height of the co tainer should (if possible) always cut the list at ½ of the last entry, so that one entry is cut off and it is obvious to people that the list continues. :)

Originally posted by @jancborchardt in #3781 (review)

@raimund-schluessler raimund-schluessler added 1. to develop Accepted and waiting to be taken care of design Design, UX, interface and interaction design feature: select Related to the NcSelect* components labels Feb 20, 2023
@Pytal
Copy link
Contributor

Pytal commented Feb 22, 2023

  • Style-wise it coukd look a bit more like the ActionMenu component, with the entries not expanding the whole width, but having a bit of margin and having a birder-radius

👍

  • The contrast of the highlight seems to not be enough for accessibility, here we should also do it however we make the ActionMenu entry hover/focus accessible cc @JuliaKirschenheuter @Pytal

Currently uses the same color as NcActions items, --color-background-hover, though we can change it if you have any suggestions @jancborchardt?

For BITV a11y @michaelnissenbaum mentioned that only keyboard focus requires the minimum 3:1 contrast ratio and is addressed in #3711

  • Detail: The height of the co tainer should (if possible) always cut the list at ½ of the last entry, so that one entry is cut off and it is obvious to people that the list continues. :)

Don't know why there is no scrollbar in the PR screenshot but on https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=nctimezonepicker a scrollbar should appear
image

@jancborchardt
Copy link
Contributor

For BITV a11y @michaelnissenbaum mentioned that only keyboard focus requires the minimum 3:1 contrast ratio and is addressed in #3711

Ah ok, then it's fine as is :)

@Pytal regarding scrollbar all good, I mean vertically the least entry should be cut in half. :) So then there is a clear visual indicator the list continues.

@Pytal Pytal self-assigned this Feb 23, 2023
@raimund-schluessler raimund-schluessler linked a pull request Feb 25, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop Accepted and waiting to be taken care of design Design, UX, interface and interaction design feature: select Related to the NcSelect* components
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants