-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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 action bar design #9503
Fix action bar design #9503
Conversation
Links need empty href to be styled properly. Rewrite component to function component.
bd21c0c
to
b6697bf
Compare
Codecov Report
@@ Coverage Diff @@
## master #9503 +/- ##
=======================================
Coverage 41.53% 41.53%
=======================================
Files 1332 1332
Lines 72585 72584 -1
Branches 6582 6578 -4
=======================================
Hits 30145 30145
+ Misses 39641 39640 -1
Partials 2799 2799
|
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.
like the idea and appreciate converting to a function component 👍
9697056
to
3e7c5bd
Compare
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.
Looks great! 🎉
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.
Looking great Felix!
Part of #9462
We set a custom padding that made the buttons hard to distinguish, assymmetric and inconsistent with the rest of the UI. I simply removed the custom padding so it's consistent with all other buttons. We definitely have the space to do that.
I added a 1px gap between buttons so that they are distinct even in "pressed" state. Not fully sure about this one but I settled on it looking better than without.
I also fixed a tiny 1px gap at the bottom of each item by making them stretch.
This also fixes the font color differences between buttons that did not have an
href
, and the different cursor. In the process I converted the component to a function component.Action items that are too wide are now clipped with ellipsis.
I modified the "pressed" background color to be a tad lighter. The problem before was that it was the same color as the frame of the action bar, so they didn't appear "pressed", but actually a layer above the bar. With this slight modification I find the state is much better communicated.
On hover action items receive a background lighter than the pressed state. This made a huge difference imo in making them feel like interactive UI elements.
Please note that the gifs are not fully representative because the color resolution is small.