docs(toast): add toast documentation and match style guide

packages/core/src/components/toast/readme.md

@@ -1,5 +1,41 @@
 # ion-toast
 
+A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
+
+### Creating
+
+All of the toast options should be passed in the first argument of the create method: `create(opts)`. The message to display should be passed in the `message` property. The `showCloseButton` option can be set to true in order to display a close button on the toast. See the properties below for all available options.
+
+### Positioning
+
+Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
+
+### Dismissing
+
+The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If `showCloseButton` is set to true, then the close button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
+
+
+```html
+<ion-button onClick="presentToast()">
+  Show Toast
+</ion-button>
+```
+
+```javascript
+async function presentToast() {
+  const toastController = document.querySelector('ion-toast-controller');
+  await toastController.componentOnReady();
+
+  const toastElement = await toastController.create({
+    message: 'click to close',
+    duration: 300,
+    position: 'top',
+    showCloseButton: true,
+    closeButtonText: 'closing time'
+  });
+  return await toastElement.present();
+}
+```
 
 
 <!-- Auto Generated Below -->
@@ -11,61 +47,80 @@
 
 string
 
+Text to display in the close button.
+
 
 #### cssClass
 
 string
 
+Additional classes to apply for custom CSS. If multiple classes are
+provided they should be separated by spaces.
+
 
 #### dismissOnPageChange
 
 boolean
 
+If true, the toast will dismiss when the page changes. Defaults to `false`.
+
 
 #### duration
 
 number
 
+How many milliseconds to wait before hiding the toast. By default, it will show
+until `dismiss()` is called.
+
 
 #### enterAnimation
 
 
 
+Animation to use when the toast is presented.
+
 
 #### leaveAnimation
 
 
 
+Animation to use when the toast is dismissed.
+
 
 #### message
 
 string
 
+Message to be shown in the toast.
+
 
 #### position
 
 string
 
+The position of the toast on the screen. Possible values: "top", "middle", "bottom".
+
 
 #### showCloseButton
 
 boolean
 
-
+If true, the close button will be displayed. Defaults to `false`.
-#### toastId
-
-number
 
 
 #### translucent
 
 boolean
 
+If true, the toast will be translucent. Defaults to `false`.
+
 
 #### willAnimate
 
 boolean
 
+If true, the toast will animate. Defaults to `true`.
+
 
 ## Attributes
 
@@ -73,61 +128,80 @@ boolean
 
 string
 
+Text to display in the close button.
+
 
 #### css-class
 
 string
 
+Additional classes to apply for custom CSS. If multiple classes are
+provided they should be separated by spaces.
+
 
 #### dismiss-on-page-change
 
 boolean
 
+If true, the toast will dismiss when the page changes. Defaults to `false`.
+
 
 #### duration
 
 number
 
+How many milliseconds to wait before hiding the toast. By default, it will show
+until `dismiss()` is called.
+
 
 #### enter-animation
 
 
 
+Animation to use when the toast is presented.
+
 
 #### leave-animation
 
 
 
+Animation to use when the toast is dismissed.
+
 
 #### message
 
 string
 
+Message to be shown in the toast.
+
 
 #### position
 
 string
 
+The position of the toast on the screen. Possible values: "top", "middle", "bottom".
+
 
 #### show-close-button
 
 boolean
 
-
+If true, the close button will be displayed. Defaults to `false`.
-#### toast-id
-
-number
 
 
 #### translucent
 
 boolean
 
+If true, the toast will be translucent. Defaults to `false`.
+
 
 #### will-animate
 
 boolean
 
+If true, the toast will animate. Defaults to `true`.
+
 
 ## Events
 
@@ -165,9 +239,13 @@ Emitted before the toast has presented.
 
 #### dismiss()
 
+Dismiss the toast overlay after it has been presented.
+
 
 #### present()
 
+Present the toast overlay after it has been created.
+
 
 
 ----------------------------------------------

packages/core/src/components/toast/toast.tsx

@@ -21,12 +21,75 @@ import mdLeaveAnimation from './animations/md.leave';
   }
 })
 export class Toast {
+  private animation: Animation | null;
+
+  toastId: number;
+
+  @Element() private el: HTMLElement;
+
   mode: string;
   color: string;
 
-  private animation: Animation | null;
+  @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
+  @Prop({ context: 'config' }) config: Config;
+  @Prop({ context: 'dom' }) dom: DomController;
 
-  @Element() private el: HTMLElement;
+  /**
+   * Animation to use when the toast is presented.
+   */
+  @Prop() enterAnimation: AnimationBuilder;
+
+  /**
+   * Animation to use when the toast is dismissed.
+   */
+  @Prop() leaveAnimation: AnimationBuilder;
+
+  /**
+   * Text to display in the close button.
+   */
+  @Prop() closeButtonText: string;
+
+  /**
+   * Additional classes to apply for custom CSS. If multiple classes are
+   * provided they should be separated by spaces.
+   */
+  @Prop() cssClass: string;
+
+  /**
+   * If true, the toast will dismiss when the page changes. Defaults to `false`.
+   */
+  @Prop() dismissOnPageChange: boolean;
+
+  /**
+   * How many milliseconds to wait before hiding the toast. By default, it will show
+   * until `dismiss()` is called.
+   */
+  @Prop() duration: number;
+
+  /**
+   * Message to be shown in the toast.
+   */
+  @Prop() message: string;
+
+  /**
+   * The position of the toast on the screen. Possible values: "top", "middle", "bottom".
+   */
+  @Prop() position: string;
+
+  /**
+   * If true, the close button will be displayed. Defaults to `false`.
+   */
+  @Prop() showCloseButton = false;
+
+  /**
+   * If true, the toast will be translucent. Defaults to `false`.
+   */
+  @Prop() translucent = false;
+
+  /**
+   * If true, the toast will animate. Defaults to `true`.
+   */
+  @Prop() willAnimate = true;
 
   /**
    * Emitted after the toast has loaded.
@@ -58,24 +121,9 @@ export class Toast {
    */
   @Event() ionToastDidUnload: EventEmitter<ToastEventDetail>;
 
-  @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
+  /**
-  @Prop({ context: 'config' }) config: Config;
+   * Present the toast overlay after it has been created.
-  @Prop({ context: 'dom' }) dom: DomController;
+   */
-
-  @Prop() message: string;
-  @Prop() cssClass: string;
-  @Prop() duration: number;
-  @Prop() showCloseButton: boolean;
-  @Prop() closeButtonText: string;
-  @Prop() dismissOnPageChange: boolean;
-  @Prop() position: string;
-  @Prop() translucent = false;
-  @Prop() toastId: number;
-  @Prop() willAnimate = true;
-
-  @Prop() enterAnimation: AnimationBuilder;
-  @Prop() leaveAnimation: AnimationBuilder;
-
   @Method()
   present() {
     if (this.animation) {
@@ -102,6 +150,9 @@ export class Toast {
     });
   }
 
+  /**
+   * Dismiss the toast overlay after it has been presented.
+   */
   @Method()
   dismiss(data?: any, role?: string) {
     if (this.animation) {