From 856235abb9027ab68ce8dcf23ff4641ea8fac57e Mon Sep 17 00:00:00 2001
From: Jordan Reimer <zofskeez@gmail.com>
Date: Tue, 15 Feb 2022 10:43:37 -0700
Subject: [PATCH] Tool Tip Styling Issue (#14064)

* updates dropdown transform codemod to apply @defaultClass arg to Content component

* runs codemod and transforms class to @defaultClass on basic dropdown Content component

* adds changelog entry

* removes changelog entry
---
 .../templates/components/calendar-widget.hbs  |  2 +-
 .../templates/components/clients/history.hbs  |  4 +-
 .../components/console/command-input.hbs      |  2 +-
 .../components/database-role-edit.hbs         |  2 +-
 ui/app/templates/components/date-dropdown.hbs |  4 +-
 .../components/diff-version-selector.hbs      |  4 +-
 .../components/hover-copy-button.hbs          |  2 +-
 .../templates/components/namespace-picker.hbs |  2 +-
 .../components/raft-storage-overview.hbs      |  2 +-
 .../components/secret-edit-toolbar.hbs        |  2 +-
 .../templates/components/secret-form-show.hbs |  2 +-
 .../secret-list/transform-list-item.hbs       |  2 +-
 .../components/secret-version-menu.hbs        |  2 +-
 ui/app/templates/components/status-menu.hbs   |  2 +-
 .../components/transformation-edit.hbs        |  2 +-
 .../templates/components/wizard-content.hbs   |  2 +-
 .../vault/cluster/access/methods.hbs          |  2 +-
 .../cluster/secrets/backend/versions.hbs      |  4 +-
 .../addon/components/autocomplete-input.hbs   |  2 +-
 .../core/addon/components/info-table-row.hbs  |  4 +-
 .../addon/templates/components/box-radio.hbs  |  2 +-
 .../templates/components/confirm-action.hbs   |  2 +-
 .../templates/components/info-tooltip.hbs     |  6 +--
 .../components/linkable-item/content.hbs      |  2 +-
 .../addon/templates/components/popup-menu.hbs |  2 +-
 .../components/replication-secondary-card.hbs |  2 +-
 .../templates/components/toolbar-link.hbs     |  2 +-
 .../templates/components/ttl-picker2.hbs      |  2 +-
 ui/scripts/codemods/dropdown-transform.js     | 52 ++++++++-----------
 29 files changed, 58 insertions(+), 64 deletions(-)

diff --git a/ui/app/templates/components/calendar-widget.hbs b/ui/app/templates/components/calendar-widget.hbs
index 6796e0ca52..5c44e1cd86 100644
--- a/ui/app/templates/components/calendar-widget.hbs
+++ b/ui/app/templates/components/calendar-widget.hbs
@@ -9,7 +9,7 @@
     {{@endTimeDisplay}}
     <Chevron @direction="down" @isButton={{true}} />
   </D.Trigger>
-  <D.Content class="popup-menu-content calendar-content">
+  <D.Content @defaultClass="popup-menu-content calendar-content">
     <nav class="box menu">
       <div class="calendar-title is-subtitle-gray">DATE OPTIONS</div>
       <ul class="menu-list">
diff --git a/ui/app/templates/components/clients/history.hbs b/ui/app/templates/components/clients/history.hbs
index 6102459bd4..ace2a53e82 100644
--- a/ui/app/templates/components/clients/history.hbs
+++ b/ui/app/templates/components/clients/history.hbs
@@ -152,7 +152,7 @@
             {{or this.startMonth "Month"}}
             <Chevron @direction="down" @isButton={{true}} />
           </D.Trigger>
-          <D.Content class="popup-menu-content is-wide">
+          <D.Content @defaultClass="popup-menu-content is-wide">
             <nav class="box menu scroll">
               <ul class="menu-list">
                 {{#each this.months as |month|}}
@@ -177,7 +177,7 @@
             {{or this.startYear "Year"}}
             <Chevron @direction="down" @isButton={{true}} />
           </D.Trigger>
-          <D.Content class="popup-menu-content is-wide">
+          <D.Content @defaultClass="popup-menu-content is-wide">
             <nav class="box menu">
               <ul class="menu-list">
                 {{#each this.years as |year|}}
diff --git a/ui/app/templates/components/console/command-input.hbs b/ui/app/templates/components/console/command-input.hbs
index 16515dcb30..1fcde14e66 100644
--- a/ui/app/templates/components/console/command-input.hbs
+++ b/ui/app/templates/components/console/command-input.hbs
@@ -19,7 +19,7 @@
         />
       </button>
     </d.Trigger>
-    <d.Content class="tool-tip">
+    <d.Content @defaultClass="tool-tip">
       <div class="box">
         {{#if this.isFullscreen}}
           Minimize
diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs
index 65fd3ecdc4..b504c0a272 100644
--- a/ui/app/templates/components/database-role-edit.hbs
+++ b/ui/app/templates/components/database-role-edit.hbs
@@ -121,7 +121,7 @@
                     Save
                   </button>
                 </T.Trigger>
-                <T.Content class="tool-tip">
+                <T.Content @defaultClass="tool-tip">
                   <div class="box">
                     You don't have permissions required to
                     {{if (eq @mode "create") "create" "update"}}
diff --git a/ui/app/templates/components/date-dropdown.hbs b/ui/app/templates/components/date-dropdown.hbs
index bbd5cde03d..1c72bb96e5 100644
--- a/ui/app/templates/components/date-dropdown.hbs
+++ b/ui/app/templates/components/date-dropdown.hbs
@@ -7,7 +7,7 @@
     {{or this.startMonth "Month"}}
     <Chevron @direction="down" @isButton={{true}} />
   </D.Trigger>
-  <D.Content class="popup-menu-content is-wide">
+  <D.Content @defaultClass="popup-menu-content is-wide">
     <nav class="box menu scroll">
       <ul class="menu-list">
         {{#each this.months as |month|}}
@@ -32,7 +32,7 @@
     {{or this.startYear "Year"}}
     <Chevron @direction="down" @isButton={{true}} />
   </D.Trigger>
-  <D.Content class="popup-menu-content is-wide">
+  <D.Content @defaultClass="popup-menu-content is-wide">
     <nav class="box menu">
       <ul class="menu-list">
         {{#each this.years as |year|}}
diff --git a/ui/app/templates/components/diff-version-selector.hbs b/ui/app/templates/components/diff-version-selector.hbs
index b590a10f9e..aa66f777e6 100644
--- a/ui/app/templates/components/diff-version-selector.hbs
+++ b/ui/app/templates/components/diff-version-selector.hbs
@@ -11,7 +11,7 @@
         {{or this.leftSideVersionSelected @model.currentVersion}}
         <Chevron @direction="down" @isButton={{true}} />
       </D.Trigger>
-      <D.Content class="popup-menu-content">
+      <D.Content @defaultClass="popup-menu-content">
         <nav class="box menu">
           <ul class="menu-list">
             {{#each (reverse @model.versions) as |leftSideSecretVersion|}}
@@ -54,7 +54,7 @@
         {{or this.rightSideVersionSelected this.rightSideVersionInit}}
         <Chevron @direction="down" @isButton={{true}} />
       </D.Trigger>
-      <D.Content class="popup-menu-content">
+      <D.Content @defaultClass="popup-menu-content">
         <nav class="box menu">
           <ul class="menu-list">
             {{#each (reverse @model.versions) as |rightSideSecretVersion|}}
diff --git a/ui/app/templates/components/hover-copy-button.hbs b/ui/app/templates/components/hover-copy-button.hbs
index a10b935748..514d0d915a 100644
--- a/ui/app/templates/components/hover-copy-button.hbs
+++ b/ui/app/templates/components/hover-copy-button.hbs
@@ -9,7 +9,7 @@
       <Icon @name="clipboard-copy" aria-label="Copy" />
     </CopyButton>
   </T.Trigger>
-  <T.Content class="tool-tip">
+  <T.Content @defaultClass="tool-tip">
     <div class="box" data-test-hover-copy-tooltip-text>
       {{this.tooltipText}}
     </div>
diff --git a/ui/app/templates/components/namespace-picker.hbs b/ui/app/templates/components/namespace-picker.hbs
index 5da89e4999..342943d3f6 100644
--- a/ui/app/templates/components/namespace-picker.hbs
+++ b/ui/app/templates/components/namespace-picker.hbs
@@ -19,7 +19,7 @@
         {{/if}}
         <Chevron @direction="down" @class="has-text-white auto-width is-status-chevron" />
       </D.Trigger>
-      <D.Content class="namespace-picker-content">
+      <D.Content @defaultClass="namespace-picker-content">
         <div class="is-mobile level-left">
           {{#unless this.isUserRootNamespace}}
             <NamespaceLink
diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index a93f554fbf..5b4db33d9a 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -16,7 +16,7 @@
         Snapshots
         <Chevron @direction="down" @isButton={{true}} />
       </D.Trigger>
-      <D.Content class="popup-menu-content">
+      <D.Content @defaultClass="popup-menu-content">
         <nav class="box menu">
           <ul class="menu-list">
             <li class="action">
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index a7df6733c9..ecb0f5db82 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -42,7 +42,7 @@
             Copy
             <Chevron @direction="down" @isButton={{true}} />
           </D.Trigger>
-          <D.Content class="popup-menu-content is-wide">
+          <D.Content @defaultClass="popup-menu-content is-wide">
             <nav class="box menu">
               <ul class="menu-list">
                 <li class="action">
diff --git a/ui/app/templates/components/secret-form-show.hbs b/ui/app/templates/components/secret-form-show.hbs
index 238711121e..05164297d2 100644
--- a/ui/app/templates/components/secret-form-show.hbs
+++ b/ui/app/templates/components/secret-form-show.hbs
@@ -51,7 +51,7 @@
               Version created
               {{date-format @modelForData.createdTime "MMM dd, yyyy hh:mm a"}}
             </T.Trigger>
-            <T.Content class="tool-tip smaller-font">
+            <T.Content @defaultClass="tool-tip smaller-font">
               <div class="box" data-test-hover-copy-tooltip-text>
                 {{@modelForData.createdTime}}
               </div>
diff --git a/ui/app/templates/components/secret-list/transform-list-item.hbs b/ui/app/templates/components/secret-list/transform-list-item.hbs
index 4c98f3d076..4ebda7e8c5 100644
--- a/ui/app/templates/components/secret-list/transform-list-item.hbs
+++ b/ui/app/templates/components/secret-list/transform-list-item.hbs
@@ -55,7 +55,7 @@
             <T.Trigger @tabindex={{false}}>
               {{@item.id}}
             </T.Trigger>
-            <T.Content class="tool-tip">
+            <T.Content @defaultClass="tool-tip">
               <div class="box">
                 This is a built-in HashiCorp
                 {{@itemType}}. It can't be viewed or edited.
diff --git a/ui/app/templates/components/secret-version-menu.hbs b/ui/app/templates/components/secret-version-menu.hbs
index 1f64086d1f..e2b17e2989 100644
--- a/ui/app/templates/components/secret-version-menu.hbs
+++ b/ui/app/templates/components/secret-version-menu.hbs
@@ -8,7 +8,7 @@
     {{@version.version}}
     <Chevron @direction="down" @isButton={{true}} />
   </D.Trigger>
-  <D.Content class="popup-menu-content">
+  <D.Content @defaultClass="popup-menu-content">
     <nav class="box menu">
       <ul class="menu-list">
         {{#if (has-block)}}
diff --git a/ui/app/templates/components/status-menu.hbs b/ui/app/templates/components/status-menu.hbs
index 286630ed9d..de292cd414 100644
--- a/ui/app/templates/components/status-menu.hbs
+++ b/ui/app/templates/components/status-menu.hbs
@@ -11,7 +11,7 @@
     </div>
     <Chevron @direction="down" class="has-text-white is-status-chevron" />
   </d.Trigger>
-  <d.Content class={{concat "status-menu-content status-menu-content-" this.type}}>
+  <d.Content @defaultClass={{concat "status-menu-content status-menu-content-" this.type}}>
     {{#if (eq this.type "user")}}
       {{#if (and this.cluster.name this.auth.currentToken)}}
         <AuthInfo @activeClusterName={{this.cluster.name}} @onLinkClick={{action this.onLinkClick}} />
diff --git a/ui/app/templates/components/transformation-edit.hbs b/ui/app/templates/components/transformation-edit.hbs
index 9ec71e2598..d059ad40a3 100644
--- a/ui/app/templates/components/transformation-edit.hbs
+++ b/ui/app/templates/components/transformation-edit.hbs
@@ -33,7 +33,7 @@
                 Delete transformation
               </button>
             </T.Trigger>
-            <T.Content class="tool-tip">
+            <T.Content @defaultClass="tool-tip">
               <div class="box">
                 This transformation is in use by a role and can’t be deleted.
               </div>
diff --git a/ui/app/templates/components/wizard-content.hbs b/ui/app/templates/components/wizard-content.hbs
index 789372616d..1c8b34c1e6 100644
--- a/ui/app/templates/components/wizard-content.hbs
+++ b/ui/app/templates/components/wizard-content.hbs
@@ -21,7 +21,7 @@
       <T.Trigger @tabindex="-1">
         <WizardProgress @currentFeatureProgress={{this.currentFeatureProgress}} @progressBar={{this.progressBar}} />
       </T.Trigger>
-      <T.Content class="tool-tip">
+      <T.Content @defaultClass="tool-tip">
         <div class="box">
           {{#if this.currentTutorialProgress}}
             {{this.currentTutorialProgress.text}}
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index d612924545..b5bb955725 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -34,7 +34,7 @@
                 class="has-text-grey-light"
               />
             </T.Trigger>
-            <T.Content class="tool-tip">
+            <T.Content @defaultClass="tool-tip">
               <div class="box">
                 {{method.methodType}}
               </div>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
index 86d2849db6..955325a7bf 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
@@ -60,7 +60,7 @@
               Created
               {{date-format list.item.createdTime "MMM dd, yyyy hh:mm a"}}
             </T.Trigger>
-            <T.Content class="tool-tip smaller-font">
+            <T.Content @defaultClass="tool-tip smaller-font">
               <div class="box" data-test-hover-copy-tooltip-text>
                 {{list.item.createdTime}}
               </div>
@@ -78,7 +78,7 @@
         >
           <Icon @name="more-horizontal" aria-label="More options" class="has-text-black auto-width" />
         </D.Trigger>
-        <D.Content class="popup-menu-content">
+        <D.Content @defaultClass="popup-menu-content">
           <nav class="box menu">
             <ul class="menu-list">
               <li class="action">
diff --git a/ui/lib/core/addon/components/autocomplete-input.hbs b/ui/lib/core/addon/components/autocomplete-input.hbs
index 928f886622..f808ae6a5b 100644
--- a/ui/lib/core/addon/components/autocomplete-input.hbs
+++ b/ui/lib/core/addon/components/autocomplete-input.hbs
@@ -12,7 +12,7 @@
       {{on "input" this.onInput}}
     />
     <BasicDropdown @registerAPI={{fn (mut this.dropdownAPI)}} @renderInPlace={{true}} as |D|>
-      <D.Content class="autocomplete-input">
+      <D.Content @defaultClass="autocomplete-input">
         {{#each @options as |option|}}
           <div class="autocomplete-input-option" role="button" {{on "click" (fn this.selectOption option.value)}}>
             {{option.label}}
diff --git a/ui/lib/core/addon/components/info-table-row.hbs b/ui/lib/core/addon/components/info-table-row.hbs
index 7d1633223c..3d6715bb73 100644
--- a/ui/lib/core/addon/components/info-table-row.hbs
+++ b/ui/lib/core/addon/components/info-table-row.hbs
@@ -11,7 +11,7 @@
             <T.Trigger @tabindex={{false}}>
               <span class="is-label has-text-grey-dark" data-test-row-label={{@label}}>{{@label}}</span>
             </T.Trigger>
-            <T.Content class="tool-tip">
+            <T.Content @defaultClass="tool-tip">
               <div class="box fit-content" data-test-label-tooltip>
                 {{@label}}
               </div>
@@ -65,7 +65,7 @@
               <T.Trigger @tabindex={{false}}>
                 <span class="is-word-break has-text-black" data-test-row-value={{this.label}}>{{this.value}}</span>
               </T.Trigger>
-              <T.Content class="tool-tip">
+              <T.Content @defaultClass="tool-tip">
                 <CopyButton
                   @clipboardText={{@tooltipText}}
                   @success={{action (set-flash-message "Data copied!")}}
diff --git a/ui/lib/core/addon/templates/components/box-radio.hbs b/ui/lib/core/addon/templates/components/box-radio.hbs
index bb2e0887db..f25e309878 100644
--- a/ui/lib/core/addon/templates/components/box-radio.hbs
+++ b/ui/lib/core/addon/templates/components/box-radio.hbs
@@ -21,7 +21,7 @@
           />
         </label>
       </T.Trigger>
-      <T.Content class="tool-tip">
+      <T.Content @defaultClass="tool-tip">
         <div class="box">
           {{@tooltipMessage}}
         </div>
diff --git a/ui/lib/core/addon/templates/components/confirm-action.hbs b/ui/lib/core/addon/templates/components/confirm-action.hbs
index 02352039a1..5ad791377e 100644
--- a/ui/lib/core/addon/templates/components/confirm-action.hbs
+++ b/ui/lib/core/addon/templates/components/confirm-action.hbs
@@ -18,7 +18,7 @@
         <Chevron @direction={{if this.showConfirm "up" "down"}} />
       {{/if}}
     </d.Trigger>
-    <d.Content class="popup-menu-content">
+    <d.Content @defaultClass="popup-menu-content">
       <div class="box confirm-action-message">
         <div class="message is-highlight">
           <div class="message-title">
diff --git a/ui/lib/core/addon/templates/components/info-tooltip.hbs b/ui/lib/core/addon/templates/components/info-tooltip.hbs
index 13a279958e..e1e82930f8 100644
--- a/ui/lib/core/addon/templates/components/info-tooltip.hbs
+++ b/ui/lib/core/addon/templates/components/info-tooltip.hbs
@@ -1,13 +1,13 @@
 <ToolTip as |d|>
   <d.Trigger
-    @tagName="button"
+    @htmlTag="button"
     @type="button"
-    @class="tool-tip-trigger button is-ghost is-compact"
+    class="tool-tip-trigger button is-ghost is-compact"
     data-test-tool-tip-trigger={{true}}
   >
     <Icon @name="info" class="auto-width" aria-label="help" />
   </d.Trigger>
-  <d.Content @class="tool-tip">
+  <d.Content @defaultClass="tool-tip">
     <div class="box">
       {{yield}}
     </div>
diff --git a/ui/lib/core/addon/templates/components/linkable-item/content.hbs b/ui/lib/core/addon/templates/components/linkable-item/content.hbs
index fa6612c57a..d8f77fa01b 100644
--- a/ui/lib/core/addon/templates/components/linkable-item/content.hbs
+++ b/ui/lib/core/addon/templates/components/linkable-item/content.hbs
@@ -5,7 +5,7 @@
         <T.Trigger>
           <Icon @name={{@glyph}} class="has-text-grey-light" data-test-linkable-item-glyph />
         </T.Trigger>
-        <T.Content class="tool-tip">
+        <T.Content @defaultClass="tool-tip">
           <div class="box">
             {{or @glyphText @title}}
           </div>
diff --git a/ui/lib/core/addon/templates/components/popup-menu.hbs b/ui/lib/core/addon/templates/components/popup-menu.hbs
index d13898b778..6b3aef4e6c 100644
--- a/ui/lib/core/addon/templates/components/popup-menu.hbs
+++ b/ui/lib/core/addon/templates/components/popup-menu.hbs
@@ -6,7 +6,7 @@
   >
     <Icon @name="more-horizontal" class="has-text-black auto-width" aria-label="More options" />
   </d.Trigger>
-  <d.Content class={{concat "popup-menu-content " this.contentClass}}>
+  <d.Content @defaultClass={{concat "popup-menu-content " this.contentClass}}>
     <div class="box">
       {{yield}}
     </div>
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 9175747d64..fa66263457 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -55,7 +55,7 @@
           <T.Trigger>
             <Icon @name="check-circle" class="has-text-success" data-test-glyph />
           </T.Trigger>
-          <T.Content class="tool-tip">
+          <T.Content @defaultClass="tool-tip">
             <div class="box">
               Everything is in sync
             </div>
diff --git a/ui/lib/core/addon/templates/components/toolbar-link.hbs b/ui/lib/core/addon/templates/components/toolbar-link.hbs
index ea9bc6ca54..dc20cf54fa 100644
--- a/ui/lib/core/addon/templates/components/toolbar-link.hbs
+++ b/ui/lib/core/addon/templates/components/toolbar-link.hbs
@@ -29,7 +29,7 @@
           <Icon @name={{this.glyph}} data-test-icon={{this.glyph}} />
         </LinkToComponent>
       </T.Trigger>
-      <T.Content class="tool-tip smaller-font">
+      <T.Content @defaultClass="tool-tip smaller-font">
         <div class="box" data-test-disabled-tooltip>
           {{this.disabledTooltip}}
         </div>
diff --git a/ui/lib/core/addon/templates/components/ttl-picker2.hbs b/ui/lib/core/addon/templates/components/ttl-picker2.hbs
index 80713a74b1..52de2001c6 100644
--- a/ui/lib/core/addon/templates/components/ttl-picker2.hbs
+++ b/ui/lib/core/addon/templates/components/ttl-picker2.hbs
@@ -14,7 +14,7 @@
         <T.Trigger data-test-tooltip-trigger tabindex="-1">
           <Icon @name="info" aria-label="description" />
         </T.Trigger>
-        <T.Content class="tool-tip">
+        <T.Content @defaultClass="tool-tip">
           <div class="box" data-test-hover-copy-tooltip-text>
             {{this.description}}
           </div>
diff --git a/ui/scripts/codemods/dropdown-transform.js b/ui/scripts/codemods/dropdown-transform.js
index 9121d1d8c5..7018478640 100644
--- a/ui/scripts/codemods/dropdown-transform.js
+++ b/ui/scripts/codemods/dropdown-transform.js
@@ -8,37 +8,31 @@
  */
 
 module.exports = () => {
-  const evalTag = (tag, prefix) => {
-    switch (tag) {
-      case `${prefix}.trigger`:
-        return `${prefix}.Trigger`;
-      case `${prefix}.content`:
-        return `${prefix}.Content`;
-    }
-  };
-  // remove @ symbol from class and change @tagName to @htmlTag
-  const transformAttrs = (attrs) => {
-    attrs.forEach((attr) => {
-      if (attr.name === '@class') {
-        attr.name = 'class';
-      } else if (attr.name.includes('tagName')) {
-        attr.name = '@htmlTag';
-      }
-    });
-  };
-
   return {
     ElementNode(node) {
-      // BasicDropdown and Tooltip components yield variable is either d, dd, or T
-      const prefixes = ['d', 'D', 'dd', 'T'];
-      // capitalize trigger and content and transform attributes
-      for (let i = 0; i < prefixes.length; i++) {
-        const newTag = evalTag(node.tag, prefixes[i]);
-        if (newTag) {
-          node.tag = newTag;
-          transformAttrs(node.attributes);
-          break;
-        }
+      // ensure we have the right parent node by first looking for BasicDropdown or ToolTip nodes
+      if (['BasicDropdown', 'ToolTip'].includes(node.tag)) {
+        node.children.forEach((child) => {
+          // capitalize trigger and content and transform attributes
+          if (child.type === 'ElementNode' && child.tag.match(/\.(content|trigger)/gi)) {
+            const { tag } = child;
+            const char = tag.charAt(tag.indexOf('.') + 1);
+            child.tag = tag.replace(char, char.toUpperCase());
+            // remove @ symbol from class and change @tagName to @htmlTag
+            // Content component does not use splattributes -- apply class with @defaultClass arg
+            child.attributes.forEach((attr) => {
+              if (attr.name.includes('class')) {
+                if (child.tag.includes('Content')) {
+                  attr.name = '@defaultClass';
+                } else if (attr.name === '@class') {
+                  attr.name = 'class';
+                }
+              } else if (attr.name.includes('tagName')) {
+                attr.name = '@htmlTag';
+              }
+            });
+          }
+        });
       }
     },
   };