Skip to content

Commit b375957

Browse files
nicolas-grekasnicolas-grekas
committed
bug symfony#26167 [TwigBridge] Apply some changes to support Bootstrap4-stable (mpiot, Nyholm)
This PR was merged into the 3.4 branch. Discussion ---------- [TwigBridge] Apply some changes to support Bootstrap4-stable | Q | A | ------------- | --- | Branch? | 3.4 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | symfony#25655 symfony#25635 symfony#24435 | License | MIT | Doc PR | - Follow up of symfony#25715, see discussion there. This fixes the following errors: - Delete form-control-label, don't used in Bootstrap 4 - Replace col-form-legend by col-form-label - Separate the label and input (before the input was in the label) - Use form-check-inline to put radio and/or checkboxes inline - Add support of custom form for radio and checkboxes - Fix input-group: MoneyType (Issue symfony#25655), PercentType - Remove form-control duplication (Issue symfony#25635) - Fix Errors in label (symfony#24435) Commits ------- 14e2282 Fixed broken tests cf4e956 [TwigBridge] Apply some changes to support Bootstrap4-stable
2 parents 4ccf8bc + 14e2282 commit b375957

File tree

5 files changed

+262
-282
lines changed

5 files changed

+262
-282
lines changed

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

Lines changed: 60 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,25 @@
33
{# Widgets #}
44

55
{% block money_widget -%}
6-
{% if not valid %}
7-
{% set group_class = ' form-control is-invalid' %}
8-
{% set valid = true %}
9-
{% endif %}
10-
{{- parent() -}}
6+
{%- set prepend = not (money_pattern starts with '{{') -%}
7+
{%- set append = not (money_pattern ends with '}}') -%}
8+
{%- if prepend or append -%}
9+
<div class="input-group{{ group_class|default('') }}">
10+
{%- if prepend -%}
11+
<div class="input-group-prepend">
12+
<span class="input-group-text">{{ money_pattern|replace({ '{{ widget }}':''}) }}</span>
13+
</div>
14+
{%- endif -%}
15+
{{- block('form_widget_simple') -}}
16+
{%- if append -%}
17+
<div class="input-group-append">
18+
<span class="input-group-text">{{ money_pattern|replace({ '{{ widget }}':''}) }}</span>
19+
</div>
20+
{%- endif -%}
21+
</div>
22+
{%- else -%}
23+
{{- block('form_widget_simple') -}}
24+
{%- endif -%}
1125
{%- endblock money_widget %}
1226

1327
{% block datetime_widget -%}
@@ -39,7 +53,6 @@
3953
{% set attr = attr|merge({class: (attr.class|default('') ~ ' form-control is-invalid')|trim}) -%}
4054
{% set valid = true %}
4155
{%- endif -%}
42-
4356
{%- if widget == 'single_text' -%}
4457
{{- block('form_widget_simple') -}}
4558
{%- else -%}
@@ -80,7 +93,9 @@
8093
<div class="input-group{{ not valid ? ' form-control is-invalid' }}">
8194
{% set valid = true %}
8295
{{- block('form_widget_simple') -}}
83-
<span class="input-group-addon">%</span>
96+
<div class="input-group-append">
97+
<span class="input-group-text">%</span>
98+
</div>
8499
</div>
85100
{%- endblock percent_widget %}
86101

@@ -93,7 +108,7 @@
93108

94109
{%- block widget_attributes -%}
95110
{%- if not valid %}
96-
{% set attr = attr|merge({class: (attr.class|default('') ~ ' form-control is-invalid')|trim}) %}
111+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) %}
97112
{% endif -%}
98113
{{ parent() }}
99114
{%- endblock widget_attributes -%}
@@ -105,55 +120,44 @@
105120

106121
{% block checkbox_widget -%}
107122
{%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
108-
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
109-
{% if 'checkbox-inline' in parent_label_class %}
110-
{{- form_label(form, null, { widget: parent() }) -}}
111-
{% elseif 'form-check-inline' in parent_label_class %}
112-
<div class="form-check{{ not valid ? ' form-control is-invalid' }} form-check-inline">
123+
{%- if 'checkbox-custom' in parent_label_class -%}
124+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) -%}
125+
<div class="custom-control custom-checkbox{{ 'checkbox-inline' in parent_label_class ? ' custom-control-inline' }}">
113126
{{- form_label(form, null, { widget: parent() }) -}}
114127
</div>
115-
{% else -%}
116-
<div class="form-check{{ not valid ? ' form-control is-invalid' }}">
128+
{%- else -%}
129+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
130+
<div class="form-check{{ 'checkbox-inline' in parent_label_class ? ' form-check-inline' }}">
117131
{{- form_label(form, null, { widget: parent() }) -}}
118132
</div>
119133
{%- endif -%}
120134
{%- endblock checkbox_widget %}
121135

122136
{% block radio_widget -%}
123137
{%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
124-
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
125-
{%- if 'radio-inline' in parent_label_class -%}
126-
{{- form_label(form, null, { widget: parent() }) -}}
138+
{%- if 'radio-custom' in parent_label_class -%}
139+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) -%}
140+
<div class="custom-control custom-radio{{ 'radio-inline' in parent_label_class ? ' custom-control-inline' }}">
141+
{{- form_label(form, null, { widget: parent() }) -}}
142+
</div>
127143
{%- else -%}
128-
<div class="form-check{{ not valid ? ' form-control is-invalid' }}">
144+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
145+
<div class="form-check{{ 'radio-inline' in parent_label_class ? ' form-check-inline' }}">
129146
{{- form_label(form, null, { widget: parent() }) -}}
130147
</div>
131148
{%- endif -%}
132149
{%- endblock radio_widget %}
133150

134151
{% block choice_widget_expanded -%}
135-
{% if '-inline' in label_attr.class|default('') -%}
152+
<div {{ block('widget_container_attributes') }}>
136153
{%- for child in form %}
137154
{{- form_widget(child, {
138155
parent_label_class: label_attr.class|default(''),
139156
translation_domain: choice_translation_domain,
140157
valid: valid,
141158
}) -}}
142159
{% endfor -%}
143-
{%- else -%}
144-
{%- if not valid -%}
145-
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control is-invalid')|trim}) %}
146-
{%- endif -%}
147-
<div {{ block('widget_container_attributes') }}>
148-
{%- for child in form %}
149-
{{- form_widget(child, {
150-
parent_label_class: label_attr.class|default(''),
151-
translation_domain: choice_translation_domain,
152-
valid: true,
153-
}) -}}
154-
{% endfor -%}
155-
</div>
156-
{%- endif %}
160+
</div>
157161
{%- endblock choice_widget_expanded %}
158162

159163
{# Labels #}
@@ -162,7 +166,7 @@
162166
{% if label is not same as(false) -%}
163167
{%- if compound is defined and compound -%}
164168
{%- set element = 'legend' -%}
165-
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-legend')|trim}) -%}
169+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
166170
{%- else -%}
167171
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' form-control-label')|trim}) -%}
168172
{%- endif -%}
@@ -179,19 +183,26 @@
179183
{% set label = name|humanize %}
180184
{%- endif -%}
181185
{%- endif -%}
182-
<{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}{% block form_label_errors %}{{- form_errors(form) -}}{% endblock form_label_errors %}</{{ element|default('label') }}>
186+
<{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}{{- form_errors(form) -}}</{{ element|default('label') }}>
183187
{%- endif -%}
184188
{%- endblock form_label %}
185189

186190
{% block checkbox_radio_label -%}
187191
{#- Do not display the label if widget is not defined in order to prevent double label rendering -#}
188192
{%- if widget is defined -%}
189-
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%}
193+
{%- if parent_label_class is defined and ('checkbox-custom' in parent_label_class or 'radio-custom' in parent_label_class) -%}
194+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' custom-control-label')|trim}) -%}
195+
{%- else %}
196+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%}
197+
{%- endif %}
198+
{%- if not compound -%}
199+
{% set label_attr = label_attr|merge({'for': id}) %}
200+
{%- endif -%}
190201
{%- if required -%}
191202
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) -%}
192203
{%- endif -%}
193204
{%- if parent_label_class is defined -%}
194-
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|trim}) -%}
205+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|replace({'checkbox-inline': '', 'radio-inline': '', 'checkbox-custom': '', 'radio-custom': ''})|trim}) -%}
195206
{%- endif -%}
196207
{%- if label is not same as(false) and label is empty -%}
197208
{%- if label_format is not empty -%}
@@ -203,8 +214,11 @@
203214
{%- set label = name|humanize -%}
204215
{%- endif -%}
205216
{%- endif -%}
217+
218+
{{ widget|raw }}
206219
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
207-
{{- widget|raw }} {{ label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans({}, translation_domain)) -}}
220+
{{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans({}, translation_domain)) -}}
221+
{{- form_errors(form) -}}
208222
</label>
209223
{%- endif -%}
210224
{%- endblock checkbox_radio_label %}
@@ -225,12 +239,12 @@
225239

226240
{% block form_errors -%}
227241
{%- if errors|length > 0 -%}
228-
<div class="{% if form is not rootform %}invalid-feedback{% else %}alert alert-danger{% endif %}">
229-
<ul class="list-unstyled mb-0">
230-
{%- for error in errors -%}
231-
<li>{{ error.message }}</li>
232-
{%- endfor -%}
233-
</ul>
234-
</div>
242+
<div class="{% if form is not rootform %}invalid-feedback d-block{% else %}alert alert-danger{% endif %}">
243+
<ul class="list-unstyled mb-0">
244+
{%- for error in errors -%}
245+
<li>{{ error.message }}</li>
246+
{%- endfor -%}
247+
</ul>
248+
</div>
235249
{%- endif %}
236250
{%- endblock form_errors %}

‎src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_base_layout.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147

148148
{% block choice_label -%}
149149
{# remove the checkbox-inline and radio-inline class, it's only useful for embed labels #}
150-
{%- set label_attr = label_attr|merge({class: label_attr.class|default('')|replace({'checkbox-inline': '', 'radio-inline': ''})|trim}) -%}
150+
{%- set label_attr = label_attr|merge({class: label_attr.class|default('')|replace({'checkbox-inline': '', 'radio-inline': '', 'checkbox-custom': '', 'radio-custom': ''})|trim}) -%}
151151
{{- block('form_label') -}}
152152
{% endblock choice_label %}
153153

‎src/Symfony/Bridge/Twig/composer.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"symfony/asset": "~2.8|~3.0|~4.0",
2424
"symfony/dependency-injection": "~2.8|~3.0|~4.0",
2525
"symfony/finder": "~2.8|~3.0|~4.0",
26-
"symfony/form": "~3.4|~4.0",
26+
"symfony/form": "^3.4.5|^4.0.5",
2727
"symfony/http-foundation": "^3.3.11|~4.0",
2828
"symfony/http-kernel": "~3.2|~4.0",
2929
"symfony/polyfill-intl-icu": "~1.0",
@@ -41,7 +41,7 @@
4141
"symfony/workflow": "~3.3|~4.0"
4242
},
4343
"conflict": {
44-
"symfony/form": "<3.4",
44+
"symfony/form": "<3.4.5",
4545
"symfony/console": "<3.4"
4646
},
4747
"suggest": {

‎src/Symfony/Component/Form/Tests/AbstractBootstrap4HorizontalLayoutTest.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ public function testLabelOnForm()
5353

5454
$this->assertMatchesXpath($html,
5555
'/legend
56-
[@class="col-form-label col-sm-2 col-form-legend required"]
56+
[@class="col-form-label col-sm-2 col-form-label required"]
5757
[.="[trans]Name[/trans]"]
5858
'
5959
);
@@ -144,7 +144,7 @@ public function testLegendOnExpandedType()
144144

145145
$this->assertMatchesXpath($html,
146146
'/legend
147-
[@class="col-sm-2 col-form-legend required"]
147+
[@class="col-sm-2 col-form-label required"]
148148
[.="[trans]Custom label[/trans]"]
149149
'
150150
);

0 commit comments

Comments
 (0)