Update submit buttons to use .jenkins-button classes

core/src/main/resources/hudson/model/AbstractItem/delete.jelly

@@ -33,7 +33,7 @@ THE SOFTWARE.
 		<l:main-panel>
 		  <form method="post" action="doDelete">
 		    ${%blurb(it.pronoun, it.displayName)}
-        <f:submit value="${%Yes}" />
+        <f:submit value="${%Yes}" clazz="jenkins-!-destructive-color" />
 		  </form>
 		</l:main-panel>
 	</l:layout>

core/src/main/resources/hudson/model/Computer/delete.jelly

@@ -29,7 +29,7 @@ THE SOFTWARE.
 		<l:main-panel>
 		  <form method="post" action="doDelete">
 		    ${%delete.agent(it.displayName)}
-        <f:submit value="${%Yes}" />
+        <f:submit value="${%Yes}" clazz="jenkins-!-destructive-color" />
 		  </form>
 		</l:main-panel>
 	</l:layout>

core/src/main/resources/hudson/model/Run/confirmDelete.jelly

@@ -37,7 +37,7 @@ THE SOFTWARE.
       <j:if test="${msg==null}">
         <form method="post" action="doDelete">
           ${%delete.build(it.displayName)}
-          <f:submit value="${%Yes}"/>
+          <f:submit value="${%Yes}" clazz="jenkins-!-destructive-color" />
         </form>
       </j:if>
 

core/src/main/resources/hudson/model/View/delete.jelly

@@ -30,7 +30,7 @@ THE SOFTWARE.
 		<l:main-panel>
 		  <form method="post" action="doDelete" name="delete">
 		    ${%delete.view(it.displayName)}
-		    <f:submit value="${%Yes}" />
+		    <f:submit value="${%Yes}" clazz="jenkins-!-destructive-color" />
 		  </form>
 		</l:main-panel>
 	</l:layout>

core/src/main/resources/jenkins/management/ShutdownLink/index.groovy

@@ -25,7 +25,8 @@ l.layout(norefresh: true, permission: app.MANAGE, title: my.displayName) {
             f.bottomButtonBar {
                 f.submit(value: _(app.isQuietingDown()
                         ? Messages.ShutdownLink_ShutDownReason_update()
-                        : Messages.ShutdownLink_DisplayName_prepare()))
+                        : Messages.ShutdownLink_DisplayName_prepare()),
+                        clazz: "jenkins-!-destructive-color")
             }
         }
 

core/src/main/resources/lib/form/apply.jelly

@@ -35,15 +35,11 @@ THE SOFTWARE.
     <s:attribute name="value">
       The text of the apply button.
     </s:attribute>
-
-    <s:attribute name="large">
-        Set to "true" to enable the large variant of the button
-    </s:attribute>
   </s:documentation>
+
   <st:adjunct includes="lib.form.apply.apply"/>
   <input type="hidden" name="core:apply" value="" />
-  <input type="button"
-         value="${attrs.value ?: '%Apply'}"
-         class="apply-button applyButton ${attrs.large ? 'large-button' : ''}"
-         name="Apply"/><!-- applyButton is legacy -->
+  <button type="button" class="jenkins-button apply-button" name="Apply">
+    ${attrs.value ?: '%Apply'}
+  </button>
 </j:jelly>

core/src/main/resources/lib/form/apply/apply.js

@@ -1,95 +1,103 @@
-Behaviour.specify("INPUT.apply-button", "apply", 0, function (e) {
-  var id;
-  var containerId = "container" + iota++;
+Behaviour.specify(
+  "INPUT.apply-button,BUTTON.apply-button",
+  "apply",
+  0,
+  function (e) {
+    var id;
+    var containerId = "container" + iota++;
 
-  var responseDialog = new YAHOO.widget.Panel("wait" + iota++, {
-    fixedcenter: true,
-    close: true,
-    draggable: true,
-    zindex: 4,
-    modal: true,
-    visible: false,
-  });
+    var responseDialog = new YAHOO.widget.Panel("wait" + iota++, {
+      fixedcenter: true,
+      close: true,
+      draggable: true,
+      zindex: 4,
+      modal: true,
+      visible: false,
+    });
 
-  responseDialog.setHeader("Error");
-  responseDialog.setBody("<div id='" + containerId + "'></div>");
-  responseDialog.render(document.body);
-  var target; // iframe
+    responseDialog.setHeader("Error");
+    responseDialog.setBody("<div id='" + containerId + "'></div>");
+    responseDialog.render(document.body);
+    var target; // iframe
 
-  function attachIframeOnload(target, f) {
-    if (target.attachEvent) {
-      target.attachEvent("onload", f);
-    } else {
-      target.onload = f;
+    function attachIframeOnload(target, f) {
+      if (target.attachEvent) {
+        target.attachEvent("onload", f);
+      } else {
+        target.onload = f;
+      }
     }
-  }
 
-  makeButton(e, function (e) {
-    var f = findAncestor(e.target, "FORM");
+    e.addEventListener("click", function (e) {
+      var f = findAncestor(e.target, "FORM");
 
-    // create a throw-away IFRAME to avoid back button from loading the POST result back
-    id = "iframe" + iota++;
-    target = Element("iframe", {
-      id: id,
-      name: id,
-      style: "height:100%; width:100%",
-    });
-    $(containerId).appendChild(target);
+      // create a throw-away IFRAME to avoid back button from loading the POST result back
+      id = "iframe" + iota++;
+      target = Element("iframe", {
+        id: id,
+        name: id,
+        style: "height:100%; width:100%",
+      });
+      $(containerId).appendChild(target);
 
-    attachIframeOnload(target, function () {
-      if (target.contentWindow && target.contentWindow.applyCompletionHandler) {
-        // apply-aware server is expected to set this handler
-        target.contentWindow.applyCompletionHandler(window);
-      } else {
-        // otherwise this is possibly an error from the server, so we need to render the whole content.
-        var doc = target.contentDocument || target.contentWindow.document;
-        var error = doc.getElementById("error-description");
-        var r = YAHOO.util.Dom.getClientRegion();
-        var contentHeight = r.height / 5;
-        var contentWidth = r.width / 2;
-        if (!error) {
-          // fallback if it's not a regular error dialog from oops.jelly: use the entire body
-          error = Element("div", { id: "error-description" });
-          error.appendChild(doc.getElementsByTagName("body")[0]);
-          contentHeight = (r.height * 3) / 4;
-          contentWidth = (r.width * 3) / 4;
-        }
+      attachIframeOnload(target, function () {
+        if (
+          target.contentWindow &&
+          target.contentWindow.applyCompletionHandler
+        ) {
+          // apply-aware server is expected to set this handler
+          target.contentWindow.applyCompletionHandler(window);
+        } else {
+          // otherwise this is possibly an error from the server, so we need to render the whole content.
+          var doc = target.contentDocument || target.contentWindow.document;
+          var error = doc.getElementById("error-description");
+          var r = YAHOO.util.Dom.getClientRegion();
+          var contentHeight = r.height / 5;
+          var contentWidth = r.width / 2;
+          if (!error) {
+            // fallback if it's not a regular error dialog from oops.jelly: use the entire body
+            error = Element("div", { id: "error-description" });
+            error.appendChild(doc.getElementsByTagName("body")[0]);
+            contentHeight = (r.height * 3) / 4;
+            contentWidth = (r.width * 3) / 4;
+          }
 
-        let oldError = $("error-description");
-        if (oldError) {
-          // Remove old error if there is any
-          $(containerId).removeChild(oldError);
-        }
+          let oldError = $("error-description");
+          if ((oldError = $("error-description"))) {
+            // Remove old error if there is any
+            $(containerId).removeChild(oldError);
+          }
+
+          $(containerId).appendChild(error);
 
-        $(containerId).appendChild(error);
+          var dialogStyleHeight = contentHeight + 40;
+          var dialogStyleWidth = contentWidth + 20;
 
-        var dialogStyleHeight = contentHeight + 40;
-        var dialogStyleWidth = contentWidth + 20;
+          $(containerId).style.height = contentHeight + "px";
+          $(containerId).style.width = contentWidth + "px";
+          $(containerId).style.overflow = "scroll";
 
-        $(containerId).style.height = contentHeight + "px";
-        $(containerId).style.width = contentWidth + "px";
-        $(containerId).style.overflow = "scroll";
+          responseDialog.cfg.setProperty("width", dialogStyleWidth + "px");
+          responseDialog.cfg.setProperty("height", dialogStyleHeight + "px");
+          responseDialog.center();
+          responseDialog.show();
+        }
+        window.setTimeout(function () {
+          // otherwise Firefox will fail to leave the "connecting" state
+          $(id).remove();
+        }, 0);
+      });
 
-        responseDialog.cfg.setProperty("width", dialogStyleWidth + "px");
-        responseDialog.cfg.setProperty("height", dialogStyleHeight + "px");
-        responseDialog.center();
-        responseDialog.show();
+      f.target = target.id;
+      f.elements["core:apply"].value = "true";
+      Event.fire(f, "jenkins:apply"); // give everyone a chance to write back to DOM
+      try {
+        buildFormTree(f);
+        f.submit();
+      } finally {
+        f.elements["core:apply"].value = null;
+        f.target = "_self";
       }
-      window.setTimeout(function () {
-        // otherwise Firefox will fail to leave the "connecting" state
-        $(id).remove();
-      }, 0);
     });
-
-    f.target = target.id;
-    f.elements["core:apply"].value = "true";
-    Event.fire(f, "jenkins:apply"); // give everyone a chance to write back to DOM
-    try {
-      buildFormTree(f);
-      f.submit();
-    } finally {
-      f.elements["core:apply"].value = null;
-      f.target = "_self";
-    }
-  });
-});
+  }
+);

core/src/main/resources/lib/form/bottomButtonBar.jelly

@@ -31,7 +31,7 @@ THE SOFTWARE.
   </st:documentation>
 
   <div id="bottom-sticker">
-    <div class="bottom-sticker-inner">
+    <div class="bottom-sticker-inner jenkins-buttons-row jenkins-buttons-row--equal-width">
       <d:invokeBody />
     </div>
   </div>

core/src/main/resources/lib/form/submit.jelly

@@ -23,27 +23,35 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:s="jelly:stapler" >
+<j:jelly xmlns:j="jelly:core" xmlns:s="jelly:stapler">
   <s:documentation> <![CDATA[
-    Submit button themed by YUI. This should be always
-    used instead of the plain <input> tag.
+    Submit button. This should be always used instead of the plain <button> tag.
     ]]>
+    <s:attribute name="id">
+      If specified the ID of the button.
+
+      @since TODO
+    </s:attribute>
     <s:attribute name="name">
       If specified, becomes the value of the name attribute.
       When you have more than one submit button on the form, this can be used to determine
       which button is pressed, as the server will get a parameter by this name.
     </s:attribute>
     <s:attribute name="value" use="required">
-      The text of the submit button. Something like "submit", "OK", etc.
+      The text of the submit button, defaults to 'Submit'
+      It's recommended to be more descriptive when possible, e.g. 'Create', 'Next'
     </s:attribute>
+    <s:attribute name="primary">
+      Sets whether this button is a primary button or not.
+      Defaults to true.
 
-    <s:attribute name="large">
-      Set to "true" to enable the large variant of the button
+      @since TODO
     </s:attribute>
+    <s:attribute name="clazz" />
   </s:documentation>
 
-  <input type="submit"
-         name="${attrs.name ?: 'Submit'}"
-         value="${attrs.value ?: '%Submit'}"
-         class="submit-button primary ${attrs.large ? 'large-button' : ''}" />
+  <button id="${attrs.id}" name="${attrs.name ?: 'Submit'}"
+          class="jenkins-button ${attrs.primary != 'false' ? 'jenkins-button--primary' : ''} ${attrs.clazz}">
+    ${attrs.value ?: '%Submit'}
+  </button>
 </j:jelly>

core/src/main/resources/lib/hudson/newFromList/form.jelly

@@ -85,7 +85,7 @@ THE SOFTWARE.
 
         <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
           <div class="jenkins-radio">
-            <input class="jenkins-radio__input mode-selection" type="radio" id="copy" name="mode" value="copy"  />
+            <input class="jenkins-radio__input mode-selection" type="radio" id="copy" name="mode" value="copy" />
             <label class="jenkins-radio__label" for="copy">${attrs.copyTitle}</label>
             <div class="jenkins-radio__children">
               <j:set var="descriptor" value="${it.descriptor}" />
@@ -101,15 +101,15 @@ THE SOFTWARE.
       </fieldset>
     </div>
 
-    <div class="jenkins-form-item">
+    <s:bottomButtonBar>
       <!--
         when there's only one radio above, form.elements['mode]' won't return an array, which makes the script complex.
         So always force non-empty array
        -->
       <input type="radio" name="mode" value="dummy1" style="display:none" />
       <input type="radio" name="mode" value="dummy2" style="display:none" />
-      <input type="submit" name="Submit" value="${%Create}" id="ok" />
-    </div>
+      <s:submit value="${%Create}" id="ok"  />
+    </s:bottomButtonBar>
 
     <st:adjunct includes="lib.hudson.newFromList.validation" />
   </s:form>

core/src/main/resources/lib/hudson/project/makeDisabled.jelly

@@ -45,7 +45,7 @@ THE SOFTWARE.
       <div align="right">
         <form method="post" id="disable-project" action="disable">
           <l:hasPermission permission="${it.CONFIGURE}">
-            <f:submit value="${%Disable Project}" />
+            <f:submit value="${%Disable Project}" primary="false" />
           </l:hasPermission>
         </form>
       </div>

war/src/main/less/modules/buttons.less

@@ -156,38 +156,15 @@
 .jenkins-buttons-row {
   display: flex;
   align-items: center;
-
-  .jenkins-button {
-    margin-left: 0 !important;
-    margin-right: 0.5rem !important;
-  }
-
-  .yui-button {
-    margin-left: 0 !important;
-    margin-right: 0.5rem !important;
-  }
-
-  .jenkins-table__button {
-    margin-left: 0 !important;
-    margin-right: 1.5rem !important;
-  }
+  gap: 1rem;
 
   &--invert {
     justify-content: flex-end;
+  }
 
+  &--equal-width {
     .jenkins-button {
-      margin-left: 0.5rem !important;
-      margin-right: 0 !important;
-    }
-
-    .yui-button {
-      margin-left: 0.5rem !important;
-      margin-right: 0 !important;
-    }
-
-    .jenkins-table__button {
-      margin-left: 1.5rem !important;
-      margin-right: 0 !important;
+      min-width: 5.625rem;
     }
   }
 }

war/src/main/less/pages/manage-jenkins.less

@@ -52,6 +52,12 @@
   position: relative;
   float: right;
   margin: -6px 0 0 !important;
+  display: flex;
+  gap: 0.5rem;
+
+  & > div {
+    display: contents;
+  }
 }
 
 .manage-messages .alert form span {