Showcase - Convert utilities pages to TypeScript #3004

dchyun · 2025-07-10T16:03:19Z

📌 Summary

If merged, this PR would convert the following pages in the utilities folder of the Showcase to TypeScript

DisclosurePrimitive
PopoverPrimitive
DismissButton
Base level utilities route

The best way to understand the changes in this PR is to walk through each commit in the "Files changed" tab, I have added comments there explaining why I made the changes.

🔗 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-10T16:03:24Z

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

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jul 14, 2025 4:56pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jul 14, 2025 4:56pm

showcase/app/controllers/utilities/disclosure-primitive.ts

dchyun · 2025-07-10T19:57:08Z

showcase/app/routes/utilities/popover-primitive.ts

+  model() {
+    const DETECTIONS: HdsAnchoredPositionOptions['enableCollisionDetection'][] =
+      [false, true, 'flip', 'shift', 'auto'];
+    const STRATEGIES: HdsAnchoredPositionOptions['strategy'][] = [


[Note] Added the strategies options here as they were being passed in as a string array in the template, which caused issues when compared against the strategy type

dchyun · 2025-07-10T19:57:47Z

showcase/app/templates/utilities/disclosure-primitive.hbs

      <button type="button" {{on "click" (fn this.toggleState "open")}}>Open</button>
      <button type="button" {{on "click" (fn this.toggleState "close")}}>Close</button>
-      <button type="button" {{on "click" this.toggleState}}>Toggle</button>
+      <button type="button" {{on "click" (fn this.toggleState "")}}>Toggle</button>


[Note] this.toggleState expect 2 arguments

showcase/app/templates/utilities/popover-primitive.hbs

dchyun · 2025-07-10T19:59:19Z

showcase/app/templates/utilities/popover-primitive.hbs

  <Shw::Text::H3>Strategy</Shw::Text::H3>

  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="8rem"}} as |SF|>
-    {{#let (array "absolute" "fixed") as |strategies|}}


[Note] See comment above about setting this in the route instead

dchyun · 2025-07-10T20:00:24Z

showcase/app/routes/utilities/popover-primitive.ts

+
+export default class PageComponentsPopoverPrimitiveRoute extends Route {
+  model() {
+    const DETECTIONS: HdsAnchoredPositionOptions['enableCollisionDetection'][] =


[Note] Added the detection options here as they were being passed in as a string array in the template, which caused issues when compared against the detection type

dchyun · 2025-07-10T20:00:38Z

showcase/app/templates/utilities/popover-primitive.hbs

  <Shw::Text::Body>Scroll within the boxes to see the collision detection in action</Shw::Text::Body>

  <Shw::Grid @columns={{4}} @gap="2rem" {{style margin-bottom="6rem"}} as |SF|>
-    {{#let (array false true null null "flip" "shift" "auto" null) as |detections|}}


[Note] See comment above about setting this in the route instead

dchyun · 2025-07-10T20:01:42Z

showcase/app/templates/utilities/popover-primitive.hbs

+          </div>
+        </Shw::Autoscrollable>
+      </SF.Item>
+      {{#if (eq detection true)}}


[Note] This if block is used to maintain the existing grid layout where the first row has two examples in a column of 4, and second row has 3 examples in a column of 4

dchyun · 2025-07-10T20:02:24Z

showcase/app/templates/utilities/popover-primitive.hbs

          <Hds::PopoverPrimitive
            @enableSoftEvents={{eq interaction "soft"}}
            @enableClickEvents={{eq interaction "click"}}
-            @enableCollisionDetection={{true}}


[Note] enableCollisionDetection should be set on the |PP|.setupPrimitivePopover.

showcase/app/controllers/utilities.ts

didoo

@dchyun I know the PR is already merged, but I have noticed a bunch of things that may need a follow-up PR to be addressed

/cc @shleewhite

didoo · 2025-07-14T19:21:20Z

showcase/app/controllers/page-utilities.ts

+import type RouterService from '@ember/routing/router-service';
+
+export default class PageUtilitiesController extends Controller {
+  @service declare readonly router: RouterService;


[note] in @shleewhite PR #2999 this was @service declare router: RouterService;. Which one is right? can we keep them consistent?

@aklkv suggested using readonly in his comment. @shleewhite do we have a preferred option here?

didoo · 2025-07-14T19:52:30Z

showcase/app/routes/page-utilities/dismiss-button.ts

should this also have the export type + ModelFrom like the other files? with @shleewhite we discussed that this should become a code pattern/convention: #2999 (comment)

didoo · 2025-07-14T19:56:13Z

showcase/app/templates/page-utilities/disclosure-primitive.hbs

      <button type="button" {{on "click" (fn this.toggleState "open")}}>Open</button>
      <button type="button" {{on "click" (fn this.toggleState "close")}}>Close</button>
-      <button type="button" {{on "click" this.toggleState}}>Toggle</button>
+      <button type="button" {{on "click" (fn this.toggleState "")}}>Toggle</button>


[suggestion] instead of this, what if we make the argument optional (which is also more correct from a JS code perspective, since there is an else.

ref. comment: #3004

didoo · 2025-07-14T19:58:41Z

showcase/app/templates/page-utilities/popover-primitive.hbs

-          <div class="shw-utilities-popover-primitive-fake-popover" {{PP.setupPrimitivePopover}}>
+          <div
+            class="shw-utilities-popover-primitive-fake-popover"
+            {{PP.setupPrimitivePopover anchoredPositionOptions=(hash)}}


[todo] we should add a comment here, that points to the Jira ticket that proposes making the anchoredPositionOptions optional

ref. comment: #3004

showcase/app/templates/page-utilities/popover-primitive.hbs

hashibot-hds added the showcase label Jul 10, 2025

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

dchyun mentioned this pull request Jul 10, 2025

hds-anchored-position - Fix type issues #3005

Merged

4 tasks

dchyun force-pushed the dchyun/showcase-utilities-ts-conversion branch from 8849ae5 to d31d9fc Compare July 10, 2025 18:57

vercel bot deployed to Preview – hds-showcase July 10, 2025 18:59 View deployment

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

dchyun force-pushed the dchyun/showcase-utilities-ts-conversion branch from d31d9fc to aedf7cc Compare July 10, 2025 19:32

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

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

dchyun commented Jul 10, 2025

View reviewed changes

showcase/app/controllers/utilities/disclosure-primitive.ts Show resolved Hide resolved

dchyun commented Jul 10, 2025

View reviewed changes

showcase/app/templates/utilities/popover-primitive.hbs Show resolved Hide resolved

dchyun commented Jul 10, 2025

View reviewed changes

aklkv reviewed Jul 11, 2025

View reviewed changes

showcase/app/controllers/utilities.ts Outdated Show resolved Hide resolved

dchyun force-pushed the dchyun/showcase-utilities-ts-conversion branch from aedf7cc to 911fa9f Compare July 11, 2025 18:53

vercel bot deployed to Preview – hds-showcase July 11, 2025 18:55 View deployment

vercel bot deployed to Preview – hds-website July 11, 2025 18:57 View deployment

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

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

dchyun force-pushed the dchyun/showcase-utilities-ts-conversion branch from c9cf99c to 5826897 Compare July 14, 2025 15:20

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

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

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

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

dchyun added 6 commits July 14, 2025 12:51

feat: convert DisclosurePrimitive showcase page to TS

08f1b79

feat: convert PopoverPrimitive showcase pages to ts

a272380

feat: convert DismissButton showcase pages to TS

a769f17

feat: convert Utilities showcase pages to TS

ab2597c

Fix: Update utilities router to use RouterService

b2f4f1a

Fix: Utilities router willDestroy function call

fb52e23

dchyun force-pushed the dchyun/showcase-utilities-ts-conversion branch from 3f957df to fb52e23 Compare July 14, 2025 16:52

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

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

dchyun marked this pull request as ready for review July 14, 2025 17:12

dchyun requested a review from a team as a code owner July 14, 2025 17:12

shleewhite approved these changes Jul 14, 2025

View reviewed changes

dchyun merged commit 7ca7912 into main Jul 14, 2025
16 checks passed

dchyun deleted the dchyun/showcase-utilities-ts-conversion branch July 14, 2025 19:08

didoo reviewed Jul 14, 2025

View reviewed changes

dchyun mentioned this pull request Jul 15, 2025

Showcase - Utilities pages alignments #3014

Merged

4 tasks

Showcase - Convert utilities pages to TypeScript #3004

Showcase - Convert utilities pages to TypeScript #3004

Uh oh!

Conversation

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

Uh oh!

📌 Summary

🔗 External links

👀 Component checklist

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

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!

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!

Uh oh!

Uh oh!

didoo left a comment

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dchyun commented Jul 10, 2025 •

edited

Loading

vercel bot commented Jul 10, 2025 •

edited

Loading