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

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

Jump to bottom
Merged
merged 1 commit into from
May 6, 2021
Merged

[TwigBridge] Add form templates for Bootstrap 5 #39157

merged 1 commit into from
May 6, 2021

Conversation

ker0x
Copy link
Contributor

@ker0x ker0x commented Nov 24, 2020 •
edited
Loading

Q A
Branch 5.x
Bug fix? no
New feature? yes
Deprecations? no
Tickets
License MIT
Doc PR #15158

This PR add support for Bootstrap 5

  • 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
Bootstrap 5 migration

Here is the result:

bootstrap_5_layout
bootstrap_5_horizontal_layout

@ker0x ker0x requested a review from xabbuh as a code owner November 24, 2020 11:35
@carsonbot
Copy link

Hey!

I see that this is your first PR. That is great! Welcome!

Symfony has a contribution guide which I suggest you to read.

In short:

  • Always add tests
  • Keep backward compatibility (see https://symfony.com/bc).
  • Bug fixes must be submitted against the lowest maintained branch where they apply (see https://symfony.com/releases)
  • Features and deprecations must be submitted against the 5.x branch.

Review the GitHub status checks of your pull request and try to solve the reported issues. If some tests are failing, try to see if they are failing because of this change.

When two Symfony core team members approve this change, it will be merged and you will become an official Symfony contributor!
If this PR is merged in a lower version branch, it will be merged up to all maintained branches within a few days.

I am going to sit back now and wait for the reviews.

Cheers!

Carsonbot

@derrabus derrabus added this to the 5.x milestone Nov 26, 2020
@ker0x ker0x force-pushed the feature/bootstrap5-form-template branch from d0a8fd0 to b046e30 Compare December 31, 2020 16:37
@ker0x
Copy link
Contributor Author

ker0x commented Dec 31, 2020

I just updated the PR to add support for floating labels and to fix input-groups in the horizontal layout

@eventhorizonpl
Copy link

Hi,

Would it be possible to get it in Symfony 5.2 when Bootstrap 5 is released?

Best regards,
Michal

@xabbuh
Copy link
Member

xabbuh commented Jan 13, 2021

A new form theme is a new feature which means that it cannot go in any already released version. Thus, the earliest version this can be released in is 5.3.

@eventhorizonpl eventhorizonpl mentioned this pull request Jan 13, 2021
Open
@ker0x ker0x force-pushed the feature/bootstrap5-form-template branch 2 times, most recently from 50d8080 to 4491311 Compare January 26, 2021 19:38
@ker0x
Copy link
Contributor Author

ker0x commented Jan 26, 2021

Some additional screenshot of the current result

bootstrap_5_layout_2
bootstrap_5_layout_2_errors
bootstrap_5_layout_horizontal_2
bootstrap_5_layout_horizontal_2_errors

@jderusse jderusse mentioned this pull request Feb 14, 2021
Closed
@fabpot fabpot mentioned this pull request Mar 4, 2021
Closed
@garak
Copy link
Contributor

garak commented Mar 15, 2021

@ker0x it looks like you need to fix a conflict

@ker0x
Copy link
Contributor Author

ker0x commented Mar 15, 2021

@garak yes I will looked into it this week!

@ker0x ker0x force-pushed the feature/bootstrap5-form-template branch 2 times, most recently from 22a02e0 to fdddda1 Compare March 15, 2021 21:21
@ker0x
Copy link
Contributor Author

ker0x commented Mar 15, 2021

Tests are failing on Appveyor but it seems to be unrelated to my changes 😕

@ker0x ker0x mentioned this pull request Mar 26, 2021
Merged
@ker0x
Copy link
Contributor Author

ker0x commented Mar 26, 2021

PR for documentation is open

@ker0x ker0x force-pushed the feature/bootstrap5-form-template branch from fdddda1 to b02d979 Compare April 2, 2021 13:36
@ker0x ker0x requested review from stof and nicolas-grekas April 8, 2021 23:03
@maxhelias maxhelias mentioned this pull request Apr 9, 2021
Open
5 tasks
94noni
94noni reviewed Apr 10, 2021
View reviewed changes
Copy link
Contributor

@94noni 94noni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for your work here :) 👍

@maxhelias maxhelias mentioned this pull request Apr 17, 2021
Closed
@dd2424
Copy link

dd2424 commented Apr 17, 2021

I am new. If I understood correctly the tests were successful and the theme will be available in the next version? 5.3?

@94noni
Copy link
Contributor

94noni commented Apr 17, 2021

@dd2424 The v5.3 will be released in may, so if this PR is merged before yeah (but I do not know the stabilisation phase for such code), orherwise maybe v5.4

@ker0x Having this with #40449 would be very nice :)
Are you needing some help/reviews/local tests? Or just approval?

@ker0x ker0x force-pushed the feature/bootstrap5-form-template branch from b02d979 to b605fb3 Compare April 18, 2021 09:50
@ker0x
Copy link
Contributor Author

ker0x commented Apr 18, 2021

@94noni Mostlycode review to see if I've done anything wrong and of course approvals from core members so that it can be merged. If needed, I can bootstrap a basic symfony project if people want to test it localy.

@dd2424 It will depend on when bootstrap 5 will be fully released, which should happen very soon and then if this PR is merged. If both are done before 5.3 release, this will be available at this time, otherwise it should wait until 5.4!

@weaverryan
Copy link
Member

FYI - it looks like bootstrap 5 HAS now been released. But I think we’re too late for 5.3.

@garak
Copy link
Contributor

garak commented May 6, 2021

FYI - it looks like bootstrap 5 HAS now been released. But I think we’re too late for 5.3.

Why it's too late? 5.3 is not released yet

@cyrilverloop
Copy link

Bootstrap 5 support in Symfony 5.3 would be great. What can i do to help ?

@fabpot fabpot force-pushed the feature/bootstrap5-form-template branch from b605fb3 to d52d096 Compare May 6, 2021 11:07
@fabpot
Copy link
Member

fabpot commented May 6, 2021

Thank you @ker0x.

@fabpot fabpot merged commit 5b91b37 into symfony:5.x May 6, 2021
@ker0x ker0x deleted the feature/bootstrap5-form-template branch May 6, 2021 11:38
@dd2424
Copy link

dd2424 commented May 6, 2021

Will it be available for version 5.3?

@weaverryan
Copy link
Member

Yes it will - it snuck in past the feature freeze - it's a bit of a special case since we were waiting for Bootstrap 5's release (which came after feature freeze)

@fabpot fabpot mentioned this pull request May 9, 2021
Merged
javiereguiluz added a commit to symfony/symfony-docs that referenced this pull request May 21, 2021
@javiereguiluz
minor #15158 [Form] Bootstrap 5 documentation (ker0x)
a80da4a 
This PR was submitted for the 5.4 branch but it was squashed and merged into the 5.3 branch instead.

Discussion
----------

[Form] Bootstrap 5 documentation

This PR introduce documentation for [Bootstrap 5 form template](symfony/symfony#39157)

Commits
-------

bcaf46a [Form] Bootstrap 5 documentation
@domhaas
Copy link

domhaas commented Jun 21, 2021

Thanks @ker0x

Just a small hint for <5.3-users:
twig bs5-templates works so far very fine also in 4.4:
domhaas@443989d

The only thing I've needed to change/remove so far is "label_html" as it was introduced in sf 5.1. So just put the templates into your templates/ folder and configure twig to use it:

twig:
    #(...)
    form_themes: ['bootstrap_5_layout.html.twig']

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@garak garak garak left review comments

@94noni 94noni 94noni left review comments

@fabpot fabpot fabpot approved these changes

@xabbuh xabbuh Awaiting requested review from xabbuh

@stof stof Awaiting requested review from stof

@nicolas-grekas nicolas-grekas Awaiting requested review from nicolas-grekas

Assignees
No one assigned
Labels
Feature Status: Reviewed TwigBridge
Projects
None yet
Milestone
5.4
Development

Successfully merging this pull request may close these issues.