Fix(web-twig): Make TextField id mandatory as it is required for …

…linking the label to the input
lmc-eu · Jul 30, 2022 · d57b9ad · d57b9ad
1 parent cbba01b
commit d57b9ad
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 14 deletions.
diff --git a/packages/web-twig/CHANGELOG.md b/packages/web-twig/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Chore: Require v2 of twigx-bundle and remove minimum stability flag
 - Fix: Add missing service registration for ComponentLexer
 - Fix: Set right order of filters
+- Fix: Make `TextField` `id` mandatory as it is required for linking the label to the input
 
 ## 1.8.0 - 2022-07-18
 - Update `Tag` - add sizes, split theme and color classes, allow elementType change

diff --git a/packages/web-twig/src/Resources/components/Button/Button.twig b/packages/web-twig/src/Resources/components/Button/Button.twig
@@ -8,17 +8,17 @@
 {%- set _type = props.type | default('button') -%}
 
 {# Class names #}
-{%- set _colorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
-{%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
+{%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
+{%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
 
 {# Attributes #}
 {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
 {%- set _onClickAttr = _onClick ? 'onclick="' ~ _onClick ~'"' : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _colorClassName, _rootBlockClassName, _rootSquareClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootSquareClassName, _class ] -%}
 
 <button
     {{ mainProps(props) }}

diff --git a/packages/web-twig/src/Resources/components/TextField/README.md b/packages/web-twig/src/Resources/components/TextField/README.md
@@ -46,7 +46,7 @@ Without lexer:
 | Prop name         | Type                          | Default   | Required | Description                                                |
 |-------------------|-------------------------------|-----------|----------|------------------------------------------------------------|
 | `class`           | `string`                      | `null`    | no       | Custom CSS class                                           |
-| `id`              | `string`                      | `null`    | no       | Input and label identification                             |
+| `id`              | `string`                      | —         | yes      | Input and label identification                             |
 | `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/TextField/TextField.twig b/packages/web-twig/src/Resources/components/TextField/TextField.twig
@@ -1,6 +1,6 @@
 {# API #}
 {%- set _class = props.class | default(null) -%}
-{%- set _id = props.id | default(null) -%}
+{%- set _id = props.id -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isFluid = props.isFluid | default(false) | boolprop -%}
 {%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%}
@@ -36,7 +36,9 @@
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
 
 <div {{ mainProps(_mainPropsWithoutId) }} {{ classProp(_rootClassNames) }}>
-    <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>{{ _label | raw }}</label>
+    <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
+        {{ _label | raw }}
+    </label>
     <input
         {{ inputProps(props) }}
         type="{{ _type }}"
@@ -48,5 +50,9 @@
         {{ _requiredAttr | raw }}
         {{ _valueAttr | raw }}
     />
-    {% if _message %}<div class="{{ _messageClassName }}">{{ _message | raw }}</div>{% endif %}
+    {% if _message %}
+        <div class="{{ _messageClassName }}">
+            {{ _message | raw }}
+        </div>
+    {% endif %}
 </div>
diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html
@@ -1,6 +1,8 @@
 <html><body>
 <div class="TextField   TextField--error">
-    <label for="example2" class="TextField__label  TextField__label--required">Password field</label>
+    <label for="example2" class="TextField__label  TextField__label--required">
+        Password field
+    </label>
     <input type="password" id="example2" name="example2" class="TextField__input" required>
     </div>
 </body></html>
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
@@ -1,6 +1,8 @@
 <html><body>
 <div class="TextField   TextField--error">
-    <label for="example" class="TextField__label  TextField__label--required">Text field</label>
+    <label for="example" class="TextField__label  TextField__label--required">
+        Text field
+    </label>
     <input minlength="6" type="text" id="example" name="example" class="TextField__input" required>
     </div>
 </body></html>
diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html
@@ -1,7 +1,11 @@
 <html><body>
 <div class="TextField   TextField--error">
-    <label for="example" class="TextField__label  TextField__label--required"></label>
+    <label for="example" class="TextField__label  TextField__label--required">
+
+    </label>
     <input type="text" id="example" name="example" class="TextField__input" required>
-    <div class="TextField__message">validation failed</div>
-</div>
+            <div class="TextField__message">
+            validation failed
+        </div>
+    </div>
 </body></html>
diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set textFieldNotRequired.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set textFieldNotRequired.twig__1.html
@@ -1,6 +1,8 @@
 <html><body>
 <div class="TextField">
-    <label for="example" class="TextField__label">Text field</label>
+    <label for="example" class="TextField__label">
+        Text field
+    </label>
     <input type="text" id="example" name="example" class="TextField__input" value="filled">
     </div>
 </body></html>
diff --git a/...ots__/ComponentsSnapshotTest__test with data set textFieldWithInvisibleLabel.twig__1.html b/...ots__/ComponentsSnapshotTest__test with data set textFieldWithInvisibleLabel.twig__1.html
@@ -1,6 +1,8 @@
 <html><body>
 <div class="TextField">
-    <label for="example" class="TextField__label TextField__label--hidden TextField__label--required"></label>
+    <label for="example" class="TextField__label TextField__label--hidden TextField__label--required">
+
+    </label>
     <input type="text" id="example" name="example" class="TextField__input" required>
     </div>
 </body></html>