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

Skip to content

Commit 929701a

Browse files
fabpotnicolas-grekas
authored andcommitted
bug symfony#27919 [Form] Improve rendering of file field in bootstrap 4 (apfelbox)
This PR was squashed before being merged into the 4.1 branch (closes symfony#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
1 parent d61beda commit 929701a

File tree

2 files changed

+24
-3
lines changed

2 files changed

+24
-3
lines changed

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

Lines changed: 10 additions & 0 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('') ~ ' form-control' ~ (type|default('') == 'file' ? '-file' : ''))|trim}) -%}

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

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

926-
$this->assertWidgetMatchesXpath($form->createView(), array('attr' => array('class' => 'my&class form-control-file')),
927-
'/input
928-
[@type="file"]
926+
$this->assertWidgetMatchesXpath($form->createView(), array('id' => 'nope', 'attr' => array('class' => 'my&class form-control-file')),
927+
'/div
928+
[@class="form-group"]
929+
[
930+
./div
931+
[@class="custom-file"]
932+
[
933+
./input
934+
[@type="file"]
935+
[@name="name"]
936+
/following-sibling::label
937+
[@for="name"]
938+
]
939+
]
929940
'
930941
);
931942
}

0 commit comments

Comments
 (0)
0