diff --git a/angular/BREAKING.md b/angular/BREAKING.md index 1ea63ff03f..611a15205f 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -1,13 +1,20 @@ # Breaking Changes -## Migration Linter +## Migrating + +### Migration Guide + +If you aren't sure where to start in upgrading to v4, we recommend reading through our [migration guide](https://beta.ionicframework.com/docs/building/migration) first. + +### Migration Linter Looking for a tool that automatically warns (and sometimes fixes) the breaking changes listed? Check out our [migration linter](https://github.com/ionic-team/v4-migration-tslint)! + ## Components -A list of the breaking changes introduced in Ionic Angular v4. +A list of the breaking changes introduced to each component in Ionic Angular v4. - [Action Sheet](#action-sheet) - [Alert](#alert) @@ -21,7 +28,6 @@ A list of the breaking changes introduced in Ionic Angular v4. - [Fixed Content](#fixed-content) - [Grid](#grid) - [Icon](#icon) -- [Input](#input) - [Item](#item) - [Item Divider](#item-divider) - [Item Options](#item-options) @@ -483,22 +489,6 @@ _Note: we are no longer adding the `icon` class to an `ion-icon`, so the element The `isActive` property has been removed. It only worked for `ios` icons previously. If you would like to switch between an outline and solid icon you should set it in the `name`, or `ios`/`md` attribute and then change it when needed. -## Input - -The Sass variables were all renamed from having `$text-input` as the prefix to `$input`. - -**Old Usage Example:** - -```css -$text-input-highlight-color-valid: #32db64; -``` - -**New Usage Example:** - -```css -$input-highlight-color-valid: #32db64; -``` - ## Item @@ -1226,6 +1216,21 @@ Typography should now be written as an `` element. Previously the `ion ## Theming +### CSS Utilities + +#### Padding + +Previously to add padding to the left and right side of elements, the `padding-left` and `padding-right` attributes, respectively, would be added to the element. + +These attributes have been renamed to `padding-start` and `padding-end` to better align with our support for RTL. + +#### Margin + +Previously to add margin to the left and right side of elements, the `margin-left` and `margin-right` attributes, respectively, would be added to the element. + +These attributes have been removed in favor of using the `margin-start` and `margin-end` attributes to better align with our support for RTL. + + ### Including Sass Previously all `scss` files in the `src` directory were imported. Now each `scss` file should be included for the component via Angular's `styleUrls` metadata. View [Angular's Component Styles](https://angular.io/guide/component-styles) for more information. @@ -1253,21 +1258,9 @@ p { ### Sass Variables -Sass variables for changing the cordova statusbar have been renamed to app: +Sass variables should no longer be used to change Ionic components. We have built Ionic to be customizable using CSS variables, instead. -**Old Usage Example:** - -```css -$cordova-ios-statusbar-padding: 20px; -$cordova-md-statusbar-padding: 20px; -``` - -**New Usage Example:** - -```css -$app-ios-statusbar-padding: 20px; -$app-md-statusbar-padding: 20px; -``` +For more information on theming, check out the [theming documentation](https://beta.ionicframework.com/docs/theming/basics). ## Toolbar