MDL-81188 form: Fix password element layout

MDL-75670 generated a regression in forms password element layout that was not being displayed in a single line as before. - Modify the password element template to display the input and the password unmask icon in a single line. - Change the password unmask button styles to be consistent with other focus states. - Modify passwordunmask behat form field to work with the new password element layout changes.
abgreeve · Mar 18, 2024 · 9733ccc · 9733ccc
1 parent 757be30
commit 9733ccc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 31 deletions.
diff --git a/lib/behat/form_field/behat_form_passwordunmask.php b/lib/behat/form_field/behat_form_passwordunmask.php
@@ -55,7 +55,7 @@ public function set_value($value) {
         }
 
         $id = $this->field->getAttribute('id');
-        $wrapper = $this->field->getParent()->getParent()->find('css', '[data-passwordunmask="wrapper"]');
+        $wrapper = $this->field->getParent()->getParent()->getParent()->find('css', '[data-passwordunmask="wrapper"]');
         $wrapper->click();
         $this->wait_for_pending_js();
 

diff --git a/lib/form/templates/element-passwordunmask.mustache b/lib/form/templates/element-passwordunmask.mustache
@@ -47,41 +47,43 @@
 }}
 {{< core_form/element-template }}
     {{$ element }}
-        <span data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
-            <span data-passwordunmask="editor">
-                <input  type="password"
-                        {{# element.frozen }}readonly{{/ element.frozen }}
-                        {{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
-                        id="{{ element.id }}"
-                        value="{{ element.value }}"
-                        class="form-control d-none {{# error }}is-invalid{{/ error }}"
-                        data-size="{{ element.size }}"
-                        {{# error }}
-                            autofocus aria-describedby="{{ element.iderror }}"
-                        {{/ error }}
-                        {{#required}}
-                            aria-required="true"
-                        {{/required}}
-                        {{{ element.attributes }}}
-                        >
-            </span>
-            {{^ element.frozen }}
-            <a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">
-            {{/ element.frozen }}
-                <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
-            {{^ element.frozen }}
-                {{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
-            </a>
-            {{/ element.frozen }}
-            <a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
-                {{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
-            </a>
+        <div data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
+            <div class="d-flex align-items-center">
+                <span data-passwordunmask="editor">
+                    <input  type="password"
+                            {{# element.frozen }}readonly{{/ element.frozen }}
+                            {{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
+                            id="{{ element.id }}"
+                            value="{{ element.value }}"
+                            class="form-control d-none {{# error }}is-invalid{{/ error }}"
+                            data-size="{{ element.size }}"
+                            {{# error }}
+                                autofocus aria-describedby="{{ element.iderror }}"
+                            {{/ error }}
+                            {{#required}}
+                                aria-required="true"
+                            {{/required}}
+                            {{{ element.attributes }}}
+                            >
+                </span>
+                {{^ element.frozen }}
+                <a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">
+                {{/ element.frozen }}
+                    <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
+                {{^ element.frozen }}
+                    {{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
+                </a>
+                {{/ element.frozen }}
+                <a href="#" class="btn btn-link icon-no-margin p-1 ml-1" data-passwordunmask="unmask" title="{{ unmaskhint }}">
+                    {{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
+                </a>
+            </div>
             <span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
                 {{^ element.frozen }}
                 {{# str }} passwordunmaskinstructions, form {{/ str }}
                 {{/ element.frozen }}
             </span>
-        </span>
+        </div>
     {{/ element }}
 {{/ core_form/element-template }}
 {{#js}}