Opened 12 years ago

Closed 12 years ago

Last modified 9 years ago

#3545 closed task (fixed)

Button icon and (text) label specification

Reported by: bill Owned by: bill
Priority: high Milestone: 0.9beta
Component: Dijit - Form Version: 0.9
Keywords: Cc: tk, mmr0mmr@…, rysilva+dojo@…
Blocked By: Blocking:

Description (last modified by 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).

Change History (5)

comment:1 Changed 12 years ago by bill

Description: modified (diff)

comment:2 Changed 12 years ago by bill

Milestone: 0.90.9beta
Resolution: fixed
Status: newclosed

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

comment:3 Changed 12 years ago by tk

Cc: tk mmr0mmr@… rysilva+dojo@… added
Resolution: fixed
Status: closedreopened

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

comment:4 Changed 12 years ago by bill

Resolution: fixed
Status: reopenedclosed

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

comment:5 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.