[JIRA] (JENKINS-61840) Revamp the buttons

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado created an issue

Jenkins / JENKINS-61840 Revamp the buttons Issue Type: Improvement Assignee: Félix Queiruga Balado Components: core Created: 2020-04-08 14:16 Priority: Minor Reporter: 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. Add Comment

This message was sent by Atlassian Jira (v7.13.12#713012-sha1:6e07c38)

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado started work on JENKINS-61840

Change By: Félix Queiruga Balado Status: Open In Progress

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

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: 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. Modifiers

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

}

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

[fqueiruga@cloudbees.com (JIRA)]

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}

<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}

<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}

<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. 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 button_ element or input. * *Disabled:* add the _disabled_ attribute to the _<button>_ or _<input>_, or the _.disabled_ class to the _<a>_ element.

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado updated JENKINS-61840

Jenkins / JENKINS-61840 Revamp the buttons

Change By: Félix Queiruga Balado

Status: In Progress Review

Add Comment

[o.v.nenashev@gmail.com (JIRA)]

Oleg Nenashev updated JENKINS-61840

Jenkins / JENKINS-61840 Revamp the buttons

Change By: Oleg Nenashev Status: In Review Resolved Resolution: Fixed Released As: Jenkins 2.233

Add Comment