type: widget

release: 1.12

status: in development

documentation: N/A

demo: http://view.jqueryui.com/button-icon-span/demos/button/

TODOs

• investigate pseudo elements vs spans for icons
• create new branch using spans for icons 
• Determine if <label><input></label> is still bad for accessibility

• http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/

• http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

• http://www.w3.org/TR/WCAG20-TECHS/H44.html 

1 - Description:

To have a fresh start on the planning on this refactor, the older wiki page that covered the current button is archived on Button (Old).

The button widget allows consistent visual design of buttons and other button like widgets ( toggle buttons, checkbox's ).

While the old button widget combined the toggle button / checkbox / radio behavior into a single widget. These will now be separated into two widgets.

The button set functionality will be converted into a controlgroup widget. 

The checkboxradio widget and the control group widget will be loosely modeled after the jQuery Mobile widgets of the same name

http://api.jquerymobile.com/checkboxradio/

http://api.jquerymobile.com/controlgroup/

Supported types:

• button[type=button/submit/reset]: use as wrapper

• input[type=button/submit/reset]: no icon support

• encourage users to use <button> instead

• anchors: use as wrapper

• proxy SPACE to click (and prevent default scrolling)

• input[type=radio/checkbox]: unsure

• should we just use the new checkbox/radio widget instead?

• anything else: officially unsupported, likely to work the same as <button>

Buttons are generally just styling. As such, we should be able to easily style buttons just with the CSS framework. This is a big part of why Bootstrap is so popular.

2 - Visual Design:

The visual design of the button will not change at this time except that it will no longer support multiple icons

button set visual design will also remain the same

checkbox radio will now support 2 visual styles a toggle button style and one where the checkbox or radio button will show 

3 - Functional Specification: Button

(Detailed description of how the script will be structured: defaults, options, architecture, extensibility, etc.)

Options:

• disabled (Boolean Default: false)
• icon (String, default: null)
• name of the icon to use
• iconPosition (String Default: "left")
• just left and right ( or add top and bottom )
• label (string default: null )
• text to use in button
• text (Boolean Default: true ) 
• weather to show text or now
• rename to showLabel? 

Methods:

• destroy ()
• remove widget from element revert all markup 
• disable()
• disable use of the button
• enable()
• enable a disabled button
• refresh
• refresh the visual state of the button
• widget
• return the outermost element of the widget
• _getCreateOptions():

• Generate label if null (read HTML or value for inputs)

• Read disabled property
•  

Events:

• create 
• when the widget is initially created

4 - Markup & Style:

4.1 Initial markup examples

(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

<button id="button">Text<button>
<input type="submit" name="submit" id="submit-button" value="Text"/>
<a href="#" id="link">Text</a>

4.2 Recommended transformed HTML markup

(The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

<button class="ui-button ui-widget ui-corner-all">Text</button>

<input class="ui-button ui-widget ui-corner-all" type="submit" name="submit" id="submit-button" value="Text">

<a class="ui-button ui-widget ui-corner-all" href="#" id="link">Text</a>

4.3 Accessibility recommendation

(Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

4.4 CSS & Theme

(Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

5 - Latest version of plugin:

(Link to the latest version in the jQuery UI trunk here)

6 - Open issues being discussed

(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)