docs(components): update grammar and docs

core/src/components.d.ts

@@ -523,7 +523,7 @@ declare global {
        */
       'href': string;
       /**
-       * When using a router, it specifies the transition direction when navigating a another page usign `href`.
+       * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection': 'forward' | 'back';
     }
@@ -553,7 +553,7 @@ declare global {
        */
       'href'?: string;
       /**
-       * When using a router, it specifies the transition direction when navigating a another page usign `href`.
+       * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection'?: 'forward' | 'back';
     }
@@ -874,7 +874,7 @@ declare global {
        */
       'round': boolean;
       /**
-       * When using a router, it specifies the transition direction when navigating a another page usign `href`.
+       * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection': 'forward' | 'back';
       /**
@@ -952,7 +952,7 @@ declare global {
        */
       'round'?: boolean;
       /**
-       * When using a router, it specifies the transition direction when navigating a another page usign `href`.
+       * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection'?: 'forward' | 'back';
       /**
@@ -2915,7 +2915,7 @@ declare global {
   namespace StencilComponents {
     interface IonItem {
       /**
-       * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
+       * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`.
        */
       'button': boolean;
       /**
@@ -2939,7 +2939,7 @@ declare global {
        */
       'mode': 'ios' | 'md';
       /**
-       * When using a router, it specifies the transition direction when navigating a another page usign `href`.
+       * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection': 'forward' | 'back';
     }
@@ -2965,7 +2965,7 @@ declare global {
   namespace JSXElements {
     export interface IonItemAttributes extends HTMLAttributes {
       /**
-       * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
+       * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`.
        */
       'button'?: boolean;
       /**
@@ -2989,7 +2989,7 @@ declare global {
        */
       'mode'?: 'ios' | 'md';
       /**
-       * When using a router, it specifies the transition direction when navigating a another page usign `href`.
+       * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection'?: 'forward' | 'back';
     }
@@ -7362,7 +7362,7 @@ declare global {
       'itemHeight': ItemHeightFn;
       'itemRender': ItemRenderFn;
       /**
-       * The data that builds the templates within the virtual scroll. This is the same data that you'd pass to `*ngFor`. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.
+       * The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.
        */
       'items': any[];
       'markDirty': (offset: number, len?: number) => void;
@@ -7416,7 +7416,7 @@ declare global {
       'itemHeight'?: ItemHeightFn;
       'itemRender'?: ItemRenderFn;
       /**
-       * The data that builds the templates within the virtual scroll. This is the same data that you'd pass to `*ngFor`. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.
+       * The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible.
        */
       'items'?: any[];
       'nodeHeight'?: NodeHeightFn;

core/src/components/anchor/anchor.tsx

@@ -14,8 +14,8 @@ export class Anchor {
   @Prop() href: string;
 
   /**
-   * When using a router, it specifies the transition direction when navigating a
+   * When using a router, it specifies the transition direction when navigating to
-   * another page usign `href`.
+   * another page using `href`.
    */
   @Prop() routerDirection: 'forward' | 'back';
 

core/src/components/anchor/readme.md

@@ -19,8 +19,8 @@ If this property is set, an anchor tag will be rendered.
 
 string
 
-When using a router, it specifies the transition direction when navigating a
+When using a router, it specifies the transition direction when navigating to
-another page usign `href`.
+another page using `href`.
 
 
 ## Attributes
@@ -37,8 +37,8 @@ If this property is set, an anchor tag will be rendered.
 
 string
 
-When using a router, it specifies the transition direction when navigating a
+When using a router, it specifies the transition direction when navigating to
-another page usign `href`.
+another page using `href`.
 
 
 

core/src/components/button/button.tsx

@@ -55,8 +55,8 @@ export class Button {
   @Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
 
   /**
-   * When using a router, it specifies the transition direction when navigating a
+   * When using a router, it specifies the transition direction when navigating to
-   * another page usign `href`.
+   * another page using `href`.
    */
   @Prop() routerDirection: 'forward' | 'back';
 

core/src/components/button/readme.md

@@ -106,8 +106,8 @@ If true, activates a button with rounded corners.
 
 string
 
-When using a router, it specifies the transition direction when navigating a
+When using a router, it specifies the transition direction when navigating to
-another page usign `href`.
+another page using `href`.
 
 
 #### size
@@ -205,8 +205,8 @@ If true, activates a button with rounded corners.
 
 string
 
-When using a router, it specifies the transition direction when navigating a
+When using a router, it specifies the transition direction when navigating to
-another page usign `href`.
+another page using `href`.
 
 
 #### size

core/src/components/infinite-scroll/readme.md

@@ -12,7 +12,7 @@ on the infinite scroll instance.
 <ion-content>
 
 <ion-list>
-  <ion-item ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
+  <ion-item *ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
 </ion-list>
 
 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
@@ -59,7 +59,7 @@ In case if your async operation returns promise you can utilize
 <ion-content>
 
 <ion-list>
-  <ion-itemngFor="let item of items">{{item}}</ion-item>
+  <ion-item *ngFor="let item of items">{{item}}</ion-item>
 </ion-list>
 
 <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">

core/src/components/item/test/buttons/index.html

@@ -98,7 +98,7 @@
 
         <ion-item>
           <ion-label>ion-item right fill="clear" button</ion-label>
-          <ion-button secondary fill="clear" slot="end" onclick="testClick(event)">
+          <ion-button color="secondary" fill="clear" slot="end" onclick="testClick(event)">
             Edit
           </ion-button>
         </ion-item>
@@ -112,13 +112,13 @@
           <ion-button fill="outline" slot="end" onclick="testClick(event)">View</ion-button>
         </ion-item>
 
-        <ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" onclick="testClick(event)">
+        <ion-item onclick="testClick(event)">
           <ion-avatar slot="start">
             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
           </ion-avatar>
-          <ion-label><h3>ng-for {{i}}</h3></ion-label>
+          <ion-label><h3>Avatar Start</h3></ion-label>
           <ion-badge slot="end">260k</ion-badge>
-        </ion-button>
+        </ion-item>
 
         <ion-item onclick="testClickOutsize(event)">
           <div>

core/src/components/item/test/text/index.html

@@ -107,8 +107,8 @@
           <ion-label>
             ion-label
           </ion-label>
-          <div item-content>
+          <div>
-            [item-content]
+            div
           </div>
         </ion-item>
 

core/src/components/reorder-group/readme.md

@@ -14,7 +14,7 @@ example, the following code works because the items are grouped in the
 
  ```html
  <ion-list reorder="true">
-   <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+   <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
  </ion-list>
  ```
 
@@ -23,7 +23,7 @@ However, the below list includes a header that shouldn't be reordered:
  ```html
  <ion-list reorder="true">
    <ion-list-header>Header</ion-list-header>
-   <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+   <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
  </ion-list>
  ```
 
@@ -34,7 +34,7 @@ group the reorderable items:
  <ion-list>
    <ion-list-header>Header</ion-list-header>
    <ion-item-group reorder="true">
-     <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+     <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
    </ion-item-group>
  </ion-list>
  ```
@@ -59,7 +59,7 @@ See usage below for some examples.
 <ion-list>
   <ion-list-header>Header</ion-list-header>
   <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
-    <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+    <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
   </ion-item-group>
 </ion-list>
 ```
@@ -109,7 +109,7 @@ Alternatevely you can execute helper function inside template:
 <ion-list>
   <ion-list-header>Header</ion-list-header>
   <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
-    <ion-itemngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+    <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
   </ion-item-group>
 </ion-list>
 ```

core/src/components/virtual-scroll/readme.md

@@ -270,9 +270,9 @@ and what data to give to the header template. The function must return
 
 
 The data that builds the templates within the virtual scroll.
-This is the same data that you'd pass to `*ngFor`. It's important to note
+It's important to note that when this data has changed, then the
-that when this data has changed, then the entire virtual scroll is reset,
+entire virtual scroll is reset, which is an expensive operation and
-which is an expensive operation and should be avoided if possible.
+should be avoided if possible.
 
 
 #### nodeHeight
@@ -374,9 +374,9 @@ and what data to give to the header template. The function must return
 
 
 The data that builds the templates within the virtual scroll.
-This is the same data that you'd pass to `*ngFor`. It's important to note
+It's important to note that when this data has changed, then the
-that when this data has changed, then the entire virtual scroll is reset,
+entire virtual scroll is reset, which is an expensive operation and
-which is an expensive operation and should be avoided if possible.
+should be avoided if possible.
 
 
 #### node-height

core/src/components/virtual-scroll/virtual-scroll.tsx

@@ -93,9 +93,9 @@ export class VirtualScroll {
 
   /**
    * The data that builds the templates within the virtual scroll.
-   * This is the same data that you'd pass to `*ngFor`. It's important to note
+   * It's important to note that when this data has changed, then the
-   * that when this data has changed, then the entire virtual scroll is reset,
+   * entire virtual scroll is reset, which is an expensive operation and
-   * which is an expensive operation and should be avoided if possible.
+   * should be avoided if possible.
    */
   @Prop() items: any[];