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

32ad5d9f9c [Form] Improve rendering of `file` field in bootstrap 4

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

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

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

@@ -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"]
+            ]
+    ]
 '
         );
     }