[JIRA] (JENKINS-61840) Revamp the buttons

[fqueir...@cloudbees.com (JIRA)]

Title: Message Title

Félix Queiruga Balado updated an issue   Jenkins / JENKINS-61840 Revamp the buttons Change By: Félix Queiruga Balado Restyle the buttons according to a defined hierarchy. Changes will include: * Create styles for several button variants: primary, secondary (default), danger, link and large. * Support SVG icons within buttons. * Clean up some techinical debt: stop using YUI button CSS, consolidate button CSS used in core. h3.CSS API Buttons, hyperlinks and submit inputs can be styled as buttons. The CSS API for these is a bit different: h4.Buttons For compatibility reasons, the button API stays the same. Buttons are not styled by default and need to be wrapped within a _span_ tag with a _.yui-button_ class. {code :html } <span class="yui-button primary">     <button>primary button</button> </span> <span class="yui-button link-button">     <button>transparent link button</button> </span> <span class="yui-button yui-menu-button " >     <button>dropdown button</button> </span> {code} h4.Hyperlinks Hyperlinks can be styled as buttons just by adding the `.yui-button` class to them. Examples: {code :html } <a href="" class="yui-button">hyperlink button</a> <a href="" class="yui-button danger disabled">hyperlink button</a> {code} h4.Submit inputs Inputs with the _type_ attribute equal to _submit_, _button_ or _reset_ have button styles applied by default. Examples: {code :html } <input type="submit" value="input button"> <input type="reset" disabled value="input button"> <input type="button" class="primary large-button" value="input button"> {code} h4. Button variants Icon buttons Icon buttons have a _.icon-button_ CSS class and have the link button style. Example : {code:html} <a class="yui-button icon-button"><i class="fa fa-user" /></a> {code} h4. Variants: Button types: * *Primary:* add the _.primary_ class to the _.yui-button_ element or input. * *Secondary:* default state. * *Danger:* add the _.danger_ class to the _.yui-button_ element or input. * *Link button:* transparent button. Add the _.link-button_ class to the _.yui-button_ element or input. Modifiers: * *Large:* add the _.large-button_ class to the _.yui-button element or input. h4 * *Disabled:* add the _disabled_ attribute to the _<button>_ or _<input>_, or the _ . Modifiers disabled_ class to the _<a>_ element. Add Comment   This message was sent by Atlassian Jira (v7.13.12#713012-sha1:6e07c38) -- You received this message because you are subscribed to the Google Groups "Jenkins Issues" group. To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-issues+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-issues/JIRA.205699.1586355412000.11504.1586949720114%40Atlassian.JIRA.