GovAlta
fix(#1368): fixing link active when router change & mobile link should be active
Scope:
- Fixing #1772
- Fixing #1792
- Fixing #1386
What are changed:
- [x] AppHeader active link on mobile and tablet, now has the blue background color and white text color like Figma described
- [x] AppHeaderMenu active link now has the blue background color and white text color like Figma above.
- [x] Move as much as possible CSS of GoAAppHeader and GoAAppHeaderMenu under
components.cssto component itself, using::slottted - [x] Add
getMatchedLinkto make sure if AppHeader and AppHeaderMenu links have the same weight, then no menu should be active. Change the logic to make sure the highest weight item will be active. Add tests. - [x] When URL is changed (routerLink) on single page applications, the link class
currentshould be updated. The current link should be correct. - [x] AppHeaderMenu should be closed if router is changed.
- [x] Tab
hrefis fixed in order to work with Angular.
Demo link: https://vanessatran-ddi.github.io/ui-components/#/
Video demo:
https://github.com/GovAlta/ui-components/assets/120135417/87c963bf-3e85-40cf-a20c-d4d8089dadbc
https://github.com/GovAlta/ui-components/assets/120135417/a96160ae-1d03-41fd-be3a-eb31c0c76382
Finished testing, here are my issues I found
- [x] Doesn't work if you use
routerLinkinstead ofhref - [ ] Doesn't work if you use a click event instead of
href - [x] Doesn't work with AppHeaderMenu (as in, if you select an item inside an AppHeaderMenu, the top level item doesn't show as selected)
Finished testing, here are my issues I found
- [x] Doesn't work if you use
routerLinkinstead ofhref- [ ] Doesn't work if you use a click event instead of
href- [x] Doesn't work with AppHeaderMenu (as in, if you select an item inside an AppHeaderMenu, the top level item doesn't show as selected)
Hi @ArakTaiRoth , The second one, as we discussed in Slack, will not be able to be solved using the current logic to detect the URL changed.
issue https://github.com/GovAlta/ui-components/issues/1386 is verified fixed on react and angular, tested for both href and routerlink, also tested /start-up and /start-up/overview combination. works as expected
for react,
when there is only one item in GoAAppHeaderMenu. the GoAAppHeaderMenu is showing always active. even when other GoAAppHeader Item is clicked. Had an huddle and demoed the STR with Vanessa
I touch base with Thomas, for Link in react or routerLink in angular. the item in GoAAppHeaderMenu should loss focus when navigation is completed. Had an huddle and demoed the STR with Vanessa
for react,
when there is only one item in GoAAppHeaderMenu. the GoAAppHeaderMenu is showing always active. even when other GoAAppHeader Item is clicked. Had an huddle and demoed the STR with Vanessa
Hi @lizhuomeng71 Can you give me a code snippet for the app header above?
code snippet for react
<section slot="header">
<GoAMicrositeHeader type="alpha" version="UAT" maxContentWidth="1500px" />
<GoAAppHeader url="/" heading="Design System">
<Link to="/formstepper">Support</Link>
<Link to="/bugs/1591">Test</Link>
<Link to="/bugs/1522">Call</Link>
<Link to="/bugs/1732">Contact</Link>
<a href="/bugs/1689">Sign in</a>
<GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
<Link to="/bugs/1458">Contact</Link>
</GoAAppHeaderMenu>
</GoAAppHeader>
</section>
code snippet for angular
<goa-app-header heading="Design Systems" maxContentWidth="1500px" [fullmenubreakpoint]="1700">
<a routerLink="/button">Get started
</a>
<a routerLink="/app-footer">Patterns and templates</a>
<a href="/app-footer/ddss">Pop Over</a>
<a routerLink="/app-header">Components</a>
<a routerLink="/modal-accessibility">Styles</a>
<a routerLink="/radio">Content</a>
<a href="/textarea">Support</a>
<a href="https://github.com/GovAlta/ui-components/issues/new/choose" target="_blank">
Report a bug
</a>
<a href="#">Support</a>
<goa-app-header-menu heading="Tickets" leadingIcon="ticket">
<a routerLink="/two-column-layout">Cases</a>
<a routerLink="/tooltip">Payments</a>
<a href="/popover">Outstanding</a>
</goa-app-header-menu>
<a href="#" className="interactive">Sign in</a>
</goa-app-header>
I touch base with Thomas, for Link in react or routerLink in angular. the item in GoAAppHeaderMenu should loss focus when navigation is completed. Had an huddle and demoed the STR with Vanessa
Hi @lizhuomeng71 for a single-page application, we don't refresh the browser when we change the URL. Therefore, when we click a menu item, the URL is changed, and the content is rendered but the focus is still on the menu button that we just click, unless we move to another item.
That isn't a bug or something we should programmatically force to remove the focus effect.
For example, if I click the Side menu item to change the URL, the item focused is the side menu item, which is a natural effect.
The Multiple Item Get Active issue is fixed, but there is another issue
When there is 2 Nav Item one point to a /foo, and another point to /foo/bar, when click on the first one (/foo) it does not have the active state
https://github.com/GovAlta/ui-components/assets/7528736/3435d796-bbd5-4aa0-a237-d8c426557823
:tada: This PR is included in version 1.17.0-alpha.56 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.17.0-alpha.28 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.21.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.21.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 3.0.0-alpha.4 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 3.0.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket: