Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-61840

Revamp the buttons

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved (View Workflow)
    • Priority: Minor
    • Resolution: Fixed
    • Component/s: core
    • Labels:
      None
    • Similar Issues:
    • Epic Link:
    • Released As:
      Jenkins 2.233

      Description

      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.

        Attachments

          Activity

          fqueiruga Félix Queiruga Balado created issue -
          fqueiruga Félix Queiruga Balado made changes -
          Field Original Value New Value
          Epic Link JENKINS-60919 [ 204316 ]
          fqueiruga Félix Queiruga Balado made changes -
          Status Open [ 1 ] In Progress [ 3 ]
          fqueiruga Félix Queiruga Balado made changes -
          Description 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.
          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
          fqueiruga Félix Queiruga Balado made changes -
          Description 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
          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.
          fqueiruga Félix Queiruga Balado made changes -
          Description 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.
          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.
          fqueiruga Félix Queiruga Balado made changes -
          Status In Progress [ 3 ] In Review [ 10005 ]
          oleg_nenashev Oleg Nenashev made changes -
          Released As Jenkins 2.233
          Resolution Fixed [ 1 ]
          Status In Review [ 10005 ] Resolved [ 5 ]

            People

            Assignee:
            fqueiruga Félix Queiruga Balado
            Reporter:
            fqueiruga Félix Queiruga Balado
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: