From fbd630e68c4084ec3ccf5ececeaa4a868b3103ae Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Wed, 2 Oct 2024 17:06:29 +0200
Subject: [PATCH] Fix(web-twig): Disable password toggle on TextField #DS-1478

---
 .../__tests__/__fixtures__/textFieldDefault.twig  | 15 +++++++++++++++
 .../__fixtures__/textFieldPasswordToggle.twig     |  8 ++++++++
 .../__snapshots__/textFieldDefault.twig.snap.html |  7 +++++++
 .../textFieldPasswordToggle.twig.snap.html        | 11 +++++++++++
 .../components/TextFieldBase/TextFieldBase.twig   |  1 +
 5 files changed, 42 insertions(+)

diff --git a/packages/web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldDefault.twig b/packages/web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldDefault.twig
index 058d92b0ce..900a53dae7 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldDefault.twig
+++ b/packages/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/packages/web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldPasswordToggle.twig b/packages/web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldPasswordToggle.twig
index 7b0ecf9ad2..415bb5c860 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__fixtures__/textFieldPasswordToggle.twig
+++ b/packages/web-twig/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/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
index 5907c0aa2f..edbd7cdf1d 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldDefault.twig.snap.html
+++ b/packages/web-twig/src/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/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldPasswordToggle.twig.snap.html b/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldPasswordToggle.twig.snap.html
index 7d36ca51fb..25db1b6d60 100644
--- a/packages/web-twig/src/Resources/components/TextField/__tests__/__snapshots__/textFieldPasswordToggle.twig.snap.html
+++ b/packages/web-twig/src/Resources/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
index 8079efb7da..de8cb543cf 100644
--- 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" />