ionic-framework/CHANGELOG.md

2.0.0-beta.3 (2016-03-07)

Bug Fixes

• actionsheet: fix md ripple on actionsheet (f51a3f5)
• alert: increase padding on windows alert (c96af06), closes #5722
• alert: update radio/checkbox items to buttons elements (b24dc27)
• animations: get easing curve from parent animation (bc06994)
• chip: cleaned up some of the UI and added some sass variables (eeac795)
• config: fix config set function so that it has arguments defined (894824e), closes #5696
• infinitescroll: only show spinner when loading (7ee0b52), closes #5690
• input: add tappable attr to input-cover (b814314)
• item: add a default size for items in buttons to use the content button sizes (7b14a29), closes #5580
• label: change the flex for stacked and floating labels so buttons can be added (65ee86f), closes #5319
• label: remove margin from item-right in a stacked or floating label (7416827)
• nav: change init zIndex to 100 (5863e2c)
• nav: create opts object when undefined/null (8975016), closes #5737
• nav: do not hide pages if an overlay is in the stack (4922fc6), closes #5430
• nav: reset zIndex when goes under 0 (ad50a11), closes #5718
• nav: use setRoot when root property changes (d77e8d9), closes #5668
• overlays: update keyboard focus management (e639457)
• radio: do not use strict comparison for values (a2f858b), closes #5660
• radio: improve group/button value comparisons (5d9b169)
• radio: select only one radio when w/out ngModel (e92feef), closes #5659
• select: do not open on form submit (b219de5), closes #5596
• select: improve value comparisons (b967b1e)
• tabs: don't add the has-icon class to a tab button if the layout is icon-hide (6b93bc1), closes #5658
• tabs: improves tabs style for iOS (b9a4628)
• textarea: width of textarea was exceeding page area (ec11ae3)
• touchaction: apply to child touch elements (0129410)
• util: array length check (9dc3840)
• util: getQueryString tests (f8e38ef)
• util: ignore empty query param in getQueryString (908ea8c)
• windows: detect windows phone via user agent (703fe16)

Features

• buttons: dynamically add button attributes (154a69c), closes #5186
• searchbar: debounce input events (f6af807), closes #5429
• searchbar: disable autocorrect/autocapitalize/spellcheck (498dd54), closes #5749
• touchaction: remove 300ms delay via touch-action (e1c77a3)
• windows: add card components (dd7def6)
• windows: add checkbox styling and update alert checkbox (1ecfa6f)
• windows: add chip component (2699b44)
• windows: add content padding/margin components for wp (fe11ecc)
• windows: add detail-push icon (706e0d7)
• windows: add input border color variable to theme (0d4971f)
• windows: add input component sass (f8ef960)
• windows: add label Sass file (8a1e450)
• windows: add list and item components (1cf56ee)
• windows: add menu Sass component (cd7d627)
• windows: add modal file (a323aa1)
• windows: add noto sans as a fallback font (85c1637)
• windows: add radio component for wp mode (dd206ad)
• windows: add searchbar component with styling (a9054ad)
• windows: add segment component (922e1f1)
• windows: add select component (781ea83)
• windows: add tabs component and clean up windows UI (fa2e4b2)
• windows: add toggles (b7bcd39)
• windows: add windows support to snapshot (368c12a)
• windows: change windowsphone platform to windows (8df8420)
• windows: clean up action sheet UI (138e876)
• windows: clean up button and alert UI (13f3e83)
• windows: clean up button css, rename Sass variables and add more (bba3c5c)
• windows: fix card and alert UI (69c0da2)
• windows: fix config so it will disable hover (996f944)
• windows: initial add for windows badges (1fc0a23)
• windows: initial add of action sheet (370490e)
• windows: initial add of alert with windows dialog styles (6af9b77)
• windows: initial add of toolbar with some custom theming (6062bb6)
• windows: initial add of windows mode (a9c995d)
• windows: make wp buttons more windows-y (b91f8de)
• windows: more UI cleanup (a594531)
• windows: UI fixes (29ff7f1)
• windows: windows UI cleanup (e05f147)
• windows: fix incorrect sass value, add max width to alert (3d12e69), references #5565

Refactor

• sass: add Sass variables for action sheet and rename some (50b7d70), references #5651
• sass: add Sass variables for alert, remove unused selectors (374efde), references #5651
• sass: replace all instances of bg in sass variables with background (8db6a85), references #5651
• sass: update windows action sheet sass to use variables (a51268cd), references #5651
• sass: update windows alert sass to use variables (1e73a34), references #5651

Breaking Changes

Windows Mode

Windows platform support has been added to Ionic! The Windows mode is abbreviated as wp. Please go through the following steps to get your app working with the Windows mode:

1. Add this line to your project's www/index.html file:

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

2. Add a new file named app.wp.scss to your project's app/theme/ folder and then add the following code to it:

// http://ionicframework.com/docs/v2/theming/


// App Shared Variables
// --------------------------------------------------
// Shared Sass variables go in the app.variables.scss file
@import 'app.variables';


// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here


// Ionic Windows Sass
// --------------------------------------------------
// Custom App variables must be declared before importing Ionic.
// Ionic will use its default values when a custom variable isn't provided.
@import "ionic.wp";


// App Shared Sass
// --------------------------------------------------
// All Sass files that make up this app goes into the app.core.scss file.
// For simpler CSS overrides, custom app CSS must come after Ionic's CSS.
@import 'app.core';


// App Windows Only Sass
// --------------------------------------------------
// CSS that should only apply to the Windows app

3. Modify the ionic.config.js file to add the wp mode on line 9:

sass: {
  src: ['app/theme/app.+(ios|md|wp).scss'],
  dest: 'www/build/css',
  include: [
    'node_modules/ionic-angular',
    'node_modules/ionicons/dist/scss'
  ]
},

2.0.0-beta.2 (2016-03-01)

Bug Fixes

• alert: add max height to alert body so it will overflow (9c0eebd), closes #5316
• animation: ensure final inline styles applied when fallback runs (4524e5a), closes #5484
• generate: output correct Sass import for pages (3784f47), closes #5641
• menu: fix enabled check (8564d79)
• nav: immediately stop if view removed before trans finished (4fabade)
• overlay: do not dom cache views before overlays (4cae151), closes #5483
• refresher: get scrollTop from the scroll element to prevent refreshing when dragging up (ea884de), closes #5207
• sass: rename brightness/inverse sass functions (892b007), closes #5542
• tabs: pop tab page to parent nav (b9eec24), closes #5196
• toolbar: add a min-width to the toolbar content so that it won't overlap buttons (5fb1e08), closes #5657

Features

• checkbox: add change event (2596731)
• infiniteScroll: add infinite scroll (0480fa3), closes #5415
• input: default autocomplete/autocorrect=off, fix autofocus (b53d707)
• menu: grab the menu by side only if it is enabled (a2b7a21)
• NavController: prevent other lifecycle events from firing (6b9e59d), closes #5516
• prodMode: set isProd() when prodMode set in @App config (3c8daa0)
• spinner: SVG spinners (6c73446)
• toggle: add change event (730cccd)

Refactor

• alert: remove tabbarIcons and add tabbarLayout which accepts different values (8cfebe1), closes #5625
• menu: improve menu get lookup (004e635), closes #5535
• tabs: remove duplicated styles from imports (d5ebf3f), closes #5624
• searchbar: add class to searchbar when hideCancel is passed (a0f0004)

Breaking Changes

New npm module

The npm module has been renamed from ionic-framework to ionic-angular.

Update package.json to reflect this:

"ionic-angular": "2.0.0-beta.2",

imports from the framework were:

  import {Platform} from 'ionic-framework/ionic';

and are now:

  import {Platform} from 'ionic-angular';

Infinite Scroll

Infinite Scroll has been added: docs

Refresher:

• <ion-refresher> now takes a child <ion-refresher-content> component.
• Custom refresh content components can now be replaced for Ionic's default refresher content.
• Properties pullingIcon, pullingText and refreshingText have been moved to the <ion-refresher-content> component.
• spinner property has been renamed to refreshingSpinner and now goes on the <ion-refresher-content> component.
• refreshingIcon property is no longer an input, but instead refreshingSpinner should be used.

Was:

<ion-refresher (refresh)="doRefresh($event)"
pullingIcon="arrow-dropdown">
</ion-refresher>

Now:

<ion-refresher (refresh)="doRefresh($event)">
  <ion-refresher-content
pullingIcon="arrow-dropdown"></ion-refresher-content>
</ion-refresher>

Tabs

Input property tabbarIcons has been replaced by tabbarLayout and accepts the following values: icon-top, icon-left, icon-right, icon-bottom, icon-hide, title-hide.

2.0.0-beta.1 (2016-02-18)

Bug Fixes

• alert: add padding under the alert title for iOS when there is no message (c365c92), closes #5299
• alert: fix alert button background color on activated (fd0b851)
• animations: remove inline styles when finished (22c32f3), closes #5130
• button: button goes transparent on hover on desktop (non-touch devices) (0e5d3d7)
• button: fix colorized buttons on hover and outline buttons on hover (2df72cc)
• checkbox: use value accessor provider (e468a21), closes #5353
• colors: update sass inverse color function (55ef5a8)
• input: fix stand-alone text-input item cover (e2554f0), closes #5387
• input: make ion-label tappable to focus input (38595fa), closes #5378
• item: add min-height to item-inner to remove gap between items (90f165f), closes #5350
• menu: add/remove gesture listeners per enabled menu (ff24152)
• NavController: fire onPageWillUnload/DidUnload (8f0b88b), closes #5507
• radio: radio w/ falsy value not checkable (89861e0), closes #5348
• radio: use value accessor provider (b85d7aa)
• segment: add the active background color to the colorized segments and remove activated (df9a4df), closes #5308
• select: use value accessor provider (3444a3c)
• toggle: use value accessor provider (5034c1d), closes #5425
• toolbar: fix md toolbar so it doesn't flow off the screen (bd03760), closes #5414
• toolbar: fixes segment/title aligment when cordova iOS style is applied (2766f7f), closes #5208
• toolbar: toolbar padding when running in cordova iOS (db535dd)

Features

• generators: add Sass import reminder to page generator (b22b5ff)
• menu: allow persistent menus (0d47a1b), closes #5204
• menu: close any opened menu (c02fb51)
• MenuController: create isOpen() and isEnabled() (3bb09ce), closes #5390
• nav: iOS swipe to go back (da37029), closes #5185
• select: cancel output event (6a7c97d), closes #5439
• slides: add slideChangeStart event output (736140c), closes #5301
• slides: added move event onSlideMove (daceb98)
• tabs: rootParams, pass params to tabs (e06cf71), closes #5172
• themes: add dark theme (7eb7952), (3ee5bd3), (3dbd9a9), (eb8e778), (bcaa484), (569beab), closes #4967

Performance Improvements

• animation: only update progressStep once per 16ms (098371a)

Refactor

• card: create ion-card-title element and remove card-title (7aabd0f), closes #5303
• segment: increase icon size inside of segment buttons (7249cb3), closes #5330
• pull-to-refresh: emit start event and change all events to emit refresher (acf1894), references #5207
• slides: remove the attributes from the slider and use options instead (d21ae88), closes #5189

Breaking Changes

• card: .card-title class does not exist anymore, use the ion-card-title element instead.
• pull-to-refresh: (starting) event has been renamed to (start).
• slides: many attributes have been removed, must use options to pass configuration the slider. See the Swiper Parameters API.
• angular 2.0.0-beta.6: if you are using typescript, update the following: 26f3393fe4

2.0.0-beta.0

Enjoy!

<3 The Ionic Team

2.0.0-alpha.57 (2016-02-10)

Bug Fixes

• button: bar-button uses inner span as flexbox (38a3be4)

Features

• Improved transitions and animations
• hairlines width can be configured with a sass variable (06b3a5b)
• ion-item-sliding: style icons on top of text in an option button (4e57fcf), closes #5352

Refactor

• animations: no longer using Web Animations polyfill (da18868)

Breaking Changes

The Web Animations polyfill is no longer shipped with the framework and may cause build errors.

Projects will need to be updated accordingly.

2.0.0-alpha.56 (2016-02-05)

Bug Fixes

• tabs: show navbar on second page in tab (f2db74b)

2.0.0-alpha.55 (2016-02-05)

Bug Fixes

• alert: ensure keyup listener has been removed (2710e34)
• build: tell gulp when finished building (60e1278)
• generators: use mkdirp-no-bin (dcc20fa)
• input: copy custom attrs from ion-input to native input (4cfe210)
• menu: fix scrolling page w/ side menus (72699db), closes #5272
• menu: only close when open on enable change (a428363)
• searcher: add autocomplete="off" to native input (f47c3c3)

Features

• actionsheet: disable clicking backdrop to dismiss (7686767)
• alert: disable clicking backdrop to dismiss (53e014f)

Performance Improvements

• cards: remove translateZ from ion-card (60fdc5c)
• tabs: render tab navbar at same time of tab content (687a17b)

Breaking Changes

Menu has been improved to make it easier to open, close, toggle and enable menus. Instead of injecting IonicApp to find the menu component, you now inject MenuController.

Was:

constructor(app: IonicApp) {
  this.app = app;
}
openMenu() {
  this.app.getComponent('leftMenu').close();
}

Now:

To programmatically interact with any menu, you can inject the MenuController provider into any component or directive. This makes it easy get ahold of and control the correct menu instance. By default Ionic will find the app's menu without requiring a menu ID. An id attribute on an <ion-menu> is only required if there are multiple menus on the same side. If there are multiple menus, but on different sides, you can use the name of the side to get the correct menu

If there's only one menu:

constructor(menu: MenuController) {
  this.menu = menu;
}
openMenu() {
  this.menu.close();
}

If there is a menu on the left and right side:

toggleMenu() {
  this.menu.toggle('left');
}

If there are multiple menus on the same side:

<ion-menu id="myMenuId" side="left">...</ion-menu>
<ion-menu id="otherMenuId" side="left">...</ion-menu>

closeMenu() {
  this.menu.close('myMenuId');
}

2.0.0-alpha.54 (2016-02-02)

Bug Fixes

• alert: add checkbox icon for iOS using Sass variables from regular checkbox (68819f0), closes #5253
• badge: change default badge color to primary (93b9891), closes #5222
• badge: split badge color into separate modes (b472c6c)
• css: minor updates to match previous snapshots (9749b06)
• input: add/remove disabled on native text input (11b8e08), closes #5280
• input: check has value on writeValue (181a070)
• input: parent Item is optional (db6f4bc)
• prepare: add missing require to prepare task (b2f7278)
• scrollbars: do not apply css scrollbars (f3fb182)
• select: always update value and text (58443f0)
• select: null value clears select text (c264e31), closes #5288

Features

• button: increase hit area of toolbar buttons (cad9e49)
• checkbox: add bg transition to md checkbox (8466d39)
• overlay: fire the cancel handler when dismissing from backdrop (1c618b5)
• scrollbars: webkit scrollbar styling for desktop (c7f2268)

Breaking Changes

• action-sheet: Button style property renamed to role (1c618b5)

Angular was updated to Beta 2

• Update the version of Angular in your package.json file:

  "angular2": "2.0.0-beta.2",
  

2.0.0-alpha.53 (2016-01-28)

Features

• Normalize how ion-item and inner inputs/avatars/icons/etc are written
• Only one type of ion-item, rather than every input also having a similar structure
• Multiple inputs can be placed inside of an ion-item
• Allow avatars/thumbnails/icons next to checkbox/radio/toggle/select/input
• Inputs can be stand-alone components, and not required within an ion-item

Breaking Changes

• CSS may not get updated if your ionic.config file is not correct:

  If you have the following directory structure:

  │   ├── theme/                         * App theme files
  │   │   ├── app.core.scss              * App Shared Sass Imports
  │   │   ├── app.ios.scss               * iOS Sass Imports & iOS Variables
  │   │   ├── app.md.scss                * MD Sass Imports & MD Variables
  │   │   └── app.variables.scss         * App Shared Sass Variables
  

  Make sure the ionic.config file looks like this:

  sass: {
    src: ['app/theme/app.+(ios|md).scss'],
    dest: 'www/build/css',
    include: [
      'node_modules/ionic-framework',
      'node_modules/ionicons/dist/scss'
    ]
  },
  

• Inputs are now placed inside of ion-item

• Inputs do not come with their own label

• ion-item-content has been replaced with ion-label

• Label attributes are placed on ion-label rather than ion-input

• Native HTML <input> and <textarea> should not be used in items, but instead <ion-input> and <ion-textarea>

Text Input Refactor

Was:

<ion-input>
  <ion-label>Email</ion-label>
  <input type="email">
</ion-input>

<ion-input>
  <ion-label>Comments</ion-label>
  <textarea></textarea>
</ion-input>

Now:

<ion-item>
  <ion-label>Email</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Comments</ion-label>
  <ion-textarea></ion-textarea>
</ion-item>

Checkbox Refactor

Was:

  <ion-checkbox [(ngModel)]="data">
    My Checkbox
  </ion-checkbox>

Now:

  <ion-item>
    <ion-label>My Checkbox</ion-label>
    <ion-checkbox [(ngModel)]="data"></ion-checkbox>
  </ion-item>

Radio Button Refactor

Was:

<ion-list radio-group [(ngModel)]="data">

  <ion-list-header>
    Auto Manufacturers
  </ion-list-header>

  <ion-radio value="cord">
    Cord
  </ion-radio>

  <ion-radio value="duesenberg" checked="true">
    Duesenberg
  </ion-radio>

  <ion-radio value="hudson">
    Hudson
  </ion-radio>

</ion-list>

Now:

<ion-list radio-group [(ngModel)]="data">

  <ion-list-header>
    Auto Manufacturers
  </ion-list-header>

  <ion-item>
    <ion-label>Cord</ion-label>
    <ion-radio value="cord"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Duesenberg</ion-label>
    <ion-radio value="duesenberg" checked="true"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Hudson</ion-label>
    <ion-radio value="hudson"></ion-radio>
  </ion-item>

</ion-list>

Select Refactor

Was:

  <ion-select [(ngModel)]="gender">
    <ion-label>Gender</ion-label>
    <ion-option value="f" checked="true">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

Now:

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select [(ngModel)]="gender">
      <ion-option value="f" checked="true">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  <ion-item>

Toggle Refactor

Was:

  <ion-toggle [(ngModel)]="data">
    My Toggle
  </ion-toggle>

Now:

  <ion-item>
    <ion-label>My Toggle</ion-label>
    <ion-toggle [(ngModel)]="data"></ion-toggle>
  </ion-item>

Label Attribute Refactor

Was:

<ion-input fixed-label>
  <ion-label>Username</ion-label>
  <input type="text">
</ion-input>

<ion-input floating-label>
  <ion-label>Email</ion-label>
  <input type="email">
</ion-input>

Now:

<ion-item>
  <ion-label fixed>Username</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Email</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>

misc

• Code and syntax highlighting in markdown (8cb2b4d)
• Merge pull request #5217 from manucorporat/2.0 (e1b514d)

chore

• chore(changelog): label attr refactor (ca6eef9)
• chore(changelog): updates for alpha.53 (47806dc)
• chore(package): don't increment version in gulp package (ab4c7c3)
• chore(snapshot): update snapshot to run all tests (cb7a358)

docs

• docs(): hide methods not requiring docs (dbc681f)
• docs(): update for alpha52 (cefc305)
• docs(blur): hide docs for blur (4435451)
• docs(demos): clean up blur demo (779a494)
• docs(demos): clean up nav-push-pop (4eadc78)
• docs(demos): fix scroll demo to use correct attributes (4df4afd)
• docs(demos): prettify ShowWhen demo (aca9ea6)
• docs(demos): prettify config some more and add another page - fix back button icon (e982c69)
• docs(demos): prettify nav params demo (58dfa3d)
• docs(demos): prettify the config demo (a8bc0d2)
• docs(demos): prettify the hide-when demo (a676d7d)
• docs(demos): prettify the platform demo (b933029)
• docs(demos): prettifying local-storage demo (8bc853f)
• docs(demos): prettifying modal demo (95d03ca)
• docs(demos): prettifying some more local-storage (2d691b0)
• docs(demos): remove attr from docs (047a939)
• docs(demos): remove unused demos (c68da33), closes #5216
• docs(demos): remove unused demos (e50eb89), closes #5216
• docs(demos): update demos to latest alpha (59c62a0)
• docs(demos): update demos with item-refactor (d7dec0a)
• docs(demos): update menu demo to use menuClose attribute (e7fe7e4)
• docs(toolbar): add subheader and footer examples (d971f3e), closes #5174 #5063
• docs(toolbar): clean up docs (18eb967)

feat

• feat(checkbox): stand-alone checkbox components (6890532)
• feat(select): emit change and select events (e19d4e3), closes #5219
• feat(util): add margin attributes (e22ccf4)

fix

• fix(alert): add z-index and border-radius to fix ripple (5b0d60d), closes #5203
• fix(blur): fix blur directive so it adds the filter and add a test (4af0e41)
• fix(input): change next input imports (70a9eb3)
• fix(input): checked attr can be an empty string or no value (e76b559)
• fix(input): clean up CSS on inputs and labels (2fc9753)
• fix(input): fix floating label on blur w/ value (5d4a8fe)
• fix(input): fix floating/stacked label relocate (ad7885f)
• fix(input): update input css/tests (42f6b10)
• fix(label): fix label for item and inputs by adding flex back (3cbbfdc)
• fix(label): remove left margin for md labels in items (3be8952)
• fix(menu): fix right side menu - platform becomes _platform (0b0500d), closes #5147
• fix(radio): allow radios to check even without values (f20ae8f)
• fix(radio): prevent multiple radio buttons from being checked (334fb3c)
• fix(scroll): add pull to refresh Sass back to core component (adce1e5)
• fix(scroll): canOverscroll was set to false which prevented PTR from ever working (e4b2006)
• fix(searchbar): modify height on the input to fix it on Canary (e672de5), closes #5176
• fix(select): fix select disabled state (eb03159)
• fix(select): update text on ngModel change (0a04522)
• fix(slides): convert loop attribute to a boolean and index to a number before passing to slides (de9a986), closes #5189

refactor

• refactor(input): break apart input source files (aea2217)
• refactor(input): place inputs inside of ion-item (b3a7298)

release

• release: 2.0.0-alpha.53 (9a78d68)

test

• test(input): add test to reproduce a floating label bug (c1fbbb1)
• test(list): add some markup for checkboxes and avatars (e568eb9)
• test(list): fix toggle to represent new ion-item (58d994b)
• test(radio): add e2e test for radios with no value (f79a121)

2.0.0-alpha.52 (2016-01-25)

• Bug fixes

2.0.0-alpha.51 (2016-01-21)

Breaking Changes

Angular was updated to Beta 1

• Update the version of Angular in your package.json file:

  "angular2": "2.0.0-beta.1",
  

Ionicons were moved

• Install ionicons (this will be added in the starters): npm install --save ionicons@latest

• Modify the sass include in your ionic.config.js file:

    sass: {
      src: ['app/theme/app.+(ios|md).scss'],
      dest: 'www/build/css',
      include: [
        'node_modules/ionic-framework',
        'node_modules/ionicons/dist/scss'
      ]
    },
  

• Modify the fonts src in your ionic.config.js file:

    fonts: {
      src: ['node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)'],
      dest: "www/build/fonts"
    },
  

2.0.0-alpha.48 (2016-01-07)

Breaking Changes

Icon Refactor

• <icon> has been renamed to <ion-icon>
• <ion-icon> requires the name attribute with a value
• Icon names with an ion- prefix are no longer needed
• Icons with social- prefix have been changed to a logo- prefix

Was:

<icon home></icon> <icon ion-social-twitter></icon>

Now:

<ion-icon name="home"></ion-icon> <ion-icon name="logo-twitter"></ion-icon>

2.0.0-alpha.47 (2016-01-04)

Breaking Changes

Overlay Refactor

• <ion-overlay></ion-overlay> is no longer required within any template
• Popup has been renamed to Alert
• Common API for all overlays: Alert, ActionSheet, Modal, etc.
• Alert is more generic and you can mix and match any number of buttons/inputs
• Alert and ActionSheet can take an array of buttons with handlers
• Returning false from button handlers prevent the overlay from closing
• ActionSheet buttons no longer use an index and only one handler
• ActionSheet cancel and destructive buttons go within the buttons array, but with an added style property
• An actionsheet's desctructive button renders in the order it was added to the array (we recommend it always goes first)
• An actionsheet's cancel button will always be last, no matter where it is in the array
• All overlays use NavController present(), similar to push()
• A Modal uses an injected ViewController to dismiss itself and optionally pass data to modal's onDismss()

Alert Refactor

Was:

import {Popup} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(popup: Popup) {
    this.popup = popup;
  }
  doAlert() {
    this.popup.alert({
      title: "New Friend!",
      template: "Obi wan Kenobi just accepted your friend request!"
    });
  }
}

Now:

import {Alert, NavController} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
  doAlert() {
    let alert = Alert.create({
      title: "New Friend!",
      body: "Obi wan Kenobi just accepted your friend request!",
      buttons: ['Ok']
    });

    this.nav.present(alert);
  }
}

Confirm Refactor

Was:

import {Popup} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(popup: Popup) {
    this.popup = popup;
  }
  doConfirm() {
    this.popup.confirm({
      title: "Use this lightsaber?",
      subTitle: "You can't exchange lightsabers",
      template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
      cancelText: "Disagree",
      okText: "Agree"
    }).then((result, ev) => {
      console.log('Confirmed!', result);
    }, () => {
      console.error('Not confirmed!');
    });
  }
}

Now:

import {Alert, NavController} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
  doConfirm() {
    let alert = Alert.create({
      title: "Use this lightsaber?",
      subTitle: "You can't exchange lightsabers",
      body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Disagreed :(');
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Agreed!');
          }
        }
      ]
    });

    this.nav.present(alert);
  }
}

Prompt Refactor

Was:

import {Popup} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(popup: Popup) {
    this.popup = popup;
  }
  doPrompt() {
    this.popup.prompt({
      title: "New Album",
      template: "Enter a name for this new album you're so keen on adding",
      inputPlaceholder: "Album Name",
      okText: "Save",
      okType: "secondary"
    }).then((name) => {
      console.log('Name entered:', name);
    }, () => {
      console.error('Prompt closed');
    });
  }
}

Now:

import {Alert, NavController} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
  doConfirm() {
    let alert = Alert.create({
      title: "New Album",
      body: "Enter a name for this new album you're so keen on adding",
      inputs: [
        {
          name: 'album',
          placeholder: 'Album Name'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Canceled!', data);
          }
        },
        {
          text: 'Ok',
          handler: data => {
            console.log('Submitted', data);
          }
        }
      ]
    });

    this.nav.present(alert);
  }
}

ActionSheet Refactor

Was:

import {ActionSheet} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(actionSheet: ActionSheet) {
    this.actionSheet = actionSheet;
  }
  doActionSheet() {
    this.actionSheet.open({
      buttons: [
        { text: 'Archive' }
      ],
      titleText: 'Modify your album',
      cancelText: 'Cancel',
      cancel: function() {
        console.log('Canceled clicked');
      },
      destructiveText: 'Delete',
      destructiveButtonClicked: () => {
        console.log('Delete clicked');
      },
      buttonClicked: function(index) {
        if (index == 0) {
          console.log('Archive clicked');
        }
        return true;
      }

    }).then(actionSheetRef => {
      this.actionSheetRef = actionSheetRef;
    });
  }
}

Now:

import {ActionSheet, NavController} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
  doActionSheet(ev) {
    let actionSheet = ActionSheet.create({
      title: 'Modify your album',
      buttons: [
        {
          text: 'Delete',
          style: 'destructive',
          handler: () => {
            console.log('Delete clicked');
          }
        },
        {
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        },
        {
          text: 'Cancel',
          style: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
      ]
    });

    this.nav.present(actionSheet);
  }
}

Modal Refactor

Was:

import {Modal} from 'ionic/ionic';

@Page(...)
class MyApp {

 constructor(modal: Modal) {
   this.modal = modal;
 }

 openContactModal() {
   this.modal.open(EditUser, { userId: 8675309 });
 }

}

Now:

import {Modal, NavController} from 'ionic/ionic';

@Page(...)
class MyPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }
  presentModal() {
    let modal = Modal.create(EditUser, { userId: 8675309 });
    this.nav.present(modal);
  }
}

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.