Document classes option

[scottgonzalez]

jquery/jquery-ui#1411

[jzaefferer]

Need to document:

• classes option for widgets having it, including any default properties, if present:
  • accordion: { "ui-accordion-header": "ui-corner-top", "ui-accordion-header-collapsed": "ui-corner-all", "ui-accordion-content": "ui-corner-bottom" }
  • dialog: { "ui-dialog": "ui-corner-all", "ui-dialog-titlebar": "ui-corner-all" }
  • progressbar: { "ui-progressbar": "ui-corner-all", "ui-progressbar-value": "ui-corner-left", "ui-progressbar-complete": "ui-corner-right" }
  • resizable: { "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se" }
  • selectmenu: { "ui-selectmenu-button-open": "ui-corner-top", "ui-selectmenu-button-closed": "ui-corner-all" }
  • slider: { "ui-slider": "ui-corner-all", "ui-slider-handle": "ui-corner-all", "ui-slider-range": "ui-corner-all ui-widget-header" }
  • spinner: `{ "ui-spinner": "ui-corner-all", "ui-spinner-down": "ui-corner-br", "ui-spinner-up": "ui-corner-tr" }
  • tabs: { "ui-tabs": "ui-corner-all", "ui-tabs-nav": "ui-corner-all", "ui-tab": "ui-corner-top", "ui-tabs-panel": "ui-corner-bottom" }
  • tooltip: `{ "ui-tooltip": "ui-corner-all ui-widget-shadow" }
• Widgets using _addClass without defining a classes option: autocomplete, draggable, droppable, menu, selectable, sortable (what do we document here?)
• New $.Widget methods: _addClass(), _removeClass(), _toggleClass()

Anything else?

[scottgonzalez]

Widgets using _addClass without defining a classes option: draggable, droppable, selectable, sortable (what do we document here?)

We document the automatic cleanup for destroy. That just goes into the _addClass(), etc. docs, nothing for the actual widgets.

[arschmitz]

@scottgonzalez those have a classes option draggable has ui-draggable, ui-draggable-disabled, ui-draggable-dragging, ui-draggable-handle etc...

[scottgonzalez]

I thought he was referring to using _addClass() with just extra classes, no keys.

[arschmitz]

DOH!! menu should not be {} same with autocomplete :(

[jzaefferer]

I was referring to widgets that don't specify options.classes at all.

Since it looks like @arschmitz has some more work to do to actually finish this, I'll wait for that before putting more work into this.

[arschmitz]

@jzaefferer no those should not be defined at all in the actual widget was the :(. What i'm trying to point out is that every widget in terms of the api docs define a classes object. We don't define them in the code though if their values are undefined, like the ones i mention above. The base widget adds ui-widgetname-disabled for every widget.

For example draggable is 100% correct in the code but in the api the classes option will be

{
  "ui-draggable": undefined,
  "ui-draggable-disabled": undefined,
  "ui-draggable-dragging": undefined,
  "ui-draggable-handle": undefined
}

[jzaefferer]

I still don't understand why some widgets have classes: {}, others don't specify the classes option at all.

no those should not be defined at all in the actual widget was the :(.

I can't parse that sentence.

[scottgonzalez]

Anything that has classes: {} was supposed to be removed.

[arschmitz]

yup that was the :( i was sad because i missed those

[jzaefferer]

I'm going to do a PR with the $.Widget docs along with two other widgets, one with classes override, one without. Can figure out the best format from there.

[jzaefferer]

I've compiled the full list of defaults, based on the latest button PR, going through all ui/ files and looking the the classes option, if defined, along with searching for _addClass() and _toggleClass() calls. @arschmitz could you fact check this list? Special attention to resizable, which might have even more defaults, I can't really tell (see my comment below).

{
    "ui-accordion": undefined,
    "ui-accordion-content": "ui-corner-bottom",
    "ui-accordion-content-active": undefined,
    "ui-accordion-header": "ui-corner-top",
    "ui-accordion-header-active": undefined,
    "ui-accordion-header-collapsed": "ui-corner-all",
    "ui-accordion-header-icon": undefined,
    "ui-accordion-icons": undefined
},
{
    "ui-autocomplete": undefined,
    "ui-autocomplete-input": undefined,
    "ui-autocomplete-loading": undefined
},
{
    "ui-button": "ui-corner-all",
    "ui-button-icon": undefined,
    "ui-button-icon-only": undefined
},
{
    "ui-checkboxradio": undefined,
    "ui-checkboxradio-checked": undefined,
    "ui-checkboxradio-icon": "ui-corner-all",
    "ui-checkboxradio-label": "ui-corner-all",
    "ui-checkboxradio-radio-label": undefined
},
{
    "ui-controlgroup": undefined,
    "ui-controlgroup-horizontal": undefined,
    "ui-controlgroup-vertical": undefined
},
{
    "ui-dialog": "ui-corner-all",
    "ui-dialog-buttonpane": undefined,
    "ui-dialog-buttons": undefined,
    "ui-dialog-buttonset": undefined,
    "ui-dialog-content": undefined,
    "ui-dialog-dragging": undefined,
    "ui-dialog-resizing": undefined,
    "ui-dialog-title": undefined,
    "ui-dialog-titlebar": "ui-corner-all",
    "ui-dialog-titlebar-close": undefined
},
{
    "ui-draggable": undefined,
    "ui-draggable-disabled": undefined,
    "ui-draggable-dragging": undefined,
    "ui-draggable-handle": undefined
},
{
    "ui-droppable": undefined,
    "ui-droppable-active": undefined,
    "ui-droppable-hover": undefined
},
{
    "ui-menu": undefined,
    "ui-menu-divider": undefined,
    "ui-menu-icon": undefined,
    "ui-menu-icons": undefined,
    "ui-menu-item": undefined,
    "ui-menu-item-wrapper": undefined
},
{
    "ui-progressbar": "ui-corner-all",
    "ui-progressbar-complete": "ui-corner-right",
    "ui-progressbar-indeterminate": undefined,
    "ui-progressbar-overlay": undefined,
    "ui-progressbar-value": "ui-corner-left"
},
{
    "ui-resizable": undefined,
    "ui-resizable-autohide": undefined,
    "ui-resizable-e": undefined,
    "ui-resizable-ghost": undefined,
    "ui-resizable-handle": undefined,
    // This one can change based on the helper, ghost and animate options O_o
    "ui-resizable-helper": undefined,
    "ui-resizable-n": undefined,
    "ui-resizable-ne": undefined,
    "ui-resizable-nw": undefined,
    "ui-resizable-resizing": undefined,
    "ui-resizable-s": undefined,
    "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se",
    "ui-resizable-sw": undefined,
    "ui-resizable-w": undefined
},
{
    "ui-selectable": undefined,
    "ui-selectable-helper": undefined,
    "ui-selected": undefined,
    "ui-selectee": undefined,
    "ui-selecting": undefined,
    "ui-unselecting": undefined
},
{
    "ui-selectmenu-button": undefined,
    "ui-selectmenu-button-closed": "ui-corner-all",
    "ui-selectmenu-button-open": "ui-corner-top",
    "ui-selectmenu-icon-space": undefined,
    "ui-selectmenu-menu": undefined,
    "ui-selectmenu-open": undefined,
    "ui-selectmenu-optgroup": undefined,
    "ui-selectmenu-text": undefined
},
{
    "ui-slider": "ui-corner-all",
    "ui-slider-handle": "ui-corner-all",
    "ui-slider-horizontal": undefined,
    "ui-slider-range": "ui-corner-all ui-widget-header",
    "ui-slider-range-max": undefined,
    "ui-slider-range-min": undefined,
    "ui-slider-vertical": undefined
},
{
    "ui-sortable": undefined,
    "ui-sortable-handle": undefined,
    "ui-sortable-helper": undefined,
    "ui-sortable-placeholder": undefined
},
{
    "ui-spinner": "ui-corner-all",
    "ui-spinner-button": undefined,
    "ui-spinner-down": "ui-corner-br",
    "ui-spinner-input": undefined,
    "ui-spinner-up": "ui-corner-tr"
},
{
    "ui-tabs": "ui-corner-all",
    "ui-tabs-tab": "ui-corner-top",
    "ui-tabs-active": undefined,
    "ui-tabs-anchor": undefined,
    "ui-tabs-collapsible": undefined,
    "ui-tabs-loading": undefined,
    "ui-tabs-nav": "ui-corner-all",
    "ui-tabs-panel": "ui-corner-bottom"
},
{
    "ui-tooltip": "ui-corner-all ui-widget-shadow",
    "ui-tooltip-content": undefined
}