Improve @contentHtmlTag typing, add tests and update docs (#1039)

Author: mkszepp

docs/app/templates/public-pages/docs/api-reference.gts

@@ -131,6 +131,11 @@ import { LinkTo } from '@ember/routing';
           <em>probably</em>
           don't want to use this option.</td>
       </tr>
+      <tr>
+        <td>contentHtmlTag</td>
+        <td><code>String</code></td>
+        <td>(Default: <code>'div'</code>) The tag of the content component</td>
+      </tr>
       <tr>
         <td>registerAPI</td>
         <td><code>Function</code></td>
@@ -265,11 +270,6 @@ import { LinkTo } from '@ember/routing';
         <td>Flag to determine whether the content will allow CSS animations.
           Defaults to true</td>
       </tr>
-      <tr>
-        <td>htmlTag</td>
-        <td>String</td>
-        <td>(Default: <code>'div'</code>) The tag of the content component</td>
-      </tr>
       <tr>
         <td>shouldReposition</td>
         <td>Function</td>

docs/app/templates/public-pages/docs/migrate-8-0-to-9-0.gts

@@ -60,6 +60,18 @@ import { LinkTo } from '@ember/routing';
         a regular HTML attribute instead.
       </p>
     </li>
+    <li>
+      <p>
+        If you are using
+        <code>@htmlTag</code>
+        on the yielded content component (for example,
+        <code>&lt;dd.Content @htmlTag="span"&gt;</code>) replace it with
+        <code>&lt;BasicDropdown @contentHtmlTag="span"&gt;</code>
+        This change is required to fix Glint v2 typing issues.
+        <br />
+        <small><i>(Deprecation added in 8.11)</i></small>
+      </p>
+    </li>
     <li>
       <p>
         If you are using

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

@@ -10,7 +10,7 @@ import {
 import hasMoved from '../utils/has-moved.ts';
 import { isTesting } from '@embroider/macros';
 import { modifier } from 'ember-modifier';
-import { element } from 'ember-element-helper';
+import { element, type ElementFromTagName } from 'ember-element-helper';
 import { or } from 'ember-truth-helpers';
 import style from 'ember-style-modifier';
 import { on } from '@ember/modifier';
@@ -23,8 +23,10 @@ import type {
   VerticalPosition,
 } from '../types.ts';
 
-export interface BasicDropdownContentSignature {
-  Element: HTMLElement;
+export interface BasicDropdownContentSignature<
+  T extends keyof HTMLElementTagNameMap = 'div',
+> {
+  Element: ElementFromTagName<T>;
   Args: {
     animationEnabled?: boolean;
     transitioningInClass?: string;
@@ -47,7 +49,7 @@ export interface BasicDropdownContentSignature {
     vPosition?: VerticalPosition | null;
     defaultClass?: string;
     overlay?: boolean;
-    htmlTag?: keyof HTMLElementTagNameMap | undefined;
+    htmlTag?: T | undefined;
     onFocusIn?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onFocusOut?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onMouseEnter?: (dropdown?: Dropdown, event?: MouseEvent) => void;
@@ -64,7 +66,9 @@ export interface BasicDropdownContentSignature {
 
 type RootMouseDownHandler = (ev: MouseEvent | TouchEvent) => void;
 
-export default class BasicDropdownContent extends Component<BasicDropdownContentSignature> {
+export default class BasicDropdownContent<
+  T extends keyof HTMLElementTagNameMap,
+> extends Component<BasicDropdownContentSignature<T>> {
   transitioningInClass =
     this.args.transitioningInClass || 'ember-basic-dropdown--transitioning-in';
   transitionedInClass =
@@ -133,6 +137,10 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
     return style;
   }
 
+  get tag(): keyof HTMLElementTagNameMap {
+    return this.args.htmlTag || 'div';
+  }
+
   /**
    * Allows similair behaviour to `ember-composable-helpers`' `optional` helper.
    * Avoids adding extra dependencies.
@@ -543,7 +551,7 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
             <div class="ember-basic-dropdown-overlay"></div>
           {{/if}}
 
-          {{#let (element (or @htmlTag "div")) as |OptionalTag|}}
+          {{#let (element this.tag) as |OptionalTag|}}
             <OptionalTag
               id={{this.dropdownId}}
               class="ember-basic-dropdown-content ember-basic-dropdown-content--{{@hPosition}}
@@ -574,7 +582,7 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
               <div class="ember-basic-dropdown-overlay"></div>
             {{/if}}
 
-            {{#let (element (or @htmlTag "div")) as |OptionalTag|}}
+            {{#let (element this.tag) as |OptionalTag|}}
               <OptionalTag
                 id={{this.dropdownId}}
                 class="ember-basic-dropdown-content ember-basic-dropdown-content--{{@hPosition}}

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

@@ -41,6 +41,10 @@ export interface BasicDropdownTriggerSignature<
 export default class BasicDropdownTrigger<
   T extends keyof HTMLElementTagNameMap,
 > extends Component<BasicDropdownTriggerSignature<T>> {
+  get tag(): keyof HTMLElementTagNameMap {
+    return this.args.htmlTag || 'div';
+  }
+
   // Actions
   /**
    * Allows similar behavior to `ember-composable-helpers`' `optional` helper.
@@ -63,10 +67,6 @@ export default class BasicDropdownTrigger<
     }
   }
 
-  get tag(): keyof HTMLElementTagNameMap {
-    return this.args.htmlTag || 'div';
-  }
-
   <template>
     {{#if @dropdown}}
       {{#let (element this.tag) as |OptionalTag|}}

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

@@ -37,6 +37,7 @@ const IGNORED_STYLES = ['top', 'left', 'right', 'width', 'height'];
 
 export interface BasicDropdownDefaultBlock<
   TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+  ContentHtmlTag extends keyof HTMLElementTagNameMap = 'div',
 > {
   uniqueId: string;
   disabled: boolean;
@@ -50,21 +51,30 @@ export interface BasicDropdownDefaultBlock<
       >;
     }
   >;
-  Content: ComponentLike<BasicDropdownContentSignature>;
+  Content: ComponentLike<
+    Omit<BasicDropdownContentSignature<ContentHtmlTag>, 'Args'> & {
+      Args: Omit<
+        BasicDropdownContentSignature<ContentHtmlTag>['Args'],
+        'htmlTag'
+      >;
+    }
+  >;
 }
 
 export interface BasicDropdownSignature<
   TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+  ContentHtmlTag extends keyof HTMLElementTagNameMap = 'div',
 > {
   Element: HTMLElement;
-  Args: BasicDropdownArgs<TriggerHtmlTag>;
+  Args: BasicDropdownArgs<TriggerHtmlTag, ContentHtmlTag>;
   Blocks: {
-    default: [BasicDropdownDefaultBlock<TriggerHtmlTag>];
+    default: [BasicDropdownDefaultBlock<TriggerHtmlTag, ContentHtmlTag>];
   };
 }
 
 export interface BasicDropdownArgs<
   TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+  ContentHtmlTag extends keyof HTMLElementTagNameMap = 'div',
 > {
   initiallyOpened?: boolean;
   renderInPlace?: boolean;
@@ -78,21 +88,24 @@ export interface BasicDropdownArgs<
   preventScroll?: boolean;
   matchTriggerWidth?: boolean;
   triggerHtmlTag?: TriggerHtmlTag;
-  contentHtmlTag?: keyof HTMLElementTagNameMap;
+  contentHtmlTag?: ContentHtmlTag;
   onInit?: (dropdown: Dropdown) => void;
   registerAPI?: (dropdown: Dropdown | null) => void;
   onOpen?: (dropdown: Dropdown, e?: Event) => boolean | void;
   onClose?: (dropdown: Dropdown, e?: Event) => boolean | void;
   triggerComponent?:
     | ComponentLike<BasicDropdownTriggerSignature<TriggerHtmlTag>>
     | undefined;
-  contentComponent?: ComponentLike<BasicDropdownContentSignature> | undefined;
+  contentComponent?:
+    | ComponentLike<BasicDropdownContentSignature<ContentHtmlTag>>
+    | undefined;
   calculatePosition?: CalculatePosition;
 }
 
 export default class BasicDropdown<
   TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
-> extends Component<BasicDropdownSignature<TriggerHtmlTag>> {
+  ContentHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> extends Component<BasicDropdownSignature<TriggerHtmlTag, ContentHtmlTag>> {
   @tracked hPosition: HorizontalPosition | null = null;
   @tracked vPosition: VerticalPosition | null = null;
   @tracked top: string | undefined;
@@ -190,7 +203,10 @@ export default class BasicDropdown<
   }
 
   // Lifecycle hooks
-  constructor(owner: Owner, args: BasicDropdownArgs<TriggerHtmlTag>) {
+  constructor(
+    owner: Owner,
+    args: BasicDropdownArgs<TriggerHtmlTag, ContentHtmlTag>,
+  ) {
     super(owner, args);
     if (this.args.onInit) {
       this.args.onInit(this.publicAPI);
@@ -520,10 +536,14 @@ export default class BasicDropdown<
     );
   }
 
-  get contentComponent(): ComponentLike<BasicDropdownContentSignature> {
+  get contentComponent(): ComponentLike<
+    BasicDropdownContentSignature<ContentHtmlTag>
+  > {
     return (
       this.args.contentComponent ||
-      (BasicDropdownContent as ComponentLike<BasicDropdownContentSignature>)
+      (BasicDropdownContent as ComponentLike<
+        BasicDropdownContentSignature<ContentHtmlTag>
+      >)
     );
   }
 

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

@@ -1731,6 +1731,48 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       );
   });
 
+  test<ExtendedTestContext>('Passing @triggerHtmlTag and @contentHtmlTag works', async function (assert) {
+    assert.expect(2);
+
+    await render(
+      <template>
+        <BasicDropdown
+          @renderInPlace={{true}}
+          @triggerHtmlTag="button"
+          @contentHtmlTag="span"
+          as |dropdown|
+        >
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
+
+    assert.strictEqual(
+      (
+        getRootNode(this.element).querySelector(
+          '.ember-basic-dropdown-trigger',
+        ) as HTMLElement
+      ).tagName,
+      'BUTTON',
+    );
+
+    await click(
+      getRootNode(this.element).querySelector(
+        '.ember-basic-dropdown-trigger',
+      ) as HTMLElement,
+    );
+
+    assert.strictEqual(
+      (
+        getRootNode(this.element).querySelector(
+          '.ember-basic-dropdown-content',
+        ) as HTMLElement
+      ).tagName,
+      'SPAN',
+    );
+  });
+
   // Shadow dom test
   test<ExtendedTestContext>('Shadow dom: Its `toggle` action opens and closes the dropdown', async function (assert) {
     const wormhole = document.createElement('div');

test-app/tests/integration/components/content-test.gts

@@ -1411,5 +1411,31 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         'mouseleave',
       );
     });
+
+    test<ExtendedTestContext>('If it receives `@htmlTag`, the content uses that tag name', async function (assert) {
+      const self = this;
+
+      await render<ExtendedTestContext>(
+        <template>
+          <div id="destination-el"></div>
+          <BasicDropdownContent
+            @dropdown={{self.dropdown}}
+            @destination="destination-el"
+            @htmlTag="span"
+          >
+            Content
+          </BasicDropdownContent>
+        </template>,
+      );
+
+      assert.strictEqual(
+        (
+          getRootNode(this.element).querySelector(
+            '.ember-basic-dropdown-content',
+          ) as HTMLElement
+        ).tagName,
+        'SPAN',
+      );
+    });
   });
 });