Add @triggerHtmlTag and remove htmlTag from yielded trigger component

Author: mkszepp

docs/app/templates/public-pages.gts

@@ -74,13 +74,12 @@ export default class extends Component {
           >Github</a>
         </div>
         <div class="main-header-logo">
-          <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
+          <BasicDropdown @triggerHtmlTag="span" @calculatePosition={{this.calculatePosition}} as |dd|>
             <LinkTo @route="public-pages.index" class="home-link">
               <img src="/ember_logo.png" alt="ember" />
               <strong>Basic</strong>
               {{! template-lint-disable no-pointer-down-event-binding }}
               <dd.Trigger
-                @htmlTag="span"
                 {{on "mousedown" this.preventIfNotInIndex}}
                 {{on "touchend" this.preventIfNotInIndex}}
                 class="logo-dropdown-button"

ember-basic-dropdown/src/components/basic-dropdown-trigger.gts

@@ -19,7 +19,7 @@ export interface BasicDropdownTriggerSignature {
     hPosition?: HorizontalPosition | null;
     defaultClass?: string;
     renderInPlace?: boolean;
-    htmlTag?: keyof HTMLElementTagNameMap;
+    htmlTag?: keyof HTMLElementTagNameMap | undefined;
     onBlur?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onClick?: (dropdown?: Dropdown, event?: MouseEvent) => void;
     onFocus?: (dropdown?: Dropdown, event?: FocusEvent) => void;

ember-basic-dropdown/src/components/basic-dropdown.gts

@@ -40,7 +40,14 @@ export interface BasicDropdownDefaultBlock {
   disabled: boolean;
   isOpen: boolean;
   actions: DropdownActions;
-  Trigger: ComponentLike<BasicDropdownTriggerSignature>;
+  Trigger: ComponentLike<
+    Omit<BasicDropdownTriggerSignature, 'Args'> & {
+      Args: Omit<
+        BasicDropdownTriggerSignature['Args'],
+        'htmlTag'
+      >;
+    }
+  >;
   Content: ComponentLike<BasicDropdownContentSignature>;
 }
 
@@ -64,6 +71,7 @@ export interface BasicDropdownArgs {
   rootEventType?: TRootEventType;
   preventScroll?: boolean;
   matchTriggerWidth?: boolean;
+  triggerHtmlTag?: keyof HTMLElementTagNameMap;
   onInit?: (dropdown: Dropdown) => void;
   registerAPI?: (dropdown: Dropdown | null) => void;
   onOpen?: (dropdown: Dropdown, e?: Event) => boolean | void;
@@ -517,6 +525,7 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
           hPosition=this.hPosition
           renderInPlace=this.renderInPlace
           vPosition=this.vPosition
+          htmlTag=@triggerHtmlTag
         )
         Content=(component
           this.contentComponent

test-app/tests/integration/components/basic-dropdown-test.gts

@@ -1325,26 +1325,25 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
     await render(
       <template>
-        <BasicDropdown as |parent|>
-          <parent.Trigger class="parent" @htmlTag="button">Trigger of the first
+        <BasicDropdown @triggerHtmlTag="button" as |parent|>
+          <parent.Trigger class="parent">Trigger of the first
             dropdown</parent.Trigger>
           <parent.Content @overlay={{true}}>
-            <BasicDropdown as |child|>
+            <BasicDropdown @triggerHtmlTag="button" as |child|>
               <p class="body-parent">
                 <br />First level of the dropdpwn<br />
               </p>
-              <child.Trigger class="child" @htmlTag="button">Trigger of the
+              <child.Trigger class="child">Trigger of the
                 second dropdown</child.Trigger>
               <child.Content @overlay={{true}}>
                 <p class="body-child">
                   <br />Second level of the second<br />
-                  <BasicDropdown as |grandchild|>
+                  <BasicDropdown @triggerHtmlTag="button" as |grandchild|>
                     <p>
                       <br />Second level of the dropdpwn<br />
                     </p>
                     <grandchild.Trigger
                       class="grandchild"
-                      @htmlTag="button"
                     >Trigger of the Third dropdown</grandchild.Trigger>
                     <grandchild.Content @overlay={{true}}>
                       <p class="body-grandchild">