RibbonButton.iconStyle ignored?

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-05-10/AllModules Development Only (built 2024-05-10)
Chrome, FF on MacOS

Hello, I'm trying to set and iconStyle on a RibbonButton, but it seems that the img tag has always css class ribbonButtonHIcon:



using this test case:

var typeMenu = {
    _constructor: "Menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "Document", keyTitle: "Ctrl+D", icon: "[SAMPLE]icons/16/document_plain_new.png"},
        {title: "Picture", keyTitle: "Ctrl+P", icon: "[SAMPLE]icons/16/folder_out.png"},
        {title: "Email", keyTitle: "Ctrl+E", icon: "[SAMPLE]icons/16/disk_blue.png"}
    ]
};

function getRibbonButton (title, props) {
    return isc.RibbonButton.create(isc.addProperties({
            title: title,
            autoDraw: false,
            icon: "pieces/48/cube_blue.png",
            iconStyle: "foobar",
            click: "isc.say(this.title + ' button clicked');"
        }, props)
    );
}

isc.RibbonGroup.create({
    ID: "fileGroup",
    title: "File (vertical icons)",
    numRows: 2,
    colWidths: [ 40, "*" ],
    titleAlign: "left",
    controls: [
        getRibbonButton("New", {vertical: true, menu: typeMenu, showMenuIconOver: false }),
        getRibbonButton("Open", { vertical: true, icon: "pieces/48/cube_green.png" }),
        getRibbonButton("Save", { vertical: true, icon: "pieces/48/star_yellow.png" }),
        getRibbonButton("Save As", { vertical: true, menu: typeMenu, icon: "pieces/48/pawn_red.png" })
    ],
    autoDraw: false
});


isc.RibbonGroup.create({
    ID: "editGroup",
    title: "Editing Tools",
    numRows: 2,
    colWidths: [ 40, "*" ],
    controls: [
        getRibbonButton("Edit", { vertical: false, icon: "pieces/16/star_yellow.png" }),
        getRibbonButton("Copy", { vertical: false, icon: "pieces/16/pawn_white.png" }),
        getRibbonButton("Undo", { vertical: false, menu: typeMenu, showMenuIconOver: false, icon: "pieces/16/star_grey.png" }),
        getRibbonButton("Redo", { vertical: false, menu: typeMenu, icon: "pieces/16/piece_green.png" })
    ],
    autoDraw: false
});

isc.RibbonGroup.create({
    ID: "insertGroup",
    title: "Insert",
    numRows: 2,
    colWidths: [ 40, "*" ],
    controls: [
        getRibbonButton("Picture", { vertical: true, menu: typeMenu, icon: "pieces/48/cube_blue.png" }),
        getRibbonButton("Video", { vertical: true, menu: typeMenu, icon: "pieces/16/pawn_yellow.png" }),
        getRibbonButton("Link", { vertical: false, icon: "pieces/16/piece_red.png" }),
        getRibbonButton("Other", { vertical: false, icon: "pieces/16/star_blue.png" })
    ],
    autoDraw: false
});

isc.RibbonBar.create({
    ID: "ribbonBar",
    groupTitleAlign: "center",
    groupTitleOrientation: "top"
});

ribbonBar.addGroup(fileGroup, 0);
ribbonBar.addGroup(editGroup, 1);
ribbonBar.addGroup(insertGroup, 2);

[Isomorphic]

hi Claudio,

This widget was indeed ignoring Button.iconStyle - instead, it was always building a style by effectively doing (this.baseStyle + (this.vertical ? "VIcon" : "HIcon")), and that behavior was not documented.

We've fixed so that iconStyle overrides that default behavior, and also added RibbonButton.menuIconStyle, which overrides the same behavior for the separate menuIcon (baseStyle suffixed VMenuIcon or HMenuIcon, in that case).

You'll find the fix and some better docs in builds of 13.0+ dated May 14 and later.

[claudiobosticco]

I can confirm it's fixed, thank you very much