Button icon and (text) label specification

[bill]

Button basically takes an icon and text (like swing buttons), but the icon is specified as a CSS background image, so the interface will look like this:

<button dojotype=dijit.form.Button iconClass=saveIcon> Save </button>

where the template is:

<button>
   <div class="buttonIcon ${iconClass}"></div>
   <div dojoAttachPoint=containerNode class=buttonLabel>
       ${label}
  </div>
</button>

and the CSS for saveIcon displays the icon from a sprite

.saveIcon {
   background-image: url(...) 0 -16 ...
}

For toolbar buttons, in normal mode the text won't show up, just the icon, but in high contrast mode the text will show up instead (and won't be limited to 16x16).

.toolbarButton .buttonLabel { display: none; }
.dijit_a11y .toolbarButton .buttonIcon { display: none; }
.dijit_a11y .toolbarButton .buttonLabel { display: inline }

Oh, also there's a title attribute on each button to tell the screen reader the text.

Maybe MenuItem? should extend Button. In any case it should support the same interface (and Tree should also do icons this way).

[bill]

Fixed by recent checkins to Button.js and Menu.js

[tk]

Reopening to get input on a Dtk.org forum topic: (http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dijit-form-button-change-iconclass)

Should this provide an iconNode attachpoint so users can programatically switch iconClasses for "onHover" or "onMouseDown" etc?

CC'ing the 2 users who are inquiring about this possible bug.

-Karl

[bill]

(In [11091]) Add dojoAttachPoint=iconNode for button icons. Fixes #3545.