chore(input): move textarea to separate directory

packages/core/src/components.d.ts

@@ -1172,52 +1172,6 @@ declare global {
 }
 
 
-import {
-  Textarea as IonTextarea
-} from './components/input/textarea';
-
-declare global {
-  interface HTMLIonTextareaElement extends IonTextarea, HTMLElement {
-  }
-  var HTMLIonTextareaElement: {
-    prototype: HTMLIonTextareaElement;
-    new (): HTMLIonTextareaElement;
-  };
-  interface HTMLElementTagNameMap {
-    "ion-textarea": HTMLIonTextareaElement;
-  }
-  interface ElementTagNameMap {
-    "ion-textarea": HTMLIonTextareaElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "ion-textarea": JSXElements.IonTextareaAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface IonTextareaAttributes extends HTMLAttributes {
-      
-        autocapitalize?: string,
-        autocomplete?: string,
-        autofocus?: boolean,
-        clearOnEdit?: boolean,
-        disabled?: boolean,
-        maxlength?: number,
-        minlength?: number,
-        name?: string,
-        placeholder?: string,
-        readonly?: boolean,
-        required?: boolean,
-        spellcheck?: boolean,
-        cols?: number,
-        rows?: number,
-        wrap?: string,
-        value?: string
-    }
-  }
-}
-
-
 import {
   ItemDivider as IonItemDivider
 } from './components/item-divider/item-divider';
@@ -3069,6 +3023,52 @@ declare global {
 }
 
 
+import {
+  Textarea as IonTextarea
+} from './components/textarea/textarea';
+
+declare global {
+  interface HTMLIonTextareaElement extends IonTextarea, HTMLElement {
+  }
+  var HTMLIonTextareaElement: {
+    prototype: HTMLIonTextareaElement;
+    new (): HTMLIonTextareaElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-textarea": HTMLIonTextareaElement;
+  }
+  interface ElementTagNameMap {
+    "ion-textarea": HTMLIonTextareaElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-textarea": JSXElements.IonTextareaAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonTextareaAttributes extends HTMLAttributes {
+      
+        autocapitalize?: string,
+        autocomplete?: string,
+        autofocus?: boolean,
+        clearOnEdit?: boolean,
+        disabled?: boolean,
+        maxlength?: number,
+        minlength?: number,
+        name?: string,
+        placeholder?: string,
+        readonly?: boolean,
+        required?: boolean,
+        spellcheck?: boolean,
+        cols?: number,
+        rows?: number,
+        wrap?: string,
+        value?: string
+    }
+  }
+}
+
+
 import {
   Thumbnail as IonThumbnail
 } from './components/thumbnail/thumbnail';

packages/core/src/components/input/input.tsx

@@ -1,9 +1,9 @@
 import { Component, Element, Event, EventEmitter, Prop, PropDidChange } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
-
 import { InputComponent } from './input-base';
 
+
 @Component({
   tag: 'ion-input',
   styleUrls: {

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

@@ -0,0 +1,220 @@
+# ion-textarea
+
+`ion-textarea` is used for multi-line text inputs. Ionic still
+uses an actual `<textarea>` HTML element within the component;
+however, with Ionic wrapping the native HTML text area element, Ionic
+is able to better handle the user experience and interactivity.
+
+Note that `<ion-textarea>` must load its value from the `value` or
+`[(ngModel)]` attribute. Unlike the native `<textarea>` element,
+`<ion-textarea>` does not support loading its value from the
+textarea's inner content.
+
+When requiring only a single-line text input, we recommend using
+`<ion-input>` instead.
+
+```html
+ <ion-item>
+   <ion-label>Comments</ion-label>
+   <ion-textarea></ion-textarea>
+ </ion-item>
+
+ <ion-item>
+   <ion-label stacked>Message</ion-label>
+   <ion-textarea [(ngModel)]="msg"></ion-textarea>
+ </ion-item>
+
+ <ion-item>
+   <ion-label floating>Description</ion-label>
+   <ion-textarea></ion-textarea>
+ </ion-item>
+
+<ion-item>
+   <ion-label>Long Description</ion-label>
+   <ion-textarea rows="6" placeholder="enter long description here..."></ion-textarea>
+ </ion-item>
+```
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### autocapitalize
+
+string
+
+
+#### autocomplete
+
+string
+
+
+#### autofocus
+
+boolean
+
+
+#### clearOnEdit
+
+boolean
+
+
+#### cols
+
+number
+
+
+#### disabled
+
+boolean
+
+
+#### maxlength
+
+number
+
+
+#### minlength
+
+number
+
+
+#### name
+
+string
+
+
+#### placeholder
+
+string
+
+
+#### readonly
+
+boolean
+
+
+#### required
+
+boolean
+
+
+#### rows
+
+number
+
+
+#### spellcheck
+
+boolean
+
+
+#### value
+
+string
+
+
+#### wrap
+
+string
+
+
+## Attributes
+
+#### autocapitalize
+
+string
+
+
+#### autocomplete
+
+string
+
+
+#### autofocus
+
+boolean
+
+
+#### clearOnEdit
+
+boolean
+
+
+#### cols
+
+number
+
+
+#### disabled
+
+boolean
+
+
+#### maxlength
+
+number
+
+
+#### minlength
+
+number
+
+
+#### name
+
+string
+
+
+#### placeholder
+
+string
+
+
+#### readonly
+
+boolean
+
+
+#### required
+
+boolean
+
+
+#### rows
+
+number
+
+
+#### spellcheck
+
+boolean
+
+
+#### value
+
+string
+
+
+#### wrap
+
+string
+
+
+## Events
+
+#### ionBlur
+
+
+#### ionFocus
+
+
+#### ionStyle
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

packages/core/src/components/textarea/test/basic/e2e.js

@@ -1,7 +1,7 @@
 const { register, navigate } = require('../../../../../scripts/e2e');
 
-describe('input: textarea', () => {
+describe('textarea: basic', () => {
 
-  register('navigates', navigate('http://localhost:3333/src/components/input/test/textarea'));
+  register('navigates', navigate('http://localhost:3333/src/components/textarea/test/basic'));
 
 });

packages/core/src/components/textarea/textarea.tsx

@@ -1,58 +1,21 @@
 import { Component, Element, Event, EventEmitter, Prop, PropDidChange } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
-
-import { TextareaComponent } from './input-base';
+import { TextareaComponent } from '../input/input-base';
 
 
-/**
- * @name TextArea
- * @description
- *
- * `ion-textarea` is used for multi-line text inputs. Ionic still
- * uses an actual `<textarea>` HTML element within the component;
- * however, with Ionic wrapping the native HTML text area element, Ionic
- * is able to better handle the user experience and interactivity.
- *
- * Note that `<ion-textarea>` must load its value from the `value` or
- * `[(ngModel)]` attribute. Unlike the native `<textarea>` element,
- * `<ion-textarea>` does not support loading its value from the
- * textarea's inner content.
- *
- * When requiring only a single-line text input, we recommend using
- * `<ion-input>` instead.
- *
- * @usage
- * ```html
- *  <ion-item>
- *    <ion-label>Comments</ion-label>
- *    <ion-textarea></ion-textarea>
- *  </ion-item>
- *
- *  <ion-item>
- *    <ion-label stacked>Message</ion-label>
- *    <ion-textarea [(ngModel)]="msg"></ion-textarea>
- *  </ion-item>
- *
- *  <ion-item>
- *    <ion-label floating>Description</ion-label>
- *    <ion-textarea></ion-textarea>
- *  </ion-item>
- *
- * <ion-item>
- *    <ion-label>Long Description</ion-label>
- *    <ion-textarea rows="6" placeholder="enter long description here..."></ion-textarea>
- *  </ion-item>
- * ```
- *
- * @demo /docs/demos/src/textarea/
- */
 @Component({
   tag: 'ion-textarea',
-  styleUrls: {
-    ios: 'input.ios.scss',
-    md: 'input.md.scss'
-  },
+
+  // TODO: separate textarea from input scss
+  // right now we're cheating by knowing ion-input
+  // css is bundled with ion-textarea
+
+  // styleUrls: {
+  //   ios: 'input.ios.scss',
+  //   md: 'input.md.scss'
+  // },
+
   host: {
     theme: 'input'
   }