Check if Alert close button is generated properly

[samdark]

See https://github.com/yiisoft/yii2-bootstrap5/issues/11 for the test case.

[terabytesoftw]

Sure can be customized tag, label, options in closeButton. https://github.com/yiisoft/yii-bootstrap5/blob/6db735259a655f2ad1ef863241d0dc0f3d33a61c/src/Alert.php#L142

[antichris]

Given

$widget = Alert::widget()
    ->body("Low Blow: Bob Loblaw's Law Blog Lobs Law Bomb")
    ->options(['class' => 'alert-warning'])
    ->closeButton([
        'label' => 'Dismiss', // (1)
        'tag' => 'a', // (2)
        'class' => ['buttonOptions' => 'btn btn-outline-warning'], // (3)
        'style' => 'position:absolute;top:.5rem;right:.5rem', // (4)
    ]);

yields

<div id="w0-alert" class="alert-warning alert alert-dismissible" role="alert">Low Blow: Bob Loblaw's Law Blog Lobs Law Bomb
<a class="btn btn-outline-warning" style="position:absolute;top:.5rem;right:.5rem" aria-label="Close" data-bs-dismiss="alert">Dismiss</a>
</div>

when rendered.

Customized label (1) and tag (2) both work. :tada:

That class override (3) may feel a bit clunky, but is unavoidable, since as soon as you're setting a custom label, you also have to set a custom class other than btn-close. A predefined constant for 'buttonOptions' or some better interface to entirely replace the close button's class would be nice though. Maybe not defaulting to btn-close when a label is given.

Finally, in a real application you'd probably have some custom CSS and the (4) inline style would not be needed.

EDIT: Also, the type="button" attribute is absent from an <a> tag, as it should be. :+1:

[terabytesoftw]

Given

$widget = Alert::widget()
    ->body("Low Blow: Bob Loblaw's Law Blog Lobs Law Bomb")
    ->options(['class' => 'alert-warning'])
    ->closeButton([
        'label' => 'Dismiss', // (1)
        'tag' => 'a', // (2)
        'class' => ['buttonOptions' => 'btn btn-outline-warning'], // (3)
        'style' => 'position:absolute;top:.5rem;right:.5rem', // (4)
    ]);

yields

<div id="w0-alert" class="alert-warning alert alert-dismissible" role="alert">Low Blow: Bob Loblaw's Law Blog Lobs Law Bomb
<a class="btn btn-outline-warning" style="position:absolute;top:.5rem;right:.5rem" aria-label="Close" data-bs-dismiss="alert">Dismiss</a>
</div>

when rendered.

Customized label (1) and tag (2) both work. 🎉

That class override (3) may feel a bit clunky, but is unavoidable, since as soon as you're setting a custom label, you also have to set a custom class other than btn-close. A predefined constant for 'buttonOptions' or some better interface to entirely replace the close button's class would be nice though. Maybe not defaulting to btn-close when a label is given.

Finally, in a real application you'd probably have some custom CSS and the (4) inline style would not be needed.

EDIT: Also, the type="button" attribute is absent from an <a> tag, as it should be. 👍

Yes, these widgets will be refactored, but in principle they allow any customization.