O3-578: Left Nav Page section is not highlighted correctly. #721
Conversation
packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
Outdated
Show resolved
Hide resolved
packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
Outdated
Show resolved
Hide resolved
Use location from react-router
remove the overriding styles from core
hadijahkyampeire
force-pushed
the
hadijah/O3-578
branch
from
ec0ff81 to
ebc3a31
Compare
| @import "~carbon-components/src/globals/scss/vars"; | ||
| @import "~carbon-components/src/globals/scss/mixins"; | ||
|
|
||
| :global(.active-left-nav-link) { |
There was a problem hiding this comment.
Since we want left-nav to be a site-wide convention this should really go in core. Another good indicator of this is the use of the global tag. If we really are making a new global convention it should probably exist somewhere in styleguide.
There was a problem hiding this comment.
The global tag is in the core but I wanted to emphasize some styles on a link for when there is an active class, so I called the global class here
There was a problem hiding this comment.
I think the point remains though. Because the style is only affecting patient-chart a left nav link used in outpatient app will have a different styling... Or am I missing something?
There was a problem hiding this comment.
Maybe I am not understanding what you are meaning we should have a call about it, but I will merge it for now.
| } | ||
|
|
||
| export const DashboardExtension = ({ title, basePath }: DashboardExtensionProps) => { | ||
| export const DashboardExtension = ({ title, basePath, currentPath }: DashboardExtensionProps) => { | ||
| const navLink = useMemo(() => decodeURIComponent(last(currentPath.split('/'))), [currentPath]); |
There was a problem hiding this comment.
This would be good to move into its own hook. probably after the react-router v6 upgrade
| <div key={title}> | ||
| <ConfigurableLink to={`${basePath}/${encodeURIComponent(title)}`} className="bx--side-nav__link"> | ||
| <div key={title} className={activeClassName}> | ||
| <ConfigurableLink to={`${basePath}/${encodeURIComponent(title)}`} className={'bx--side-nav__link ' + styles.link}> |
There was a problem hiding this comment.
I think I'm missing something? Currently that styles file doesn't have a link class name?
There was a problem hiding this comment.
It's there in the styles maybe you had not refreshed.
| outline: none; | ||
| color: $ui-05; | ||
| border-left: 4px solid var(--brand-01); | ||
| .link:nth-child(1) { |
There was a problem hiding this comment.
@ZacButko this is the link class that I was referring to.
Requirements
Summary
Screenshots
Related Issue
Other
sidenavActiveLink.mov