To introduce a new Button component for YUI 3 that addresses the following user stories
- "I want buttons on my site to look consistent & attractive."
- "I want to be able to programmatically control buttons in my application."
- "I want to my buttons to be intelligent and interact with one another in groups."
- "I want my application to be able to dynamically generate buttons."
- ARIA / Accessibility
- Modern styles (using CSS3), but degrades well to legacy browsers
- Customizable colors with minimal fuss
- Something lighter than Y.Widget, but similar in features to YUI2 buttons
- cssbuttons (CSS) - Some lite CSS skins to give the buttons a nice look & feel. This is ideal for someone who just wants a nice looking button, without needing programatic control.
- button-base (JS) - A
Y.Attribute
-driven wrapper around a button-like DOM node, and some helper utilities - button-group (JS) - A manager that listens for Y.Button events and can fire notifications when the selection has changed
Buttons can be used in many different ways. Some users just want the buttons to be aesthetically pleasing, others want to listen for clicks/events, others want to programmatically control them, and some will use them for core navigation groups. Because of these variety of use cases, it's important to have functionality logically and modularly separate, while keeping them simple to use & control.
The lightest possible implementation is just including the button stylesheet and adding the yui3-button
class to any element you would like to be a button. As requirements start to increase, you can start adding on JS modules to provide the required functionality. The JS portion of Button is very Y.Attribute
-driven. The idea is that it that Y.Button
is basically a wrapper around a DOM node that fills in missing functionality and keeps the UI in sync with the button state. Y.ButtonGroup
is also Y.Attribute
driven that knows about groups of Y.Button
instances and manages them as a whole.
Y.Button
- The Y.Attribute-driven Button objectY.Buttons
- A way to generate an array of Y.Button instances given a NodeListY.ButtonGenerator
- A way to dynamically generate a Y.Button instance with an unattached DOM node
Y.ButtonGroup
- A way to connect Y.Button instances together and has a memory of selection states
- onClick
- getDOMNode
- _colorToHex (static)
- _getContrastYIQ (static)
- type - specifies the type of button (push/toggle)
- disabled - a setter for the node's 'disabled' attribute
- selected - a setter that handles the node's 'selected' state
- backgroundColor - The background color for the button
- typeChange
- selectedChange
- backgroundColorChange
- disabledChange
- yui3-button
- yui3-button:hover
- yui3-button:active
- yui3-button-selected
- yui3-button-focused
- yui3-button-disabled
- type - The type of group (default:push/radio/checkbox)
- buttons - An array of
Y.Button
instances that are in this group - selection - The array of
Y.Button
instances that are currently selected
- role=button
- aria-pressed
- aria-selected
I haven't come up with a good reason for making ARIA support optional (like YUI 2 Button), so it's just baked in for the time being.
You can find some demos here.
-
Y.Button
- Add sugar & properties to not require users to use .get() & .set() all the time. This will improve usability & performance. -
Y.Button
- Support aria-label/aria-labeledby -
Y.Button
- Support icons & image buttons -
Y.Button
- Determine if the color contrast calculation should belong inY.Button
, or elsewhere -
Y.Buttons
- Combine with Y.Button? -
Y.ButtonGenerator
- Allow an optionalcontainer
element that the node is appended to? -
Y.ButtonGroup
- Support aria-multiselectable for radio groups -
Y.ButtonGroup
- Possibly support aria-owns ifY.Button
instance relationship is not parent-children -
Y.ButtonGroup
- 'selection' is probably inefficient. -
cssbuttons
- Add basic Sam & Night skins -
Allow using selector strings as opposed to requiring a Node/NodeList to instantiate.
-
Investigate state on legacy browsers
-
Investigate state on tablets
-
Investigate lazy attributes
-
Use the
event-touch
module to be more responsive on touchscreen devicesY.all('.yui3-button').on(['touchstart' /* <- if applicable */, 'click'], function (e) { e.halt(); // Stop event propagation // do something });
After seeing the presentation, it seems to me the same functionality could best be served by two Node plugins in the following way:
Regular push buttons of any kind: no code at all, just use plain old s
Toggle button: a ToggleButtonPlugin for Node which adds the two-state functionality to a regular
ButtonGroup: Only for the radio-type button set, a Node plugin to ensure the exclusivity. For other type of groups, there is nothing to do, really, there is no point in having code for that.
All button types would be supported by the cssbutton style sheet.
This would solve the issue of listening to the click event nicely. Since Y.Button doesn't provide it, you have to go to the
object. Well, if it is a Node plugin then there is nothing but the Node. It also solves the issue of listening to click by using event delegation on the container and finding which button was it. If they are just Node plugins, you get the reference as the target of the event.Sugar methods could be provided so that all nodes in a given container with a certain className are plugged in with the ToggleButtonPlugin and, likewise, all the containers (usually
Aria would be well served as well. Regular buttons would be read as what they are, regular buttons. The ToggleButtonPlugin would add the aria attribute to indicate its state. I don't know if there us anything to be read to the user of a mutually exclusive set of buttons but if there is, the plugin would be able to do it. For any other grouping of buttons, there is really nothing that needs to be read except a title attribute on the container, if needed.