diff --git a/BREAKING.md b/BREAKING.md index 3e1c997dbf..0f2a36f41b 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -6,7 +6,7 @@ A list of the breaking changes introduced in Ionic Angular v4. - [Dynamic Mode](#dynamic-mode) - [Button](#button) - [Chip](#chip) -- [Cordova](#cordova) +- [Colors](#colors) - [Datetime](#datetime) - [FAB](#fab) - [Fixed Content](#fixed-content) @@ -21,6 +21,7 @@ A list of the breaking changes introduced in Ionic Angular v4. - [Option](#option) - [Radio](#radio) - [Range](#range) +- [Sass](#sass) - [Segment](#segment) - [Select](#select) - [Text/Typography](#text-typography) @@ -173,6 +174,36 @@ Buttons inside of an `` container should now be written as an ` ``` + +## Colors + +The default Ionic theme colors have changed. Previously we had: + +``` +primary: #327eff +secondary: #32db64 +danger: #f53d3d +light: #f4f4f4 +dark: #222 +``` + +Some of their values have changed and we now include more colors by default: + +``` +primary: #3880ff +secondary: #0cd1e8 +tertiary: #7044ff +success: #10dc60 +warning: #ffce00 +danger: #f04141 +light: #f4f5f8 +medium: #989aa2 +dark: #222428 +``` + +The `secondary` color saw the largest change. If you were previously using our `secondary` color we recommend switching to `success` instead. + + ## Datetime The Datetime classes and interfaces have changed capitalization from `DateTime` to `Datetime`. This is more consistent with other components and their tags. @@ -189,24 +220,6 @@ import { DateTime } from 'ionic-angular'; import { Datetime } from 'ionic-angular'; ``` -## Cordova - -Sass variables for changing the cordova statusbar have been renamed to app: - -**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; -``` - ## FAB ### Markup Changed @@ -338,7 +351,7 @@ $input-highlight-color-valid: #32db64; ### Markup Changed -Item should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute, and a button tag based on the presence of a click. Otherwise, it will render a div. +Item should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute, and a button tag based on the presence of an `onclick` or `tappable` attribute. Otherwise, it will render a div. **Old Usage Example:** @@ -363,7 +376,7 @@ Item should now be written as an `` element. Ionic will determine when Default Item - + Button Item @@ -420,6 +433,36 @@ These have been renamed to the following: ``` +### Detail Push + +The attributes to show/hide the detail arrows on items have been converted to a single property and value. Instead of writing `detail-push` or `detail-none` to show/hide the arrow, it should be written `detail`/`detail="true"` or `detail="false"`. + +**Old Usage Example:** + +```html + + + + Item Label + +``` + +**New Usage Example:** + +```html + + Item Label + + + + Item Label + +``` + +By default, items that render buttons or anchor tags will show the arrow in `ios` mode. + ## Item Divider ### Label Required @@ -708,6 +751,25 @@ These have been renamed to the following: ``` +## Sass + +Sass variables for changing the cordova statusbar have been renamed to app: + +**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; +``` + + ## Segment The markup hasn't changed for Segments, but now writing `` will render a native button element inside of it.