-
Notifications
You must be signed in to change notification settings - Fork 2.4k
1.5 Style options removal
Notes about the changes we are going to make for 1.5 to remove style options from widgets
- Open a ticket for each widget (milestone 1.5)
- Separate branches for each widgets
- Squash all commits in the branch before merging in master - the one commit that will be merged should close the 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
- Test the ThemeRoller after merging in master
-
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, he option "corners" in the button widget (input buttons) defaults totrue
. After removing the option the widget will always add theui-corner-all
class to the generated wrapper. If you don't want rounded corners, you can:
- Change the value for
border-radius
to 0 in theui-corner-all
rule in theme CSS (can be set with ThemeRoller as well) - Override the
border-radius
ofui-corner-all
in your custom CSS:.my-class .ui-corner-all { border-radius: 0; }
- Add the new
ui-corner-none
class (name of the class not defined yet) via thewrapperClass
option - Use the
enhanced
option and add the wrapper to your markup without theui-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 usewrapperClass
to add the class to the wrapper or - better - use theenhanced
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)
- corners
- iconShadow (deprecated in 1.4)
- inline
- mini
- shadow
- mini
- corners
- inset
- mini
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: 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.
- corners
- inset
- mini
- corners
- mini
- shadow
- type - not so easy because you also have to call refresh
none
- corners
- inset
- shadow
none
none
- corners (dialog extension)
none
- corners
- shadow
- mini
- corners
- iconShadow (deprecated in 1.4)
- mini
- inline
- shadow
- mini
none
- corners
- mini
none