Skip to content

[TwigBridge] Add form templates for Bootstrap 5 #39157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 6, 2021
Merged

[TwigBridge] Add form templates for Bootstrap 5 #39157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/Symfony/Bridge/Twig/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ CHANGELOG
=========

5.3
-----
---

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

5.3.0
-----
Expand Down
5 changes: 5 additions & 0 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@
{%- endif -%}
{%- endblock radio_widget %}

{% block choice_widget_collapsed -%}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
{{- parent() -}}
{%- endblock choice_widget_collapsed %}

{# Labels #}

{% block form_label -%}
Expand Down
5 changes: 5 additions & 0 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,11 @@
{%- endif -%}
{%- endblock radio_widget %}

{% block choice_widget_collapsed -%}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
{{- parent() -}}
{%- endblock choice_widget_collapsed %}

{% block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{%- for child in form %}
Expand Down
130 changes: 130 additions & 0 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_horizontal_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
{% use "bootstrap_5_layout.html.twig" %}

{# Labels #}

{% block form_label -%}
{%- if label is same as(false) -%}
<div class="{{ block('form_label_class') }}"></div>
{%- else -%}
{%- set row_class = row_class|default(row_attr.class|default('')) -%}
{%- if 'form-floating' not in row_class and 'input-group' not in row_class -%}
{%- if expanded is not defined or not expanded -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
{%- endif -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) -%}
{%- endif -%}
{{- parent() -}}
{%- endif -%}
{%- endblock form_label %}

{% block form_label_class -%}
col-sm-2
{%- endblock form_label_class %}

{# Rows #}

{% block form_row -%}
{%- if expanded is defined and expanded -%}
{{ block('fieldset_form_row') }}
{%- else -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
{%- set row_class = row_class|default(row_attr.class|default('mb-3')) -%}
{%- set is_form_floating = is_form_floating|default('form-floating' in row_class) -%}
{%- set is_input_group = is_input_group|default('input-group' in row_class) -%}
{#- Remove behavior class from the main container -#}
{%- set row_class = row_class|replace({'form-floating': '', 'input-group': ''}) -%}
<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 %}>
{%- if is_form_floating or is_input_group -%}
<div class="{{ block('form_label_class') }}"></div>
<div class="{{ block('form_group_class') }}">
{%- if is_form_floating -%}
<div class="form-floating">
{{- form_widget(form, widget_attr) -}}
{{- form_label(form) -}}
</div>
{%- elseif is_input_group -%}
<div class="input-group">
{{- form_label(form) -}}
{{- form_widget(form, widget_attr) -}}
{#- Hack to properly display help with input group -#}
{{- form_help(form) -}}
</div>
{%- endif -%}
{%- if not is_input_group -%}
{{- form_help(form) -}}
{%- endif -%}
{{- form_errors(form) -}}
</div>
{%- else -%}
{{- form_label(form) -}}
<div class="{{ block('form_group_class') }}">
{{- form_widget(form, widget_attr) -}}
{{- form_help(form) -}}
{{- form_errors(form) -}}
</div>
{%- endif -%}
{##}</div>
{%- endif -%}
{%- endblock form_row %}

{% block fieldset_form_row -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
<fieldset{% with {attr: row_attr|merge({class: row_attr.class|default('mb-3')|trim})} %}{{ block('attributes') }}{% endwith %}>
<div class="row{% if (not compound or force_error|default(false)) and not valid %} is-invalid{% endif %}">
{{- form_label(form) -}}
<div class="{{ block('form_group_class') }}">
{{- form_widget(form, widget_attr) -}}
{{- form_help(form) -}}
{{- form_errors(form) -}}
</div>
</div>
</fieldset>
{%- endblock fieldset_form_row %}

{% block submit_row -%}
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
<div class="{{ block('form_label_class') }}"></div>{#--#}
<div class="{{ block('form_group_class') }}">
{{- form_widget(form) -}}
</div>{#--#}
</div>
{%- endblock submit_row %}

{% block reset_row -%}
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
<div class="{{ block('form_label_class') }}"></div>{#--#}
<div class="{{ block('form_group_class') }}">
{{- form_widget(form) -}}
</div>{#--#}
</div>
{%- endblock reset_row %}

{% block button_row -%}
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
<div class="{{ block('form_label_class') }}"></div>{#--#}
<div class="{{ block('form_group_class') }}">
{{- form_widget(form) -}}
</div>{#--#}
</div>
{%- endblock button_row %}

{% block checkbox_row -%}
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('mb-3') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
<div class="{{ block('form_label_class') }}"></div>{#--#}
<div class="{{ block('form_group_class') }}">
{{- form_widget(form) -}}
{{- form_help(form) -}}
{{- form_errors(form) -}}
</div>{#--#}
</div>
{%- endblock checkbox_row %}

{% block form_group_class -%}
col-sm-10
{%- endblock form_group_class %}
Loading