nextcloud-vue
nextcloud-vue copied to clipboard
[NcActionText] looks like a button
<NcActionText> - text item of <NcActions> menu.
It looks exactly the same as interactive <NcActionButton>, the only difference is that it has no hover effect.
This leads to a bit unexpected behavior - a user can see the item, but it is unreachable via keyboard (because it is not focusable, not interactive). It is especially noticeable, when there is only one another button - feels like you are stuck on it.
Example: contacts menu
cc @nextcloud-libraries/designers
That is a good point. Some ideas that come to mind:
- [ ] Make the text and icon
--color-text-maxcontrastso that it looks like a disabled button - [ ] Always add a separator under/above/both the NcActionText component so that it is separated from the rest of the buttons
Honestly I am ok with either, or even both the solutions being implemented together. What do you think @szaimen @marcoambrosini ?
- Make the text and icon
--color-text-maxcontrastso that it looks like a disabled button
Sounds very similar to the current style of NcActionCaption, except that caption has no icon.
- Always add a separator under/above/both the NcActionText component so that it is separated from the rest of the buttons
I think that could be an unexpected design change. Also, a separator has a semantic value — for example, it is used to separate radio groups in menus:
very similar to the current style of
NcActionCaption
Maybe make caption centered?
I am not able to find many instances of NcActionCaption at all, only 2 so far in the core apps, one in the dashboard and one in calendar. What do you think about making the caption bold, so that it's similar to NcAppNavigationCaption? I would steer clear of using center alignment as that's something we rarely do for text/headings/captions. It would look something like this
I would steer clear of using center alignment as that's something we rarely do for text/headings/captions. It would look something like this
Note, the centered "Group caption" from my screenshot is the current behavior.
Maybe drop one of both and unify into one? (caption & text)