Allow Icons to be specified for Dialog buttons

Just a quick update, you can achieve this without modifications to jQuery, but it does require some work:

  var dialog = $(...).dialog(...);
  dialog.parent().find('button:contains("Cancel")')
    .addClass('ui-button-text-icon-primary')
    .removeClass('ui-button-text-only')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-close"></span>");

It seems that at least a few other people have wanted the same feature:

http://stackoverflow.com/questions/2525524/jquery-ui-dialog-button-icons

http://forum.jquery.com/topic/making-it-easier-to-customize-style-of-buttons-in-jquery-ui-dialog-boxes

Wow, you should definitely not do that. If you're going to manually change the state of a button, use button's public API, don't manually modify it's state.

If you want this level of control, you should definitely be using the array format for buttons, not the simplified hash format. I could see whitelisting the icons property to be passed along to the button widget. If we're going to proxy the icons, we should really proxy every button option though. This is tricky because the text property and button's text option have completely different meanings.

Maybe we can proxy icons and update button to treat an empty label the same as text: false. That would expose the majority of the button API without explicitly exposing the button API. The only thing missing would be the ability to specify text but have it hidden.

Hi, I'm new to the jQuery UI development side of things. I'd like to work on this ticket. I read the bugfixing guide but don't see how to assign this ticket to my name. I'd go with what was said previously about proxying the icons property, but I'd say add another property for controlling the display of the text, possibly called showText:true|false. That would allow the buttons to maintain accessibility and allow for most control.

$( ".selector" ).dialog({ buttons: [
    {
        text: "Ok",
        click: function() { $(this).dialog("close"); },
        icons:{
            primary:'ui-icon-locked'
        },
        showText:false
    }
] });

How do I go about assigning this ticket to myself? I've already forked the project in github and familiarized myself with that.

Brian, I think your proposal makes sense. Can you please post your proposed API on the Developing jQuery UI forum for feedback?

As for assigning the ticket to yourself, that's not something that you can do. The bug fixing guide needs to be updated to remove the section about ticket assignments as that was written a long time ago when the guide was only meant for team members.

Hi.

I fixed this on my own jQuery-ui dialog (v1.8.11), simply by replacing a line in the _createButtons() method:

dialog.js, line 385

    button.button();

by:

    button.button({icons:props.icons});

if icons are specified in the way brian123zx explained, they will be displayed.

If no icons are specified, or if the "simple" way to specify buttons is used, no icons are displayed.

Enjoy !

Damien.

For those wanting to implement feugy's change directly in jquery-ui.min.js (1.8.11), it goes at line 343, about character 191, within this statement:

j.button()

Which becomes

j.button({icons:n.icons})

Replying to [comment:8 dracos]:

And if you want to implement feugy's change in jquery-ui.min.js (1.8.13), it goes at line 386, character 297:

i.button()

Which becomes

i.button({icons:h.icons})

#7598 is a duplicate of this ticket.

I went ahead and submitted a pull request of this.

https://github.com/jquery/jquery-ui/pull/423

Demo: http://jsbin.com/ebowan/12/edit

Think it covers all the bases.

$(document).ready(function() {
    $('#myDialog').dialog({
        buttons: [
          {
            text: 'Icon Only',
            showText: false,
            icons: {
                    primary: 'ui-icon-disk'
                }
            },
           {text: 'Primary',
            icons: {
                    primary: 'ui-icon-trash'
                }
            },
            {text: '2ndary',
            icons: {
                    secondary: 'ui-icon-plus'
                }
            },
            {text: 'Both',
            icons: {
                   primary: 'ui-icon-trash', secondary: 'ui-icon-plus'
                }
            }
                 ]
    });

});

I put together a demo of this functionality here.

http://davidjquery.com/jquery-ui-1/demos/dialog/buttons.html

Dialog: Pass through icons and showText (as 'text') options to button. Fixes #6830 - Allow Icons to be specified for Dialog buttons.

Changeset: 999617343f7b813dc1c8d9c9048489e4d99d0470