[Form] Improve rendering of file field in bootstrap 4

This commit is contained in:
Jannik Zschiesche 2018-07-10 21:33:14 +02:00 committed by Fabien Potencier
parent a552e849d5
commit 32ad5d9f9c
2 changed files with 24 additions and 14 deletions

View File

@ -114,6 +114,16 @@
</div>
{%- endblock percent_widget %}
{% block file_widget -%}
<div class="form-group">
<{{ element|default('div') }} class="custom-file">
{%- set type = type|default('file') -%}
{{- block('form_widget_simple') -}}
<label for="{{ form.vars.id }}" class="custom-file-label">Choose File</label>
</{{ element|default('div') }}>
</div>
{% endblock %}
{% block form_widget_simple -%}
{% if type is not defined or type != 'hidden' %}
{%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ' form-control'))|trim}) -%}
@ -186,8 +196,6 @@
{%- if compound is defined and compound -%}
{%- set element = 'legend' -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
{% elseif type is defined and type == 'file' %}
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' custom-file-label')|trim}) -%}
{%- else -%}
{%- set label_attr = label_attr|merge({for: id}) -%}
{%- endif -%}
@ -269,15 +277,6 @@
</{{ element|default('div') }}>
{%- endblock form_row %}
{% block file_row -%}
<div class="form-group">
<{{ element|default('div') }} class="custom-file">
{{- form_widget(form) -}}
{{- form_label(form) -}}
</{{ element|default('div') }}>
</div>
{% endblock %}
{# Errors #}
{% block form_errors -%}

View File

@ -940,9 +940,20 @@ abstract class AbstractBootstrap4LayoutTest extends AbstractBootstrap3LayoutTest
{
$form = $this->factory->createNamed('name', FileType::class);
$this->assertWidgetMatchesXpath($form->createView(), array('attr' => array('class' => 'my&class form-control-file')),
'/input
[@type="file"]
$this->assertWidgetMatchesXpath($form->createView(), array('id' => 'nope', 'attr' => array('class' => 'my&class form-control-file')),
'/div
[@class="form-group"]
[
./div
[@class="custom-file"]
[
./input
[@type="file"]
[@name="name"]
/following-sibling::label
[@for="name"]
]
]
'
);
}