-1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch.
+1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch. For example, if this release is for `4.3.1`, the message would be `merge release-4.3.1`.
-1. Create a pull request and merge the release branch back into `master` using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.
+1. Submit a pull request from the `stable` branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.
-1. Merge the release branch into its corresponding version branch. If this is a major or minor release, create the version branch off the latest `stable`.
+1. Merge the release branch into its corresponding version branch.
+ - If this is a major or minor release, create the version branch off the latest `stable`. For example, if this release was `4.2.0`, create a branch called `4.2.x` off of `stable`.
+ - If this is a patch release, merge the release branch into the version branch. For example, if this release is `4.2.1`, merge the release branch into the `4.2.x` branch.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae91b6aec8..99dc432f38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,39 @@
+# [4.4.0 Beryllium](https://github.com/ionic-team/ionic/compare/v4.3.1...v4.4.0) (2019-05-08)
+
+
+### Bug Fixes
+
+* **button:** apply round property to button sizes in iOS ([#18125](https://github.com/ionic-team/ionic/issues/18125)) ([ae0eccc](https://github.com/ionic-team/ionic/commit/ae0eccc)), closes [#18108](https://github.com/ionic-team/ionic/issues/18108)
+* **datetime:** default to current date when value is null ([#18105](https://github.com/ionic-team/ionic/issues/18105)) ([ca233b5](https://github.com/ionic-team/ionic/commit/ca233b5)), closes [#18099](https://github.com/ionic-team/ionic/issues/18099)
+* **input:** clear on edit from inside native input ([#17115](https://github.com/ionic-team/ionic/issues/17115)) ([85093d6](https://github.com/ionic-team/ionic/commit/85093d6)), closes [#17055](https://github.com/ionic-team/ionic/issues/17055)
+* **item:** use the global activated background for md ripple color ([#16752](https://github.com/ionic-team/ionic/issues/16752)) ([95945c0](https://github.com/ionic-team/ionic/commit/95945c0)), closes [#16585](https://github.com/ionic-team/ionic/issues/16585)
+* **label:** use primary color on focus for md input labels ([#18183](https://github.com/ionic-team/ionic/issues/18183)) ([ddb8ef8](https://github.com/ionic-team/ionic/commit/ddb8ef8)), closes [#15602](https://github.com/ionic-team/ionic/issues/15602)
+* **menu** add prefixed transform for side menu animation ([#18128](https://github.com/ionic-team/ionic/issues/18128)) ([2457a23](https://github.com/ionic-team/ionic/commit/2457a23)), closes [#17729](https://github.com/ionic-team/ionic/issues/17729)
+* **reorder-group:** remove required parameter for the complete method ([#18084](https://github.com/ionic-team/ionic/issues/18084)) ([bd96491](https://github.com/ionic-team/ionic/commit/bd96491)), closes [#16302](https://github.com/ionic-team/ionic/issues/16302)
+* **segment:** decrease icon size on ios and stretch segment buttons to fill height ([#17751](https://github.com/ionic-team/ionic/issues/17751)) ([0fa645b](https://github.com/ionic-team/ionic/commit/0fa645b)), closes [#17069](https://github.com/ionic-team/ionic/issues/17069)
+* **textarea:** reposition textarea when keyboard appears ([#18098](https://github.com/ionic-team/ionic/issues/18098)) ([3cdab10](https://github.com/ionic-team/ionic/commit/3cdab10)), closes [#17847](https://github.com/ionic-team/ionic/issues/17847)
+* **toast:** allow button-color CSS variable to be overridden ([#18133](https://github.com/ionic-team/ionic/issues/18133)) ([0c83fd3](https://github.com/ionic-team/ionic/commit/0c83fd3)), closes [#18127](https://github.com/ionic-team/ionic/issues/18127)
+
+
+### Features
+
+* **card:** add button functionality ([#17997](https://github.com/ionic-team/ionic/issues/17997)) ([669ec0d](https://github.com/ionic-team/ionic/commit/669ec0d)), closes [#17773](https://github.com/ionic-team/ionic/issues/17773)
+* **img:** add ionImgWillLoad event and emit ionImgDidLoad when image is loaded ([#18159](https://github.com/ionic-team/ionic/issues/18159)) ([38ffb98](https://github.com/ionic-team/ionic/commit/38ffb98)), closes [#17652](https://github.com/ionic-team/ionic/issues/17652) [#18161](https://github.com/ionic-team/ionic/issues/18161)
+* **item-sliding:** add open method ([#17964](https://github.com/ionic-team/ionic/issues/17964)) ([f912206](https://github.com/ionic-team/ionic/commit/f912206)), closes [#17899](https://github.com/ionic-team/ionic/issues/17899)
+* **menu-button:** add css variables for padding ([#18188](https://github.com/ionic-team/ionic/issues/18188)) ([ef98977](https://github.com/ionic-team/ionic/commit/ef98977)), closes [#18187](https://github.com/ionic-team/ionic/issues/18187)
+* **refresher:** add pullFactor property to control speed ([#16697](https://github.com/ionic-team/ionic/issues/16697)) ([9030dcc](https://github.com/ionic-team/ionic/commit/9030dcc)), closes [#15425](https://github.com/ionic-team/ionic/issues/15425)
+* **searchbar:** add disabled property ([#17935](https://github.com/ionic-team/ionic/issues/17935)) ([a5b9066](https://github.com/ionic-team/ionic/commit/a5b9066)), closes [#17921](https://github.com/ionic-team/ionic/issues/17921)
+* **textarea:** add option to expand textarea as value changes ([#16916](https://github.com/ionic-team/ionic/issues/16916)) ([cc8678a](https://github.com/ionic-team/ionic/commit/cc8678a))
+
+
+
## [4.3.1](https://github.com/ionic-team/ionic/compare/v4.3.0...v4.3.1) (2019-04-26)
### Bug Fixes
* **angular:** support replaceUrl with angular <7.2 ([#18106](https://github.com/ionic-team/ionic/issues/18106)) ([eb3cbe4](https://github.com/ionic-team/ionic/commit/eb3cbe4))
-* sanitize components using innerHTML ([#18146](https://github.com/ionic-team/ionic/issues/18146)) ([b839e6f](https://github.com/ionic-team/ionic/commit/b839e6f))
+* **security:** sanitize components using innerHTML ([#18146](https://github.com/ionic-team/ionic/issues/18146)) ([b839e6f](https://github.com/ionic-team/ionic/commit/b839e6f))
diff --git a/angular/BREAKING.md b/angular/BREAKING.md
index 0d7260cf1d..9c5fea5c4b 100644
--- a/angular/BREAKING.md
+++ b/angular/BREAKING.md
@@ -783,6 +783,26 @@ The option component should now be written as an `ion-item-option`. Previously i
The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options.
+### Arguments Changed
+
+The `ionDrag` event no longer gets the sliding item as an argument. It now takes an event with a property `details` which contains two properties `amount` and `ratio` reflecting the absolute and ratio values of the sliding action respectively.
+
+**Old Usage Example:**
+
+```typescript
+dragged(item: ItemSliding) {
+ console.log(item.getSlidingPercent());
+ console.log(item.getOpenAmount());
+}
+```
+
+**New Usage Example:**
+```typescript
+dragged(ev: { details: { amount: number, ratio: number } }) {
+ console.log(ev.details.ratio);
+ console.log(ev.details.amount);
+}
+```
## Label
diff --git a/angular/package.json b/angular/package.json
index dbb841ced7..efc8b6f4b8 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
- "version": "4.3.1",
+ "version": "4.4.0",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -45,7 +45,7 @@
"css/"
],
"dependencies": {
- "@ionic/core": "4.3.1",
+ "@ionic/core": "4.4.0",
"tslib": "^1.9.3"
},
"peerDependencies": {
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 9acc693024..de758f092a 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -85,7 +85,7 @@ export class IonButtons {
}
export declare interface IonCard extends StencilComponents<'IonCard'> {}
-@Component({ selector: 'ion-card', changeDetection: 0, template: ' * * ```
+ * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
*/
'contentId'?: string;
/**
@@ -4364,7 +4428,7 @@ export namespace Components {
}
interface IonSplitPaneAttributes extends StencilHTMLAttributes {
/**
- * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. ```html * *
* * ```
+ * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
*/
'contentId'?: string;
/**
@@ -4501,15 +4565,15 @@ export namespace Components {
interface IonTabs {
'getRouteId': () => Promise;
/**
- * Get the currently selected tab
+ * Get the currently selected tab.
*/
'getSelected': () => Promise;
/**
- * Get the tab element given the tab name
+ * Get a specific tab by the value of its `tab` property or an element reference.
*/
'getTab': (tab: string | HTMLIonTabElement) => Promise;
/**
- * Index or the Tab instance, of the tab to select.
+ * Select a tab by the value of its `tab` property or an element reference.
*/
'select': (tab: string | HTMLIonTabElement) => Promise;
'setRouteId': (id: string) => Promise;
@@ -4548,6 +4612,10 @@ export namespace Components {
}
interface IonTextarea {
+ /**
+ * If `true`, the element height will increase based on the value.
+ */
+ 'autoGrow': boolean;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
*/
@@ -4630,6 +4698,10 @@ export namespace Components {
'wrap'?: 'hard' | 'soft' | 'off';
}
interface IonTextareaAttributes extends StencilHTMLAttributes {
+ /**
+ * If `true`, the element height will increase based on the value.
+ */
+ 'autoGrow'?: boolean;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
*/
@@ -4740,7 +4812,7 @@ export namespace Components {
/**
* Create a toast overlay with toast options.
*/
- 'create': (opts?: ToastOptions | undefined) => Promise;
+ 'create': (options?: ToastOptions | undefined) => Promise;
/**
* Dismiss the open toast overlay.
*/
@@ -5010,13 +5082,13 @@ export namespace Components {
*/
'approxItemHeight': number;
/**
- * This method marks the tail the items array as dirty, so they can be re-rendered. It's equivalent to calling: ```js * virtualScroll.checkRange(lastItemLen); * ```
+ * Marks the tail of the items array as dirty, so they can be re-rendered. It's equivalent to calling `checkRange(length)` where `length` is the total length of the items.
*/
'checkEnd': () => void;
/**
- * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes. The subset of items to be updated can are specifing by an offset and a length.
+ * Marks a subset of the items as dirty so they can be re-rendered. Items should be marked as dirty any time the content or their style changes. The subset of items to be updated are specified by an offset and a length. If a length is not provided it will check all of the items beginning at the offset.
*/
- 'checkRange': (offset: number, len?: number) => void;
+ 'checkRange': (offset: number, length?: number) => void;
'domRender'?: DomRenderFn;
/**
* Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created.
diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
index 4ed53c7102..9a1208c7c6 100644
--- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx
+++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -12,14 +12,23 @@ export class ActionSheetController implements ComponentInterface, OverlayControl
/**
* Create an action sheet overlay with action sheet options.
+ *
+ * @param options The options to use to create the action sheet.
*/
@Method()
- create(opts: ActionSheetOptions): Promise {
- return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
+ create(options: ActionSheetOptions): Promise {
+ return createOverlay(this.doc.createElement('ion-action-sheet'), options);
}
/**
* Dismiss the open action sheet overlay.
+ *
+ * @param data Any data to emit in the dismiss events.
+ * @param role The role of the element that is dismissing the action sheet.
+ * This can be useful in a button handler for determining which button was
+ * clicked to dismiss the action sheet.
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+ * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.
*/
@Method()
dismiss(data?: any, role?: string, id?: string) {
diff --git a/core/src/components/action-sheet-controller/readme.md b/core/src/components/action-sheet-controller/readme.md
index 3914ea3996..84f31344e0 100644
--- a/core/src/components/action-sheet-controller/readme.md
+++ b/core/src/components/action-sheet-controller/readme.md
@@ -7,15 +7,15 @@ Action Sheet controllers programmatically control the action sheet component. Ac
## Methods
-### `create(opts: ActionSheetOptions) => Promise`
+### `create(options: ActionSheetOptions) => Promise`
Create an action sheet overlay with action sheet options.
#### Parameters
-| Name | Type | Description |
-| ------ | -------------------- | ----------- |
-| `opts` | `ActionSheetOptions` | |
+| Name | Type | Description |
+| --------- | -------------------- | ---------------------------------------------- |
+| `options` | `ActionSheetOptions` | The options to use to create the action sheet. |
#### Returns
@@ -29,11 +29,11 @@ Dismiss the open action sheet overlay.
#### Parameters
-| Name | Type | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any` | |
-| `role` | `string \| undefined` | |
-| `id` | `string \| undefined` | |
+| Name | Type | Description |
+| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any` | Any data to emit in the dismiss events. |
+| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
+| `id` | `string \| undefined` | The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet. |
#### Returns
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 303ffb8e4b..ef45f6b55b 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -128,6 +128,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
/**
* Dismiss the action sheet overlay after it has been presented.
+ *
+ * @param data Any data to emit in the dismiss events.
+ * @param role The role of the element that is dismissing the action sheet.
+ * This can be useful in a button handler for determining which button was
+ * clicked to dismiss the action sheet.
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/
@Method()
dismiss(data?: any, role?: string): Promise {
@@ -135,7 +141,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
/**
- * Returns a promise that resolves when the action-sheet did dismiss.
+ * Returns a promise that resolves when the action sheet did dismiss.
*/
@Method()
onDidDismiss(): Promise {
@@ -143,7 +149,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
/**
- * Returns a promise that resolves when the action-sheet will dismiss.
+ * Returns a promise that resolves when the action sheet will dismiss.
*
*/
@Method()
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 2920b496db..987e21f459 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component {
);
}
}
-
```
@@ -290,10 +289,10 @@ Dismiss the action sheet overlay after it has been presented.
#### Parameters
-| Name | Type | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any` | |
-| `role` | `string \| undefined` | |
+| Name | Type | Description |
+| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any` | Any data to emit in the dismiss events. |
+| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
#### Returns
@@ -303,7 +302,7 @@ Type: `Promise`
### `onDidDismiss() => Promise>`
-Returns a promise that resolves when the action-sheet did dismiss.
+Returns a promise that resolves when the action sheet did dismiss.
#### Returns
@@ -313,7 +312,7 @@ Type: `Promise>`
### `onWillDismiss() => Promise>`
-Returns a promise that resolves when the action-sheet will dismiss.
+Returns a promise that resolves when the action sheet will dismiss.
#### Returns
diff --git a/core/src/components/action-sheet/test/test.utils.ts b/core/src/components/action-sheet/test/test.utils.ts
index d30f172a9b..0f300727ac 100644
--- a/core/src/components/action-sheet/test/test.utils.ts
+++ b/core/src/components/action-sheet/test/test.utils.ts
@@ -50,7 +50,6 @@ export async function testActionSheetBackdrop(
actionSheet: any
) {
try {
- console.log('backdrop hook');
const backdrop = await page.find('ion-backdrop');
await backdrop.click();
diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
index f4643fdba6..6ac8d419c4 100644
--- a/core/src/components/action-sheet/usage/react.md
+++ b/core/src/components/action-sheet/usage/react.md
@@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component {
);
}
}
-
```
diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx
index 961b17c360..e9ac132f09 100644
--- a/core/src/components/alert-controller/alert-controller.tsx
+++ b/core/src/components/alert-controller/alert-controller.tsx
@@ -11,15 +11,24 @@ export class AlertController implements ComponentInterface, OverlayController {
@Prop({ context: 'document' }) doc!: Document;
/**
- * Create an alert overlay with alert options
+ * Create an alert overlay with alert options.
+ *
+ * @param options The options to use to create the alert.
*/
@Method()
- create(opts: AlertOptions): Promise {
- return createOverlay(this.doc.createElement('ion-alert'), opts);
+ create(options: AlertOptions): Promise {
+ return createOverlay(this.doc.createElement('ion-alert'), options);
}
/**
* Dismiss the open alert overlay.
+ *
+ * @param data Any data to emit in the dismiss events.
+ * @param role The role of the element that is dismissing the alert.
+ * This can be useful in a button handler for determining which button was
+ * clicked to dismiss the alert.
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+ * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.
*/
@Method()
dismiss(data?: any, role?: string, id?: string) {
diff --git a/core/src/components/alert-controller/readme.md b/core/src/components/alert-controller/readme.md
index 285cac0de2..257a3bb170 100644
--- a/core/src/components/alert-controller/readme.md
+++ b/core/src/components/alert-controller/readme.md
@@ -24,15 +24,15 @@ async function presentAlert() {
## Methods
-### `create(opts: AlertOptions) => Promise`
+### `create(options: AlertOptions) => Promise`
-Create an alert overlay with alert options
+Create an alert overlay with alert options.
#### Parameters
-| Name | Type | Description |
-| ------ | -------------- | ----------- |
-| `opts` | `AlertOptions` | |
+| Name | Type | Description |
+| --------- | -------------- | --------------------------------------- |
+| `options` | `AlertOptions` | The options to use to create the alert. |
#### Returns
@@ -46,11 +46,11 @@ Dismiss the open alert overlay.
#### Parameters
-| Name | Type | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any` | |
-| `role` | `string \| undefined` | |
-| `id` | `string \| undefined` | |
+| Name | Type | Description |
+| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any` | Any data to emit in the dismiss events. |
+| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
+| `id` | `string \| undefined` | The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert. |
#### Returns
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index ad3b0abb9e..5bee010cdb 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -192,6 +192,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
/**
* Dismiss the alert overlay after it has been presented.
+ *
+ * @param data Any data to emit in the dismiss events.
+ * @param role The role of the element that is dismissing the alert.
+ * This can be useful in a button handler for determining which button was
+ * clicked to dismiss the alert.
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/
@Method()
dismiss(data?: any, role?: string): Promise {
@@ -200,7 +206,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
/**
* Returns a promise that resolves when the alert did dismiss.
- *
*/
@Method()
onDidDismiss(): Promise {
@@ -209,7 +214,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
/**
* Returns a promise that resolves when the alert will dismiss.
- *
*/
@Method()
onWillDismiss(): Promise {
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index 5744aed888..e70d38ce01 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -797,7 +797,6 @@ export default class AlertExample extends Component {
);
}
}
-
```
@@ -1090,10 +1089,10 @@ Dismiss the alert overlay after it has been presented.
#### Parameters
-| Name | Type | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any` | |
-| `role` | `string \| undefined` | |
+| Name | Type | Description |
+| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any` | Any data to emit in the dismiss events. |
+| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
#### Returns
diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md
index 81baa70067..36377af781 100644
--- a/core/src/components/alert/usage/react.md
+++ b/core/src/components/alert/usage/react.md
@@ -267,5 +267,4 @@ export default class AlertExample extends Component {
);
}
}
-
```
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index d444bc2f17..3042468459 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -135,7 +135,7 @@ export default Example;
import { Component, Vue } from 'vue-property-decorator';
@Component()
- export default class Menu extends Vue {
+ export default class Example extends Vue {
backdropDismiss = false;
showBackdrop = false;
shouldPropagate = false;
diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
index 36fd4237da..d2ea30800e 100644
--- a/core/src/components/backdrop/usage/vue.md
+++ b/core/src/components/backdrop/usage/vue.md
@@ -24,7 +24,7 @@
import { Component, Vue } from 'vue-property-decorator';
@Component()
- export default class Menu extends Vue {
+ export default class Example extends Vue {
backdropDismiss = false;
showBackdrop = false;
shouldPropagate = false;
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 19d5876fa4..139c3bd68f 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -71,18 +71,6 @@
}
-// iOS Round Button
-// --------------------------------------------------
-
-:host(.button-round) {
- --border-radius: #{$button-ios-round-border-radius};
- --padding-top: #{$button-ios-round-padding-top};
- --padding-start: #{$button-ios-round-padding-start};
- --padding-end: #{$button-ios-round-padding-end};
- --padding-bottom: #{$button-ios-round-padding-bottom};
-}
-
-
// iOS Button Sizes
// --------------------------------------------------
@@ -111,6 +99,18 @@
}
+// iOS Round Button
+// --------------------------------------------------
+
+:host(.button-round) {
+ --border-radius: #{$button-ios-round-border-radius};
+ --padding-top: #{$button-ios-round-padding-top};
+ --padding-start: #{$button-ios-round-padding-start};
+ --padding-end: #{$button-ios-round-padding-end};
+ --padding-bottom: #{$button-ios-round-padding-bottom};
+}
+
+
// iOS strong Button
// --------------------------------------------------
diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html
index ab15a70cd0..faf12bf832 100644
--- a/core/src/components/button/test/standalone/index.html
+++ b/core/src/components/button/test/standalone/index.html
@@ -24,6 +24,13 @@
Block Clear
+ Card - Basic
+
+
+
+
+
+
+
+
+
+
+
+
+ Card - Button
+
+
+
+
+
+
+
+
+ Subtitle
+
+
+ Button Card
+
+
+
+
+ This is content, inside of a card with a button attribute.
+
+
+
+
+
+
+ Anchor Card
+
+
+
+
+ This is content, inside of a card with a href attribute.
+
+
+
+
+
+
+ Subtitle
+
+
+ Title
+
+
+
+
+ This button should have a background.
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 794d928f4e..963ff58a6a 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -174,7 +174,7 @@ export default CheckboxExample;
import { Component, Vue } from 'vue-property-decorator';
@Component()
- export default class Menu extends Vue {
+ export default class Example extends Vue {
form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md
index 9cffcee32b..4465c8d655 100644
--- a/core/src/components/checkbox/usage/vue.md
+++ b/core/src/components/checkbox/usage/vue.md
@@ -29,7 +29,7 @@
import { Component, Vue } from 'vue-property-decorator';
@Component()
- export default class Menu extends Vue {
+ export default class Example extends Vue {
form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 513c88943b..2398933e70 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -169,12 +169,12 @@ export class Content implements ComponentInterface {
}
/**
- * Returns the element where the actual scrolling takes places.
- * This element is the one you could subscribe to `scroll` events or manually modify
- * `scrollTop`, however, it's recommended to use the API provided by `ion-content`:
+ * Get the element where the actual scrolling takes place.
+ * This element can be used to subscribe to `scroll` events or manually modify
+ * `scrollTop`. However, it's recommended to use the API provided by `ion-content`:
*
- * Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
- * and scrollToPoint() to scroll the content into a certain point.
+ * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
+ * and `scrollToPoint()` to scroll the content into a certain point.
*/
@Method()
getScrollElement(): Promise {
@@ -182,7 +182,9 @@ export class Content implements ComponentInterface {
}
/**
- * Scroll to the top of the component
+ * Scroll to the top of the component.
+ *
+ * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
*/
@Method()
scrollToTop(duration = 0): Promise {
@@ -190,7 +192,9 @@ export class Content implements ComponentInterface {
}
/**
- * Scroll to the bottom of the component
+ * Scroll to the bottom of the component.
+ *
+ * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
*/
@Method()
scrollToBottom(duration = 0): Promise {
@@ -199,7 +203,11 @@ export class Content implements ComponentInterface {
}
/**
- * Scroll by a specified X/Y distance in the component
+ * Scroll by a specified X/Y distance in the component.
+ *
+ * @param x The amount to scroll by on the horizontal axis.
+ * @param y The amount to scroll by on the vertical axis.
+ * @param duration The amount of time to take scrolling by that amount.
*/
@Method()
scrollByPoint(x: number, y: number, duration: number): Promise {
@@ -207,7 +215,11 @@ export class Content implements ComponentInterface {
}
/**
- * Scroll to a specified X/Y location in the component
+ * Scroll to a specified X/Y location in the component.
+ *
+ * @param x The point to scroll to on the horizontal axis.
+ * @param y The point to scroll to on the vertical axis.
+ * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
*/
@Method()
async scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration = 0): Promise {
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
index 403368ee4b..4102fd8a11 100644
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -96,12 +96,12 @@ export default Example;
### `getScrollElement() => Promise`
-Returns the element where the actual scrolling takes places.
-This element is the one you could subscribe to `scroll` events or manually modify
-`scrollTop`, however, it's recommended to use the API provided by `ion-content`:
+Get the element where the actual scrolling takes place.
+This element can be used to subscribe to `scroll` events or manually modify
+`scrollTop`. However, it's recommended to use the API provided by `ion-content`:
-Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
-and scrollToPoint() to scroll the content into a certain point.
+i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
+and `scrollToPoint()` to scroll the content into a certain point.
#### Returns
@@ -111,15 +111,15 @@ Type: `Promise`
### `scrollByPoint(x: number, y: number, duration: number) => Promise`
-Scroll by a specified X/Y distance in the component
+Scroll by a specified X/Y distance in the component.
#### Parameters
-| Name | Type | Description |
-| ---------- | -------- | ----------- |
-| `x` | `number` | |
-| `y` | `number` | |
-| `duration` | `number` | |
+| Name | Type | Description |
+| ---------- | -------- | ---------------------------------------------------- |
+| `x` | `number` | The amount to scroll by on the horizontal axis. |
+| `y` | `number` | The amount to scroll by on the vertical axis. |
+| `duration` | `number` | The amount of time to take scrolling by that amount. |
#### Returns
@@ -129,13 +129,13 @@ Type: `Promise`
### `scrollToBottom(duration?: number) => Promise`
-Scroll to the bottom of the component
+Scroll to the bottom of the component.
#### Parameters
-| Name | Type | Description |
-| ---------- | -------- | ----------- |
-| `duration` | `number` | |
+| Name | Type | Description |
+| ---------- | -------- | -------------------------------------------------------------------- |
+| `duration` | `number` | The amount of time to take scrolling to the bottom. Defaults to `0`. |
#### Returns
@@ -145,15 +145,15 @@ Type: `Promise`
### `scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise`
-Scroll to a specified X/Y location in the component
+Scroll to a specified X/Y location in the component.
#### Parameters
-| Name | Type | Description |
-| ---------- | ----------------------------- | ----------- |
-| `x` | `null \| number \| undefined` | |
-| `y` | `null \| number \| undefined` | |
-| `duration` | `number` | |
+| Name | Type | Description |
+| ---------- | ----------------------------- | -------------------------------------------------------------------- |
+| `x` | `null \| number \| undefined` | The point to scroll to on the horizontal axis. |
+| `y` | `null \| number \| undefined` | The point to scroll to on the vertical axis. |
+| `duration` | `number` | The amount of time to take scrolling to that point. Defaults to `0`. |
#### Returns
@@ -163,13 +163,13 @@ Type: `Promise`
### `scrollToTop(duration?: number) => Promise`
-Scroll to the top of the component
+Scroll to the top of the component.
#### Parameters
-| Name | Type | Description |
-| ---------- | -------- | ----------- |
-| `duration` | `number` | |
+| Name | Type | Description |
+| ---------- | -------- | ----------------------------------------------------------------- |
+| `duration` | `number` | The amount of time to take scrolling to the top. Defaults to `0`. |
#### Returns
diff --git a/core/src/components/datetime/datetime-util.ts b/core/src/components/datetime/datetime-util.ts
index c7a540e8e4..bd8ff7ab45 100644
--- a/core/src/components/datetime/datetime-util.ts
+++ b/core/src/components/datetime/datetime-util.ts
@@ -248,6 +248,17 @@ export function parseDate(val: string | undefined | null): DatetimeData | undefi
* such as "01:47"
*/
export const getLocalDateTime = (dateString: any = ''): Date => {
+ /**
+ * If user passed in undefined
+ * or null, convert it to the
+ * empty string since the rest
+ * of this functions expects
+ * a string
+ */
+ if (dateString === undefined || dateString === null) {
+ dateString = '';
+ }
+
/**
* Ensures that YYYY-MM-DD, YYYY-MM,
* YYYY-DD, etc does not get affected
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 72e34987ba..5debb76669 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -643,7 +643,7 @@ export default Example;
import { Component, Vue } from 'vue-property-decorator';
@Component()
- export default class Menu extends Vue {
+ export default class Example extends Vue {
customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
customDayShortNames = [
diff --git a/core/src/components/datetime/test/datetime.spec.ts b/core/src/components/datetime/test/datetime.spec.ts
index f099ae7ce4..6f0e21719f 100644
--- a/core/src/components/datetime/test/datetime.spec.ts
+++ b/core/src/components/datetime/test/datetime.spec.ts
@@ -1,4 +1,4 @@
-import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime } from '../datetime-util';
+import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime, renderDatetime } from '../datetime-util';
describe('Datetime', () => {
describe('getDateValue()', () => {
@@ -69,6 +69,17 @@ describe('Datetime', () => {
expect(convertToLocal.toISOString()).toContain(test.expectedOutput);
});
});
+
+ it('should default to today for null and undefined cases', () => {
+ const today = new Date();
+ const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } )
+
+ const convertToLocalUndefined = getLocalDateTime(undefined);
+ expect(convertToLocalUndefined.toISOString()).toContain(todayString);
+
+ const convertToLocalNull = getLocalDateTime(null);
+ expect(convertToLocalNull.toISOString()).toContain(todayString);
+ });
});
describe('daysInMonth()', () => {
diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
index 15ba19be5e..3734c00fc4 100644
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@@ -83,7 +83,7 @@
import { Component, Vue } from 'vue-property-decorator';
@Component()
- export default class Menu extends Vue {
+ export default class Example extends Vue {
customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
customDayShortNames = [
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index 2dbae897ae..e4f49a24c2 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -4,17 +4,6 @@
// --------------------------------------------------
:host {
- --transition: background-color, opacity 100ms linear;
- --ripple-color: currentColor;
- --border-radius: #{$fab-border-radius};
- --border-width: 0;
- --border-style: none;
- --border-color: initial;
- --padding-top: 0;
- --padding-end: 0;
- --padding-bottom: 0;
- --padding-start: 0;
-
/**
* @prop --background: Background of the button
* @prop --background-activated: Background of the button when activated
@@ -40,6 +29,17 @@
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
*/
+ --transition: background-color, opacity 100ms linear;
+ --ripple-color: currentColor;
+ --border-radius: #{$fab-border-radius};
+ --border-width: 0;
+ --border-style: none;
+ --border-color: initial;
+ --padding-top: 0;
+ --padding-end: 0;
+ --padding-bottom: 0;
+ --padding-start: 0;
+
@include margin(0);
display: block;
diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx
index 2ce5e14a48..d9eb983140 100644
--- a/core/src/components/fab-list/fab-list.tsx
+++ b/core/src/components/fab-list/fab-list.tsx
@@ -13,7 +13,7 @@ export class FabList implements ComponentInterface {
@Element() el!: HTMLIonFabElement;
/**
- * If `true`, the fab list will be show all fab buttons in the list.
+ * If `true`, the fab list will show all fab buttons in the list.
*/
@Prop() activated = false;
diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md
index ec965456dd..5355c9441e 100644
--- a/core/src/components/fab-list/readme.md
+++ b/core/src/components/fab-list/readme.md
@@ -82,7 +82,7 @@ export default Example
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------- | --------------------------------------- | ---------- |
-| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list. | `boolean` | `false` |
+| `activated` | `activated` | If `true`, the fab list will show all fab buttons in the list. | `boolean` | `false` |
| `side` | `side` | The side the fab list will show on relative to the main fab button. | `"bottom" \| "end" \| "start" \| "top"` | `'bottom'` |
diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
index 7ec8e97218..3397f0c534 100644
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -68,7 +68,7 @@ export class Fab implements ComponentInterface {
}
/**
- * Close an active FAB list container
+ * Close an active FAB list container.
*/
@Method()
close() {
diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index a55f04b42c..1f6ed45fb3 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -288,7 +288,7 @@ export default Example;
### `close() => void`
-Close an active FAB list container
+Close an active FAB list container.
#### Returns
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index 06c52cace3..21d3a50506 100644
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -35,6 +35,9 @@ export class Img implements ComponentInterface {
}
/** Emitted when the img src has been set */
+ @Event() ionImgWillLoad!: EventEmitter;
+
+ /** Emitted when the image has finished loading */
@Event() ionImgDidLoad!: EventEmitter;
/** Emitted when the img fails to load */
@@ -70,6 +73,10 @@ export class Img implements ComponentInterface {
private load() {
this.loadError = this.onError;
this.loadSrc = this.src;
+ this.ionImgWillLoad.emit();
+ }
+
+ private onLoad = () => {
this.ionImgDidLoad.emit();
}
@@ -98,6 +105,7 @@ export class Img implements ComponentInterface {
src={this.loadSrc}
alt={this.alt}
decoding="async"
+ onLoad={this.onLoad}
onError={this.loadError}
/>
);
diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md
index 73909e6bdb..a9a28c16dc 100644
--- a/core/src/components/img/readme.md
+++ b/core/src/components/img/readme.md
@@ -79,10 +79,11 @@ export default Example
## Events
-| Event | Description | Type |
-| --------------- | ------------------------------------- | ------------------- |
-| `ionError` | Emitted when the img fails to load | `CustomEvent` |
-| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent` |
+| Event | Description | Type |
+| ---------------- | ------------------------------------------- | ------------------- |
+| `ionError` | Emitted when the img fails to load | `CustomEvent` |
+| `ionImgDidLoad` | Emitted when the image has finished loading | `CustomEvent` |
+| `ionImgWillLoad` | Emitted when the img src has been set | `CustomEvent` |
----------------------------------------------
diff --git a/core/src/components/img/test/basic/index.html b/core/src/components/img/test/basic/index.html
index 4ac6d576e3..71b054c6c4 100644
--- a/core/src/components/img/test/basic/index.html
+++ b/core/src/components/img/test/basic/index.html
@@ -67,6 +67,10 @@
+```
+
+#### Updating Data
+
+```html
+
```
@@ -299,14 +518,20 @@ export default Example
### `complete(listOrReorder?: boolean | any[] | undefined) => Promise`
-This method must be called once the `ionItemReorder` event is handled in order
-to complete the reorder operation.
+Completes the reorder operation. Must be called by the `ionItemReorder` event.
+
+If a list of items is passed, the list will be reordered and returned in the
+proper order.
+
+If no parameters are passed or if `true` is passed in, the reorder will complete
+and the item will remain in the position it was dragged to. If `false` is passed,
+the reorder will complete and the item will bounce back to its original position.
#### Parameters
-| Name | Type | Description |
-| --------------- | ------------------------------- | ----------- |
-| `listOrReorder` | `any[] \| boolean \| undefined` | |
+| Name | Type | Description |
+| --------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `listOrReorder` | `any[] \| boolean \| undefined` | A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item. |
#### Returns
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 905781fa8f..628578b244 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -90,8 +90,17 @@ export class ReorderGroup implements ComponentInterface {
}
/**
- * This method must be called once the `ionItemReorder` event is handled in order
- * to complete the reorder operation.
+ * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+ *
+ * If a list of items is passed, the list will be reordered and returned in the
+ * proper order.
+ *
+ * If no parameters are passed or if `true` is passed in, the reorder will complete
+ * and the item will remain in the position it was dragged to. If `false` is passed,
+ * the reorder will complete and the item will bounce back to its original position.
+ *
+ * @param listOrReorder A list of items to be sorted and returned in the new order or a
+ * boolean of whether or not the reorder should reposition the item.
*/
@Method()
complete(listOrReorder?: boolean | any[]): Promise {
@@ -219,7 +228,7 @@ export class ReorderGroup implements ComponentInterface {
const toIndex = this.lastToIndex;
const fromIndex = indexForItem(selectedItemEl);
- if (listOrReorder === true) {
+ if (!listOrReorder || listOrReorder === true) {
const ref = (fromIndex < toIndex)
? children[toIndex + 1]
: children[toIndex];
diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html
index 98571ec95f..fcc74f4a87 100644
--- a/core/src/components/reorder-group/test/basic/index.html
+++ b/core/src/components/reorder-group/test/basic/index.html
@@ -26,7 +26,6 @@
-
Item 1 (default ion-reorder)
@@ -126,11 +125,15 @@
function openAlert() {
alert('click');
}
+
function toggleEdit() {
const reorderGroup = document.getElementById('reorder');
reorderGroup.disabled = !reorderGroup.disabled;
+
reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
- detail.complete(true);
+ console.log('Dragged from index', detail.from, 'to', detail.to);
+
+ detail.complete();
});
}
diff --git a/core/src/components/reorder-group/test/data/index.html b/core/src/components/reorder-group/test/data/index.html
new file mode 100644
index 0000000000..1484dd0290
--- /dev/null
+++ b/core/src/components/reorder-group/test/data/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+ Reorder - Data
+
+
+
+
+
+
+
+
+
+
+
+
+ Reorder - Data
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/reorder-group/usage/angular.md b/core/src/components/reorder-group/usage/angular.md
index 2b5304a755..de82bd6576 100644
--- a/core/src/components/reorder-group/usage/angular.md
+++ b/core/src/components/reorder-group/usage/angular.md
@@ -1,49 +1,135 @@
```html
-
-
-
+
+
+
+
+
+ Item 1
+
+
-
-
- Item 1
-
-
+
+
+ Item 2
+
+
-
-
- Item 2 (default ion-reorder slot="start")
-
-
+
+
+
+ Item 3
+
+
-
-
- Item 3 (custom ion-reorder)
-
-
-
-
+
+
+ Item 4
+
+
-
-
- Item 4 (custom ion-reorder slot="start")
-
-
-
-
+
+
+
+ Item 5
+
+
+
+
-
-
-
- Item 5 (the whole item can be dragged)
-
-
-
+
+
+ Item 6
+
+
+
+
-
-
-
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
+```
+
+```javascript
+import { Component, ViewChild } from '@angular/core';
+import { IonReorderGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'reorder-group-example',
+ templateUrl: 'reorder-group-example.html',
+ styleUrls: ['./reorder-group-example.css']
+})
+export class ReorderGroupExample {
+ @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
+
+ constructor() {}
+
+ doReorder(ev: any) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ });
+
+ toggleReorderGroup() {
+ this.reorderGroup.disabled = !this.reorderGroup.disabled;
+ }
+}
+```
+
+#### Updating Data
+
+```javascript
+import { Component, ViewChild } from '@angular/core';
+import { IonReorderGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'reorder-group-example',
+ templateUrl: 'reorder-group-example.html',
+ styleUrls: ['./reorder-group-example.css']
+})
+export class ReorderGroupExample {
+ items = [1, 2, 3, 4, 5];
+
+ @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
+
+ constructor() {}
+
+ doReorder(ev: any) => {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', this.items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ this.items = ev.detail.complete(this.items);
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', this.items);
+ });
+}
```
diff --git a/core/src/components/reorder-group/usage/javascript.md b/core/src/components/reorder-group/usage/javascript.md
index 7056fb390a..a51fe347dd 100644
--- a/core/src/components/reorder-group/usage/javascript.md
+++ b/core/src/components/reorder-group/usage/javascript.md
@@ -1,60 +1,106 @@
```html
-
-
-
+
+
+
+
+
+ Item 1
+
+
-
-
- Item 1
-
-
+
+
+ Item 2
+
+
-
-
- Item 2 (default ion-reorder slot="start")
-
-
+
+
+
+ Item 3
+
+
-
-
- Item 3 (custom ion-reorder)
-
-
-
-
+
+
+ Item 4
+
+
-
-
- Item 4 (custom ion-reorder slot="start")
-
-
-
-
+
+
+
+ Item 5
+
+
+
+
-
-
-
- Item 5 (the whole item can be dragged)
-
-
-
+
+
+ Item 6
+
+
+
+
-
-
-
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
```
```javascript
const reorderGroup = document.querySelector('ion-reorder-group');
-reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
- // finishing the reorder, true means ion-reorder-group with reorder the DOM
- detail.complete(true);
- // or:
- // reorderGroup.complete(true)
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', detail.from, 'to', detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ detail.complete();
});
-```
\ No newline at end of file
+```
+
+#### Updating Data
+
+```javascript
+const items = [1, 2, 3, 4, 5];
+const reorderGroup = document.querySelector('ion-reorder-group');
+
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ items = detail.complete(items);
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', items);
+});
+```
diff --git a/core/src/components/reorder-group/usage/react.md b/core/src/components/reorder-group/usage/react.md
index 4dbe998621..2f8f1f6cf8 100644
--- a/core/src/components/reorder-group/usage/react.md
+++ b/core/src/components/reorder-group/usage/react.md
@@ -1,57 +1,112 @@
```tsx
import React from 'react';
-import { IonContent, IonList, IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+
+function doReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+}
const Example: React.SFC<{}> = () => (
+ <>
+ {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
+
+ {/*-- Default reorder icon, end aligned items --*/}
+
+
+ Item 1
+
+
-
-
-
+
+
+ Item 2
+
+
-
-
- Item 1
-
-
+ {/*-- Default reorder icon, start aligned items --*/}
+
+
+ Item 3
+
+
-
-
- Item 2 (default ion-reorder slot="start")
-
-
+
+
+ Item 4
+
+
-
-
- Item 3 (custom ion-reorder)
-
-
-
-
-
-
-
- Item 4 (custom ion-reorder slot="start")
-
-
-
-
-
-
-
-
- Item 5 (the whole item can be dragged)
-
-
+ {/*-- Custom reorder icon end items --*/}
+
+
+ Item 5
+
+
+
+
-
-
-
+
+
+ Item 6
+
+
+
+
+
+ {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
+
+ }
);
export default Example
+```
+
+#### Updating Data
+
+```tsx
+const items = [1, 2, 3, 4, 5];
+
+function doReorder(event: CustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', this.items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ this.items = event.detail.complete(this.items);
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', this.items);
+}
+```
diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md
index 357f9dc35f..bcf11107c2 100644
--- a/core/src/components/reorder-group/usage/vue.md
+++ b/core/src/components/reorder-group/usage/vue.md
@@ -1,51 +1,118 @@
```html
-
-
-
+
+
+
+
+
+ Item 1
+
+
-
-
- Item 1
-
-
+
+
+ Item 2
+
+
-
-
- Item 2 (default ion-reorder slot="start")
-
-
+
+
+
+ Item 3
+
+
-
-
- Item 3 (custom ion-reorder)
-
-
-
-
+
+
+ Item 4
+
+
-
-
- Item 4 (custom ion-reorder slot="start")
-
-
-
-
+
+
+
+ Item 5
+
+
+
+
-
-
-
- Item 5 (the whole item can be dragged)
-
-
-
+
+
+ Item 6
+
+
+
+
-
-
-
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
+
+
+```
+
+#### Updating Data
+
+```html
+
```
diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md
index bf31a45a22..7e9a5846ad 100644
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -1,19 +1,239 @@
# ion-reorder
-Reorder is a component that allows an item to be dragged to change its order. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
+Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
-`ion-reorder` is the anchor users will use to drag and drop items inside the `ion-reorder-group`.
+`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation.
+
+
+
+
+
+## Usage
+
+### Angular / javascript
```html
+
- Item
+ Item 1
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+```
+
+
+### React
+
+```tsx
+import React from 'react';
+
+import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+ <>
+ {/*-- Default reorder icon, end aligned items --*/}
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+ {/*-- Default reorder icon, start aligned items --*/}
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+ {/*-- Custom reorder icon end items --*/}
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+ {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
+);
+
+export default Example;
+```
+
+
+### Vue
+
+```html
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
```
-
----------------------------------------------
diff --git a/core/src/components/reorder/usage/angular.md b/core/src/components/reorder/usage/angular.md
new file mode 100644
index 0000000000..2163e3c756
--- /dev/null
+++ b/core/src/components/reorder/usage/angular.md
@@ -0,0 +1,68 @@
+
+```html
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+```
\ No newline at end of file
diff --git a/core/src/components/reorder/usage/javascript.md b/core/src/components/reorder/usage/javascript.md
new file mode 100644
index 0000000000..2163e3c756
--- /dev/null
+++ b/core/src/components/reorder/usage/javascript.md
@@ -0,0 +1,68 @@
+
+```html
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+```
\ No newline at end of file
diff --git a/core/src/components/reorder/usage/react.md b/core/src/components/reorder/usage/react.md
new file mode 100644
index 0000000000..a0cf28c30a
--- /dev/null
+++ b/core/src/components/reorder/usage/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+
+import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+ <>
+ {/*-- Default reorder icon, end aligned items --*/}
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+ {/*-- Default reorder icon, start aligned items --*/}
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+ {/*-- Custom reorder icon end items --*/}
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+ {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
+);
+
+export default Example;
+```
diff --git a/core/src/components/reorder/usage/vue.md b/core/src/components/reorder/usage/vue.md
new file mode 100644
index 0000000000..49b0fdcbdf
--- /dev/null
+++ b/core/src/components/reorder/usage/vue.md
@@ -0,0 +1,69 @@
+```html
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ Item 6
+
+
+
+
+
+
+
+
+
+ Item 7
+
+
+
+
+
+
+
+ Item 8
+
+
+
+
+```
\ No newline at end of file
diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index 1ef5e31ac1..213131b001 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -33,16 +33,16 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
## Methods
-### `addRipple(pageX: number, pageY: number) => Promise<() => void>`
+### `addRipple(x: number, y: number) => Promise<() => void>`
-Adds the ripple effect to the parent element
+Adds the ripple effect to the parent element.
#### Parameters
-| Name | Type | Description |
-| ------- | -------- | ----------- |
-| `pageX` | `number` | |
-| `pageY` | `number` | |
+| Name | Type | Description |
+| ---- | -------- | ----------------------------------------------------------- |
+| `x` | `number` | The horizontal coordinate of where the ripple should start. |
+| `y` | `number` | The vertical coordinate of where the ripple should start. |
#### Returns
diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
index 066967c45b..9806ab909f 100644
--- a/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -27,10 +27,13 @@ export class RippleEffect implements ComponentInterface {
@Prop() type: 'bounded' | 'unbounded' = 'bounded';
/**
- * Adds the ripple effect to the parent element
+ * Adds the ripple effect to the parent element.
+ *
+ * @param x The horizontal coordinate of where the ripple should start.
+ * @param y The vertical coordinate of where the ripple should start.
*/
@Method()
- async addRipple(pageX: number, pageY: number) {
+ async addRipple(x: number, y: number) {
return new Promise<() => void>(resolve => {
this.queue.read(() => {
const rect = this.el.getBoundingClientRect();
@@ -41,14 +44,14 @@ export class RippleEffect implements ComponentInterface {
const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
const finalScale = maxRadius / initialSize;
- let posX = pageX - rect.left;
- let posY = pageY - rect.top;
+ let posX = x - rect.left;
+ let posY = y - rect.top;
if (this.unbounded) {
posX = width * 0.5;
posY = height * 0.5;
}
- const x = posX - initialSize * 0.5;
- const y = posY - initialSize * 0.5;
+ const styleX = posX - initialSize * 0.5;
+ const styleY = posY - initialSize * 0.5;
const moveX = width * 0.5 - posX;
const moveY = height * 0.5 - posY;
@@ -56,8 +59,8 @@ export class RippleEffect implements ComponentInterface {
const div = this.win.document.createElement('div');
div.classList.add('ripple-effect');
const style = div.style;
- style.top = y + 'px';
- style.left = x + 'px';
+ style.top = styleY + 'px';
+ style.left = styleX + 'px';
style.width = style.height = initialSize + 'px';
style.setProperty('--final-scale', `${finalScale}`);
style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md
index 1e4d7cae91..129a974fda 100644
--- a/core/src/components/router/readme.md
+++ b/core/src/components/router/readme.md
@@ -85,10 +85,10 @@ Navigate to the specified URL.
#### Parameters
-| Name | Type | Description |
-| ----------- | ------------------------------- | ----------- |
-| `url` | `string` | |
-| `direction` | `"back" \| "forward" \| "root"` | |
+| Name | Type | Description |
+| ----------- | ------------------------------- | -------------------------------------------------------- |
+| `url` | `string` | The url to navigate to. |
+| `direction` | `"back" \| "forward" \| "root"` | The direction of the animation. Defaults to `"forward"`. |
#### Returns
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index c28fada1fd..454c7a38f6 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -88,6 +88,9 @@ export class Router implements ComponentInterface {
/**
* Navigate to the specified URL.
+ *
+ * @param url The url to navigate to.
+ * @param direction The direction of the animation. Defaults to `"forward"`.
*/
@Method()
push(url: string, direction: RouterDirection = 'forward') {
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index c86beb046c..a08c430ca6 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -26,6 +26,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |
diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
index c6ae9ee4d9..d3e029bc4c 100644
--- a/core/src/components/searchbar/searchbar.scss
+++ b/core/src/components/searchbar/searchbar.scss
@@ -143,3 +143,9 @@
:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
display: block;
}
+
+:host(.searchbar-disabled) {
+ cursor: default;
+ opacity: .4;
+ pointer-events: none;
+}
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index b85569ed9d..22c11c9d82 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -79,6 +79,11 @@ export class Searchbar implements ComponentInterface {
this.ionChange = debounceEvent(this.ionChange, this.debounce);
}
+ /**
+ * If `true`, the user cannot interact with the input.
+ */
+ @Prop() disabled = false;
+
/**
* Set the input's placeholder.
* `placeholder` can accept either plaintext or HTML as a string.
@@ -353,16 +358,22 @@ export class Searchbar implements ComponentInterface {
return this.value || '';
}
+ private hasValue(): boolean {
+ return this.getValue() !== '';
+ }
+
hostData() {
const animated = this.animated && this.config.getBoolean('animated', true);
return {
+ 'aria-disabled': this.disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
'searchbar-animated': animated,
+ 'searchbar-disabled': this.disabled,
'searchbar-no-animate': animated && this.noAnimate,
- 'searchbar-has-value': (this.getValue() !== ''),
+ 'searchbar-has-value': this.hasValue(),
'searchbar-left-aligned': this.shouldAlignLeft,
'searchbar-has-focus': this.focused
}
@@ -393,6 +404,7 @@ export class Searchbar implements ComponentInterface {
return [
+
Round button combinations
+
+
Colors
+ 
+
+
+
+
+ Toggle disabled
+
+