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() * @see Html::radio()
*/ */
public $labelOptions = [ public $labelOptions = [
'class' => ['btn', 'btn-secondary'], 'class' => ['btn', 'btn-outline-secondary'],
]; ];
/** /**
* @var bool whether the items labels should be HTML-encoded. * @var bool whether the items labels should be HTML-encoded.
@ -115,21 +115,20 @@ class ToggleButtonGroup extends InputWidget
{ {
unset($index); unset($index);
$labelOptions = $this->labelOptions; $labelOptions = $this->labelOptions;
$labelOptions['wrapInput'] = true; $labelOptions['wrapInput'] = false;
Html::addCssClass($labelOptions, ['widget' => 'btn']); Html::addCssClass($labelOptions, ['widget' => 'btn']);
if ($checked) {
Html::addCssClass($labelOptions, ['activate' => 'active']);
}
$type = $this->type; $type = $this->type;
if ($this->encodeLabels) { if ($this->encodeLabels) {
$label = Html::encode($label); $label = Html::encode($label);
} }
$options = [
return Html::$type($name, $checked, [
'label' => $label, 'label' => $label,
'labelOptions' => $labelOptions, 'labelOptions' => $labelOptions,
'autocomplete' => 'off', 'autocomplete' => 'off',
'value' => $value, '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 $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> <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-secondary" for="i1"><input type="checkbox" id="i1" name="ToggleButtonGroupTestModel[value][]" value="2" autocomplete="off">item 2</label></div> <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; HTML;
$this->assertEqualsWithoutLE($expectedHtml, $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() public function testRadio()
@ -63,8 +65,10 @@ HTML;
]); ]);
$expectedHtml = <<<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> <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-secondary" for="i1"><input type="radio" id="i1" name="ToggleButtonGroupTestModel[value]" value="2" autocomplete="off">item 2</label></div> <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; HTML;
$this->assertEqualsWithoutLE($expectedHtml, $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);
} }
} }