fix(#3762): AppHeader Slots#3909
Open
willcodeforcoffee wants to merge 1 commit into
Open
Conversation
willcodeforcoffee
force-pushed
the
eric/bug3762-AppHeader-slots
branch
from
681a117 to
c525784
Compare
|
Preview links
Built from commit 4d77773. Previews are removed automatically when this PR closes. |
willcodeforcoffee
force-pushed
the
eric/bug3762-AppHeader-slots
branch
from
524280a to
8685814
Compare
willcodeforcoffee
added
Bug
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the AppHeader slot APIs and examples to make React/Angular usage more consistent with other controls (adding explicit “banner/phase/navigation/utilities” APIs), and updates docs/examples accordingly while aiming to preserve legacy slot-based usage.
Changes:
- React: adds
banner,phase,navigation, andutilitiesprops toGoabAppHeader. - Angular: adds
banner,phase,navigation, andutilitiestemplate inputs toGoabAppHeader, and introducesGoabAppHeaderMenu. - Docs & PR apps: updates configuration snippets and example pages to use the new APIs, plus adds bug reproduction routes for #3762.
Reviewed changes
Copilot reviewed 16 out of 18 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/react-components/src/lib/app-header/app-header.tsx | Adds new slot props and renders them into goa-app-header. |
| libs/angular-components/src/lib/components/index.ts | Re-exports app-header / app-header-menu under new folder names. |
| libs/angular-components/src/lib/components/app-header/app-header.ts | Adds TemplateRef inputs and projects them into named slots. |
| libs/angular-components/src/lib/components/app-header/app-header.spec.ts | Updates spec import path after renaming. |
| libs/angular-components/src/lib/components/app-header-menu/app-header-menu.ts | Adds Angular wrapper for goa-app-header-menu including slotName host binding. |
| libs/angular-components/src/lib/components/app-header-menu/app-header-menu.spec.ts | Updates spec import path and minor formatting. |
| docs/src/data/configurations/app-header.ts | Updates AppHeader code snippets to use new React props / Angular template inputs. |
| docs/src/data/configurations/app-header-menu.ts | Updates AppHeaderMenu snippets (React/Angular/Web Components). |
| docs/src/content/examples/header-with-navigation/react.tsx | Updates docs example to use navigation/utilities props. |
| docs/src/content/examples/header-with-navigation/angular.html | Updates docs example to use Angular template inputs. |
| docs/generated/component-apis/app-header.json | Updates generated API docs for AppHeader slots. |
| apps/prs/react/src/routes/docs/app-header/app-header.tsx | Updates PR app docs route examples to new React props. |
| apps/prs/react/src/routes/bugs/bug3762.tsx | Adds React PR bug route demonstrating new vs legacy slot usage. |
| apps/prs/react/src/app/routes/bugs/bug3762.route.ts | Registers React PR bug route for #3762. |
| apps/prs/angular/src/routes/docs/app-header/app-header.component.html | Updates PR app Angular docs route examples to template inputs. |
| apps/prs/angular/src/routes/bugs/3762/bug3762.route.json | Registers Angular PR bug route metadata for #3762. |
| apps/prs/angular/src/routes/bugs/3762/bug3762.component.ts | Adds Angular PR bug route component shell for #3762. |
| apps/prs/angular/src/routes/bugs/3762/bug3762.component.html | Adds Angular PR bug route template demonstrating new vs legacy slot usage. |
Comments suppressed due to low confidence (3)
libs/angular-components/src/lib/components/app-header/app-header.ts:45
navigationis projected as a single wrapper<div slot="navigation">…</div>.goa-app-headerv2 navigation expects multiple direct slotted items (it countshost.children[slot="navigation"]and styles via::slotted(a)/::slotted(goa-app-header-menu)), so wrapping will break styling and overflow behavior. Prefer slotting each nav item directly (or update the web component to support nested wrappers).
libs/angular-components/src/lib/components/app-header/app-header.ts:49utilitiesis projected as a single wrapper<div slot="utilities">…</div>. Ingoa-app-headerv2, utilities responsiveness depends on counting/measuring direct slotted utility elements (host.childrenwithslot="utilities"); wrapping multiple actions into one element will be treated as a single item and can disable the intended “utilities menu” behavior and::slotted(a)styling.
libs/angular-components/src/lib/components/app-header/app-header.ts:76banner/phase/navigation/utilitiesinputs introduce new rendering paths (NgTemplateOutlet + slot projection), but the existing spec doesn’t assert these slots are rendered correctly. Add Angular unit tests that bind each template input and verify the expected slotted output undergoa-app-header.
willcodeforcoffee
force-pushed
the
eric/bug3762-AppHeader-slots
branch
from
8685814 to
dd42741
Compare
Collaborator
Author
|
Copilot Feedback Addressed:
|
willcodeforcoffee
force-pushed
the
eric/bug3762-AppHeader-slots
branch
from
66e675b to
3efa868
Compare
Collaborator
Author
|
Updated the PR with the following:
|
| </ng-template> | ||
| <ng-template #navigationTemplate> | ||
| <a href="#">Dashboard</a> | ||
| <goab-app-header-menu heading="Applications"> |
Collaborator
There was a problem hiding this comment.
Current: https://govalta.github.io/ui-components/pr-preview-angular/pr-3909/bugs/3762
The Current Application Menu is highlighted and mis-aligned. I compare vs design system website,
| <GoabAppHeader | ||
| heading="My Application" | ||
| url="/" | ||
| utilities={ |
Collaborator
There was a problem hiding this comment.
It looks different.
Now:
| url="/" | ||
| navigation={ | ||
| <> | ||
| <a href="#">Dashboard</a> |
Collaborator
There was a problem hiding this comment.
There is a difference between docs and react when put under mobile width, for Navigation example:
On mobile:
(Some menu items will be put under "More")
But on our React apps:
Collaborator
Author
There was a problem hiding this comment.
These are consistent now. 👍
| </GoabButton> | ||
| </div> | ||
| </GoabAppHeader> | ||
| <GoabAppHeader |
Collaborator
There was a problem hiding this comment.
There is a difference between docs and React example (even the same code snippet), on mobile:
It is collapsed
But on our current React
Can you check if the wrapper makes this logic on mobile breaks, or the docs is already wrong?
Collaborator
Author
There was a problem hiding this comment.
The correct behaviour is the top. where it shows "Menu".
This works as expected now.
willcodeforcoffee
force-pushed
the
eric/bug3762-AppHeader-slots
branch
from
eb55151 to
4d77773
Compare
Collaborator
Author
|
I've made the following changes:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Before (the change)
Our AppHeader examples are using a
slotproperty on some of our components, design.alberta.ca/components/app-header#tab-1, specifically, the Header with Navigation example.See:
After (the change)
Several changes have been made to make these controls more consistent with other controls.
banner,phase,navigation, andutilitiesslots.banner,phase,navigation, andutilitiesslots.headertoapp-headerandheader-menutoapp-header-menuBackward compatibility with slots is maintained.
Make sure that you've checked the boxes below before you submit the PR
Steps needed to test
window.innerWidthincreases for the different Headers on the PR page