From 281b2bda670a9be429c49ba376aef56a242a4f7e Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 10 Oct 2021 22:07:38 +0100
Subject: [PATCH] Animate in/out radio children

---
 .../resources/lib/hudson/newFromList/form.jelly   | 14 +++++++-------
 war/src/main/less/modules/form.less               | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 026836d31b81..0709d563ebab 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -89,14 +89,14 @@ THE SOFTWARE.
           <div class="jenkins-radio">
             <input class="jenkins-radio__input" type="radio" id="copy" name="mode" value="copy" onchange="updateOk()" onclick="updateOk()" />
             <label class="jenkins-radio__label" for="copy">${attrs.copyTitle}</label>
-          </div>
-          <s:entry class="jenkins-radio__children">
-            <j:set var="descriptor" value="${it.descriptor}" />
-            <div class="jenkins-search">
-              <s:textbox id="from" placeholder="Type for suggestions" clazz="jenkins-search__input"  name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
-              <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+            <div class="jenkins-radio__children">
+              <j:set var="descriptor" value="${it.descriptor}" />
+              <div class="jenkins-search">
+                <s:textbox placeholder="Type for suggestions" clazz="jenkins-search__input"  name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
+                <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+              </div>
             </div>
-          </s:entry>
+          </div>
         </j:if>
       </fieldset>
     </div>
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index bcd221fa2a71..ca0a8a2ad247 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -57,6 +57,7 @@
 
 .jenkins-search {
   position: relative;
+  max-width: 420px;
 
   &__input {
     appearance: none;
@@ -65,7 +66,6 @@
     border: 2px solid var(--input-border);
     border-radius: 6px;
     width: 100%;
-    max-width: 350px;
     margin: 0;
     padding: 0 4px 0 29px;
     line-height: 30px;
@@ -236,8 +236,12 @@
 
   &__children {
     position: relative;
-    margin-top: -10px;
+    margin-top: 0;
+    opacity: 0;
     padding-left: 32px;
+    transition: 0.2s ease;
+    visibility: hidden;
+    max-height: 0;
 
     &::after {
       content: "";
@@ -257,6 +261,13 @@
       }
     }
   }
+
+  &__input:checked + &__label + &__children {
+    visibility: visible;
+    margin-top: 10px;
+    opacity: 1;
+    max-height: none;
+  }
 }
 
 .jenkins-button {