From 5786b8652113365f73cb8c79ada15d4841f30b43 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Tue, 22 Apr 2025 11:54:00 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20update=20text=20span?=
 =?UTF-8?q?=20elements=20with=20Hds::Text::Body=20(#2779)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16864
---
 .../rose/addon/components/rose/dropdown/button/index.hbs  | 4 ++--
 addons/rose/addon/components/rose/dropdown/index.hbs      | 4 +++-
 addons/rose/addon/components/rose/form/checkbox/index.hbs | 2 +-
 addons/rose/addon/components/rose/nav/sidebar/index.hbs   | 6 ++++--
 .../integration/components/rose/form/checkbox-test.js     | 2 +-
 .../app/components/ordered-series-diagram/item/index.hbs  | 8 ++++++--
 ui/admin/app/styles/app.scss                              | 5 -----
 ui/admin/app/templates/onboarding/success.hbs             | 4 ++--
 .../app/templates/scopes/scope/groups/group/members.hbs   | 4 ++--
 .../templates/scopes/scope/session-recordings/index.hbs   | 4 ++--
 .../app/templates/scopes/scope/users/user/accounts.hbs    | 4 ++--
 ui/desktop/app/components/credentials-panel/index.hbs     | 4 +++-
 ui/desktop/app/components/hidden-secret/index.hbs         | 2 +-
 ui/desktop/app/styles/app.scss                            | 8 --------
 .../app/templates/scopes/scope/projects/targets/index.hbs | 4 ++--
 .../integration/components/credentials-panel-test.js      | 2 +-
 16 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/button/index.hbs b/addons/rose/addon/components/rose/dropdown/button/index.hbs
index 9d31538a8..1d28db548 100644
--- a/addons/rose/addon/components/rose/dropdown/button/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/button/index.hbs
@@ -12,9 +12,9 @@
     {{if @iconOnly "has-icon-only"}}'
 >
   <span class='rose-dropdown-button-wrapper'>
-    <span class='rose-dropdown-button-body'>
+    <Hds::Text::Body>
       {{yield}}
-    </span>
+    </Hds::Text::Body>
 
     {{#if @iconOnly}}
       <Rose::Icon @name={{@iconOnly}} @size='medium' />
diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index ca00e4ae2..8ac2f1bb1 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/index.hbs
@@ -23,7 +23,9 @@
     {{/if}}
 
     <span class='rose-dropdown-trigger-text'>
-      {{@text}}
+      <Hds::Text::Body @weight='medium'>
+        {{@text}}
+      </Hds::Text::Body>
       {{#if @count}}
         <Hds::BadgeCount @text={{@count}} @size='small' />
       {{/if}}
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs
index e74b5138e..1466d173d 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.hbs
+++ b/addons/rose/addon/components/rose/form/checkbox/index.hbs
@@ -21,7 +21,7 @@
   />
 
   <label class='rose-form-checkbox-label' for={{this.id}}>
-    <span class='rose-form-checkbox-label-text'>{{@label}}</span>
+    <Hds::Text::Body>{{@label}}</Hds::Text::Body>
     {{#if @description}}
       <p class='rose-form-checkbox-label-description'>{{@description}}</p>
     {{/if}}
diff --git a/addons/rose/addon/components/rose/nav/sidebar/index.hbs b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
index ab79ffa9f..80cf8eac2 100644
--- a/addons/rose/addon/components/rose/nav/sidebar/index.hbs
+++ b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
@@ -12,9 +12,11 @@
 >
 
   {{#if @title}}
-    <span class='rose-nav-title' id='title-{{this.id}}'>
+    {{! Updated span however this is hidden by default in the desktop,
+    once side nav refactor is done this will ultimately be removed }}
+    <Hds::Text::Body class='rose-nav-title' id='title-{{this.id}}'>
       {{@title}}
-    </span>
+    </Hds::Text::Body>
   {{/if}}
 
   {{yield (hash link=(component 'rose/nav/link'))}}
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index aa52de47f..9a0557dfe 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
@@ -23,7 +23,7 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
       hbs`<Rose::Form::Checkbox @label="Label" @description="Hello world" />`,
     );
     assert.strictEqual(
-      find('.rose-form-checkbox-label-text').textContent.trim(),
+      find('.rose-form-checkbox-label span').textContent.trim(),
       'Label',
     );
     assert.strictEqual(
diff --git a/ui/admin/app/components/ordered-series-diagram/item/index.hbs b/ui/admin/app/components/ordered-series-diagram/item/index.hbs
index d85d3c4f9..c10d374ea 100644
--- a/ui/admin/app/components/ordered-series-diagram/item/index.hbs
+++ b/ui/admin/app/components/ordered-series-diagram/item/index.hbs
@@ -7,9 +7,13 @@
 
   <div class='ordered-series-diagram-item-content'>
     <Hds::IconTile @icon={{@icon}} @size='large' @color='hcp' />
-    <span class='ordered-series-diagram-item-title'>
+    <Hds::Text::Body
+      @weight='semibold'
+      @size='300'
+      class='ordered-series-diagram-item-title'
+    >
       {{yield}}
-    </span>
+    </Hds::Text::Body>
   </div>
 
   <div class='ordered-series-diagram-separator-icon'>
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 2fbcfa7d5..3ffe9dc07 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -217,10 +217,6 @@
     .create-resources-item-controller {
       margin-top: sizing.rems(xl);
 
-      .create-resources-item-controller-label {
-        color: var(--ui-gray);
-      }
-
       .create-resources-item-controller-copyable {
         margin: sizing.rems(xxs) 0 sizing.rems(l) 0;
       }
@@ -469,7 +465,6 @@
     }
 
     &-title {
-      font-weight: var(--token-typography-font-weight-semibold);
       margin-top: 0.5rem;
       width: 4rem;
     }
diff --git a/ui/admin/app/templates/onboarding/success.hbs b/ui/admin/app/templates/onboarding/success.hbs
index ed34e2cfb..6e22f1423 100644
--- a/ui/admin/app/templates/onboarding/success.hbs
+++ b/ui/admin/app/templates/onboarding/success.hbs
@@ -61,9 +61,9 @@
           <Hds::Text::Display @tag='h4'>
             {{t 'onboarding.success.titles.controller'}}
           </Hds::Text::Display>
-          <span class='create-resources-item-controller-label'>{{t
+          <Hds::Text::Body @color='faint'>{{t
               'onboarding.success.descriptions.controller'
-            }}</span>
+            }}</Hds::Text::Body>
           <div class='create-resources-item-controller-copyable'>
             <Hds::Copy::Snippet @textToCopy={{this.model.clusterUrl}} />
           </div>
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/members.hbs b/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
index ae4537d83..d48aa71b0 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
@@ -46,7 +46,7 @@
         <:body as |B|>
           <B.Tr>
             <B.Td>
-              <span class='hds-font-weight-semibold'>{{#if
+              <Hds::Text::Body @weight='semibold'>{{#if
                   (can 'read group' B.data)
                 }}
                   {{B.data.displayName}}
@@ -54,7 +54,7 @@
                     <br /><Hds::Badge @text={{B.data.accountName}} />
                   {{/if}}
                 {{/if}}
-              </span>
+              </Hds::Text::Body>
             </B.Td>
             <B.Td>
               <Hds::Copy::Snippet
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
index 8d90c7075..f4bb7ccef 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
@@ -144,11 +144,11 @@
               {{! Created Time }}
               <B.Td>
                 {{#if B.data.created_time}}
-                  <span class='hds-foreground-faint'>
+                  <Hds::Text::Body @color='faint'>
                     <time datetime={{format-date-iso B.data.created_time}}>
                       {{format-date-iso B.data.created_time}}
                     </time>
-                  </span>
+                  </Hds::Text::Body>
                 {{/if}}
               </B.Td>
               {{! Status }}
diff --git a/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs b/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
index ef538cbe2..6c9c302ed 100644
--- a/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
@@ -46,7 +46,7 @@
         <:body as |B|>
           <B.Tr>
             <B.Td>
-              <span class='hds-font-weight-semibold'>
+              <Hds::Text::Body @weight='semibold'>
                 {{#if (can 'read accounts' B.data)}}
                   <LinkTo
                     @route='scopes.scope.auth-methods.auth-method.accounts.account'
@@ -57,7 +57,7 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-              </span>
+              </Hds::Text::Body>
 
               <p>{{B.data.description}}</p>
             </B.Td>
diff --git a/ui/desktop/app/components/credentials-panel/index.hbs b/ui/desktop/app/components/credentials-panel/index.hbs
index f2e9f40f7..0a5df3ed4 100644
--- a/ui/desktop/app/components/credentials-panel/index.hbs
+++ b/ui/desktop/app/components/credentials-panel/index.hbs
@@ -64,7 +64,9 @@
         {{#if credential.secrets}}
           {{#each (order-by credential.secrets this.customOrder) as |secret|}}
             <li class='secret-container'>
-              <span class='secret-key'>{{secret.key}}</span>
+              <Hds::Text::Body
+                @weight='semibold'
+              >{{secret.key}}</Hds::Text::Body>
               <HiddenSecret @secret={{secret.value}} />
             </li>
           {{/each}}
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index 3dd25632e..5e70bc2dc 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -16,7 +16,7 @@
     {{#if this.isHidden}}
       <pre>{{this.displaySecretValue}}</pre>
     {{else}}
-      <span class='secret-mask'>{{this.textMask}}</span>
+      <Hds::Text::Body @color='disabled'>{{this.textMask}}</Hds::Text::Body>
     {{/if}}
   </div>
 
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 8ef4fa919..5cb5b718c 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -316,10 +316,6 @@
   display: flex;
   align-items: center;
 
-  .secret-mask {
-    color: var(--ui-gray-subtler-2);
-  }
-
   .secret-content {
     display: flex;
     width: 100%;
@@ -472,10 +468,6 @@
         border-bottom: 0;
       }
 
-      .secret-key {
-        font-weight: var(--token-typography-font-weight-semibold);
-      }
-
       .hidden-secret {
         margin: 0.25rem 0;
       }
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index fc49e2786..6950a86cf 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -95,7 +95,7 @@
     <:body as |B|>
       <B.Tr>
         <B.Td>
-          <span class='hds-font-weight-semibold'>
+          <Hds::Text::Body @weight='semibold'>
             {{#if (can 'read model' B.data)}}
               <LinkTo
                 data-test-visit-target={{B.data.id}}
@@ -111,7 +111,7 @@
             {{#if B.data.description}}
               <p>{{B.data.description}}</p>
             {{/if}}
-          </span>
+          </Hds::Text::Body>
         </B.Td>
         <B.Td data-test-target-aliases={{B.data.id}}>
           {{truncate-list 'actions.more' B.data.associatedAliases}}
diff --git a/ui/desktop/tests/integration/components/credentials-panel-test.js b/ui/desktop/tests/integration/components/credentials-panel-test.js
index d37fc4d5e..af4b24ca0 100644
--- a/ui/desktop/tests/integration/components/credentials-panel-test.js
+++ b/ui/desktop/tests/integration/components/credentials-panel-test.js
@@ -74,7 +74,7 @@ module('Integration | Component | credentials-panel', function (hooks) {
     `);
     assert.dom('.credential-name').hasText('Credential Library 2');
     assert.dom('.secret-container').isVisible();
-    assert.dom('.secret-key').hasText('username');
+    assert.dom('.secret-container span').hasText('username');
   });
 
   test('it shows code editor when toggle clicked', async function (assert) {