Add support for Text in the `AppHeader` #2951

jorytindall · 2025-06-13T22:38:31Z

📌 Summary

Adds support for a text argument within the HomeLink of the AppHeader. Refactors the HomeLink to match the logic of the <Hds::Button>:

Removes the ariaLabel argument
Adds an isIconOnly argument and text argument
Adds logic to pass the text argument to the aria-label of the Home Link when isIconOnly={{true}}

Showcase: https://hds-showcase-git-jt-application-titlehds-4866-hashicorp.vercel.app/components/app-header

📸 Screenshots

This first example is representative of the TFE Admin Console app that is being spun up, the other two are speculative examples for how the component could be used elsewhere.

Example states with Application Title

🔗 External links

Jira ticket: HDS-4866
Figma file

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've worked with GRC to document the impact of any changes to security controls.
Examples of changes to controls include access controls, encryption, logging, etc.
If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

vercel · 2025-06-13T22:38:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jun 23, 2025 10:02pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jun 23, 2025 10:02pm

…dding instead to support variable length string content

…sktop to the showcase, along with examples of child components

…emoved ariaLabel

KristinLBradley

Looking pretty good! I added a few comments on simplifying some logic and a few other minor recommended changes.

didoo

Left a few comments, but nothing major/blockign

.changeset/dry-spiders-tell.md

packages/components/src/components/hds/app-header/home-link.hbs

packages/components/src/components/hds/app-header/home-link.ts

showcase/app/templates/components/app-header/index.hbs

… default and simplified logic

KristinLBradley

Looks great!

didoo

Left a few comments/todos

didoo · 2025-06-23T10:27:23Z

packages/components/src/components/hds/app-header/home-link.ts

+  get icon(): HdsIconSignature['Args']['name'] {
+    const { icon } = this.args;
+
+    assert('@icon name must be provided', icon !== undefined);


[issue] as a consumer, I see this error in the devtool console, and I don't know which component threw the error or where is coming from

I've added a more explicit assertion for this

showcase/app/templates/components/app-header/index.hbs

showcase/tests/integration/components/hds/app-header/home-link-test.js

packages/components/src/components/hds/app-header/home-link.ts

didoo

Left a few more comments/todos

didoo · 2025-06-24T10:30:37Z

showcase/app/templates/components/app-header/index.hbs

          @color="var(--token-color-boundary-brand)"
          @href="#"
        />
      </div>
    </SF.Item>
  </Shw::Flex>

+  <Shw::Text::H4>Text</Shw::Text::H4>


[todo] For consistency with the same title above?

Suggested change

<Shw::Text::H4>Text</Shw::Text::H4>

<Shw::Text::H4>With text</Shw::Text::H4>

didoo · 2025-06-24T10:30:55Z

showcase/app/templates/components/app-header/index.hbs

+  <Shw::Flex as |SF|>
+    <SF.Item>
+      <div class="hds-app-header">
+        <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp" @href="#" @title="Admin UI" />


[todo] I think this one is missing the @isIconOnly={{false}}?

Suggested change

<Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp" @href="#" @title="Admin UI" />

<Hds::AppHeader::HomeLink @icon="hashicorp" @isIconOnly={{false}} @text="HashiCorp" @href="#" @title="Admin UI" />

didoo · 2025-06-24T10:31:21Z

showcase/app/templates/components/app-header/index.hbs

+
+    <SF.Item>
+      <div class="hds-app-header">
+        <Hds::AppHeader::HomeLink @icon="terraform" @text="Terraform" @href="#" @title="Terraform Admin Console" />


[todo] I think this one is missing the @isIconOnly={{false}}?

Suggested change

<Hds::AppHeader::HomeLink @icon="terraform" @text="Terraform" @href="#" @title="Terraform Admin Console" />

<Hds::AppHeader::HomeLink @icon="terraform" @isIconOnly={{false}} @text="Terraform" @href="#" @title="Terraform Admin Console" />

didoo · 2025-06-24T10:34:54Z

showcase/app/templates/components/app-header/index.hbs

+
+  <Shw::Text::H3>With text</Shw::Text::H3>
+
+  <Shw::Grid @columns={{1}} {{style gap="2rem"}} as |SG|>


[general consideration] no need to change it here, but in general it would be better to avoid using a grid to achieve a simple vertical stacked layout, and and use <Shw::Grid @direction="column">instead (CSS grid comes with (rare) potential side effects, that we want to avoid)

hashibot-hds added packages/components showcase labels Jun 13, 2025

vercel bot deployed to Preview – hds-showcase June 13, 2025 22:40 View deployment

vercel bot had a problem deploying to Preview – hds-showcase June 13, 2025 22:41 Failure

vercel bot deployed to Preview – hds-showcase June 13, 2025 22:46 View deployment

vercel bot deployed to Preview – hds-website June 13, 2025 22:50 View deployment

jorytindall changed the title ~~Add support for Application Title in the AppHeader~~ Add support for Text in the AppHeader Jun 18, 2025

vercel bot deployed to Preview – hds-showcase June 18, 2025 17:16 View deployment

vercel bot deployed to Preview – hds-website June 18, 2025 17:19 View deployment

vercel bot deployed to Preview – hds-showcase June 18, 2025 19:47 View deployment

vercel bot deployed to Preview – hds-showcase June 18, 2025 19:48 View deployment

vercel bot deployed to Preview – hds-showcase June 18, 2025 19:50 View deployment

vercel bot deployed to Preview – hds-website June 18, 2025 19:53 View deployment

jorytindall added 13 commits June 18, 2025 12:53

Testing different Application Name examples in context

6d81131

Added support for a title within the HomeLink

c5de994

Updated styling to remove the width/height set by the token to use pa…

6cc917a

…dding instead to support variable length string content

Added examples for Terraform Admin Console, Admin UI, and Boundary De…

00e8ac8

…sktop to the showcase, along with examples of child components

Updated examples and added examples of the HomeLink states with titles

3864ab5

lint

6db5af1

Add missing closing tag in showcase

419464a

Testing: concat title with aria label when present

b69694e

Restructured the HomeLink to recieve text and isIconOnly arguments, r…

a83eff8

…emoved ariaLabel

Lint

28a86b2

Changeset

61e279a

Make text argument required

183c5fb

Remove unused min/max width declarations for the logo

3a0055c

jorytindall force-pushed the jt/application-title/hds-4866 branch from 83b6e75 to 3a0055c Compare June 18, 2025 19:55

vercel bot deployed to Preview – hds-showcase June 18, 2025 19:56 View deployment

vercel bot deployed to Preview – hds-website June 18, 2025 19:59 View deployment

KristinLBradley reviewed Jun 20, 2025

View reviewed changes

didoo previously approved these changes Jun 20, 2025

View reviewed changes

jorytindall added 3 commits June 20, 2025 13:00

Updated examples in the showcase

0306fb1

Revise changelog

58891d8

Removed explicit class on the text element, set isIconOnly to true by…

60dce9d

… default and simplified logic

jorytindall dismissed didoo’s stale review via 60dce9d June 20, 2025 20:31

vercel bot deployed to Preview – hds-showcase June 20, 2025 20:32 View deployment

vercel bot deployed to Preview – hds-website June 20, 2025 20:35 View deployment

This comment was marked as resolved.

Sign in to view

linter

30d1ba7

vercel bot deployed to Preview – hds-showcase June 20, 2025 20:55 View deployment

vercel bot deployed to Preview – hds-website June 20, 2025 20:57 View deployment

linter format

a122314

vercel bot deployed to Preview – hds-showcase June 20, 2025 21:07 View deployment

vercel bot deployed to Preview – hds-website June 20, 2025 21:09 View deployment

jorytindall requested review from KristinLBradley and didoo June 20, 2025 21:37

KristinLBradley previously approved these changes Jun 20, 2025

View reviewed changes

didoo reviewed Jun 23, 2025

View reviewed changes

shleewhite reviewed Jun 23, 2025

View reviewed changes

packages/components/src/components/hds/app-header/home-link.ts Outdated Show resolved Hide resolved

jorytindall added 3 commits June 23, 2025 14:47

Removed all instances where isIconOnly is true because its the default

07adb46

Added more explicit assertion for the icon argument

92bb602

lint

184601c

jorytindall dismissed KristinLBradley’s stale review via 184601c June 23, 2025 21:58

vercel bot deployed to Preview – hds-showcase June 23, 2025 22:00 View deployment

vercel bot deployed to Preview – hds-website June 23, 2025 22:02 View deployment

jorytindall requested review from didoo, shleewhite and KristinLBradley June 23, 2025 22:23

didoo reviewed Jun 24, 2025

View reviewed changes

	<Shw::Text::H4>Text</Shw::Text::H4>
	<Shw::Text::H4>With text</Shw::Text::H4>

	<Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp" @href="#" @title="Admin UI" />
	<Hds::AppHeader::HomeLink @icon="hashicorp" @isIconOnly={{false}} @text="HashiCorp" @href="#" @title="Admin UI" />

	<Hds::AppHeader::HomeLink @icon="terraform" @text="Terraform" @href="#" @title="Terraform Admin Console" />
	<Hds::AppHeader::HomeLink @icon="terraform" @isIconOnly={{false}} @text="Terraform" @href="#" @title="Terraform Admin Console" />


		<Shw::Text::H3>With text</Shw::Text::H3>

		<Shw::Grid @columns={{1}} {{style gap="2rem"}} as \|SG\|>

Add support for Text in the AppHeader #2951

Are you sure you want to change the base?

Add support for Text in the AppHeader #2951

Conversation

jorytindall commented Jun 13, 2025 • edited by KristinLBradley Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

📸 Screenshots

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KristinLBradley left a comment

Choose a reason for hiding this comment

Uh oh!

didoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

KristinLBradley left a comment

Choose a reason for hiding this comment

Uh oh!

didoo left a comment

Choose a reason for hiding this comment

Uh oh!

didoo Jun 23, 2025

Choose a reason for hiding this comment

Uh oh!

jorytindall Jun 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

didoo left a comment

Choose a reason for hiding this comment

Uh oh!

didoo Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

didoo Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

didoo Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

didoo Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Add support for Text in the `AppHeader` #2951

Add support for Text in the `AppHeader` #2951

jorytindall commented Jun 13, 2025 •

edited by KristinLBradley

Loading

vercel bot commented Jun 13, 2025 •

edited

Loading