-
Improvement
-
Resolution: Fixed
-
Minor
-
None
-
-
Jenkins 2.233
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.
CSS API
Buttons, hyperlinks and submit inputs can be styled as buttons. The CSS API for these is a bit different:
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.
<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>
Hyperlinks
Hyperlinks can be styled as buttons just by adding the `.yui-button` class to them. Examples:
<a href="#" class="yui-button">hyperlink button</a> <a href="#" class="yui-button danger disabled">hyperlink button</a>
Submit inputs
Inputs with the type attribute equal to submit, button or reset have button styles applied by default. Examples:
<input type="submit" value="input button"> <input type="reset" disabled value="input button"> <input type="button" class="primary large-button" value="input button">
Icon buttons
Icon buttons have a .icon-button CSS class and have the link button style. Example:
<a class="yui-button icon-button"><i class="fa fa-user" /></a>
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.
- Disabled: add the disabled attribute to the <button> or <input>, or the .disabled class to the <a> element.
[JENKINS-61840] Revamp the buttons
Epic Link | New: JENKINS-60919 [ 204316 ] |
Status | Original: Open [ 1 ] | New: In Progress [ 3 ] |
Description |
Original:
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. |
New:
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 |
Description |
Original:
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 |
New:
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 element or input. * *Disabled:* add the _disabled_ attribute to the _<button>_ or _<input>_, or the _.disabled_ class to the _<a>_ element. |
Description |
Original:
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 element or input. * *Disabled:* add the _disabled_ attribute to the _<button>_ or _<input>_, or the _.disabled_ class to the _<a>_ element. |
New:
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_ element or input. * *Disabled:* add the _disabled_ attribute to the _<button>_ or _<input>_, or the _.disabled_ class to the _<a>_ element. |
Status | Original: In Progress [ 3 ] | New: In Review [ 10005 ] |
Released As | New: Jenkins 2.233 | |
Resolution | New: Fixed [ 1 ] | |
Status | Original: In Review [ 10005 ] | New: Resolved [ 5 ] |