ACE Disabled Styling Standard

ACE Disabled Styling Standard

Introduction

When a compnent is marked disabled (disabled attribute set to "true"), we need to find a way to disable the component (not trivial when a component is complex and YUI doesn't have the built-in capability) and provide a way for the user to style the component in the disabled state.

Disabling a component

This varies from component to component. If the YUI component has the capability built in, we need only set a disabled property. Or in some cases where the component is created from markup, set a disabled style class in the markup. For components that don't have a built-in disabled property, we have to disable all the constituent interactive elements ourselves.

For a simple component, we need only set the disabled attribute of the underlying element. For example, a button component only requires setting the disabled attribute of the underlying button element. (This is actually done by YUI already, because the YUI Button class has a disabled property built in.) However, according to the HTML spec., the disabled attribtute is not applicable to a link element. Therefore, for a link element, we need to replace the rendered anchor tag with text/label. Other cases may require disabling certain listeners.

The most difficult task should be locating the constituent elements, and disabling them at the right stage of the rendering process. This may require modifying YUI source code. Modifying YUI source in place should be avoided. A better way is make a copy of functions, modify them, and use YUI's class extension mechanism to override the original functions. Still, when the functions are many and complex, they will still require tedious maintenance work when upgrading to a new YUI version.

Styling a disabled component

In the YUI components we have so far, one or more disabled style classes are added to an ancestor element. (Not replacing existing style classes.) For example, in a button component, the class attribute of an ancestor span element looks like this:

<span ... class="yui-button yui-checkbox-button yui-button-disabled yui-checkbox-button-disabled" ...>

The disabled class name is usually formed by appending "-disabled" to the enabled class name, but sometimes it is just the general name of "disabled", esp. when there is no enabled class name in the first place. For example, for a disabled tab, it looks like this:

 <li ... class="disabled" ...>

We should do the same when setting our or user's style classes in the root div. It is probably clearer to use the first pattern. But the second pattern makes for more elegant CSS rules:

.ice-skin-sam .yui-checkbox-button.disabled {...}

Looks like even in YUI 3 the first pattern is still used. Therefore, for clearer understanding and cross-browser compatibility, we should use the first pattern when setting style classes in our component root div.