Allow to add custom HTML attributes on buttons

craue · Oct 20, 2017 · 93f2a04 · 93f2a04
1 parent 8ee11ef
commit 93f2a04
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -295,6 +295,23 @@ Example:
 	} %}
 ```
 
+Always in the same way, you can add custom HTML attributes:
+
+- `craue_formflow_button_attr_last` for either the __next__ or __finish__ button
+- `craue_formflow_button_attr_finish` for the __finish__ button
+- `craue_formflow_button_attr_next` for the __next__ button 
+- `craue_formflow_button_attr_back` for the __back__ button
+- `craue_formflow_button_attr_reset` for the __reset__ button
+
+Example:
+
+```twig
+{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
+		craue_formflow_button_attr_finish: {'data-foo': 'bar'},
+		craue_formflow_button_attr_reset: {'data-foo': 'bar', 'data-bar': 'foo'},
+} %}
+```
+
 You can also remove the reset button by setting `craue_formflow_button_render_reset` to `false`.
 
 ## Create an action

diff --git a/Resources/views/FormFlow/buttons.html.twig b/Resources/views/FormFlow/buttons.html.twig
@@ -14,13 +14,19 @@
 			? craue_formflow_button_class_finish | default(craue_formflow_button_class_last)
 			: craue_formflow_button_class_next | default(craue_formflow_button_class_last)
 		-%}
+	{%- set craue_formflow_button_attr_last = craue_formflow_button_attr_last | default([]) -%}
+	{%- set craue_formflow_button_attr_last = isLastStep
+		? craue_formflow_button_attr_finish | default(craue_formflow_button_attr_last)
+		: craue_formflow_button_attr_next | default(craue_formflow_button_attr_last)
+	-%}
 	{%- set craue_buttons = [
 			{
 				label: craue_formflow_button_label_last | default(isLastStep ? craue_formflow_button_label_finish | default('button.finish') : craue_formflow_button_label_next | default('button.next')),
 				render: true,
 				attr: {
 					class: craue_formflow_button_class_last,
 				},
+				custom_attr: craue_formflow_button_attr_last|default([]),
 			},
 			{
 				label: craue_formflow_button_label_back | default('button.back'),
@@ -31,6 +37,7 @@
 					value: 'back',
 					formnovalidate: 'formnovalidate',
 				},
+				custom_attr: craue_formflow_button_attr_back|default([]),
 			},
 			{
 				label: craue_formflow_button_label_reset | default('button.reset'),
@@ -41,11 +48,13 @@
 					value: 'reset',
 					formnovalidate: 'formnovalidate',
 				},
+				custom_attr: craue_formflow_button_attr_reset|default([]),
 			},
 		] -%}
 
 	{% for button in craue_buttons if button.render %}
-		<button type="submit"{% for key, value in button.attr %} {{ key }}="{{ value }}"{% endfor %}>
+		{% set button_attr = button.attr|merge(button.custom_attr) %}
+		<button type="submit"{% for key, value in button_attr %} {{ key }}="{{ value }}"{% endfor %}>
 			{{- button.label | trans({}, 'CraueFormFlowBundle') -}}
 		</button>
 	{% endfor %}

diff --git a/Tests/Resources/TemplateRenderingTest.php b/Tests/Resources/TemplateRenderingTest.php
@@ -138,6 +138,21 @@ public function dataCustomizedButton() {
 				array('craue_formflow_button_class_next' => 'next'),
 				'<button type="submit" class="next">next</button>',
 			),
+            'next button custom attr without class' => array(
+                2, 1,
+                array('craue_formflow_button_attr_next' => array('data-foo' => 'bar')),
+                '<button type="submit" class="craue_formflow_button_last" data-foo="bar">next</button>',
+            ),
+            'next button custom attr with class' => array(
+                2, 1,
+                array('craue_formflow_button_class_next' => 'next', 'craue_formflow_button_attr_next' => array('data-foo' => 'bar')),
+                '<button type="submit" class="next" data-foo="bar">next</button>',
+            ),
+            'next button two custom attr with class' => array(
+                2, 1,
+                array('craue_formflow_button_class_next' => 'next', 'craue_formflow_button_attr_next' => array('data-foo' => 'bar', 'data-bar' => 'foo')),
+                '<button type="submit" class="next" data-foo="bar" data-bar="foo">next</button>',
+            ),
 			'next button custom label' => array(
 				2, 1,
 				array('craue_formflow_button_label_next' => 'custom next'),
@@ -148,6 +163,16 @@ public function dataCustomizedButton() {
 				array('craue_formflow_button_class_finish' => 'finish'),
 				'<button type="submit" class="finish">finish</button>',
 			),
+            'finish button custom attr without class' => array(
+                1, 1,
+                array('craue_formflow_button_attr_finish' => array('data-foo' => 'bar')),
+                '<button type="submit" class="craue_formflow_button_last" data-foo="bar">finish</button>',
+            ),
+            'finish button custom attr with class' => array(
+                1, 1,
+                array('craue_formflow_button_class_finish' => 'finish', 'craue_formflow_button_attr_finish' => array('data-foo' => 'bar')),
+                '<button type="submit" class="finish" data-foo="bar">finish</button>',
+            ),
 			'finish button custom label' => array(
 				1, 1,
 				array('craue_formflow_button_label_finish' => 'custom finish'),
@@ -168,6 +193,16 @@ public function dataCustomizedButton() {
 				array('craue_formflow_button_class_last' => 'last'),
 				'<button type="submit" class="last">next</button>',
 			),
+            'last button custom attr without class (next)' => array(
+                2, 1,
+                array('craue_formflow_button_class_last' => 'last', 'craue_formflow_button_attr_last' => array('data-foo' => 'bar')),
+                '<button type="submit" class="last" data-foo="bar">next</button>',
+            ),
+            'last button custom attr with class (next)' => array(
+                2, 1,
+                array('craue_formflow_button_attr_last' => array('data-foo' => 'bar')),
+                '<button type="submit" class="craue_formflow_button_last" data-foo="bar">next</button>',
+            ),
 			'last button custom label (next)' => array(
 				2, 1,
 				array('craue_formflow_button_label_last' => 'custom last'),
@@ -178,6 +213,16 @@ public function dataCustomizedButton() {
 				array('craue_formflow_button_class_back' => 'back'),
 				'<button type="submit" class="back" name="flow_renderingTest_transition" value="back" formnovalidate="formnovalidate">back</button>',
 			),
+            'back button custom attr without class' => array(
+                2, 2,
+                array('craue_formflow_button_attr_back' => array('data-foo' => 'bar')),
+                '<button type="submit" class="" name="flow_renderingTest_transition" value="back" formnovalidate="formnovalidate" data-foo="bar">back</button>',
+            ),
+            'back button custom attr with class' => array(
+                2, 2,
+                array('craue_formflow_button_class_back' => 'back', 'craue_formflow_button_attr_back' => array('data-foo' => 'bar')),
+                '<button type="submit" class="back" name="flow_renderingTest_transition" value="back" formnovalidate="formnovalidate" data-foo="bar">back</button>',
+            ),
 			'back button custom label' => array(
 				2, 2,
 				array('craue_formflow_button_label_back' => 'custom back'),
@@ -188,6 +233,17 @@ public function dataCustomizedButton() {
 				array('craue_formflow_button_class_reset' => 'reset'),
 				'<button type="submit" class="reset" name="flow_renderingTest_transition" value="reset" formnovalidate="formnovalidate">start over</button>',
 			),
+            'reset button custom attr without class' => array(
+                1, 1,
+                array('craue_formflow_button_attr_reset' => array('data-foo' => 'bar')),
+                '<button type="submit" class="craue_formflow_button_first" name="flow_renderingTest_transition" value="reset" formnovalidate="formnovalidate" data-foo="bar">start over</button>',
+            ),
+            'reset button custom attr with class' => array(
+                1, 1,
+                array('craue_formflow_button_class_reset' => 'reset', 'craue_formflow_button_attr_reset' => array('data-foo' => 'bar')),
+                '<button type="submit" class="reset" name="flow_renderingTest_transition" value="reset" formnovalidate="formnovalidate" data-foo="bar">start over</button>',
+
+            ),
 			'reset button custom label' => array(
 				1, 1,
 				array('craue_formflow_button_label_reset' => 'custom reset'),