Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

1.5 Style options removal

Jump to bottom
Jasper de Groot edited this page Mar 13, 2014 · 26 revisions

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)
  • 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

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.

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 add 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 (use wrapperClass option)

  • Corners
  • Icon
  • IconPos
  • IconShadow
  • inline
  • mini
  • shadow
  • theme

Checkboxradio (use wrapperClass option)

  • mini
  • theme
  • iconpos

Collapsible

  • collapsed icon
  • content theme
  • corners
  • expanded icon
  • iconpos
  • inset
  • mini
  • theme

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: 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

  • collapsed icon
  • content theme
  • corners
  • expanded icon
  • iconpos
  • inset
  • mini
  • theme

Controlgroup

  • corners
  • mini
  • shadow
  • theme
  • type - not so easy because you also have to call refresh

Fixedtoolbar

none

Listview

  • corners
  • count theme (deprecated)
  • divider theme
  • header theme (deprecated)
  • icon
  • inset
  • shadow
  • spliticon
  • split theme
  • theme

Loader

  • theme - not easily set should stay?

Navbar

  • iconpos - need to loop over the buttons?

Page

  • close btn type
  • corners
  • overlay theme
  • theme

Panel

  • theme

Popup

  • corners
  • theme
  • overlay theme - should stay?
  • shadow

Rangeslider

  • mini
  • theme
  • tracktheme

Selectmenu

  • corners
  • divider theme
  • icon
  • iconpos
  • iconshadow (deprecated)
  • mini
  • inline
  • overlaytheme
  • shadow
  • theme

Slider

  • mini
  • theme
  • tracktheme

Table

  • column toggle - not easily set should stay?
  • column button theme
  • column popup theme

Textinput (use wrapperClass)

  • corners
  • mini
  • theme

Toolbar

  • back btn theme
  • theme

Clone this wiki locally