4.0.0-beta.18

ionic-team · Dec 13, 2018 · a27fdc3 · trakhimenok · Dec 14, 2018 · a27fdc3
1 parent c65734d
commit a27fdc3
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,199 @@
+# [4.0.0-beta.18](https://github.com/ionic-team/ionic/compare/v4.0.0-beta.17...v4.0.0-beta.18) (2018-12-13)
+
+
+### Bug Fixes
+
+* **all:** type issues with TS 3.2 ([aa9d0d4](https://github.com/ionic-team/ionic/commit/aa9d0d4))
+* **angular:** disable change detection detach ([68e2619](https://github.com/ionic-team/ionic/commit/68e2619))
+* **angular:** lint issue ([a961dca](https://github.com/ionic-team/ionic/commit/a961dca))
+* **angular:** only routerLink works with angular router ([63cbc92](https://github.com/ionic-team/ionic/commit/63cbc92))
+* **angular:** remove rogue console debug message ([#16530](https://github.com/ionic-team/ionic/issues/16530)) ([9a47fc4](https://github.com/ionic-team/ionic/commit/9a47fc4)), closes [#16529](https://github.com/ionic-team/ionic/issues/16529)
+* **angular:** routerLink updates href ([c8d9685](https://github.com/ionic-team/ionic/commit/c8d9685))
+* **angular:** swipe to go backs in tabs ([#16710](https://github.com/ionic-team/ionic/issues/16710)) ([2553820](https://github.com/ionic-team/ionic/commit/2553820))
+* **angular:** swipeBackEnabled global config ([#16668](https://github.com/ionic-team/ionic/issues/16668)) ([d69427e](https://github.com/ionic-team/ionic/commit/d69427e)), closes [#16624](https://github.com/ionic-team/ionic/issues/16624)
+* **angular:** wait for core defined in angular initializer ([#16693](https://github.com/ionic-team/ionic/issues/16693)) ([060794e](https://github.com/ionic-team/ionic/commit/060794e))
+* **button:** reduce iOS border radius ([#16575](https://github.com/ionic-team/ionic/issues/16575)) ([b1e56bb](https://github.com/ionic-team/ionic/commit/b1e56bb))
+* **button:** relax css containment to "content" ([#16553](https://github.com/ionic-team/ionic/issues/16553)) ([802a3d1](https://github.com/ionic-team/ionic/commit/802a3d1))
+* **button/chip:** move hover styles into media query ([#16664](https://github.com/ionic-team/ionic/issues/16664)) ([a2c7b95](https://github.com/ionic-team/ionic/commit/a2c7b95)), closes [#16108](https://github.com/ionic-team/ionic/issues/16108)
+* **content:** do not scroll on pan-x ([#16721](https://github.com/ionic-team/ionic/issues/16721)) ([b6aea08](https://github.com/ionic-team/ionic/commit/b6aea08))
+* **img:** fire didLoad in safari ([#16571](https://github.com/ionic-team/ionic/issues/16571)) ([2ce986f](https://github.com/ionic-team/ionic/commit/2ce986f)), closes [#16557](https://github.com/ionic-team/ionic/issues/16557)
+* **item-divider:** use prop for sticky ([#16691](https://github.com/ionic-team/ionic/issues/16691)) ([a6a1723](https://github.com/ionic-team/ionic/commit/a6a1723))
+* **loading:** add backdropDismiss closes [#16527](https://github.com/ionic-team/ionic/issues/16527) ([#16570](https://github.com/ionic-team/ionic/issues/16570)) ([a251b50](https://github.com/ionic-team/ionic/commit/a251b50))
+* **react:** add class based APIs ([#16665](https://github.com/ionic-team/ionic/issues/16665)) ([2933f61](https://github.com/ionic-team/ionic/commit/2933f61)), closes [#16583](https://github.com/ionic-team/ionic/issues/16583)
+* **refresher:** close animation and hidden on pull down ([#16700](https://github.com/ionic-team/ionic/issues/16700)) ([6b0fc49](https://github.com/ionic-team/ionic/commit/6b0fc49)), closes [#16254](https://github.com/ionic-team/ionic/issues/16254)
+* **segment:** set colors in the parent segment and remove the unused color property ([#16590](https://github.com/ionic-team/ionic/issues/16590)) ([8029df3](https://github.com/ionic-team/ionic/commit/8029df3)), closes [#14853](https://github.com/ionic-team/ionic/issues/14853)
+* **segment-button:** make layout default to icon-top ([#16573](https://github.com/ionic-team/ionic/issues/16573)) ([841375e](https://github.com/ionic-team/ionic/commit/841375e))
+* **select:** selection-option is hidden in edge ([#16607](https://github.com/ionic-team/ionic/issues/16607)) ([6776e65](https://github.com/ionic-team/ionic/commit/6776e65)), closes [#16580](https://github.com/ionic-team/ionic/issues/16580)
+* **select-option:** using external style ([8050247](https://github.com/ionic-team/ionic/commit/8050247))
+* **tab-bar:** hide on keyboard events ([#16688](https://github.com/ionic-team/ionic/issues/16688)) ([1473805](https://github.com/ionic-team/ionic/commit/1473805)), closes [#16419](https://github.com/ionic-team/ionic/issues/16419)
+* **tab-bar:** update tab-bar to set the color/background of tab-button ([#16641](https://github.com/ionic-team/ionic/issues/16641)) ([2f63049](https://github.com/ionic-team/ionic/commit/2f63049)), closes [#14853](https://github.com/ionic-team/ionic/issues/14853)
+* **theming:** update ios design for button and card ([#16586](https://github.com/ionic-team/ionic/issues/16586)) ([9c8c650](https://github.com/ionic-team/ionic/commit/9c8c650))
+* **toolbar:** style all slotted content in order not only buttons ([#16617](https://github.com/ionic-team/ionic/issues/16617)) ([86fc9a5](https://github.com/ionic-team/ionic/commit/86fc9a5))
+
+
+### Features
+
+* **all:** vscode HTML autocompletion support ([#16687](https://github.com/ionic-team/ionic/issues/16687)) ([9b83bef](https://github.com/ionic-team/ionic/commit/9b83bef))
+* **fab-button:** add css border properties ([#16656](https://github.com/ionic-team/ionic/issues/16656)) ([64557a7](https://github.com/ionic-team/ionic/commit/64557a7)), closes [#16652](https://github.com/ionic-team/ionic/issues/16652)
+* **modal:** add css vars ([#16605](https://github.com/ionic-team/ionic/issues/16605)) ([235c685](https://github.com/ionic-team/ionic/commit/235c685))
+* **progress-bar:** add progress bar component ([#16559](https://github.com/ionic-team/ionic/issues/16559)) ([9167fb4](https://github.com/ionic-team/ionic/commit/9167fb4)), closes [#16558](https://github.com/ionic-team/ionic/issues/16558)
+* **range:** add support for range bar border radius ([#16519](https://github.com/ionic-team/ionic/issues/16519)) ([c036cb0](https://github.com/ionic-team/ionic/commit/c036cb0))
+* **theme:** default colors based in step colors ([95c0b1b](https://github.com/ionic-team/ionic/commit/95c0b1b))
+* **toast:** add CSS variables for box-shadow and border ([#16679](https://github.com/ionic-team/ionic/issues/16679)) ([1a299b0](https://github.com/ionic-team/ionic/commit/1a299b0))
+
+
+### BREAKING CHANGES
+
+#### [ANGULAR] Tabs
+
+Tabs got the last bit of changes needed in order to support lazy loading of components. To support this, some changes are required for the router config. Using the tabs starter as an example, here's a diff of the changes:
+
+<detail>
+
+```diff
+ import { RouterModule, Routes } from '@angular/router';
+
+ import { TabsPage } from './tabs.page';
+-import { Tab1Page } from '../tab1/tab1.page';
+-import { Tab2Page } from '../tab2/tab2.page';
+-import { Tab3Page } from '../tab3/tab3.page';
+
+ const routes: Routes = [
+   {
+     path: 'tabs',
+     component: TabsPage,
+     children: [
+-      {
+-        path: '',
+-        redirectTo: '/tabs/(tab1:tab1)',
+-        pathMatch: 'full',
+-      },
+       {
+         path: 'tab1',
+-        outlet: 'tab1',
+-        component: Tab1Page
++        children: [
++          {
++            path: '',
++            loadChildren: '../tab1/tab1.module#Tab1PageModule'
++          }
++        ]
+       },
+       {
+         path: 'tab2',
+-        outlet: 'tab2',
+-        component: Tab2Page
++        children: [
++          {
++            path: '',
++            loadChildren: '../tab2/tab2.module#Tab2PageModule'
++          }
++        ]
+       },
+       {
+         path: 'tab3',
+-        outlet: 'tab3',
+-        component: Tab3Page
++        children: [
++          {
++            path: '',
++            loadChildren: '../tab3/tab3.module#Tab3PageModule'
++          }
++        ]
++      },
++      {
++        path: '',
++        redirectTo: '/tabs/tab1',
++        pathMatch: 'full'
+       }
+     ]
+   },
+   {
+     path: '',
+-    redirectTo: '/tabs/(tab1:tab1)',
++    redirectTo: '/tabs/tab1',
+     pathMatch: 'full'
+   }
+ ];
+ ```
+
+</detail>
+
+And for the tabs markup, we have something close to pre-beta 16 tabs, but still provides a custom tab-bar.
+
+
+<detail>
+
+```diff
+ <ion-tabs>
+
+-  <ion-tab tab="tab1">
+-    <ion-router-outlet name="tab1"></ion-router-outlet>
+-  </ion-tab>
+-  <ion-tab tab="tab2">
+-    <ion-router-outlet name="tab2"></ion-router-outlet>
+-  </ion-tab>
+-  <ion-tab tab="tab3">
+-    <ion-router-outlet name="tab3"></ion-router-outlet>
+-  </ion-tab>
+-
+   <ion-tab-bar slot="bottom">
+-
+-    <ion-tab-button tab="tab1" href="/tabs/(tab1:tab1)">
++    <ion-tab-button tab="tab1">
+       <ion-icon name="flash"></ion-icon>
+       <ion-label>Tab One</ion-label>
+     </ion-tab-button>
+
+-    <ion-tab-button tab="tab2" href="/tabs/(tab2:tab2)">
++    <ion-tab-button tab="tab2">
+       <ion-icon name="apps"></ion-icon>
+       <ion-label>Tab Two</ion-label>
+     </ion-tab-button>
+
+-    <ion-tab-button tab="tab3" href="/tabs/(tab3:tab3)">
++    <ion-tab-button tab="tab3">
+       <ion-icon name="send"></ion-icon>
+       <ion-label>Tab Three</ion-label>
+     </ion-tab-button>
+-
+   </ion-tab-bar>
+
+ </ion-tabs>
+```
+
+</detail>
+
+
+
+### [ANGULAR] href does not cause Angular Router to navigate
+
+For consistency sake, the `href` attribute of `ion-button`, `ion-item` and `ion-anchor` no longer
+trigger navigation using the Angular’s Router,instead use angular’s `[routerLink]`:
+
+```diff
+- <ion-button href="/path/to/page">
++ <ion-button routerLink="/path/to/page">
+```
+
+This change will not affect SEO since ionic will still use `href` under the hood.
+
+
+### [ANGULAR] Prefixed Ion- components
+
+For consistency with other frameworks and the rest of APIs and tooling, the exported
+ionic components are prefixed with `Ion`.
+
+```diff
+- import { Input } from '@ionic/angular';
++ import { IonInput } from '@ionic/angular';
+```
+
+This change might also help to improve autocompletion, and prevent collisions with other libraries.
+
+[More info](https://github.com/ionic-team/ionic/issues/16550)
+
+
 <a name="4.0.0-beta.17"></a>
 # [4.0.0-beta.17](https://github.com/ionic-team/ionic/compare/v4.0.0-beta.16...v4.0.0-beta.17) (2018-11-29)
 

diff --git a/angular/package.json b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-beta.18",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.0.0-beta.17",
+    "@ionic/core": "4.0.0-beta.18",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

diff --git a/core/README.md b/core/README.md
@@ -23,8 +23,8 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:
 
 ```html
-<link href="https://unpkg.com/@ionic/[email protected].17/css/ionic.bundle.css" rel="stylesheet">
-<script src="https://unpkg.com/@ionic/[email protected].17/dist/ionic.js"></script>
+<link href="https://unpkg.com/@ionic/[email protected].18/css/ionic.bundle.css" rel="stylesheet">
+<script src="https://unpkg.com/@ionic/[email protected].18/dist/ionic.js"></script>
 ```
 
 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.

diff --git a/core/package.json b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-beta.18",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0-beta.18",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "files": [