Skip to content

AppHeader - Add close callback to :logo yielded block (HDS-5390) #3121

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Aug 21, 2025
Merged

AppHeader - Add close callback to :logo yielded block (HDS-5390) #3121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b459282
HDS-5390 Add close callback to AppHeader logo yield
KristinLBradley Aug 21, 2025
af49133
HDS-5390 Add changeset
KristinLBradley Aug 21, 2025
dab56a1
Update wicked-rooms-wear.md
KristinLBradley Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/wicked-rooms-wear.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hashicorp/design-system-components": minor
---

<!-- START components/app-header -->
`AppHeader` - return `close` callback to the `:logo` named block so the menu actions can be hidden programmatically when the component is in a mobile view.
<!-- END -->
2 changes: 1 addition & 1 deletion packages/components/src/components/hds/app-header/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
/>
{{/if}}

{{yield to="logo"}}
{{yield (hash close=this.close) to="logo"}}

{{#if (not this._isDesktop)}}
<Hds::AppHeader::MenuButton
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/components/hds/app-header/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ export interface HdsAppHeaderSignature {
a11yRefocusExcludeAllQueryParams?: boolean;
};
Blocks: {
logo?: [];
logo?: [
{
close: () => void;
},
];
globalActions?: [
{
close: () => void;
Expand Down
6 changes: 5 additions & 1 deletion showcase/app/components/mock/app/header/app-header.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,17 @@ export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHe

<template>
<HdsAppHeader>
<:logo>
<:logo as |actions|>
<HdsAppHeaderHomeLink
@icon="hashicorp"
@text="HashiCorp home menu"
@isIconOnly={{true}}
@href="#"
@isHrefExternal={{false}}
{{on "click" actions.close}}
/>
</:logo>

<:globalActions as |actions|>
{{#if this.showOrgPicker}}
<HdsDropdown @enableCollisionDetection={{true}} as |dd|>
Expand All @@ -62,6 +65,7 @@ export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHe
</HdsDropdown>
{{/if}}
</:globalActions>

<:utilityActions as |actions|>
{{#if this.showRegionPicker}}
<HdsDropdown @enableCollisionDetection={{true}} as |dd|>
Expand Down
20 changes: 17 additions & 3 deletions showcase/tests/integration/components/hds/app-header/index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,28 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
test('it should hide the actions when the "close" function is called in mobile view', async function (assert) {
await render(hbs`
<Hds::AppHeader id='test-app-header' @breakpoint='10000px'>
<:globalActions as |actions|>
<:logo as |actions|>
<Hds::AppHeader::HomeLink
@icon="hashicorp"
@text="HashiCorp"
id="test-home-link"
{{on "click" actions.close}}
/>
</:logo>
<:globalActions as |actions|>
<Hds::Button id='test-global-action' {{on 'click' actions.close}} @text="Global action" />
</:globalActions>
<:utilityActions as |actions|>
<Hds::Button id='test-utility-action' {{on 'click' actions.close}} @text="Utility action" />
<:utilityActions as |actions|>
<Hds::Button id='test-utility-action' {{on 'click' actions.close}} @text="Utility action" />
</:utilityActions>
</Hds::AppHeader>`);

// test logo actions close
await click('.hds-app-header__menu-button');
assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-open');
await click('#test-home-link');
assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');

// test global actions close
await click('.hds-app-header__menu-button');
assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-open');
Expand Down