Add @triggerHtmlTag on <BasicDropdown> and remove @htmlTag option from yielded trigger component (fix glint v2 issue) (#1032)

* Add @triggerHtmlTag and remove `htmlTag` from yielded trigger component

* Fix lint

Author: mkszepp

docs/app/templates/public-pages.gts

@@ -74,13 +74,16 @@ 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,11 @@ 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 +68,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 +522,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,27 +1325,23 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
     await render(
       <template>
-        <BasicDropdown as |parent|>
-          <parent.Trigger class="parent" @htmlTag="button">Trigger of the first
-            dropdown</parent.Trigger>
+        <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
-                second dropdown</child.Trigger>
+              <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.Trigger class="grandchild">Trigger of the Third
+                      dropdown</grandchild.Trigger>
                     <grandchild.Content @overlay={{true}}>
                       <p class="body-grandchild">
                         <br />Third level of the third<br />