# Migrating to 2.0 #

The following guide should be used for migrating from 1.x to 2.0. 

## Sass ##

* Modifiers no longer extend from their parent class. Please verify your CSS still works.
* Remove the `is-active()`, `is-disabled()`, and `is-*()` state mixins.
* Remove the `in-mobile()`, `in-tablet()`, `in-desktop()`, `if-mobile()`, `if-tablet()`, and `if-desktop()` responsive mixins.
* Remove the `.arrow-*` classes.
* Remove the `$breakpoint-*` variables and replace with with range list variables.
    
## JavaScript ##

* Rename the `$.fn.addData()` jQuery method to `$.fn.cache()`.
* The `$.fn.cookie()` and `$.fn.removeCookie()` jQuery methods have been removed. This functionality will need to be added externally.

## Components ##

* Rename the `hide` event to `hidden`.
* Rename the `show` event to `shown`.
* Rename the `destroy` event to `destroyed`.
* Rename the `component` property to `name`.
* Rename the `doDestroy` method to `destructor`.

### Accordion ###

* The `jump` event has been removed. Use `showing` or `shown` instead.
* Add `data-accordion` on to the `.accordion` element.
* Add `data-accordion-header` on to the `.accordion-header` elements.
* Add `data-accordion-section` on to the `.accordion-section` elements.
* Move the `.is-active` state class from the parent `li` to the `.accordion-header`.

### Blackout ###

* The `showLoader` and `hideLoader` events have been removed.

### Carousel ###

* The `.carousel-prev`, `.carousel-next`, and `.carousel-tabs` CSS styles have been removed. 
    They will need to be manually customized.
* Add `data-carousel` on to the `.carousel` element.
* Add `data-carousel-items` on to the `.carousel-items > ul` element.
* Add `data-carousel-tabs` on to the `.carousel-tabs` element.
* Add `data-carousel-next` on to the `.carousel-next` element.
* Add `data-carousel-prev` on to the `.carousel-prev` element.
* Rename the `cycle` event to `cycled`.
* Rename the `jump` event to `jumped`.

### Divider ###

* Wrap long lines of text, or multi-line text in `span`s.

### Drop ###

* Add `data-drop-menu` to all `.drop` elements.

### Grid ###

* Added new `xsmall` and `xlarge` (disabled by default) column sizes
* Removed the `mobile`, `tablet`, and `desktop` column sizes.
* The breakpoints and column counts for all these sizes have changed. Please refer to the [documentation](../components/grid.md).

### Input ###

* Rename the `arrowContent` option to `arrowTemplate`.

### Lazy Load ###

* Rename the `load` event to `loaded`.

### Mask ###

* Add `data-mask` on to the `.mask` element.
* Add `data-mask-message` on to the `.mask-message` element.
* Rename the `.mask-target` class to `.is-maskable`.

### Matrix ###

* Add `.matrix` to the primary `ul` element (this is no longer done automatically).
* Rename the `render` event to `rendered`.

### Off Canvas ###

* Add `.off-canvas` to each sidebar element (this is no longer done automatically).
* Add `data-offcanvas` to the parent element (usually `.canvas`).
* Add `data-offcanvas-content` to the `main.on-canvas` content element.
* Update `data-offcanvas-sidebar` to have a value of either `left` or `right`.

### Pagination ###

* Change `ul` to `ol`.

### Pin ###

* Add `.pin` to primary element (this is no longer done automatically).

### Responsive ###

* Added `.show-xsmall`, `.show-xlarge`, `.hide-xsmall`, and `.hide-xlarge` classes.
* Removed `.show-mobile`, `.show-tablet`, `.show-desktop`, `.hide-mobile`, `.hide-tablet`, and `.hide-desktop` classes. 
    Use the other size classes.
    
### Showcase ###

* The `.showcase-prev`, `.showcase-next`, and `.showcase-tabs` CSS styles have been removed. 
    They will need to be manually customized.
* Rename the `jump` event to `jumped`.

### Stalker ###

* No longer sets the `.stalker`, `.stalker-target`, and `.stalker-marker` classes.
* Rename the `activate` event to `activate`.
* Rename the `deactivate` event to `deactivated`.
* Move the `.is-active` state class from the parent to the target.

### Switch ###

* Move the `.pill` and `.round` classes from `.switch` to `.switch-bar`.

### Tab ###

* Add `data-tab` on to the `.tabs` element.
* Add `data-tab-nav` on to the `.tab-nav` elements.
* Add `data-tab-section` on to the `.tab-section` elements.
* Move the `.is-active` state class from the parent `li` to the `.tab-nav a`.
* Rename the `$.fn.tabs()` plugin initializer to `$.fn.tab()`.

### Type Ahead ###

* The `matcher` callback now accepts an object as its argument. Update accordingly.