chenx221/yii2-bootstrap5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed #11

Browse Source
This commit is contained in:
Simon Karlen 2021-08-18 15:41:26 +02:00
parent 437bb9e3ce
commit 80966912b8
No known key found for this signature in database
GPG Key ID: 0630C27D666EBCC3
9 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

7
docs/guide-de/migrating-yii2-bootstrap.md
View File

@ -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

3
docs/guide/migrating-yii2-bootstrap.md
View File

@ -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

7
src/Alert.php
View File

@ -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']

13
src/Modal.php
View File

@ -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' => 'btn-close',
'type' => 'button',
'aria-label' => 'Close'
'class' => ['widget' => 'btn-close'],
'data' => ['bs-dismiss' => 'modal'],
'aria' => ['label' => 'Close']
], $this->closeButton);
}

13
src/Offcanvas.php
View File

@ -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' => 'btn-close text-reset',
'type' => 'button',
'aria-label' => 'Close'
'class' => ['widget' => 'btn-close text-reset'],
'data' => ['bs-dismiss' => 'offcanvas'],
'aria' => ['label' => 'Close']
], $this->closeButton);
}

25
src/Toast.php
View File

@ -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']);
if ($this->closeButton !== false) {
$this->closeButton = array_merge([
'aria' => ['label' => 'Close'],
'data' => ['bs-dismiss' => 'toast'],
'class' => ['widget' => 'btn-close'],
'type' => 'button',
'data' => ['bs-dismiss' => 'toast'],
'aria' => ['label' => 'Close']
], $this->closeButton);
}
if (!isset($this->options['role'])) {
$this->options['role'] = 'alert';

32
tests/AlertTest.php
View File

@ -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);

8
tests/ToastTest.php
View File

@ -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">