Feat(web-twig): Introduce inputProps prop for form field components

* prop for transferring attributes directly to input element refs #DS-812
lmc-eu · Jun 11, 2023 · ee85ade · ee85ade
1 parent 0c9db8d
commit ee85ade
Show file tree

Hide file tree

Showing 22 changed files with 40 additions and 14 deletions.
diff --git a/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig b/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
@@ -1,6 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _id = props.id | default(null) -%}
+{%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isChecked = props.isChecked | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isItem = props.isItem | default(false) | boolprop -%}
@@ -48,7 +49,7 @@
 
 <label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
-        {{ inputProps(props) }}
+        {{ inputProps(props, [], _inputProps) }}
         type="checkbox"
         id="{{ _id }}"
         name="{{ _name }}"

diff --git a/packages/web-twig/src/Resources/components/CheckboxField/README.md b/packages/web-twig/src/Resources/components/CheckboxField/README.md
@@ -41,6 +41,7 @@ Without lexer:
 | Prop name           | Type                                                                 | Default | Required | Description                                                                                                                        |
 | ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `id`                | `string`                                                             | `null`  | no       | Input and label identification                                                                                                     |
+| `inputProps`        | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the input element                                                                                    |
 | `isChecked`         | `bool`                                                               | `false` | no       | If true, input is checked                                                                                                          |
 | `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
 | `isItem`            | `bool`                                                               | `false` | no       | To render in [Item][item] mode                                                                                                     |

diff --git a/packages/web-twig/src/Resources/components/RadioField/README.md b/packages/web-twig/src/Resources/components/RadioField/README.md
@@ -40,6 +40,7 @@ Without lexer:
 | Prop name           | Type                                           | Default | Required | Description                                          |
 | ------------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------- |
 | `id`                | `string`                                       | `null`  | no       | Input and label identification                       |
+| `inputProps`        | `string[]`                                     | `[]`    | no       | Pass additional attributes to the input element      |
 | `isChecked`         | `bool`                                         | `false` | no       | If true, input is checked                            |
 | `isDisabled`        | `bool`                                         | `false` | no       | If true, input is disabled                           |
 | `isItem`            | `bool`                                         | `false` | no       | To render in [Item][item] mode                       |

diff --git a/packages/web-twig/src/Resources/components/RadioField/RadioField.twig b/packages/web-twig/src/Resources/components/RadioField/RadioField.twig
@@ -1,6 +1,7 @@
 {# API #}
 {%- set _autocomplete = props.autocomplete | default(null) -%}
 {%- set _id = props.id | default(null) -%}
+{%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isChecked = props.isChecked | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isItem = props.isItem | default(false) | boolprop -%}
@@ -40,7 +41,7 @@
 
 <label {{ _labelForAttr | raw }} {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
-        {{ inputProps(props, _allowedInputAttributes) }}
+        {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
         type="radio"
         name="{{ _name }}"
         class="{{ _inputClassName }}"

diff --git a/packages/web-twig/src/Resources/components/Select/README.md b/packages/web-twig/src/Resources/components/Select/README.md
@@ -49,6 +49,7 @@ Without lexer:
 | ----------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------------- |
 | `helperText`      | `string`                                       | `null`  | no       | Custom helper text                                         |
 | `id`              | `string`                                       | —       | yes      | Select and label identification                            |
+| `inputProps`      | `string[]`                                     | `[]`    | no       | Pass additional attributes to the select element           |
 | `isDisabled`      | `bool`                                         | `false` | no       | If true, select is disabled                                |
 | `isFluid`         | `bool`                                         | `false` | no       | If true, the element spans to the full width of its parent |
 | `isLabelHidden`   | `bool`                                         | `false` | no       | If true, label is hidden                                   |

diff --git a/packages/web-twig/src/Resources/components/Select/Select.twig b/packages/web-twig/src/Resources/components/Select/Select.twig
@@ -3,6 +3,7 @@
 {%- set _id = props.id | default(null) -%}
 {%- set _name = props.name | default(null) -%}
 {%- set _label = props.label | default(null) -%}
+{%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isFluid = props.isFluid | default(false) -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
 {%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
@@ -41,6 +42,7 @@
     <label for="{{ _id }}" {{ classProp(_labelClassName) }}>{{ _label }}</label>
     <div class="{{ _containerClassName }}">
         <select
+            {{ inputProps([], [], _inputProps) }}
             id="{{ _id }}"
             name="{{ _name }}"
             class="{{ _inputClassName }}"

diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md
@@ -50,6 +50,7 @@ Without lexer:
 | ----------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `id`              | `string`                                                             | —       | yes      | TextArea and label identification                                                                                                  |
 | `isAutoResizing`  | `bool`                                                               | `false` | no       | If true, TextArea adjusts its height as user types, see [plugin info](#javascript-plugin-for-auto-resizing)                        |
+| `inputProps`      | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the textarea element                                                                                 |
 | `isDisabled`      | `bool`                                                               | `false` | no       | If true, TextArea is disabled                                                                                                      |
 | `isFluid`         | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |
 | `isLabelHidden`   | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |

diff --git a/packages/web-twig/src/Resources/components/TextField/README.md b/packages/web-twig/src/Resources/components/TextField/README.md
@@ -64,6 +64,7 @@ Without lexer:
 | `hasPasswordToggle` | `bool`                                                               | `false` | no       | If true, the `type` is set to `password` and a password toggle is shown                                                            |
 | `helperText`        | `string`                                                             | `null`  | no       | Custom helper text                                                                                                                 |
 | `id`                | `string`                                                             | —       | yes      | Input and label identification                                                                                                     |
+| `inputProps`        | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the input element                                                                                    |
 | `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
 | `isFluid`           | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |
 | `isLabelHidden`     | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |

diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/README.md b/packages/web-twig/src/Resources/components/TextFieldBase/README.md
@@ -65,6 +65,7 @@ Without lexer:
 | `helperText`        | `string`                                                             | `null`  | no       | Custom helper text                                                                                                                 |
 | `UNSAFE_helperText` | `string`                                                             | `null`  | no       | Unescaped custom helper text                                                                                                       |
 | `id`                | `string`                                                             | —       | yes      | Input and label identification                                                                                                     |
+| `inputProps`        | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the input/textarea element                                                                           |
 | `isAutoResizing`    | `bool`                                                               | `false` | no       | If true, TextArea adjusts its height as user types                                                                                 |
 | `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
 | `isFluid`           | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |

diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -3,6 +3,7 @@
 {%- set _helperText = props.helperText | default(null) -%}
 {%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
 {%- set _id = props.id -%}
+{%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isFluid = props.isFluid | default(false) | boolprop -%}
 {%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%}
@@ -72,7 +73,7 @@
     </label>
     {% if _isMultiline %}
         <textarea
-            {{ inputProps(props, _textAreaAllowedAttributes) }}
+            {{ inputProps(props, _textAreaAllowedAttributes, _inputProps) }}
             id="{{ _id }}"
             name="{{ _name }}"
             class="{{ _inputClassName }}"
@@ -83,7 +84,7 @@
         {% if _hasPasswordToggle %}
             <div class="{{ _passwordToggleClassName }}">
                 <input
-                    {{ inputProps(props, _textFieldAllowedAttributes) }}
+                    {{ inputProps(props, _textFieldAllowedAttributes, _inputProps) }}
                     type="password"
                     id="{{ _id }}"
                     name="{{ _name }}"
@@ -110,7 +111,7 @@
             </div>
         {% else %}
             <input
-                {{ inputProps(props, _textFieldAllowedAttributes) }}
+                {{ inputProps(props, _textFieldAllowedAttributes, _inputProps) }}
                 type="{{ _type }}"
                 id="{{ _id }}"
                 name="{{ _name }}"

diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="CheckboxField CheckboxField--danger"><input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label> <label for="example" class="CheckboxField CheckboxField--error"><input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label>
+    <label for="example" class="CheckboxField CheckboxField--danger"><input data-validate="true" type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label> <label for="example" class="CheckboxField CheckboxField--error"><input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label>
   </body>
 </html>
diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set radioFieldDefault.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set radioFieldDefault.twig__1.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="RadioField"><input type="radio" name="example" class="RadioField__input" id="example" checked> </label>
+    <label for="example" class="RadioField"><input data-validate="true" type="radio" name="example" class="RadioField__input" id="example" checked> </label>
   </body>
 </html>
diff --git a/...tests/__snapshots__/ComponentsSnapshotTest__test with data set selectDefault.twig__1.html b/...tests/__snapshots__/ComponentsSnapshotTest__test with data set selectDefault.twig__1.html
@@ -8,7 +8,7 @@
     <div class="Select">
       <label for="example" class="Select__label">Label</label>
       <div class="Select__inputContainer">
-        <select id="example" name="example" class="Select__input">
+        <select data-validate="true" id="example" name="example" class="Select__input">
           <option value="" selected>
             Placeholder
           </option>

diff --git a/...sts/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html b/...sts/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html
@@ -8,7 +8,7 @@
     <div class="TextArea TextArea--error">
       <label for="example" class="TextArea__label TextArea__label--required">TextArea</label> 
 
-      <textarea minlength="6" maxlength="10" rows="10" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
+      <textarea minlength="6" maxlength="10" rows="10" data-validate="true" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
       <div class="TextArea__message">
         validation failed
       </div>

diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <div data-test="test" data-validate="1" data-spirit-validate="1" data-custom-validate="true" class="TextField TextField--error">
-      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" autocomplete="on" placeholder="Very long text" value="Some long value" type="text" id="example" name="example" class="TextField__input" size="10" required="">
+      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" autocomplete="on" placeholder="Very long text" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" size="10" required="">
       <div class="TextField__message">
         validation failed
       </div>

diff --git a/...ts/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html b/...ts/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <div class="TextField TextField--error">
-      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" placeholder="Some long placeholder" value="Some long value" type="text" id="example" name="example" class="TextField__input" required="">
+      <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" placeholder="Some long placeholder" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" required="">
       <div class="TextField__message">
         validation failed
       </div>

diff --git a/packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig b/packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig
@@ -1,2 +1,4 @@
-<CheckboxField id="example" name="example" isRequired isChecked validationState="danger" message="validation failed" />
+{% set inputProps = { "data-validate": "true" } %}
+
+<CheckboxField id="example" name="example" isRequired isChecked validationState="danger" message="validation failed" inputProps={ inputProps } />
 <CheckboxField id="example" name="example" isRequired isChecked validationState="error" message="validation failed" />
diff --git a/packages/web-twig/tests/components-fixtures/radioFieldDefault.twig b/packages/web-twig/tests/components-fixtures/radioFieldDefault.twig
@@ -1 +1,3 @@
-<RadioField id="example" name="example" isChecked />
+{% set inputProps = { "data-validate": "true" } %}
+
+<RadioField id="example" name="example" isChecked inputProps={ inputProps } />
diff --git a/packages/web-twig/tests/components-fixtures/selectDefault.twig b/packages/web-twig/tests/components-fixtures/selectDefault.twig
@@ -1,4 +1,6 @@
-<Select id="example" name="example" label="Label">
+{% set inputProps = { "data-validate": "true" } %}
+
+<Select id="example" name="example" label="Label" inputProps={ inputProps }>
     <option value="" selected>Placeholder</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>

diff --git a/packages/web-twig/tests/components-fixtures/textAreaDefault.twig b/packages/web-twig/tests/components-fixtures/textAreaDefault.twig
@@ -1,3 +1,5 @@
+{% set inputProps = { "data-validate": "true" } %}
+
 <TextArea
     id="example"
     label="TextArea"
@@ -9,4 +11,5 @@
     value="TextArea value"
     rows="10"
     isRequired
+    inputProps={ inputProps }
 />
diff --git a/packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig b/packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig
@@ -1,3 +1,5 @@
+{% set inputProps = { "data-validate": "true" } %}
+
 <TextFieldBase
     id="example"
     label="Text field"
@@ -15,4 +17,5 @@
     data-validate={ true }
     data-spirit-validate
     data-custom-validate="true"
+    inputProps={ inputProps }
 />
diff --git a/packages/web-twig/tests/components-fixtures/textFieldDefault.twig b/packages/web-twig/tests/components-fixtures/textFieldDefault.twig
@@ -1,3 +1,5 @@
+{% set inputProps = { "data-validate": "true" } %}
+
 <TextField
     id="example"
     label="Text field"
@@ -9,4 +11,5 @@
     minlength="6"
     placeholder="Some long placeholder"
     value="Some long value"
+    inputProps={ inputProps }
 />