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

[NcActionButton] Inconsistent icon position #5284

Open
ShGKme opened this issue Feb 21, 2024 · 4 comments
Open

[NcActionButton] Inconsistent icon position #5284

ShGKme opened this issue Feb 21, 2024 · 4 comments
Assignees
Labels
2. developing Work in progress bug Something isn't working feature: actions Related to the actions components

Comments

@ShGKme
Copy link
Contributor

ShGKme commented Feb 21, 2024

#icon slot is centered and icon-class is on top.

image

@ShGKme ShGKme added bug Something isn't working feature: actions Related to the actions components labels Feb 21, 2024
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 21, 2024

@nextcloud-libraries/designers what position is preferred?

@Jerome-Herbinet
Copy link
Member

I prefer the second one (vertically centered). That said, IMO, it's not a bug.

@marcoambrosini
Copy link
Contributor

Although I also prefer center aligned when there's only one line of text, I think that the better strategy for this component is to top align given that it accepts multiple lines of text. When there are multiple lines of text, the icon gets further and further away from the title.

Here's a real world example of top aligned. @ShGKme note that in your screenshot the icon is not properly centered with the text.

Screenshot 2024-02-22 at 09 59 12

@ShGKme ShGKme self-assigned this Feb 22, 2024
@jancborchardt
Copy link
Contributor

Yep, confirming what @marcoambrosini said, it's better to have it aligned to the top, with the heading. Otherwise the icon is basically at an arbitrary position.

@ShGKme ShGKme added the 2. developing Work in progress label Feb 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress bug Something isn't working feature: actions Related to the actions components
Projects
None yet
Development

No branches or pull requests

4 participants