lib-popup() mixin doesn't work

[slackerzz]

I'm using Magento 2.1.2, following docs i added this markup from lib/web/css/docs/popups.html to a phtml file in my template

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
<div class="window popup popup-example" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
    <div class="popup actions">
        <div class="secondary">
            <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
        </div>
    </div>
    <div class="popup header">
        <strong class="title" id="popup-title"><span>Popup title</span></strong>
    </div>
    <div class="popup content" id="popup-content">
        <p>Popup content</p>
    </div>
    <div class="popup footer"></div>
</div>

and this less:

.window.popup.popup-example {
    .lib-popup();
}

Expected result:
a button that toggles a popup

Actual result:
a useless button

[tkacheva]

@slackerzz could you clarify if you expect less mixin makes pop-up work?

[slackerzz]

a less mixin alone cannot add a click handler to the button, but in the docs it ins't specified to init the popup via js.
I'd like to know how it is supposed to work.

[giacmir]

I think that the problem is just that @slackerzz says. Docs have a quite extensive descriptions of mixins but zero info on how make something useful with them.

Some time ago I had to implement a modal window and while the docs were exhaustive on how to style it i had to dig deep in the source in order to find how to make that modal open...

A collateral effect of this problem is that the docs are a collection of non working items, and this is really disapponting.

[tkacheva]

@almarchenko Please check if we can make the doc more clear

[MomotenkoNatalia]

Hi @slackerzz
.lib-popup(); mixin works as expected. It is less mixin that set popup styles without JS.
Anyway, I created internal ticket (MAGETWO-59956) to verify and probably modify our documentation for popup mixin.
Moreover, we have huge epic to improve our documentation of UI library.

[slackerzz]

@MomotenkoNatalia ok, so how should it be initialized?

[samthecarman]

Hi, Does anyone know how to initialize the popup JS?