ionic-framework/CHANGELOG.md

2.0.0-alpha.42 (2015-12-11)

Breaking Changes

CSS Refactor

• Attributes are now used by Ionic to add the correct CSS classes to elements
• Drastically reduced the depth of CSS selectors
• Further modularized Sass files to allow individual imports
• Ionic CSS comes in 3 flavors
  • ionic.css: Core CSS, iOS CSS, and Material Design CSS
  • ionic.ios.css: Core CSS and iOS CSS
  • ionic.md.css: Core CSS and Material Design CSS
• App's index.html file can be setup to dynamically load only the stylesheet it needs
• Different Sass color maps for iOS and Material Design
  • Allows colors to be different per platform
  • ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
• config: tabbarStyle, navbarStyle has been removed, should now use different Sass color maps instead of setting it in the config
• text-input: class has-value has become input-has-value
• text-input: class has-focus has become input-focused
• searchbar: class left-align has become searchbar-left-aligned
• searchbar: class focused has become searchbar-focused

<ion-nav-items> renamed to <ion-buttons>

• primary attribute <ion-nav-items primary> now <ion-buttons start>
• secondary attribute <ion-nav-items secondary> now <ion-buttons end>

<a menu-toggle> should now be <button menuToggle>

• If a menu is not given an id, then it is automatically assigned an id, such as leftMenu or rightMenu.
• If the menu toggle/close directives are not given a value then it tries the menu ids of leftMenu then rightMenu.

<ion-switch> renamed to <ion-toggle>

• Consistent naming with Ionic v1
• Reduce potential confusion with ng-switch

Bug Fixes

• item-sliding: fixed item-sliding, onDragEnd on mouseout of sliding element f9199fb, closes #702

Features

• Upgraded to Angular alpha.50
  • Life cycle hooks are now prefixed with ng
    • ngOnChanges
    • ngOnInit
    • ngDoCheck
    • ngAfterContentInit
    • ngAfterContentChecked
    • ngAfterViewInit
    • ngAfterViewChecked
    • ngOnDestroy

Steps to Upgrade to alpha.42

1. Update to the latest beta CLI: npm install -g ionic@beta

2. Update ionic-framework in your package.json and then run npm install in the project directory:

   "ionic-framework": "2.0.0-alpha.42",
   

3. Convert dash attributes to camelCase (see Angular Changelog)

4. Remove the Sass imports in JS files

5. Update css reference in index.html (remove build/css/app.css if it exists)

<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">

6. Add core stylesheets (copy from a starter or conference app) and remove app.scss:

app.core.scss
app.ios.scss
app.md.scss
app.variables.scss

7. Update app.core.scss to reflect your Sass files
8. Add the new gulp packages and gulp file found in the ionic2-app-base or any of the starters
9. Add the contents from the ionic2-app-base ionic.config.js file
10. Run ionic serve to watch and compile the sass, and run the app in a browser
11. When in doubt, reference the conference app or any starter.