12.0p IconMenuButton state handling issues

[Blama]

Hi Isomorphic,

please see this online testcase (v12.0p_2019-03-11):

isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true},
            {title: "AJAX.doc"}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
    ]
});

var menuButton = isc.IconMenuButton.create({
    ID: "menuButton",
    backgroundColor: "lightgray",
    autoDraw: false,
    title: "File",
    width: 100,
    menu: menu,
    // icon: "http://lms.localhost:8080/lms/lms/sc/skins/Tahoe/images/LT3/flags/flag.png",
    icon: "icons/16/icon_add_files.png",
    showRollOverIcon: true,
    showRollOver: true,
    showMenuOnClick: true,

});

var menuButton2 = isc.IconMenuButton.create({
    ID: "menuButton2",
    backgroundColor: "lightgray",
    autoDraw: false,
    title: "File 2",
    width: 100,
    menu: menu,
    // icon: "http://lms.localhost:8080/lms/lms/sc/skins/Tahoe/images/LT3/flags/flag.png",
    icon: "icons/16/icon_add_files.png",
    showRollOverIcon: true,
    showRollOver: true,
    showMenuOnClick: true,

});


isc.HStack.create({
    width: "100%", membersMargin: 10,
    members: [menuButton, menuButton2 ]
});

As you can see, there are some problems with icon display / change / change back. I know that one file is missing (see here for an idea how to make debugging such things more easy)
IMHO the icon of the button should also be in the state the button is in.
Also, there are tabbing issues. I can't seen to tab from the 1st button to the 2nd one.

Best regards
Blama

[Isomorphic]

The real problem here is that IconButtons are really intended for use in Ribbons, which handle some aspects of sizing and titling, and IconButtons are transparent transparent and borderless by default, like similar toolstrip buttons - see the id=ribbonBar sample in the showcase for expected behavior there.

That said - there were two bugs here:

1) The title (which includes the icons in this widget) was not always being updated when state changed

2) there was a missing iconButtonFocused instance in the skins - the items were being selected, so you *could* tab between them and press Spacebar to open the menus, but there was no visible focused border

Those are both fixed for tomorrow's builds.

Note that, since IconButtons are transparent and borderless, you might want to just set baseStyle: "button", if you want to use them outside of a Ribbon and have them look like other buttons.

[Blama]

Hi Isomorphic,

thanks, I'll have a look at it then tomorrow, also at baseStyle: "button".

What is the suggested best practice for the usecase "non-Ribbon button with icon that has a menu"? What we are doing plus baseStyle: "button"? Something else?

Thank you & Best regards
Blama

[Isomorphic]

There's no single best practice here. It's a matter of what appearance you prefer and the context in which you're placing the control.