-
Notifications
You must be signed in to change notification settings - Fork 33
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
fix(detailed pages): Make delete btns more visible on detail pages WD-3870 #353
Conversation
Demo starting at https://lxd-ui-353.demos.haus |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some QA comments:
- The button in its "expanded" form should probably not be dense, correct me if I'm wrong @al-bakalova @edlerd
- It should not break the layout for instances with a long name:
- The "collapse on small screen" behaviour is not implemented:
When resizing, we should turn the big button into a small icon button, or just “Delete” one. Let’s explore this together.
@aaryanporwal on top of Michele's feedback, please review the "Delete instance" and "Delete profile" buttons. We need less space before and after the label. Also, please remove the delete icon. It should only be visible on smaller screens to replace the label. |
So, to recap: on small screens, we keep what we have now (icon only, no borders etc). On medium screens and bigger, we show a default button with the label only "Delete instance/profile" and no icon. Is this a good summary @al-bakalova ? |
@lorumic Yes! I hope this makes sense. When we are dealing with longer instance or profile names, we can probably use the icon button earlier. I don't know if this is possible from dev point of view, so I'd leave the decision to you and Aaryan! |
It's probably easier to constrain the appearance of the button to the screen size only. So, on medium and bigger screens, the style of the other elements in the header (breadcrumbs and actions) should be updated to accommodate a bigger button than the one with the icon only, and be opportunely responsive. |
update breakpoint, btn look and text and new hook
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thank you for applying the changes.
@aaryanporwal Good job! Looks good to me! Thank you for applying all these changes! |
Done
Fixes [list issues/bugs if needed]
QA
Screenshots
Before:
After: