fixed toggle button group rendering

This commit is contained in:
Simon Karlen 2021-08-04 08:51:53 +02:00
parent 52edff1c5c
commit 773e601d6f
No known key found for this signature in database
GPG Key ID: 0630C27D666EBCC3
2 changed files with 17 additions and 14 deletions

View File

@ -53,7 +53,7 @@ class ToggleButtonGroup extends InputWidget
* @see Html::radio()
*/
public $labelOptions = [
'class' => ['btn', 'btn-secondary'],
'class' => ['btn', 'btn-outline-secondary'],
];
/**
* @var bool whether the items labels should be HTML-encoded.
@ -115,21 +115,20 @@ class ToggleButtonGroup extends InputWidget
{
unset($index);
$labelOptions = $this->labelOptions;
$labelOptions['wrapInput'] = true;
$labelOptions['wrapInput'] = false;
Html::addCssClass($labelOptions, ['widget' => 'btn']);
if ($checked) {
Html::addCssClass($labelOptions, ['activate' => 'active']);
}
$type = $this->type;
if ($this->encodeLabels) {
$label = Html::encode($label);
}
return Html::$type($name, $checked, [
$options = [
'label' => $label,
'labelOptions' => $labelOptions,
'autocomplete' => 'off',
'value' => $value,
]);
];
Html::addCssClass($options, ['widget' => 'btn-check']);
return Html::$type($name, $checked, $options);
}
}

View File

@ -25,8 +25,10 @@ class ToggleButtonGroupTest extends TestCase
]);
$expectedHtml = <<<HTML
<input type="hidden" name="ToggleButtonGroupTestModel[value]" value=""><div id="togglebuttongrouptestmodel-value" class="btn-group" role="group"><label class="btn btn-secondary" for="i0"><input type="checkbox" id="i0" name="ToggleButtonGroupTestModel[value][]" value="1" autocomplete="off">item 1</label>
<label class="btn btn-secondary" for="i1"><input type="checkbox" id="i1" name="ToggleButtonGroupTestModel[value][]" value="2" autocomplete="off">item 2</label></div>
<input type="hidden" name="ToggleButtonGroupTestModel[value]" value=""><div id="togglebuttongrouptestmodel-value" class="btn-group" role="group"><input type="checkbox" id="i0" class="btn-check" name="ToggleButtonGroupTestModel[value][]" value="1" autocomplete="off">
<label class="btn btn-outline-secondary" for="i0">item 1</label>
<input type="checkbox" id="i1" class="btn-check" name="ToggleButtonGroupTestModel[value][]" value="2" autocomplete="off">
<label class="btn btn-outline-secondary" for="i1">item 2</label></div>
HTML;
$this->assertEqualsWithoutLE($expectedHtml, $html);
}
@ -46,7 +48,7 @@ HTML;
],
]);
$this->assertContains('<input type="checkbox" id="i1" name="ToggleButtonGroupTestModel[value][]" value="2" checked autocomplete="off">', $html);
$this->assertContains('<input type="checkbox" id="i1" class="btn-check" name="ToggleButtonGroupTestModel[value][]" value="2" checked autocomplete="off">', $html);
}
public function testRadio()
@ -63,8 +65,10 @@ HTML;
]);
$expectedHtml = <<<HTML
<input type="hidden" name="ToggleButtonGroupTestModel[value]" value=""><div id="togglebuttongrouptestmodel-value" class="btn-group" role="group"><label class="btn btn-secondary" for="i0"><input type="radio" id="i0" name="ToggleButtonGroupTestModel[value]" value="1" autocomplete="off">item 1</label>
<label class="btn btn-secondary" for="i1"><input type="radio" id="i1" name="ToggleButtonGroupTestModel[value]" value="2" autocomplete="off">item 2</label></div>
<input type="hidden" name="ToggleButtonGroupTestModel[value]" value=""><div id="togglebuttongrouptestmodel-value" class="btn-group" role="group"><input type="radio" id="i0" class="btn-check" name="ToggleButtonGroupTestModel[value]" value="1" autocomplete="off">
<label class="btn btn-outline-secondary" for="i0">item 1</label>
<input type="radio" id="i1" class="btn-check" name="ToggleButtonGroupTestModel[value]" value="2" autocomplete="off">
<label class="btn btn-outline-secondary" for="i1">item 2</label></div>
HTML;
$this->assertEqualsWithoutLE($expectedHtml, $html);
}
@ -84,7 +88,7 @@ HTML;
],
]);
$this->assertContains('<input type="radio" id="i1" name="ToggleButtonGroupTestModel[value]" value="2" checked autocomplete="off">', $html);
$this->assertContains('<input type="radio" id="i1" class="btn-check" name="ToggleButtonGroupTestModel[value]" value="2" checked autocomplete="off">', $html);
}
}