Announcing Ionic 5!
Tags: webdev, ionic, angular, react
Published: 2020-03-06 15:27:57

---
title: Announcing Ionic 5!
published: true
date: 2020-02-11 18:37:58 UTC
tags: webdev, ionic, angular, react
canonical_url: https://ionicframework.com/blog/announcing-ionic-5/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ikts6a3vc4ahn65nfzns.png
---

<p style="font-size:25px; line-height: 150%;">Today, I'm thrilled to announce Ionic Framework 5 (Magnesium)! 🎉</p>

<p style="font-size:25px; line-height: 150%;">This release includes iOS 13 design updates, a brand new API for creating your own <a href="https://ionicframework.com/blog/introducing-ionic-animations/" rel="noopener noreferrer" target="_blank">custom animations</a>, revamped <a href="https://ionicframework.com/blog/announcing-ionicons-5/" rel="noopener noreferrer" target="_blank">Ionicons</a>, updated Ionic colors, new starter designs, improvements to component customization, and more!</p>

<p style="font-size:25px; line-height: 150%;">All of these changes are made in the core of Ionic Framework, which also applies to our Angular, React, and Vue (beta) integrations. Yes, if you haven’t heard yet, we launched our <a href="https://ionicframework.com/blog/announcing-ionic-react/" rel="noopener noreferrer" target="_blank">official React</a> support this past October!</p>

<em>Attend our upcoming live walkthrough of Ionic 5, hosted by the Ionic team. <strong><a href="http://bit.ly/3bXIXsK" rel="noopener noreferrer" target="_blank">Register here</a></strong> </em>

## Easy Upgrade ⛵️

You may be concerned about the upgrade process due to the fact that this is a major version release, but <em>fret not!</em> When we migrated to follow the <a href="https://ionicframework.com/docs/intro/versioning" rel="noopener noreferrer" target="_blank">semantic versioning</a> convention, we committed ourselves to publish a major release when any known incompatible API changes were introduced. So in this case, the major version just indicates that our public API has been updated. And because <a href="https://ionicframework.com/blog/introducing-ionic-4-ionic-for-everyone/" rel="noopener noreferrer" target="_blank">we now use Web Components</a>, API changes are handled separately between our UI components and the JavaScript framework. 

Long story short: for those on v4, <strong>this upgrade should be easy.</strong> Now, let’s dive in and see what’s new!

<!--more-->

## iOS Design 🍎

The largest change in this release is a massive design upgrade across our UI components. Apple recently released iOS 13, which updated the design of many components and thus warranted some updates to our own. Let's check out some of the changes we made to match native iOS!

### Segment

The iOS Segment design changed drastically from the previous iOS version. Prior to iOS 13, borders and a filled background were used to differentiate between checked and unchecked buttons. With the latest design update, a single indicator is now used to slide between the buttons, checking the one it ends on. This update includes a gesture that can be used to drag the indicator. Below is a comparison between Ionic 4 and Ionic 5.

<div class="split">
<figure>
<figcaption>Segment in Ionic 4: Dark Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/segment-4.mov" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>Segment in Ionic 5: Dark Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/segment-5.mov">
</video>
</figure>
</div>


Due to the nature of this update, there were some <a href="https://github.com/ionic-team/ionic/blob/master/BREAKING.md#segment" rel="noopener noreferrer" target="_blank">breaking changes</a> introduced. Other than any updates related to the breaking changes, no changes need to be made to use the new Segment design. See the <a href="https://ionicframework.com/docs/api/segment#usage" rel="noopener noreferrer" target="_blank">Segment documentation</a> for usage information.

### Header

iOS introduced the idea of a collapsible header and different sized titles in previous versions. In order to support this, we’ve introduced some properties that can easily be added to the header & title components to get shrinking large titles, small titles, and collapsible buttons.  

### Large Title

The large title in iOS collapses into a standard-sized title when the content scrolls beyond a certain point. It can also be used without any collapsing if desired. 

<div class="split">
<figure>
<figcaption>Large Title: Light Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/large-title-light.mov" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>Large Title: Dark Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/large-title-dark.mov">
</video>
</figure>
</div>

In order to achieve this, the header needs to be added twice: a header with a standard title above the content, and a collapsible header with a large title inside of the content. In addition to being able to collapse the header, Buttons and a Searchbar inside of the collapsible header can also collapse. See the documentation on <a href="https://ionicframework.com/docs/api/title#collapsible-large-titles" rel="noopener noreferrer" target="_blank">Collapsible Large Titles</a> for usage information.

### Small Title

The small title, also known as a header note, is generally used inside of a toolbar above another toolbar that contains a standard-sized title. In native apps, it is most often used in combination with <a href="https://ionicframework.com/docs/api/modal#swipeable-modals" rel="noopener noreferrer" target="_blank">Swipe to Close Modals</a>. See the videos in the section below for a visual representation of the small title. 

See the <a href="https://ionicframework.com/docs/api/title#usage" rel="noopener noreferrer" target="_blank">Title documentation</a> for usage information.


### Swipe to Close Modal

The Swipe to Close Modal is something often seen in iOS now. Instead of displaying a modal that covers the entire screen and requires the user to tap a button to close it, it will display a modal that is inset with the page behind it pushed back. This update also includes a gesture to drag the modal down to close it.

<div class="split">
<figure>
<figcaption>Swipeable Modal: Light Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/modal-light.mov" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>Swipeable Modal: Dark Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/modal-dark.mov">
</video>
</figure>
</div>

In order to enable a swipe to close modal, `swipeToClose` and `presentingElement` need to be passed upon modal creation. See the documentation on <a href="https://ionicframework.com/docs/api/modal#swipeable-modals" rel="noopener noreferrer" target="_blank">Swipeable Modals</a> for more information. 


### Menu Overlay Type

In prior versions of iOS, the side menu used a `"reveal"` type menu which pushed the main content over to reveal the menu. The new iOS design features a menu that will overlay the content with an updated animation.

<div class="split">
<figure>
<figcaption>Overlay Menu: Light Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/menu-light.mov" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>Overlay Menu: Dark Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/menu-dark.mov">
</video>
</figure>
</div>

No changes need to be made to take advantage of this new menu design. However, if you prefer the old way the menu type can be set back to `"reveal"`.

 
### Refresher

The Refresher pulling icon in iOS has been updated in native applications to be above a header with a large title. In addition to that, as you pull down on the content the spinner tick marks will gradually be displayed until the content is pulled down enough to where all ticks are seen and then it will begin to rotate. While updating the iOS refresher, we were able to use the same logic to completely redesign the Material Design refresher as well.

<div class="split">
<figure>
<figcaption>Refresher: Light Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/refresher-light.mov" type="video/mp4">
</video>
</figure>
<figure>
<figcaption>Refresher: Dark Mode</figcaption>
<video controls autoplay muted loop>
<source src="https://s3.amazonaws.com/ionicframework.com/videos/refresher-dark.mov">
</video>
</figure>
</div>

Other than moving the placement of the refresher, no changes are needed to use the new pull to refresh. See the <a href="https://ionicframework.com/docs/api/refresher#usage" rel="noopener noreferrer" target="_blank">Refresher documentation</a> for usage information.  



### List Header

The lists in iOS have had many design changes. Most notably the List Header now takes on a more large and bold design. In previous versions, the List Header was uppercase and small and didn’t have the option for a bottom border. With the addition of the `lines` property on a List Header, it is now possible to add a border while matching the latest design. 

<div class="split">
<figure>
<figcaption>Ionic List Header: Light Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/01/list-header-light.png" alt="list header light mode" class="screenshot"/>
</figure>
<figure>
<figcaption>Ionic List Header: Dark Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/01/list-header-dark.png" alt="list header light mode" class="screenshot"/>
</figure>
</div>

Due to structural changes to support adding lines, it is recommended all text content inside of a List Header be wrapped in an `<ion-label>`. Additional information on this can be found in <a href="https://github.com/ionic-team/ionic/blob/master/BREAKING.md#list-header" rel="noopener noreferrer" target="_blank">breaking changes</a>. 

Other than adding the label and lines if desired, no changes need to be made to enable the new design. See the <a href="https://ionicframework.com/docs/api/list-header#usage" rel="noopener noreferrer" target="_blank">List Header documentation</a> for usage information. If the old design is desired, use custom CSS to achieve the previous look.


## Ionic Animations 🕺

Ionic 5 introduces our brand new open source animations utility, Ionic Animations, that provides the tools developers need to build highly performant animations regardless of the framework they are using. Read more <a href="https://ionicframework.com/blog/introducing-ionic-animations" rel="noopener noreferrer" target="_blank">on the Ionic Animations blog</a>.



## Ionicons ❤️

Ionic 5 ships with the latest version of our free and open source icon library, <a href="https://ionicons.com/" rel="noopener noreferrer" target="_blank">Ionicons 5</a>, which includes an all-new icon set! 

<img src="https://blog.ionicframework.com/wp-content/uploads/2020/01/ionicons-5.gif" alt="ionicons 5 variations gif" style="margin-left:-40px;" class="feature aligncenter size-full wp-image-3140" />

There will immediately be some differences noticed with this upgrade:

- One set of icons for both modes 
- Icons come in three new variants: outline, fill (default), and sharp
- Icons will no longer switch between two different icons based on the mode
- The ability to set them per mode will still work, but the icon for each needs to be set using the `ios` and `md` properties
- There are still a handful of icons within Ionic that will automatically switch, such as the icon used in menu button, back button and the detail icon on items
- The icon font has been removed from Ionicons, but it does still contain an svg sprite if loading all icons on the same page is needed

For a list of all of the icons that were removed or renamed, see the <a href="https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md" rel="noopener noreferrer" target="_blank">Ionicons changelog</a> document. To search through all of the newly added icons, check out the <a href="https://ionicons.com/" rel="noopener noreferrer" target="_blank">Ionicons site</a>. Read more on our <a href="https://ionicframework.com/blog/announcing-ionicons-5/" rel="noopener noreferrer" target="_blank">Ionicons 5 Announcement blog</a>.


## Ionic Colors 🌈

Ionic has been updated with all new colors by default! If your app was not created using one of our starters and you don’t override these colors, you’ll automatically get the new colors in your app. If your app was created using an Angular or React starter, the colors are defined in the `theme/variables.scss` file and will need to be updated manually.

In addition to the new default colors, we’ve also provided a set of recommended colors to use with dark mode. Head over to the <a href="https://ionicframework.com/docs/theming/dark-mode" rel="noopener noreferrer" target="_blank">Dark Mode documentation</a> for a guide detailing how to support dark mode based on user preference, including our recommended theme with <a href="https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme" rel="noopener noreferrer" target="_blank">code to copy & paste</a>!


<div class="split">
<figure>
<figcaption>Ionic 5 Colors: Light Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/01/ionic-colors-light.png" alt="list header light mode" class="screenshot"/>
</figure>
<figure>
<figcaption>Ionic 5 Colors: Dark Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/01/ionic-colors-dark.png" alt="list header light mode" class="screenshot"/>
</figure>
</div>

## Redesigned Starters 🖌

With all of the changes to the design of our components, we felt it was time to update the design of our existing starters and add a new one! Take a look at the new designs and the new list starter below.

<div class="split">
<figure>
<figcaption>Blank Starter: Light Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/blank-light.png" alt="blank starter light mode" class="screenshot"/>
</figure>
<figure>
<figcaption>Blank Starter: Dark Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/blank-dark.png" alt="blank starter dark mode" class="screenshot"/>
</figure>
</div>

<div class="split">
<figure>
<figcaption>Menu Starter: Light Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/menu-light.png" alt="menu starter light mode" class="screenshot"/>
</figure>
<figure>
<figcaption>Menu Starter: Dark Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/menu-dark.png" alt="menu starter dark mode" class="screenshot"/>
</figure>
</div>

<div class="split">
<figure>
<figcaption>Tabs Starter: Light Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/tabs-light.png" alt="tabs starter light mode" class="screenshot"/>
</figure>
<figure>
<figcaption>Tabs Starter: Dark Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/tabs-dark.png" alt="tabs starter dark mode" class="screenshot"/>
</figure>
</div>

<div class="split">
<figure>
<figcaption>List Starter: Light Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/list-light.png" alt="list starter light mode" class="screenshot"/>
</figure>
<figure>
<figcaption>List Starter: Dark Mode</figcaption>
<img src="https://blog.ionicframework.com/wp-content/uploads/2020/02/list-dark.png" alt="list starter dark mode" class="screenshot"/>
</figure>
</div>


## Easier Customization 💅

We've heard you loud and clear that components are not easy to customize. One reason for this was a lack of available CSS Variables or way to style inner elements. The other reason was due to components being scoped and their Ionic styles taking priority over custom styles. In order to make it easier to style, we've added more CSS variables, converted some scoped components to <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" rel="noopener noreferrer" target="_blank">Shadow DOM</a>, and began adding support for <a href="https://www.w3.org/TR/css-shadow-parts-1/" rel="noopener noreferrer" target="_blank">Shadow Parts</a>. 


The following components were converted to <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" rel="noopener noreferrer" target="_blank">Shadow DOM</a>:

- Back Button
- Card
- Segment
- Split Pane

Why shadow DOM? One of our biggest reasons for using Shadow DOM is its ability to completely encapsulate styles and prevent them from bleeding into other components. This means we’re able to style specific elements inside of our components without affecting other components that use that element. 

In addition to that, Shadow DOM allows us to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" rel="noopener noreferrer" target="_blank">CSS custom properties (variables)</a> within the component for easier theming. In previous versions of Ionic Framework, Sass variables were used to customize and theme an app. This requirement not only caused longer build times, but in order to have multiple themes within the same app it required generating multiple CSS files with different Sass variables. CSS variables can be updated at runtime, so an app can change the entire theme based on a CSS class or a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" rel="noopener noreferrer" target="_blank">prefers-color-scheme</a> media query.

While scoped components allow the use of CSS variables, the selectors that are added to the component make user overrides more difficult, requiring a user to either write an overly complex selector or make use of `!important` in the CSS styles in order to override the Ionic components. Additionally, if users were to target an inner element of an Ionic component and we were to change the structure or class, this would break the styling of that element.

With the growing support for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" rel="noopener noreferrer" target="_blank">Shadow Parts</a> in browsers, users will be able to target specific elements inside of our components to override their styles directly.

Learn more about <a href="https://ionicframework.com/docs/theming/themes" rel="noopener noreferrer" target="_blank">customizing Ionic themes</a>, <a href="https://ionicframework.com/docs/theming/dark-mode" rel="noopener noreferrer" target="_blank">enabling dark mode</a>, and <a href="https://ionicframework.com/docs/theming/css-variables" rel="noopener noreferrer" target="_blank">CSS variables</a> in our docs!


## Angular Ivy 🅰️

For Ionic Angular developers, Ionic 5 will bring full support for Ivy, Angular's new renderer. Ivy enables apps to only require pieces of the renderer that they actually need, instead of the whole thing. This means that our final output will be smaller, which is better for load performance. Read more about Angular Ivy on <a href="https://ionicframework.com/blog/angular-9-0-0-and-ivy-improvements/" rel="noopener noreferrer" target="_blank">our blog post</a>.


## Breaking Changes 🚨

In the past, a major release of Ionic sometimes caused many breaking changes to the end-user due to internal changes to update the framework it was built on. Our last major release, Ionic 4, was created to avoid this by building Ionic Framework with web components. This has allowed us to only make breaking changes where necessary to improve the framework. A list of all of the breaking changes for this release can be found in our <a href="https://github.com/ionic-team/ionic/blob/master/BREAKING.md" rel="noopener noreferrer" target="_blank">breaking changes document</a> in the `ionic` repository. 

## Updating ✅

We recommend updating to the latest Ionic 4 release (`4.11.10`) to see any deprecation warnings specific to your app in the <a href="https://developers.google.com/web/tools/chrome-devtools/console" rel="noopener noreferrer" target="_blank">developer console</a>. After fixing any warnings, it’s as simple as running the following commands:

```bash
# for an angular app
npm i @ionic/angular@latest --save

# for a react app
npm i @ionic/react@latest --save
npm i @ionic/react-router@latest --save
npm i ionicons@latest --save

# for a stencil / vanilla JS app
npm i @ionic/core@latest --save
```

Then, head on over to the <a href="https://github.com/ionic-team/ionic/blob/master/BREAKING.md" rel="noopener noreferrer" target="_blank">breaking changes document</a> to see if there were any other changes that need to be made in your app. 


## Thank you 🙇‍♀️

As always, we wanted to extend our sincere thanks to the Ionic community. We would not have been able to pull this off without your support. So many of the issues, pull requests, and comments left by community members have been essential to us getting this release out, and for that we're extremely grateful. We hope you’re as excited as we are about this release! Tell us your thoughts below. ⬇️

- <a href="https://ionicframework.com/docs/release-notes#5.0.0" rel="noopener noreferrer" target="_blank">Release Notes</a>
- <a href="https://ionicframework.com/docs/building/migration" rel="noopener noreferrer" target="_blank">Migration Guide</a>
- <a href="https://github.com/ionic-team/ionic/blob/master/BREAKING.md" rel="noopener noreferrer" target="_blank">Breaking Changes</a>
- <a href="https://ionicframework.com/docs" rel="noopener noreferrer" target="_blank">Framework Documentation</a>
- <a href="https://github.com/ionic-team/ionic/issues" rel="noopener noreferrer" target="_blank">GitHub Issues</a>