8000 [RFC][Form] Improve form theming · Issue #29651 · symfony/symfony · GitHub
[go: up one dir, main page]

Skip to content

[RFC][Form] Improve form theming #29651

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.

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

Closed
yceruto opened this issue Dec 19, 2018 · 5 comments
Closed

[RFC][Form] Improve form theming #29651

yceruto opened this issue Dec 19, 2018 · 5 comments
Labels
Form RFC RFC = Request For Comments (proposals about features that you want to be discussed) TwigBridge

Comments

@yceruto
Copy link
Member
yceruto commented Dec 19, 2018

color-picker

Suppose you've several form fields (let's say "color") in different place around the app that require a JS component for better UX. For simplicity, this component will not require any additional option, just the value (the hex color #AEA1FF) that coming from the underlying data. And of course, it must be reusable.

How to put custom code easily together with the color input? What's the shortest path to achieve it? Yeah "Form Theming" so let's move forward.

(Step 1) Create a new form type (let's name it ColorPickerType) which will extend from TextType and nothing more, almost empty! Why this step? -> because we need a global/reusable block name in our form themes template to render the JS component code under <input /> tag -> for each color form field regardless what form it belongs to, and it's what precisely I want improve here: "I want to remove this step":

class ColorPickerType extends AbstractType
{
    public function getParent(): string
    {
        return TextType::class;
    }
}

(Step 2) Create the form themes template form/fields.html.twig with the customized block:

{% block color_picker_widget %}
    {{ form_widget(form, {'attr': {'v-model': 'color', '@focus': 'open'}}) }}
    {# custom code here #}
{% endblock %}

Great! we already have a new block prefix called color_picker allowing easy customization. Now, I need to configure my color fields with my new ColorPickerType.

BUT what if you want to configure this block prefix without adding a new form type? Yes, you can currently through the block_name option, but most of the time it'll work only for individual fields as each one is prefixed at the same time with the parent block prefix, that's always happening in my case (using EasyAdminBundle or SonataAdminBundle) where the root form always has a name. (see related source code)

And here is where my proposal comes from:

What about add an exclusive block prefix that don't depend of the parent form?
I'm thinking in a new option, maybe block_prefix or better (default null) if set add this prefix to the list, just before the unique prefix:

$blockPrefixes[] = $uniqueBlockPrefix;

Example (After):

(Step 1) Instead of create a new form type, configure the block_prefix option e.g. color_picker.
(Step 2) Same as before.

What do you think?

Cheers!

@yceruto
Copy link
Member Author
yceruto commented Dec 20, 2018
Before After
colorpickertypesnippet It won't be necessary for simple theming
1 2
3 3

@xabbuh xabbuh added Form RFC RFC = Request For Comments (proposals about features that you want to be discussed) TwigBridge labels Dec 20, 2018
@HeahDude
Copy link
Contributor

Makes sense. 👍 for me

@ogizanagi
Copy link
Contributor

Makes sense to me too 👍

@OskarStark
Copy link
Contributor

Nice idea 👍

@Schooller
Copy link

Great idea!!!👍

@fabpot fabpot closed this as completed Jan 3, 2019
fabpot added a commit that referenced this issue Jan 3, 2019
…eming (yceruto)

This PR was merged into the 4.3-dev branch.

Discussion
----------

[Form] Add new block_prefix option for an easy form theming

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | #29651
| License       | MIT
| Doc PR        | symfony/symfony-docs#10835

Commits
-------

bd50ac4 Add block_prefix option for an easy form theming
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Form RFC RFC = Request For Comments (proposals about features that you want to be discussed) TwigBridge
Projects
None yet
Development

No branches or pull requests

7 participants
0