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

[NcActionText] looks like a button #5166

Open
ShGKme opened this issue Jan 29, 2024 · 8 comments
Open

[NcActionText] looks like a button #5166

ShGKme opened this issue Jan 29, 2024 · 8 comments
Labels
design Design, UX, interface and interaction design feature: actions Related to the actions components

Comments

@ShGKme
Copy link
Contributor

ShGKme commented Jan 29, 2024

<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 ShGKme added feature: actions Related to the actions components design Design, UX, interface and interaction design labels Jan 29, 2024
@susnux
Copy link
Contributor

susnux commented Jan 29, 2024

cc @nextcloud-libraries/designers

@nimishavijay
Copy link

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 ?

@ShGKme
Copy link
Contributor Author

ShGKme commented Jan 30, 2024

  • 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
Copy link
Contributor Author

ShGKme commented Jan 30, 2024

  • 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
Copy link
Contributor Author

ShGKme commented Jan 30, 2024

very similar to the current style of NcActionCaption

Maybe make caption centered?

image

@nimishavijay
Copy link

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

@ShGKme
Copy link
Contributor Author

ShGKme commented Jan 30, 2024

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
Copy link
Contributor

susnux commented Jan 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design, UX, interface and interaction design feature: actions Related to the actions components
Projects
None yet
Development

No branches or pull requests

3 participants