Showcase - Convert Foundations, Layouts, Utilities pages to TS #3016

dchyun · 2025-07-15T16:27:25Z

📌 Summary

If merged, this PR would convert the Foundations, Layouts, and Overrides showcase pages to TS.

🛠️ Detailed description

Summary of pages converted

Foundations
- Elevation
- Focus ring
- Typography
Layouts
- App Frame
- Flex
- Grid
Overrides
- Power Select

🔗 External links

Jira ticket: HDS-5076

👀 Component checklist

Percy was checked for any visual regression

💬 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-07-15T16:27:35Z

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

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jul 16, 2025 2:30pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jul 16, 2025 2:30pm

dchyun · 2025-07-15T19:32:05Z

showcase/app/controllers/page-foundations/typography.js

[Note] All of the functionality of this file could be handled in a route file alone, so deleted this file and move its functionality to the route.

Not sure why I implemented things in this way, tbh 🤷‍♂️🤦‍♂️
3ff5ddf

dchyun · 2025-07-15T19:32:39Z

showcase/app/controllers/page-foundations/typography.js

-  get weights() {
-    return [...FONT_WEIGHTS];
-  }
-  get styles() {


[Note] This variable, and the imports that make it up were unused in the template file so it was removed.

dchyun · 2025-07-15T19:34:07Z

showcase/app/templates/page-layouts/flex.hbs

@@ -236,7 +234,7 @@
      <Hds::Layout::Grid @gap="48" @align="center" as |LG|>
        <Shw::Placeholder @text="item #1" @height="48" />
        <Shw::Placeholder @text="item #2" @height="48" />
-        <LG.Item @basis="25%" @grow="0" @shrink="0">
+        <LG.Item>


[Note] The basis, grow and shrink arguments are not present in the Layout::Grid Item subcomponent.

Yeah, probably remnants of a copy&paste from a similar example in the layout flex page.

dchyun · 2025-07-15T19:34:54Z

showcase/app/templates/page-layouts/grid.hbs

@@ -199,7 +197,7 @@
      <Hds::Layout::Grid @gap="16" @align="center" as |LG|>
        <Shw::Placeholder @text="item #1" @height="48" />
        <Shw::Placeholder @text="item #2" @height="48" />
-        <LG.Item @columnWidth="25%">
+        <LG.Item>


[Note] The columnWidth argument is not present on the Layout::Grid Item subcomponent

dchyun · 2025-07-15T19:41:04Z

showcase/app/templates/page-layouts/grid.hbs

    <SG.Item @label="3 column layout Card layout using columnWidth=33.33%">
      <Hds::Layout::Grid @columnWidth="33.33%" @gap="32">
-        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+        <Hds::Card::Container @level={{@model.HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>


[Note] Type errors were thrown when leaving this value as a string. Instead the card level values had to be added to the model and used here. Similar type errors are not thrown for other component values used.

Ex: When the Badge is used below, there is no type error thrown when @color="success" is set.

This is due to a difference in how the types for these two arrguments are defined.

HdsCardLevel is defined using the union type

export type HdsCardLevel = | HdsCardLevelValues.Base | HdsCardLevelValues.Mid | HdsCardLevelValues.High;

HdsBadgeColors is defined using template literals

export type HdsBadgeColors = `${HdsBadgeColorValues}`;

The template literal method allows you to use raw strings directly, meanwhile the union method means you have to use the exact enum values.

Ideally we should have some alignment on how these types are set. That could be a future alignment effort. My preference would be to use the template literal method so we can avoid having to do things like this in the template files.

Totally agree - would you mind adding at ticket in the backlog where we can note all the components that have issues like this so we can fix them all at once?

Created a ticket for this in the epic. https://hashicorp.atlassian.net/browse/HDS-5154

dchyun · 2025-07-15T19:42:40Z

showcase/types/global.d.ts

@@ -24,7 +25,8 @@ declare module '@glint/environment-ember-loose/registry' {
      PageTitle,
      RenderModifiersRegistry,
      ShowcaseTemplateRegistry,
-      EmberComposableHelpersRegistry {
+      EmberComposableHelpersRegistry,
+      PowerSelectRegistry {


[Note] Without adding this to the registry template errors were thrown in the Power Select saying PowerSelect was not defined.

dchyun · 2025-07-15T19:44:55Z

showcase/app/routes/page-foundations.ts

[Note] The diff can make this a little unclear, but the FocusRing route was removed, as it was not needed. A base level Foundations route file was separately added as it was missing previously. All other top level routes (components, overrides, utilities, etc) have route files.

Makes sense! Thank you for clarifying.

didoo

left a few comments

didoo · 2025-07-16T09:00:06Z

showcase/app/controllers/page-foundations/typography.js

Not sure why I implemented things in this way, tbh 🤷‍♂️🤦‍♂️
3ff5ddf

showcase/app/routes/page-layouts/flex.js

didoo · 2025-07-16T09:13:55Z

showcase/app/templates/page-layouts/flex.hbs

@@ -236,7 +234,7 @@
      <Hds::Layout::Grid @gap="48" @align="center" as |LG|>
        <Shw::Placeholder @text="item #1" @height="48" />
        <Shw::Placeholder @text="item #2" @height="48" />
-        <LG.Item @basis="25%" @grow="0" @shrink="0">
+        <LG.Item>


Yeah, probably remnants of a copy&paste from a similar example in the layout flex page.

showcase/app/templates/page-layouts/flex.hbs

didoo

LGTM!

shleewhite

🚢

hashibot-hds added the showcase label Jul 15, 2025

dchyun added 10 commits July 15, 2025 15:28

Feat: Convert PowerSelect showcase pages to TS

5037cfb

Feat: Convert Overrides showcase pages to TS

27c56f6

Feat: Convert AppFrame showcase pages to TS

1949122

Feat: Convert Flex showcase pages to TS

1ab4196

Feat: Convert Grid showcase pages to TS

c91afba

Feat: Add Layouts route to showcase

aad93bb

Feat: Convert Typography showcase pages to TS

2450790

Feat: Convert Elevation showcase pages to TS

4d4d1e5

Feat: Remove FocusRing route from showcase

dad7839

Feat: Add Foundations route to showcase

624605b

dchyun force-pushed the dchyun/showcase-overrides-ts-conversion branch from 97eced4 to 624605b Compare July 15, 2025 19:30

dchyun commented Jul 15, 2025

View reviewed changes

vercel bot deployed to Preview – hds-showcase July 15, 2025 19:32 View deployment

dchyun commented Jul 15, 2025

View reviewed changes

vercel bot deployed to Preview – hds-website July 15, 2025 19:34 View deployment

dchyun commented Jul 15, 2025

View reviewed changes

dchyun marked this pull request as ready for review July 15, 2025 20:04

dchyun requested a review from a team as a code owner July 15, 2025 20:04

didoo reviewed Jul 16, 2025

View reviewed changes

shleewhite previously approved these changes Jul 16, 2025

View reviewed changes

didoo reviewed Jul 16, 2025

View reviewed changes

showcase/app/templates/page-layouts/flex.hbs Outdated Show resolved Hide resolved

Fix: Remove Flex tag for Percy capture

fd5958b

dchyun dismissed shleewhite’s stale review via fd5958b July 16, 2025 14:26

vercel bot deployed to Preview – hds-showcase July 16, 2025 14:27 View deployment

vercel bot deployed to Preview – hds-website July 16, 2025 14:30 View deployment

dchyun requested review from didoo and shleewhite July 16, 2025 15:13

didoo approved these changes Jul 16, 2025

View reviewed changes

shleewhite approved these changes Jul 16, 2025

View reviewed changes

dchyun merged commit 216bd9f into main Jul 16, 2025
16 checks passed

dchyun deleted the dchyun/showcase-overrides-ts-conversion branch July 16, 2025 15:24

Showcase - Convert Foundations, Layouts, Utilities pages to TS #3016

Showcase - Convert Foundations, Layouts, Utilities pages to TS #3016

Uh oh!

Conversation

dchyun commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🛠️ Detailed description

🔗 External links

👀 Component checklist

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

didoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

didoo left a comment

Choose a reason for hiding this comment

Uh oh!

shleewhite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

dchyun commented Jul 15, 2025 •

edited

Loading

vercel bot commented Jul 15, 2025 •

edited

Loading