Fix(web-twig): Disable password toggle on TextField #DS-1478

lmc-eu · Oct 3, 2024 · 7aac16d · 7aac16d
1 parent a080d85
commit 7aac16d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 0 deletions.
diff --git a/.../web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldDefault.twig b/.../web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldDefault.twig
@@ -13,3 +13,18 @@
     value="Some long value"
     inputProps={ inputProps }
 />
+
+<TextField
+    id="example"
+    label="Text field"
+    type="text"
+    name="example"
+    isRequired
+    validationState="danger"
+    validationText="validation failed"
+    minlength="6"
+    placeholder="Some long placeholder"
+    value="Some long value"
+    inputProps={ inputProps }
+    isDisabled
+/>
diff --git a/...ig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldPasswordToggle.twig b/...ig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldPasswordToggle.twig
@@ -4,3 +4,11 @@
     label="Text field with password toggle"
     name="passwordToggle"
 />
+
+<TextField
+    hasPasswordToggle
+    id="password-toggle"
+    label="Text field with password toggle"
+    name="passwordToggle"
+    isDisabled
+/>
diff --git a/...rc/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html b/...rc/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
@@ -11,5 +11,12 @@
         validation failed
       </div>
     </div>
+
+    <div class="TextField TextField--disabled TextField--danger">
+      <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" disabled required="" aria-describedby="example-validation-text">
+      <div class="TextField__validationText" id="example-validation-text">
+        validation failed
+      </div>
+    </div>
   </body>
 </html>
diff --git a/...urces/components/TextField/__tests__/__snapshots__/textFieldPasswordToggle.twig.snap.html b/...urces/components/TextField/__tests__/__snapshots__/textFieldPasswordToggle.twig.snap.html
@@ -15,5 +15,16 @@
         </path></svg></span></button>
       </div>
     </div>
+
+    <div class="TextField TextField--disabled">
+      <label for="password-toggle" class="TextField__label">Text field with password toggle</label>
+      <div class="TextField__passwordToggle">
+        <input type="password" id="password-toggle" name="passwordToggle" class="TextField__input" disabled> <button type="button" class="TextField__passwordToggle__button" role="switch" aria-pressed="false" aria-label="Show password" data-spirit-toggle="password" disabled><span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--hidden"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
+        <use href="#e17ec038ec71c7b0e88946015167125e">
+        </use></svg></span> <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--shown"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
+        <use href="#ecd521048109a7b10a9d717d4ea729de">
+        </use></svg></span></button>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -103,6 +103,7 @@
                     aria-pressed="false"
                     aria-label="Show password"
                     data-spirit-toggle="password"
+                    {{ _disabledAttr }}
                 >
                     <span class="{{ _passwordToggleIconClassName }} {{ _passwordToggleIconHiddenClassName }}">
                         <Icon name="visibility-on" />