Skip to content

Commit 93f2a04

Browse files
author
florian.bogey
committed
Allow to add custom HTML attributes on buttons
1 parent 8ee11ef commit 93f2a04

3 files changed

Lines changed: 83 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,23 @@ Example:
295295
} %}
296296
```
297297

298+
Always in the same way, you can add custom HTML attributes:
299+
300+
- `craue_formflow_button_attr_last` for either the __next__ or __finish__ button
301+
- `craue_formflow_button_attr_finish` for the __finish__ button
302+
- `craue_formflow_button_attr_next` for the __next__ button
303+
- `craue_formflow_button_attr_back` for the __back__ button
304+
- `craue_formflow_button_attr_reset` for the __reset__ button
305+
306+
Example:
307+
308+
```twig
309+
{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
310+
craue_formflow_button_attr_finish: {'data-foo': 'bar'},
311+
craue_formflow_button_attr_reset: {'data-foo': 'bar', 'data-bar': 'foo'},
312+
} %}
313+
```
314+
298315
You can also remove the reset button by setting `craue_formflow_button_render_reset` to `false`.
299316

300317
## Create an action

‎Resources/views/FormFlow/buttons.html.twig‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@
1414
? craue_formflow_button_class_finish | default(craue_formflow_button_class_last)
1515
: craue_formflow_button_class_next | default(craue_formflow_button_class_last)
1616
-%}
17+
{%- set craue_formflow_button_attr_last = craue_formflow_button_attr_last | default([]) -%}
18+
{%- set craue_formflow_button_attr_last = isLastStep
19+
? craue_formflow_button_attr_finish | default(craue_formflow_button_attr_last)
20+
: craue_formflow_button_attr_next | default(craue_formflow_button_attr_last)
21+
-%}
1722
{%- set craue_buttons = [
1823
{
1924
label: craue_formflow_button_label_last | default(isLastStep ? craue_formflow_button_label_finish | default('button.finish') : craue_formflow_button_label_next | default('button.next')),
2025
render: true,
2126
attr: {
2227
class: craue_formflow_button_class_last,
2328
},
29+
custom_attr: craue_formflow_button_attr_last|default([]),
2430
},
2531
{
2632
label: craue_formflow_button_label_back | default('button.back'),
@@ -31,6 +37,7 @@
3137
value: 'back',
3238
formnovalidate: 'formnovalidate',
3339
},
40+
custom_attr: craue_formflow_button_attr_back|default([]),
3441
},
3542
{
3643
label: craue_formflow_button_label_reset | default('button.reset'),
@@ -41,11 +48,13 @@
4148
value: 'reset',
4249
formnovalidate: 'formnovalidate',
4350
},
51+
custom_attr: craue_formflow_button_attr_reset|default([]),
4452
},
4553
] -%}
4654

4755
{% for button in craue_buttons if button.render %}
48-
<button type="submit"{% for key, value in button.attr %} {{ key }}="{{ value }}"{% endfor %}>
56+
{% set button_attr = button.attr|merge(button.custom_attr) %}
57+
<button type="submit"{% for key, value in button_attr %} {{ key }}="{{ value }}"{% endfor %}>
4958
{{- button.label | trans({}, 'CraueFormFlowBundle') -}}
5059
</button>
5160
{% endfor %}

‎Tests/Resources/TemplateRenderingTest.php‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,21 @@ public function dataCustomizedButton() {
138138
array('craue_formflow_button_class_next' => 'next'),
139139
'<button type="submit" class="next">next</button>',
140140
),
141+
'next button custom attr without class' => array(
142+
2, 1,
143+
array('craue_formflow_button_attr_next' => array('data-foo' => 'bar')),
144+
'<button type="submit" class="craue_formflow_button_last" data-foo="bar">next</button>',
145+
),
146+
'next button custom attr with class' => array(
147+
2, 1,
148+
array('craue_formflow_button_class_next' => 'next', 'craue_formflow_button_attr_next' => array('data-foo' => 'bar')),
149+
'<button type="submit" class="next" data-foo="bar">next</button>',
150+
),
151+
'next button two custom attr with class' => array(
152+
2, 1,
153+
array('craue_formflow_button_class_next' => 'next', 'craue_formflow_button_attr_next' => array('data-foo' => 'bar', 'data-bar' => 'foo')),
154+
'<button type="submit" class="next" data-foo="bar" data-bar="foo">next</button>',
155+
),
141156
'next button custom label' => array(
142157
2, 1,
143158
array('craue_formflow_button_label_next' => 'custom next'),
@@ -148,6 +163,16 @@ public function dataCustomizedButton() {
148163
array('craue_formflow_button_class_finish' => 'finish'),
149164
'<button type="submit" class="finish">finish</button>',
150165
),
166+
'finish button custom attr without class' => array(
167+
1, 1,
168+
array('craue_formflow_button_attr_finish' => array('data-foo' => 'bar')),
169+
'<button type="submit" class="craue_formflow_button_last" data-foo="bar">finish</button>',
170+
),
171+
'finish button custom attr with class' => array(
172+
1, 1,
173+
array('craue_formflow_button_class_finish' => 'finish', 'craue_formflow_button_attr_finish' => array('data-foo' => 'bar')),
174+
'<button type="submit" class="finish" data-foo="bar">finish</button>',
175+
),
151176
'finish button custom label' => array(
152177
1, 1,
153178
array('craue_formflow_button_label_finish' => 'custom finish'),
@@ -168,6 +193,16 @@ public function dataCustomizedButton() {
168193
array('craue_formflow_button_class_last' => 'last'),
169194
'<button type="submit" class="last">next</button>',
170195
),
196+
'last button custom attr without class (next)' => array(
197+
2, 1,
198+
array('craue_formflow_button_class_last' => 'last', 'craue_formflow_button_attr_last' => array('data-foo' => 'bar')),
199+
'<button type="submit" class="last" data-foo="bar">next</button>',
200+
),
201+
'last button custom attr with class (next)' => array(
202+
2, 1,
203+
array('craue_formflow_button_attr_last' => array('data-foo' => 'bar')),
204+
'<button type="submit" class="craue_formflow_button_last" data-foo="bar">next</button>',
205+
),
171206
'last button custom label (next)' => array(
172207
2, 1,
173208
array('craue_formflow_button_label_last' => 'custom last'),
@@ -178,6 +213,16 @@ public function dataCustomizedButton() {
178213
array('craue_formflow_button_class_back' => 'back'),
179214
'<button type="submit" class="back" name="flow_renderingTest_transition" value="back" formnovalidate="formnovalidate">back</button>',
180215
),
216+
'back button custom attr without class' => array(
217+
2, 2,
218+
array('craue_formflow_button_attr_back' => array('data-foo' => 'bar')),
219+
'<button type="submit" class="" name="flow_renderingTest_transition" value="back" formnovalidate="formnovalidate" data-foo="bar">back</button>',
220+
),
221+
'back button custom attr with class' => array(
222+
2, 2,
223+
array('craue_formflow_button_class_back' => 'back', 'craue_formflow_button_attr_back' => array('data-foo' => 'bar')),
224+
'<button type="submit" class="back" name="flow_renderingTest_transition" value="back" formnovalidate="formnovalidate" data-foo="bar">back</button>',
225+
),
181226
'back button custom label' => array(
182227
2, 2,
183228
array('craue_formflow_button_label_back' => 'custom back'),
@@ -188,6 +233,17 @@ public function dataCustomizedButton() {
188233
array('craue_formflow_button_class_reset' => 'reset'),
189234
'<button type="submit" class="reset" name="flow_renderingTest_transition" value="reset" formnovalidate="formnovalidate">start over</button>',
190235
),
236+
'reset button custom attr without class' => array(
237+
1, 1,
238+
array('craue_formflow_button_attr_reset' => array('data-foo' => 'bar')),
239+
'<button type="submit" class="craue_formflow_button_first" name="flow_renderingTest_transition" value="reset" formnovalidate="formnovalidate" data-foo="bar">start over</button>',
240+
),
241+
'reset button custom attr with class' => array(
242+
1, 1,
243+
array('craue_formflow_button_class_reset' => 'reset', 'craue_formflow_button_attr_reset' => array('data-foo' => 'bar')),
244+
'<button type="submit" class="reset" name="flow_renderingTest_transition" value="reset" formnovalidate="formnovalidate" data-foo="bar">start over</button>',
245+
246+
),
191247
'reset button custom label' => array(
192248
1, 1,
193249
array('craue_formflow_button_label_reset' => 'custom reset'),

0 commit comments

Comments
 (0)