Skip to content

Align the API reference with the currently supported parameters #1035

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mkszepp merged 1 commit into from
Dec 13, 2025
Merged

Align the API reference with the currently supported parameters #1035

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 148 additions & 87 deletions docs/app/templates/public-pages/docs/api-reference.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,6 @@ import { LinkTo } from '@ember/routing';
<td><code>Function</code></td>
<td>Function to customize how the content of the dropdown is positioned.</td>
</tr>
<tr>
<td>class</td>
<td><code>String</code></td>
<td>The class of the dropdown component. Since this component is tagless
by default, you need to combine it with the
<code>tagName</code>
to be effective</td>
</tr>
<tr>
<td>defaultClass</td>
<td><code>String</code></td>
<td>Another way of providing a class to the component without polluting
the
<code>class</code>
attribute. Useful in contextual component to allow users give their
own classes while still retaining some defaults</td>
</tr>
<tr>
<td>destination</td>
<td><code>String</code></td>
Expand All @@ -57,24 +40,35 @@ import { LinkTo } from '@ember/routing';
dropdown will be rendered using
<code>#in-element</code></td>
</tr>
<tr>
<td>contentComponent</td>
<td><code>Component</code></td>
<td>The component to render as content instead of the default content
component. You
<em>probably</em>
don't want to use this option.</td>
</tr>
<tr>
<td>horizontalPosition</td>
<td><code>String</code></td>
<td>The horizontal positioning strategy of the content. Can be one of
<code>auto</code>
(the default),
<code>left</code>,
<code>center</code>
<code>right</code>,
<code>center</code>,
<code>auto-left</code>
or
<code>right</code></td>
<code>auto-right</code></td>
</tr>
<tr>
<td>verticalPosition</td>
<td><code>String</code></td>
<td>The vertical positioning strategy of the content. Can be one of
<code>auto</code>
(the default),
<code>above</code>
or
<code>below</code></td>
</tr>
<tr>
<td>disabled</td>
<td><code>Boolean</code></td>
<td>(Default:
<code>false</code>). Flag that disables opening and closing of the
dropdown.</td>
</tr>
<tr>
<td>matchTriggerWidth</td>
Expand Down Expand Up @@ -112,9 +106,11 @@ import { LinkTo } from '@ember/routing';
alter its behavior. The user can close it as usual.</td>
</tr>
<tr>
<td>tagName</td>
<td><code>String</code></td>
<td>(Default: <code>""</code>) The tag of the component.</td>
<td>rootEventType</td>
<td>String</td>
<td>(Default:
<code>'click'</code>) The type of mouse event that handles closing the
dropdown. Valid values: "mousedown" and "click"</td>
</tr>
<tr>
<td>triggerComponent</td>
Expand All @@ -128,21 +124,24 @@ import { LinkTo } from '@ember/routing';
<td>(Default: <code>'div'</code>) The tag of the trigger component</td>
</tr>
<tr>
<td>verticalPosition</td>
<td><code>String</code></td>
<td>The vertical positioning strategy of the content. Can be one of
<code>auto</code>
(the default),
<code>above</code>
or
<code>below</code></td>
<td>contentComponent</td>
<td><code>Component</code></td>
<td>The component to render as content instead of the default content
component. You
<em>probably</em>
don't want to use this option.</td>
</tr>
<tr>
<td>registerAPI</td>
<td><code>Function</code></td>
<td>An action that will be invoked with the new public API of the
component every time there is a change in the state of the component.</td>
</tr>
<tr>
<td>onInit</td>
<td><code>Function</code></td>
<td>Action that will be called when the component is initialized.</td>
</tr>
<tr>
<td>onOpen</td>
<td><code>Function</code></td>
Expand All @@ -152,20 +151,13 @@ import { LinkTo } from '@ember/routing';
from this function will prevent the component from being opened.</td>
</tr>
<tr>
<td>onClose </td>
<td>onClose</td>
<td><code>Function</code></td>
<td>Action that will be called when the component is about to close.
Returning
<code>false</code>
from this function will prevent the component from being closed.</td>
</tr>
<tr>
<td>rootEventType</td>
<td>String</td>
<td>(Default:
<code>'click'</code>) The type of mouse event that handles closing the
dropdown. Valid values: "mousedown" and "click"</td>
</tr>
</tbody>
</table>

Expand All @@ -181,62 +173,77 @@ import { LinkTo } from '@ember/routing';
</thead>
<tbody>
<tr>
<td>ariaDescribedBy</td>
<td>eventType</td>
<td>String</td>
<td>Maps to <code>aria-described-by</code></td>
<td>(Default:
<code>'click'</code>) The type of mouse event that triggers the
trigger. Valid values: "mousedown" and "click"</td>
</tr>
<tr>
<td>ariaInvalid</td>
<td>stopPropagation</td>
<td>Boolean</td>
<td>Maps to <code>aria-invalid</code></td>
<td>(Default:
<code>false</code>) Whether the trigger should prevent the propagation
of the event that triggers it (click or mousedown)</td>
</tr>
<tr>
<td>ariaLabel</td>
<td>String</td>
<td>Maps to <code>aria-label</code></td>
<td>defaultClass</td>
<td><code>String</code></td>
<td>Another way of providing a class to the component without polluting
the
<code>class</code>
attribute. Useful in contextual component to allow users give their
own classes while still retaining some defaults</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>String</td>
<td>Maps to <code>aria-labeledby</code></td>
<td>onBlur</td>
<td><code>Function</code></td>
<td>Action that is executed on blur events.</td>
</tr>
<tr>
<td>class</td>
<td>String</td>
<td>Extra classes to be added to the trigger components</td>
<td>onClick</td>
<td><code>Function</code></td>
<td>Action that is executed on click events.</td>
</tr>
<tr>
<td>tabindex</td>
<td>Number</td>
<td>Tabindex of the trigger, which defaults to 0 so the trigger is
focusable by default</td>
<td>onFocus</td>
<td><code>Function</code></td>
<td>Action that is executed on focus events.</td>
</tr>
<tr>
<td>htmlTag</td>
<td>String</td>
<td>(Default:
<code>'div'</code>) The tag of the trigger component (Note: If you are
using the yielded trigger component, please use
<code>@triggerHtmlTag</code>)</td>
<td>onFocusIn</td>
<td><code>Function</code></td>
<td>Action that is executed on focus-in events.</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>Maps to the <code>title</code> attribute</td>
<td>onFocusOut</td>
<td><code>Function</code></td>
<td>Action that is executed on focus-out events.</td>
</tr>
<tr>
<td>eventType</td>
<td>String</td>
<td>(Default:
<code>'click'</code>) The type of mouse event that triggers the
trigger. Valid values: "mousedown" and "click"</td>
<td>onKeyDown</td>
<td><code>Function</code></td>
<td>Action that is executed on keydown events.</td>
</tr>
<tr>
<td>stopPropagation</td>
<td>Boolean</td>
<td>(Default:
<code>false</code>) Whether the trigger should prevent the propagation
of the event that triggers it (click or mousedown)</td>
<td>onMouseDown</td>
<td><code>Function</code></td>
<td>Action that is executed on mouse down events.</td>
</tr>
<tr>
<td>onMouseEnter</td>
<td><code>Function</code></td>
<td>Action that is executed on mouse enter events.</td>
</tr>
<tr>
<td>onMouseLeave</td>
<td><code>Function</code></td>
<td>Action that is executed on mouse leave events.</td>
</tr>
<tr>
<td>onTouchEnd</td>
<td><code>Function</code></td>
<td>Action that is executed on touch end events.</td>
</tr>
</tbody>
</table>
Expand All @@ -252,11 +259,6 @@ import { LinkTo } from '@ember/routing';
</tr>
</thead>
<tbody>
<tr>
<td>class</td>
<td>String</td>
<td>The class of the dropdown's content</td>
</tr>
<tr>
<td>animationEnabled</td>
<td>boolean</td>
Expand All @@ -282,6 +284,62 @@ import { LinkTo } from '@ember/routing';
>MutationRecord</a>
and the public API object.</td>
</tr>
<tr>
<td>transitioningInClass</td>
<td>String</td>
<td>Allow to customize the classes used for animations</td>
</tr>
<tr>
<td>transitioningOutClass</td>
<td>String</td>
<td>Allow to customize the classes used for animations</td>
</tr>
<tr>
<td>transitionedInClass</td>
<td>String</td>
<td>Allow to customize the classes used for animations</td>
</tr>
<tr>
<td>isTouchDevice</td>
<td>boolean</td>
<td>Forces adding touch events. By default we do auto-detected</td>
</tr>
<tr>
<td>overlay</td>
<td>boolean</td>
<td>Renders the dropdown content as an overlay (<LinkTo
@route="public-pages.docs.overlays"
>see example</LinkTo>).</td>
</tr>
<tr>
<td>defaultClass</td>
<td><code>String</code></td>
<td>Another way of providing a class to the component without polluting
the
<code>class</code>
attribute. Useful in contextual component to allow users give their
own classes while still retaining some defaults</td>
</tr>
<tr>
<td>onFocusIn</td>
<td><code>Function</code></td>
<td>Action that is executed on focus-in events.</td>
</tr>
<tr>
<td>onFocusOut</td>
<td><code>Function</code></td>
<td>Action that is executed on focus-out events.</td>
</tr>
<tr>
<td>onMouseEnter</td>
<td><code>Function</code></td>
<td>Action that is executed on mouse enter events.</td>
</tr>
<tr>
<td>onMouseLeave</td>
<td><code>Function</code></td>
<td>Action that is executed on mouse leave events.</td>
</tr>
</tbody>
</table>

Expand Down Expand Up @@ -309,6 +367,9 @@ import { LinkTo } from '@ember/routing';
open() { ... }, // Opens the dropdown
reposition() { ... }, // Repositions the dropdown
toggle() { ... } // Toggles the dropdown
registerTriggerElement() { ... }, Gives option to register the trigger element
registerDropdownElement() { ... }, Gives option to register the dropdown element
getTriggerElement() { ... } Return HTMLElement from registered trigger element
}
}
</pre>
Expand Down