-
Notifications
You must be signed in to change notification settings - Fork 23
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
(feat) Enhancement on navigation button style #132
(feat) Enhancement on navigation button style #132
Conversation
Thanks for the PR, @icrc-jofrancisco. Might you have read this thread https://openmrs.slack.com/archives/CKS32D55G/p1710226081710819? Just adding it before I get to reviewing it |
Thanks for your comment @denniskigen . |
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.
Thanks, @icrc-jofrancisco. I've left a suggestion. Let's see how this looks and evaluate from there.
@@ -23,15 +23,15 @@ | |||
|
|||
.nav-link-text { | |||
margin-top: 0.125rem; | |||
white-space: nowrap; |
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.
I think it's important to keep this around for visual consistency and balance. Having the page name truncated when the titles are too long isn't necessarily a bad trade-off when the full page names are listed on the left panel.
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.
Agreed. Thanks.
projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
Outdated
Show resolved
Hide resolved
} | ||
|
||
.nav-label { | ||
@include type.type-style('label-01'); | ||
color: #696969; |
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.
#525252 is the default carbon hex for input labels. It's probably a better fit here for consistency:
Also, when we migrate the form engine to use carbon colour tokens, we could swap it out for gray-70
.
It also gets a better contrast score than #696969:
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.
Agreed. Thanks. @denniskigen
Thanks, @icrc-jofrancisco! |
Follow-up to say this looks great to me in prod. Thanks for working on it, @icrc-jofrancisco! |
Requirements
Summary
In this pull request, I've made modifications to the navigation buttons within the form. Currently, the buttons have a "header-like" styling, leading to an oversized font. To enhance consistency across sections and text elements, I've realigned the button style to match that of other components.
Screenshots
Before:
After:
Related Issue
Other
Thanks,