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
This commit is contained in:
commit
25df3e32cb
@ -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 -%}
|
||||
|
@ -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"]
|
||||
]
|
||||
]
|
||||
'
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user