1.5 Style options removal

Notes about the changes we are going to make for 1.5 to remove style options from widgets

General

• Open a ticket for each widget (milestone 1.5)
• PRs against branch "style-option-deprecation"
• Branch "style-option-deprecation" should contain one commit for each widget (which closes the ticket for that widget) before we merge it in master
• Removal of already deprecated iconShadow in separate commit (with it's own issue ticket)
• Tests, Demos, API docs need to be updated before merging in master
• Write a section for the 1.5 upgrade guide before merging in master (in 1.5-update branch)
• Update/test the ThemeRoller (in a 1.5 update branch)

Notes

• We only remove options with a boolean value (i.e. not theme, icon, and iconpos)

• In case the default for a style option is true, the corresponding class will always be added by the widget after removing that option. For convenience we will provide a class to negate the style. For example, the option "corners" in the button widget (input buttons) defaults to true. After removing the option the widget will always add the ui-corner-all class to the generated wrapper. If you don't want rounded corners, you can:

1. Change the value for border-radius to 0 in the ui-corner-all rule in theme CSS (can be set with ThemeRoller as well)
2. Override the border-radius of ui-corner-all in your custom CSS: .my-class .ui-corner-all { border-radius: 0; }
3. Add the new ui-corner-none class (name of the class not defined yet) via the wrapperClass option
4. Use the enhanced option and add the wrapper to your markup without the ui-corner-all class

Note: The first solution will unset corners for all buttons and widgets. The same goes for the second solution for all buttons and widgets that are a child of the element with my-class.

• In case the default for a style option is false you can set that style by adding the corresponding class to the markup yourself. For widgets that wrap the native element you can use wrapperClass to add the class to the wrapper or - better - use the enhanced option and add the wrapper to your markup including the class.

• For the inset option of the listview and collapsible widgets we create an ui-inset class and make the default for this option the same for both widgets (https://github.com/jquery/jquery-mobile/issues/7242)

Button

• corners
• iconShadow (deprecated in 1.4)
• inline
• mini
• shadow

Checkboxradio

• mini

Collapsible

• corners
• inset
• mini

Collapsible Q&A

Q - Kangsik : I know that 'collapsed-icon' and 'expanded-icon' are applied to a same element by user event. Could it be possible to remove?

A - Gabriel: Updated: We're not touching non-boolean-valued options. The collapsed-icon and expanded-icon, and even the collapsed property could be done by CSS, reducing the function _handleExpandCollapse() to something simple like setting the text, setting the option value, and triggering the event, but it would probably inflate the CSS significantly, affecting startup time for all pages.

Q - Kangsik : Some options are excluded in this page.( ex : 'collapsed' in 'collapsible' widget) I think that these options maybe manipulate DOM elements. Is it right?

A - Gabriel: Yes. "collapsed" is a state option, not a style option.

Collapsible Set

• corners
• inset
• mini

Controlgroup

• corners
• mini
• shadow
• type ? - Although type is a style option (and could be changed so it only accepts a boolean and uses a class for the horizontal style) it is a bit more complicated when it is used with the checkboxradio widget. It depends on the type whether the checked button should get the active button class or not. This also means the refresh method has to be called after adding/removing the horizontal-type class.

Fixedtoolbar

none

Listview

• corners
• inset
• shadow

Loader

none

Navbar

none

Page

• corners (dialog extension)

Panel

none

Popup

• corners
• shadow

Rangeslider

• mini

Selectmenu

• corners
• iconShadow (deprecated in 1.4)
• mini
• inline
• shadow

Slider

• mini

Table

none

Textinput

• corners
• mini

Toolbar

none