Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5b91b37

Browse files
fabpotfabpot
committed
feature #39157 [TwigBridge] Add form templates for Bootstrap 5 (ker0x)
This PR was squashed before being merged into the 5.3-dev branch. Discussion ---------- [TwigBridge] Add form templates for Bootstrap 5 | Q | A | ------------- | --- | Branch | 5.x | Bug fix? | no | New feature? | yes | Deprecations? | no | Tickets | | License | MIT | Doc PR | [#15158](symfony/symfony-docs#15158) This PR add support for [Bootstrap 5](https://v5.getbootstrap.com/) * Removal of the `form-group` class as it no longer exists in Bootstrap 5. Instead, row `div` have a `mb-3` class by default that can be override with the `row_attr` option. * Errors are no longer display inside `label` but after the `widget` (or `help` if present). * Replace `form-control` with `form-select` in `choice_widget_collapsed` block. * Replace `form-control` with `form-range` in `form_widget_simple` block when the type is `range`. * Add `form-control-color` to the `widget` class if type is `color`. * Replace `small` with `div` element for `help` and also remove the `text-muted` class. * Update the `percent_widget` and `money_widget` to handle correctly prepend and append elements. * Drop support for custom file input as it's no longer (or yet ?) supported in Bootstrap 5 [Bootstrap 5 forms overview](https://v5.getbootstrap.com/docs/5.0/forms/overview/) [Bootstrap 5 migration](https://v5.getbootstrap.com/docs/5.0/migration/) Here is the result: ![bootstrap_5_layout](https://user-images.githubusercontent.com/5331654/100088569-9e1e9d80-2e50-11eb-88bf-2596e9ae7d28.png) ![bootstrap_5_horizontal_layout](https://user-images.githubusercontent.com/5331654/100088582-a24abb00-2e50-11eb-9b0c-09336c0327cd.png) Commits ------- d52d096 [TwigBridge] Add form templates for Bootstrap 5
2 parents 55574de + d52d096 commit 5b91b37

10 files changed

+2966
-6
lines changed

‎src/Symfony/Bridge/Twig/CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ CHANGELOG
22
=========
33

44
5.3
5-
-----
5+
---
66

77
* Add a new `markAsPublic` method on `NotificationEmail` to change the `importance` context option to null after creation
88
* Add a new `fragment_uri()` helper to generate the URI of a fragment
9+
* Add support of Bootstrap 5 for form theming
910

1011
5.3.0
1112
-----

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@
5454
{%- endif -%}
5555
{%- endblock radio_widget %}
5656

57+
{% block choice_widget_collapsed -%}
58+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
59+
{{- parent() -}}
60+
{%- endblock choice_widget_collapsed %}
61+
5762
{# Labels #}
5863

5964
{% block form_label -%}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,11 @@
202202
{%- endif -%}
203203
{%- endblock radio_widget %}
204204

205+
{% block choice_widget_collapsed -%}
206+
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
207+
{{- parent() -}}
208+
{%- endblock choice_widget_collapsed %}
209+
205210
{% block choice_widget_expanded -%}
206211
<div {{ block('widget_container_attributes') }}>
207212
{%- for child in form %}

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

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
{% use "bootstrap_5_layout.html.twig" %}
2+
3+
{# Labels #}
4+
5+
{% block form_label -%}
6+
{%- if label is same as(false) -%}
7+
<div class="{{ block('form_label_class') }}"></div>
8+
{%- else -%}
9+
{%- set row_class = row_class|default(row_attr.class|default('')) -%}
10+
{%- if 'form-floating' not in row_class and 'input-group' not in row_class -%}
11+
{%- if expanded is not defined or not expanded -%}
12+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
13+
{%- endif -%}
14+
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) -%}
15+
{%- endif -%}
16+
{{- parent() -}}
17+
{%- endif -%}
18+
{%- endblock form_label %}
19+
20+
{% block form_label_class -%}
21+
col-sm-2
22+
{%- endblock form_label_class %}
23+
24+
{# Rows #}
25+
26+
{% block form_row -%}
27+
{%- if expanded is defined and expanded -%}
28+
{{ block('fieldset_form_row') }}
29+
{%- else -%}
30+
{%- set widget_attr = {} -%}
31+
{%- if help is not empty -%}
32+
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
33+
{%- endif -%}
34+
{%- set row_class = row_class|default(row_attr.class|default('mb-3')) -%}
35+
{%- set is_form_floating = is_form_floating|default('form-floating' in row_class) -%}
36+
{%- set is_input_group = is_input_group|default('input-group' in row_class) -%}
37+
{#- Remove behavior class from the main container -#}
38+
{%- set row_class = row_class|replace({'form-floating': '', 'input-group': ''}) -%}
39+
<div{% with {attr: row_attr|merge({class: (row_class ~ ' row' ~ ((not compound or force_error|default(false)) and not valid ? ' is-invalid'))|trim})} %}{{ block('attributes') }}{% endwith %}>
40+
{%- if is_form_floating or is_input_group -%}
41+
<div class="{{ block('form_label_class') }}"></div>
42+
<div class="{{ block('form_group_class') }}">
43+
{%- if is_form_floating -%}
44+
<div class="form-floating">
45+
{{- form_widget(form, widget_attr) -}}
46+
{{- form_label(form) -}}
47+
</div>
48+
{%- elseif is_input_group -%}
49+
<div class="input-group">
50+
{{- form_label(form) -}}
51+
{{- form_widget(form, widget_attr) -}}
52+
{#- Hack to properly display help with input group -#}
53+
{{- form_help(form) -}}
54+
</div>
55+
{%- endif -%}
56+
{%- if not is_input_group -%}
57+
{{- form_help(form) -}}
58+
{%- endif -%}
59+
{{- form_errors(form) -}}
60+
</div>
61+
{%- else -%}
62+
{{- form_label(form) -}}
63+
<div class="{{ block('form_group_class') }}">
64+
{{- form_widget(form, widget_attr) -}}
65+
{{- form_help(form) -}}
66+
{{- form_errors(form) -}}
67+
</div>
68+
{%- endif -%}
69+
{##}</div>
70+
{%- endif -%}
71+
{%- endblock form_row %}
72+
73+
{% block fieldset_form_row -%}
74+
{%- set widget_attr = {} -%}
75+
{%- if help is not empty -%}
76+
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
77+
{%- endif -%}
78+
<fieldset{% with {attr: row_attr|merge({class: row_attr.class|default('mb-3')|trim})} %}{{ block('attributes') }}{% endwith %}>
79+
<div class="row{% if (not compound or force_error|default(false)) and not valid %} is-invalid{% endif %}">
80+
{{- form_label(form) -}}
81+
<div class="{{ block('form_group_class') }}">
82+
{{- form_widget(form, widget_attr) -}}
83+
{{- form_help(form) -}}
84+
{{- form_errors(form) -}}
85+
</div>
86+
</div>
87+
</fieldset>
88+
{%- endblock fieldset_form_row %}
89+
90+
{% block submit_row -%}
91+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
92+
<div class="{{ block('form_label_class') }}"></div>{#--#}
93+
<div class="{{ block('form_group_class') }}">
94+
{{- form_widget(form) -}}
95+
</div>{#--#}
96+
</div>
97+
{%- endblock submit_row %}
98+
99+
{% block reset_row -%}
100+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
101+
<div class="{{ block('form_label_class') }}"></div>{#--#}
102+
<div class="{{ block('form_group_class') }}">
103+
{{- form_widget(form) -}}
104+
</div>{#--#}
105+
</div>
106+
{%- endblock reset_row %}
107+
108+
{% block button_row -%}
109+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
110+
<div class="{{ block('form_label_class') }}"></div>{#--#}
111+
<div class="{{ block('form_group_class') }}">
112+
{{- form_widget(form) -}}
113+
</div>{#--#}
114+
</div>
115+
{%- endblock button_row %}
116+
117+
{% block checkbox_row -%}
118+
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
119+
<div class="{{ block('form_label_class') }}"></div>{#--#}
120+
<div class="{{ block('form_group_class') }}">
121+
{{- form_widget(form) -}}
122+
{{- form_help(form) -}}
123+
{{- form_errors(form) -}}
124+
</div>{#--#}
125+
</div>
126+
{%- endblock checkbox_row %}
127+
128+
{% block form_group_class -%}
129+
col-sm-10
130+
{%- endblock form_group_class %}

0 commit comments

Comments
 (0)