fixed #11

CHANGELOG.md

@@ -4,6 +4,7 @@ Yii Framework 2 bootstrap5 extension Change Log
 2.0.2 under development
 -----------------------
 
+- Enh #11: Brought back close button api (simialbi)
 - Bug #6: yii\bootstrap5\BaseHtml::staticControl(): Argument #1 ($value) must be of type string, int given (dicrtarasov)
 - Bug #9: fixed default ActiveField::hintOptions (dicrtarasov)
 

docs/guide-de/migrating-yii2-bootstrap.md

@@ -2,12 +2,15 @@ Migration von yii2-bootstrap4
 =============================
 
 yii2-bootstrap4 ist eine komplette Überarbeitung des Projekts (siehe den Bootstrap 4 von Bootstrap 3 Migrationsguide).
-Die grössten Änderungen finden Sie hier zusammengefasst:
+Die größten Änderungen finden Sie hier zusammengefasst:
 
 ## Allgemein
 
 * Der Namespace ist nun `yii\bootstrap5` anstatt `yii\bootstrap4`
 * Die PHP Kompatibilität **ist beschränkt auf** `>=7.0`
+* Der "Schließen"-Button von Widgets wie [[yii\bootstrap5\Alert|Alert]] oder [[yii\bootstrap5|Modal|Modal]] wird neu
+  via CSS dargestellt und hat keinen Inhalt mehr. Es ist daher beim Überschreiben sicherzustellen, dass die `btn-close`
+  Klasse entfernt wird und die benötigten Stile manuell gesetzt werden.
 
 ## Widgets / Klassen
 
@@ -37,7 +40,7 @@ Es gibt eine neue Konstante [[yii\bootstrap5\ActiveForm::LAYOUT_FLOATING]]. Sie
 ### NavBar
 
 Es gibt nun die Möglichkeit der Erstellung einer [Offcanvas Navbar](https://getbootstrap.com/docs/5.1/components/navbar/#offcanvas).
-Dies ist zu erreichen indem man die Eigentschaft `$collapseOptions` des Widgets [[yii\bootstrap5\NavBar|Navbar]] auf `false`
+Dies ist zu erreichen, indem man die Eigenschaft `$collapseOptions` des Widgets [[yii\bootstrap5\NavBar|Navbar]] auf `false`
 und die Eigenschaft `$offcanvasOptions` auf ein array setzt (auch wenn leer).
 
 ### Tabs

docs/guide/migrating-yii2-bootstrap.md

@@ -8,6 +8,9 @@ The most notable changes are summarized below:
 
 * The namespace is `yii\bootstrap5` instead of `yii\bootstrap4`
 * The php compatibility **is limited to** `>=7.0`
+* The close buttons of widgets like [[yii\bootstrap5\Alert|Alert]] or [[yii\bootstrap5|Modal|Modal]] now gets rendered
+  via CSS and does not have any content anymore. So be sure to remove `btn-close` class and set appropriate styles yourself
+  if you override it.
 
 ## Widgets / Classes
 

src/Alert.php

@@ -108,8 +108,12 @@ class Alert extends Widget
     {
         if (($closeButton = $this->closeButton) !== false) {
             $tag = ArrayHelper::remove($closeButton, 'tag', 'button');
+            $label = ArrayHelper::remove($closeButton, 'label', '');
+            if ($tag === 'button' && !isset($closeButton['type'])) {
+                $closeButton['type'] = 'button';
+            }
 
-            return Html::tag($tag, '', $closeButton);
+            return Html::tag($tag, $label, $closeButton);
         } else {
             return null;
         }
@@ -125,7 +129,6 @@ class Alert extends Widget
 
         if ($this->closeButton !== false) {
             $this->closeButton = array_merge([
-                'type' => 'button',
                 'class' => ['widget' => 'btn-close'],
                 'data' => ['bs-dismiss' => 'alert'],
                 'aria' => ['label' => 'Close']

src/Modal.php

@@ -252,8 +252,12 @@ class Modal extends Widget
     {
         if (($closeButton = $this->closeButton) !== false) {
             $tag = ArrayHelper::remove($closeButton, 'tag', 'button');
+            $label = ArrayHelper::remove($closeButton, 'label', '');
+            if ($tag === 'button' && !isset($closeButton['type'])) {
+                $closeButton['type'] = 'button';
+            }
 
-            return Html::tag($tag, '', $closeButton);
+            return Html::tag($tag, $label, $closeButton);
         } else {
             return null;
         }
@@ -284,10 +288,9 @@ class Modal extends Widget
 
         if ($this->closeButton !== false) {
             $this->closeButton = array_merge([
-                'data-bs-dismiss' => 'modal',
+                'class' => ['widget' => 'btn-close'],
-                'class' => 'btn-close',
+                'data' => ['bs-dismiss' => 'modal'],
-                'type' => 'button',
+                'aria' => ['label' => 'Close']
-                'aria-label' => 'Close'
             ], $this->closeButton);
         }
 

src/Offcanvas.php

@@ -204,8 +204,12 @@ class Offcanvas extends Widget
     {
         if (($closeButton = $this->closeButton) !== false) {
             $tag = ArrayHelper::remove($closeButton, 'tag', 'button');
+            $label = ArrayHelper::remove($closeButton, 'label', '');
+            if ($tag === 'button' && !isset($closeButton['type'])) {
+                $closeButton['type'] = 'button';
+            }
 
-            return Html::tag($tag, '', $closeButton);
+            return Html::tag($tag, $label, $closeButton);
         } else {
             return null;
         }
@@ -233,10 +237,9 @@ class Offcanvas extends Widget
 
         if ($this->closeButton !== false) {
             $this->closeButton = array_merge([
-                'data-bs-dismiss' => 'offcanvas',
+                'class' => ['widget' => 'btn-close text-reset'],
-                'class' => 'btn-close text-reset',
+                'data' => ['bs-dismiss' => 'offcanvas'],
-                'type' => 'button',
+                'aria' => ['label' => 'Close']
-                'aria-label' => 'Close'
             ], $this->closeButton);
         }
 

src/Toast.php

@@ -64,7 +64,7 @@ class Toast extends Widget
      */
     public $dateTime = false;
     /**
-     * @var array the options for rendering the close button tag.
+     * @var array|false the options for rendering the close button tag.
      * The close button is displayed in the header of the toast. Clicking on the button will hide the toast.
      *
      * The following special options are supported:
@@ -180,13 +180,21 @@ class Toast extends Widget
 
     /**
      * Renders the close button.
-     * @return string the rendering result
+     * @return string|null the rendering result
      */
-    protected function renderCloseButton(): string
+    protected function renderCloseButton()
     {
-        $tag = ArrayHelper::remove($this->closeButton, 'tag', 'button');
+        if (($closeButton = $this->closeButton) !== false) {
+            $tag = ArrayHelper::remove($closeButton, 'tag', 'button');
+            $label = ArrayHelper::remove($closeButton, 'label', '');
+            if ($tag === 'button' && !isset($closeButton['type'])) {
+                $closeButton['type'] = 'button';
+            }
 
-        return Html::tag($tag, '', $this->closeButton);
+            return Html::tag($tag, $label, $closeButton);
+        } else {
+            return null;
+        }
     }
 
     /**
@@ -197,12 +205,13 @@ class Toast extends Widget
     {
         Html::addCssClass($this->options, ['widget' => 'toast']);
 
-        $this->closeButton = array_merge([
+        if ($this->closeButton !== false) {
-            'aria' => ['label' => 'Close'],
+            $this->closeButton = array_merge([
-            'data' => ['bs-dismiss' => 'toast'],
+                'class' => ['widget' => 'btn-close'],
-            'class' => ['widget' => 'btn-close'],
+                'data' => ['bs-dismiss' => 'toast'],
-            'type' => 'button',
+                'aria' => ['label' => 'Close']
-        ], $this->closeButton);
+            ], $this->closeButton);
+        }
 
         if (!isset($this->options['role'])) {
             $this->options['role'] = 'alert';

tests/AlertTest.php

@@ -48,6 +48,38 @@ HTML;
 Message1
 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 
+</div>
+HTML;
+        $this->assertEqualsWithoutLE($expectedHtml, $html);
+    }
+
+    /**
+     * @see https://github.com/yiisoft/yii2-bootstrap5/issues/11
+     */
+    public function testDismissibleAlertCustomButton()
+    {
+        Alert::$counter = 0;
+        $html = Alert::widget([
+            'body' => "Low Blow: Bob Loblaw's Law Blog Lobs Law Bomb",
+            'options' => ['class' => 'alert-warning'],
+            'closeButton' => [
+                'label' => 'Dismiss',
+                'tag' => 'a',
+                'class' => ['widget' => 'btn btn-outline-warning'],
+                'style' => [
+                    'position' => 'absolute',
+                    'top' => '.5rem',
+                    'right' => '.5rem'
+                ],
+            ]
+        ]);
+
+        $expectedHtml = <<<HTML
+<div id="w0" class="alert-warning alert alert-dismissible" role="alert">
+
+Low Blow: Bob Loblaw's Law Blog Lobs Law Bomb
+<a class="btn btn-outline-warning" data-bs-dismiss="alert" aria-label="Close" style="position: absolute; top: .5rem; right: .5rem;">Dismiss</a>
+
 </div>
 HTML;
         $this->assertEqualsWithoutLE($expectedHtml, $html);

tests/ToastTest.php

@@ -20,7 +20,7 @@ class ToastTest extends TestCase
 <div id="w0" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
 <strong class="me-auto"></strong>
-<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
+<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
 </div>
 <div class="toast-body test" style="text-align: center;">
 
@@ -52,7 +52,7 @@ HTML;
 <div class="toast-header">
 <strong class="me-auto">Toast title</strong>
 <small class="text-muted">a minute ago</small>
-<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
+<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
 </div>
 <div class="toast-body">
 Woohoo, you're reading this text in a toast!
@@ -78,7 +78,7 @@ HTML;
 <div class="toast-header">
 <strong class="me-auto">Toast title</strong>
 <small class="toast-date-time text-muted" style="text-align: right;">a minute ago</small>
-<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
+<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
 </div>
 <div class="toast-body">
 
@@ -102,7 +102,7 @@ HTML;
 <div id="w0" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
 <h5 class="me-auto" style="text-align: left;">Toast title</h5>
-<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="toast"></button>
+<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
 </div>
 <div class="toast-body">