8000 bug #27919 [Form] Improve rendering of `file` field in bootstrap 4 (a… · symfony/symfony@25df3e3 · GitHub
[go: up one dir, main page]

Skip to content

Commit 25df3e3

Browse files
committed
bug #27919 [Form] Improve rendering of file field in bootstrap 4 (apfelbox)
This PR was squashed before being merged into the 4.1 branch (closes #27919). Discussion ---------- [Form] Improve rendering of `file` field in bootstrap 4 | Q | A | ------------- | --- | Branch? | 4.1+ | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | — | License | MIT | Doc PR | — Hi 👋 currently adding a file type to a form looks weird in the bootstrap 4 form themes: ```php $builder ->add("pdfFile", FileType::class, [ "label" => "PDF", ]); ``` ## Before ### Vertical Form ![2018-07-10 at 21 36](https://user-images.githubusercontent.com/1032411/42533175-6b88e33a-8489-11e8-927a-8e987f362913.png) ### Horizontal Form ![2018-07-10 at 21 37](https://user-images.githubusercontent.com/1032411/42533197-7d45944c-8489-11e8-970f-79b18a273366.png) ## After ### Vertical Form ![2018-07-10 at 21 38](https://user-images.githubusercontent.com/1032411/42533229-8ebe44a8-8489-11e8-94e0-891403063476.png) ### Horizontal Form ![2018-07-10 at 21 38](https://user-images.githubusercontent.com/1032411/42533247-99782db4-8489-11e8-9f66-30a5dccdaa9d.png) ## Things to consider There are three labels here: ![2018-07-10 at 21 40](https://user-images.githubusercontent.com/1032411/42533370-ecbaf63c-8489-11e8-9be8-1c8c3342c459.png) 1) the actual field label. Here the `$options["label"]` is used. 2) the placeholder. Here `$options["attr"]["placeholder"] ?? ""` is used **new** 3) the label on the button. This is set in CSS actually, on an `::after` attribute. There isn't much we can do about 3) because there is no inline HTML-way to overwrite the style of a pseudo element. So if the app developer wants to have localization in this field as well, (s)he has to set it in their CSS file [as described in the bootstrap docs](https://getbootstrap.com/docs/4.0/components/forms/#file-browser) ## Todo - [x] ~~WIP because I haven't managed to get the test suite to run locally yet, so we will debug with Travis 🙌~~  okay, getting them to work is really, really easy, but you just have to get over yourself and do it 🙄 Commits ------- 32ad5d9 [Form] Improve rendering of `file` field in bootstrap 4
2 parents 10f7dcc + 32ad5d9 commit 25df3e3

File tree

2 files changed

+24
-14
lines changed

2 files changed

+24
-14
lines changed

src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,16 @@
114114
</div>
115115
{%- endblock percent_widget %}
116116

117+
{% block file_widget -%}
118+
<div class="form-group">
119+
<{{ element|default('div') }} class="custom-file">
120+
{%- set type = type|default('file') -%}
121+
{{- block('form_widget_simple') -}}
122+
<label for="{{ form.vars.id }}" class="custom-file-label">Choose File</label>
123+
</{{ element|default('div') }}>
124+
</div>
125+
{% endblock %}
126+
117127
{% block form_widget_simple -%}
118128
{% if type is not defined or type != 'hidden' %}
119129
{%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ' form-control'))|trim}) -%}
@@ -186,8 +196,6 @@
186196
{%- if compound is defined and < 8000 span class="pl-smi">compound -%}
187197
{%- set element = 'legend' -%}
188198
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
189-
{% elseif type is defined and type == 'file' %}
190-
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' custom-file-label')|trim}) -%}
191199
{%- else -%}
192200
{%- set label_attr = label_attr|merge({for: id}) -%}
193201
{%- endif -%}
@@ -269,15 +277,6 @@
269277
</{{ element|default('div') }}>
270278
{%- endblock form_row %}
271279

272-
{% block file_row -%}
273-
<div class="form-group">
274-
<{{ element|default('div') }} class="custom-file">
275-
{{- form_widget(form) -}}
276-
{{- form_label(form) -}}
277-
</{{ element|default('div') }}>
278-
</div>
279-
{% endblock %}
280-
281280
{# Erro 8000 rs #}
282281

283282
{% block form_errors -%}

src/Symfony/Component/Form/Tests/AbstractBootstrap4LayoutTest.php

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -940,9 +940,20 @@ public function testFile()
940940
{
941941
$form = $this->factory->createNamed('name', FileType::class);
942942

943-
$this->assertWidgetMatchesXpath($form->createView(), array('attr' => array('class' => 'my&class form-control-file')),
944-
'/input
945-
[@type="file"]
943+
$this->assertWidgetMatchesXpath($form->createView(), array('id' => 'nope', 'attr' => array('class' => 'my&class form-control-file')),
944+
'/div
945+
[@class="form-group"]
946+
[
947+
./div
948+
[@class="custom-file"]
949+
[
950+
./input
951+
[@type="file"]
952+
[@name="name"]
953+
/following-sibling::label
954+
[@for="name"]
955+
]
956+
]
946957
'
947958
);
948959
}

0 commit comments

Comments
 (0)
0