* fix(item): fix color input for item divider and list header
- adds ItemDivider class to add color and mode css classes to item
divider
- adds e2e test for item divider colors
- adds sass variables to improve control over list headers and item
divider styles
- fixes style for item divider so it will be styled regardless of being
inside a list for md and wp modes
references #8376
* refactor(popover): remove the background color styling from ion-content and item
- change the default text color and background color to match the theme
variables. This makes popover look better on dark theme and removes the
nesting of styles that breaks list headers.
fixes#8376
Clarify that that unfortunately-named onDidDismiss() is not a callback, but rather *sets up* a callback. Also explain dismiss()'s argument and its relation to said callback.
Previously a css class generated from the JS class name, was
automatically being added to the page element. However, the JS class
name returned is not consistent among all browsers. Instead of
automatically applying a css classname, we now recommend adding a
`selector` to each page component.
BREAKING CHANGES:
Colors should be passed in the `color` input on components, not added
individually as an attribute on the component.
For example:
```
<ion-tabs primary>
```
Becomes
```
<ion-tabs color=”primary”>
```
Or to bind an expression to color:
```
<ion-navbar [color]="barColor">
...
</ion-navbar>
```
```ts
@Component({
templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
barColor: string;
constructor(private nav: NavController, platform: Platform) {
this.barColor = platform.is('android') ? 'primary' : 'light';
}
}
```
Reason for this change:
It was difficult to dynamically add colors to components, especially if
the name of the color attribute was unknown in the template.
This change keeps the css flat since we aren’t chaining color
attributes on components and instead we assign a class to the component
which includes the color’s name.
This allows you to easily toggle a component between multiple colors.
Speeds up performance because we are no longer reading through all of
the attributes to grab the color ones.
references #7467closes#7087closes#7401closes#7523
BREAKING CHANGES:
- `<button>` becomes `<button ion-button>`
- `<a button>` becomes `<a ion-button>`
- `<button ion-item>` does not get the `ion-button` attribute
- Buttons inside of `<ion-item-options>` do get the `ion-button`
attribute
- Removed the `category` attribute, this should be passed in
`ion-button` instead.
- Button attributes added for icons in buttons: `icon-only`,
`icon-left`, and `icon-right`
closes#7466
BREAKING CHANGES:
- Overlay components, such as Alert or Modals, should now be created
using its injected provider.
- Overlays now have the `present()` method on the overlay’s instance,
rather than using `nav.present(overlayInstance)`.
- All overlays now present on top of all app content, to include menus.
- Below is an example of the change to `Alert`, but the pattern is the
same for all overlays: ActionSheet, Loading, Modal, Picker, Popover,
Toast
WAS:
```
import { NavController, Alert } from ‘ionic-angular’;
constructor(private nav: NavController) {
}
doAlert() {
let alert = Alert.create({
title: 'Alert',
});
this.nav.present(alert);
}
```
NOW:
```
import { AlertController } from ‘ionic-angular’;
constructor(private alertCtrl: AlertController) {
}
doAlert() {
let alert = this.alertCtrl.create({
title: 'Alert'
});
alert.present();
}
```
overalys now are enabled via ionViewDidEnter
* style(overlays): fixed tslint error
fixed tslint error
* style(overlays): formatting
formatting
* refactor(overlays): minor refactor to match style
minor refactor to match style
BREAKING CHANGES:
- Lifecycle method prefixes have changed to `ionView`
- `onPageLoaded` renamed to `ionViewLoaded`
- `onPageWillEnter` renamed to `ionViewWillEnter`
- `onPageDidEnter` renamed to `ionViewDidEnter`
- `onPageWillLeave` renamed to `ionViewWillLeave`
- `onPageDidLeave` renamed to `ionViewDidLeave`
- `onPageWillUnload` renamed to `ionViewWillUnload`
- `onPageDidUnload` renamed to `ionViewDidUnload`
