nextcloud-vue icon indicating copy to clipboard operation
nextcloud-vue copied to clipboard

[NcActionText] looks like a button

Open ShGKme opened this issue 1 year ago • 8 comments

<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

ShGKme avatar Jan 29 '24 09:01 ShGKme

cc @nextcloud-libraries/designers

susnux avatar Jan 29 '24 18:01 susnux

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 ?

nimishavijay avatar Jan 30 '24 10:01 nimishavijay

  • 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 avatar Jan 30 '24 11:01 ShGKme

  • 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 avatar Jan 30 '24 11:01 ShGKme

very similar to the current style of NcActionCaption

Maybe make caption centered?

image

ShGKme avatar Jan 30 '24 11:01 ShGKme

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

nimishavijay avatar Jan 30 '24 12:01 nimishavijay

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.

ShGKme avatar Jan 30 '24 15:01 ShGKme

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

susnux avatar Jan 30 '24 16:01 susnux