popups.md

Working with popups

Basic usage

The HTML of popups is based on the <details> element, with a pinch of CSS and a Stimulus controller:

<details
    class="popup"
    data-controller="popup"
    data-action="toggle->popup#update click@window->popup#closeOnClickOutside"
>
    <summary class="popup__opener">
        <span class="button">
            {{ 'Actions' | trans }}
            {{ icon('angle-down') }}
        </span>
    </summary>

    <nav class="popup__container popup__container--middle">
    </nav>
</details>

Note the button in the <summary> element should not be a real <button> (only a class). It would take the focus and catch click events otherwise.

Don’t forget to add the icon on the right of the button. This shows to the user that the button will open a popup.

Menu elements

The menu can have different kind of children.

A basic link:

<a class="popup__item" href="{{ path('preferences') }}">
    {{ 'Preferences' | trans }}
</a>

A button to open a modal:

<button
    class="popup__item"
    type="button"
    data-controller="modal-opener"
    data-action="modal-opener#fetch"
    data-modal-opener-href-value="{{ path('edit ticket title', { uid: ticket.uid }) }}"
>
    {{ 'Rename the ticket' | trans }}
</button>

A form to perform an action:

<form action="{{ path('logout') }}" method="post">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
    <button class="popup__item" type="submit">
        {{ 'Logout' | trans }}
    </button>
</form>

Radio buttons to select an option:

<div>
    <input
        id="status-pending"
        type="radio"
        name="status"
        value="pending"
    />

    <label class="popup__item" for="status-pending">
        {{ 'tickets.status.pending' | trans }}
    </label>
</div>

Menu position

You can align the menu with the button either on the right:

<nav class="popup__container popup__container--right">
</nav>

On the left:

<nav class="popup__container popup__container--left">
</nav>

On the top:

<nav class="popup__container popup__container--top">
</nav>

Or centered:

<nav class="popup__container popup__container--center">
</nav>