ACP2E-3273: avoid using toggle / fadeIn / fadeOut as it will generate a display none and this in turn impacts the styling for recaptcha

Author: alzota

app/code/Magento/Checkout/view/frontend/web/template/form/element/email.html

@@ -32,7 +32,7 @@
         </div>
 
         <!--Hidden fields -->
-        <fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
+        <fieldset class="fieldset hidden-fields" data-bind="dimVisible: isPasswordVisible">
             <div class="field">
                 <label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
                 <div class="control">

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js

@@ -31,6 +31,7 @@ define(function (require) {
         datepicker:     require('./datepicker'),
         outerClick:     require('./outer_click'),
         fadeVisible:    require('./fadeVisible'),
+        dimVisible:    require('./dimVisible'),
         collapsible:    require('./collapsible'),
         staticChecked:  require('./staticChecked'),
         simpleChecked:  require('./simple-checked'),

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/dimVisible.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+
+define([
+    'jquery',
+    'ko'
+], function ($, ko) {
+    'use strict';
+
+    ko.bindingHandlers.dimVisible = {
+        /**
+         * Initially set the element to be instantly visible/hidden depending on the value.
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         */
+        init: function (element, valueAccessor) {
+            let value = valueAccessor();
+
+            // Use "unwrapObservable" so we can handle values that may or may not be observable
+            if (ko.unwrap(value)) {
+                $(element).css('visibility','visible').css('height','auto');
+            } else {
+                $(element).css('visibility', 'hidden').css('height', '0');
+            }
+        },
+
+        /**
+         * Whenever the value subsequently changes, slowly fade the element in or out.
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         */
+        update: function (element, valueAccessor) {
+            let value = valueAccessor();
+
+            if (ko.unwrap(value)) {
+                $(element).css('visibility', 'visible').css('height', 'auto');
+            } else {
+                $(element).css('visibility', 'hidden').css('height', '0');
+            }
+        }
+    };
+});