docs(picker): add some basic documentation for picker

packages/core/src/components/picker/picker.tsx

@@ -31,8 +31,63 @@ export class Picker {
   private durationTimeout: any;
   private mode: string;
 
+  pickerId: number;
+
   @Element() private el: HTMLElement;
 
+  @State() private showSpinner: boolean = null;
+  @State() private spinner: string;
+
+  @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
+  @Prop({ context: 'config' }) config: Config;
+  @Prop({ context: 'dom' }) dom: DomController;
+
+  /**
+   * Animation to use when the picker is presented.
+   */
+  @Prop() enterAnimation: AnimationBuilder;
+
+  /**
+   * Animation to use when the picker is dismissed.
+   */
+  @Prop() leaveAnimation: AnimationBuilder;
+
+  /**
+   * Array of buttons to be displayed at the top of the picker.
+   */
+  @Prop() buttons: PickerButton[] = [];
+
+  /**
+   * Array of columns to be displayed in the picker.
+   */
+  @Prop() columns: PickerColumn[] = [];
+
+  /**
+   * Additional classes to apply for custom CSS. If multiple classes are
+   * provided they should be separated by spaces.
+   */
+  @Prop() cssClass: string;
+
+  /**
+   * Number of milliseconds to wait before dismissing the picker.
+   */
+  @Prop() duration: number;
+
+  /**
+   * If true, a backdrop will be displayed behind the picker. Defaults to `true`.
+   */
+  @Prop() showBackdrop = true;
+
+  /**
+   * If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
+   */
+  @Prop() enableBackdropDismiss = true;
+
+  /**
+   * If true, the picker will animate. Defaults to `true`.
+   */
+  @Prop() willAnimate = true;
+
   /**
    * Emitted after the picker has loaded.
    */
@@ -63,27 +118,9 @@ export class Picker {
    */
   @Event() ionPickerDidUnload: EventEmitter<PickerEventDetail>;
 
-  @State() private showSpinner: boolean = null;
+  /**
-  @State() private spinner: string;
+   * Present the picker overlay after it has been created.
-
+   */
-  @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
-  @Prop({ context: 'config' }) config: Config;
-  @Prop({ context: 'dom' }) dom: DomController;
-
-  @Prop() cssClass: string;
-  @Prop() content: string;
-  @Prop() dismissOnPageChange = false;
-  @Prop() duration: number;
-  @Prop() enterAnimation: AnimationBuilder;
-  @Prop() leaveAnimation: AnimationBuilder;
-  @Prop() pickerId: number;
-  @Prop() showBackdrop = true;
-  @Prop() enableBackdropDismiss = true;
-  @Prop() willAnimate = true;
-
-  @Prop() buttons: PickerButton[] = [];
-  @Prop() columns: PickerColumn[] = [];
-
   @Method()
   present() {
     if (this.animation) {
@@ -113,6 +150,9 @@ export class Picker {
     });
   }
 
+  /**
+   * Dismiss the picker overlay after it has been presented.
+   */
   @Method()
   dismiss(data?: any, role?: string) {
     clearTimeout(this.durationTimeout);
@@ -223,17 +263,11 @@ export class Picker {
     return selected;
   }
 
-  /**
-   * @param {any} button Picker toolbar button
-   */
   @Method()
   addButton(button: any) {
     this.buttons.push(button);
   }
 
-  /**
-   * @param {PickerColumn} column Picker toolbar button
-   */
   @Method()
   addColumn(column: PickerColumn) {
     this.columns.push(column);
@@ -307,31 +341,13 @@ export class Picker {
     //   return column;
     // });
 
-    // RENDER TODO
-    // <ion-backdrop (click)="bdClick()"></ion-backdrop>
-    // <div class="picker-wrapper">
-    //   <div class="picker-toolbar">
-    //     <div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
-    //       <ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
-    //         {{b.text}}
-    //       </ion-button>
-    //     </div>
-    //   </div>
-    //   <div class="picker-columns">
-    //     <div class="picker-above-highlight"></div>
-    //     <div *ngFor="let c of d.columns" [col]="c" class="picker-col" (ionChange)="_colChange($event)"></div>
-    //     <div class="picker-below-highlight"></div>
-    //   </div>
-    // </div>
-
     return [
       <ion-backdrop
         onClick={this.backdropClick.bind(this)}
         class={{
           'picker-backdrop': true,
           'hide-backdrop': !this.showBackdrop
-        }}
+        }}></ion-backdrop>,
-      />,
       <div class='picker-wrapper' role='dialog'>
         <div class='picker-toolbar'>
           {buttons.map(b =>

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

@@ -1,5 +1,7 @@
 # ion-picker
 
+A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
+
 
 
 <!-- Auto Generated Below -->
@@ -11,61 +13,65 @@
 
 
 
+Array of buttons to be displayed at the top of the picker.
+
 
 #### columns
 
 
 
-
+Array of columns to be displayed in the picker.
-#### content
-
-string
 
 
 #### cssClass
 
 string
 
-
+Additional classes to apply for custom CSS. If multiple classes are
-#### dismissOnPageChange
+provided they should be separated by spaces.
-
-boolean
 
 
 #### duration
 
 number
 
+Number of milliseconds to wait before dismissing the picker.
+
 
 #### enableBackdropDismiss
 
 boolean
 
+If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
+
 
 #### enterAnimation
 
 
 
+Animation to use when the picker is presented.
+
 
 #### leaveAnimation
 
 
 
-
+Animation to use when the picker is dismissed.
-#### pickerId
-
-number
 
 
 #### showBackdrop
 
 boolean
 
+If true, a backdrop will be displayed behind the picker. Defaults to `true`.
+
 
 #### willAnimate
 
 boolean
 
+If true, the picker will animate. Defaults to `true`.
+
 
 ## Attributes
 
@@ -73,61 +79,65 @@ boolean
 
 
 
+Array of buttons to be displayed at the top of the picker.
+
 
 #### columns
 
 
 
-
+Array of columns to be displayed in the picker.
-#### content
-
-string
 
 
 #### css-class
 
 string
 
-
+Additional classes to apply for custom CSS. If multiple classes are
-#### dismiss-on-page-change
+provided they should be separated by spaces.
-
-boolean
 
 
 #### duration
 
 number
 
+Number of milliseconds to wait before dismissing the picker.
+
 
 #### enable-backdrop-dismiss
 
 boolean
 
+If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
+
 
 #### enter-animation
 
 
 
+Animation to use when the picker is presented.
+
 
 #### leave-animation
 
 
 
-
+Animation to use when the picker is dismissed.
-#### picker-id
-
-number
 
 
 #### show-backdrop
 
 boolean
 
+If true, a backdrop will be displayed behind the picker. Defaults to `true`.
+
 
 #### will-animate
 
 boolean
 
+If true, the picker will animate. Defaults to `true`.
+
 
 ## Events
 
@@ -171,6 +181,8 @@ Emitted before the picker has presented.
 
 #### dismiss()
 
+Dismiss the picker overlay after it has been presented.
+
 
 #### getColumn()
 
@@ -180,6 +192,8 @@ Emitted before the picker has presented.
 
 #### present()
 
+Present the picker overlay after it has been created.
+
 
 
 ----------------------------------------------