nextcloud-libraries/nextcloud-vue

[NcActionText] looks like a button

Opened this issue · 8 comments

ShGKme commented

<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

image

susnux commented

cc @nextcloud-libraries/designers

nimishavijay commented

That is a good point. Some ideas that come to mind:

  • Make the text and icon --color-text-maxcontrast so 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 ?

  • 👍1
ShGKme commented
  • Make the text and icon --color-text-maxcontrast so that it looks like a disabled button

Sounds very similar to the current style of NcActionCaption, except that caption has no icon.

image

ShGKme commented
  • 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:
image

ShGKme commented

very similar to the current style of NcActionCaption

Maybe make caption centered?

image

nimishavijay commented

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

image

  • 👍1
ShGKme commented

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.

susnux commented

Maybe drop one of both and unify into one? (caption & text)