search

ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
29 stars 8 forks source link

routerLinkActive not supported by anchor tabs and breadcrumb #995

Open m-akinc opened 1 year ago

m-akinc commented 1 year ago

🐛 Bug Report

In Angular, routerLinkActive is an attribute used to help style an active link element, e.g. the active anchor tab, or the breadcrumb item for the current page. Currently, we use different schemes to style the active item in each of those components. We need to consider integration with the routerLinkActive attribute.

💻 Repro or Code Sample

<nimble-anchor-tabs activeid="1">
                <nimble-anchor-tab id="1" [nimbleRouterLink]="url1" routerLinkActive="active">Tab 1</nimble-anchor-tab>
                <nimble-anchor-tab id="2" [nimbleRouterLink]="url2" routerLinkActive="active">Tab 2</nimble-anchor-tab>
</nimble-anchor-tabs>

🤔 Expected Behavior

When the user activates a tab by clicking or Space/Enter, we should have a way to set the nimble-anchor-tabs activeid to the id of that tab. This could be communicated via an example program, or by a custom directive (e.g. nimbleRouterLinkActive) that encapsulates that logic.

We need to investigate if/how the breadcrumb needs to support routerLinkActive in its own way, e.g. clearing href on active breadcrumb item.

😯 Current Behavior

Anchor tabs and breadcrumb don't care about routerLinkActive.

💁 Possible Solution

Anchor tabs: Set activeid of tabs based on isActive property of RouterLinkActive directives of child anchor tab elements.

🔦 Context

Came up in discussion on PR #987

kroeschl commented 10 months ago

I'd also like to use routerLinkActive with nimble-anchor-button (and similar) inside a nimble-toolbar to accomplish a navbar that accents elements as you navigate around our site. navbar

Right now I'm hacking around this problem, but it would nice if it just worked.

fredvisser commented 5 months ago

Document the workaround/best practice in the Angular section of the Anchor Tab in Storybook (or close as low ROI). Review the discussion in https://github.com/ni/nimble/pull/987 for more info.