From b28cf02ef3979c844c498a8e30ee977937984828 Mon Sep 17 00:00:00 2001
From: Tawfiek Khalaf <tawfiek.108@gmail.com>
Date: Mon, 11 Nov 2019 21:27:45 +0200
Subject: [PATCH] feat(alert): add support for textarea (#16851)

resolves #14153
---
 core/src/components/alert/alert-interface.ts  |  2 +-
 core/src/components/alert/alert.scss          |  5 ++
 core/src/components/alert/alert.tsx           | 59 +++++++++++++------
 core/src/components/alert/alert.vars.scss     |  3 +
 core/src/components/alert/readme.md           | 16 ++++-
 .../components/alert/test/basic/index.html    |  5 ++
 .../components/alert/test/preview/index.html  |  0
 core/src/components/alert/usage/angular.md    |  7 +++
 core/src/components/alert/usage/javascript.md |  7 +++
 core/src/interface.d.ts                       |  1 -
 10 files changed, 83 insertions(+), 22 deletions(-)
 create mode 100644 core/src/components/alert/test/preview/index.html

diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index 4b109ea99f..cee6826020 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -20,7 +20,7 @@ export interface AlertOptions {
 }
 
 export interface AlertInput {
-  type?: TextFieldTypes | 'checkbox' | 'radio';
+  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
   name?: string;
   placeholder?: string;
   value?: any;
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index e62adb3890..99f254e35d 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -197,3 +197,8 @@
 .alert-checkbox-inner {
   box-sizing: border-box;
 }
+
+textarea.alert-input {
+  min-height: $alert-input-min-height;
+  resize: none;
+}
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index da9058d323..e2e9f4b1a3 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -373,25 +373,46 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
     return (
       <div class="alert-input-group" aria-labelledby={labelledby}>
-        { inputs.map(i => (
-          <div class="alert-input-wrapper">
-            <input
-              placeholder={i.placeholder}
-              value={i.value}
-              type={i.type}
-              min={i.min}
-              max={i.max}
-              onInput={e => i.value = (e.target as any).value}
-              id={i.id}
-              disabled={i.disabled}
-              tabIndex={0}
-              class={{
-                'alert-input': true,
-                'alert-input-disabled': i.disabled || false
-              }}
-            />
-          </div>
-        ))}
+        { inputs.map(i => {
+          if (i.type === 'textarea') {
+            return (
+              <div class="alert-input-wrapper">
+                <textarea
+                  placeholder={i.placeholder}
+                  value={i.value}
+                  onInput={e => i.value = (e.target as any).value}
+                  id={i.id}
+                  disabled={i.disabled}
+                  tabIndex={0}
+                  class={{
+                    'alert-input': true,
+                    'alert-input-disabled': i.disabled || false
+                  }}
+                />
+              </div>
+            );
+          } else {
+            return (
+              <div class="alert-input-wrapper">
+                <input
+                  placeholder={i.placeholder}
+                  value={i.value}
+                  type={i.type}
+                  min={i.min}
+                  max={i.max}
+                  onInput={e => i.value = (e.target as any).value}
+                  id={i.id}
+                  disabled={i.disabled}
+                  tabIndex={0}
+                  class={{
+                    'alert-input': true,
+                    'alert-input-disabled': i.disabled || false
+                  }}
+                />
+              </div>
+            );
+          }
+        })}
       </div>
     );
   }
diff --git a/core/src/components/alert/alert.vars.scss b/core/src/components/alert/alert.vars.scss
index b043e5c7cd..eed27be33b 100644
--- a/core/src/components/alert/alert.vars.scss
+++ b/core/src/components/alert/alert.vars.scss
@@ -14,3 +14,6 @@ $alert-button-line-height:        20px !default;
 
 /// @prop - Font size of the alert button
 $alert-button-font-size:          14px !default;
+
+/// @prop - Minimum height of a textarea in the alert
+$alert-input-min-height:          37px !default;
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index d83064833b..cf8c44e457 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -17,7 +17,7 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `
 
 ### Inputs
 
-Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
 
 
 <!-- Auto Generated Below -->
@@ -102,6 +102,13 @@ export class AlertExample {
           value: 'hello',
           placeholder: 'Placeholder 2'
         },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
         {
           name: 'name3',
           value: 'http://ionicframework.com',
@@ -346,6 +353,13 @@ function presentAlertPrompt() {
       value: 'hello',
       placeholder: 'Placeholder 2'
     },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
     {
       name: 'name3',
       value: 'http://ionicframework.com',
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 657858a6ec..cfa15748b5 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -131,6 +131,11 @@
             placeholder: 'Placeholder 3',
             disabled: true
           },
+          {
+              type: 'textarea',
+              placeholder: 'Placeholder 4',
+              value: 'Textarea hello'
+          },
           {
             name: 'name3',
             type: 'text',
diff --git a/core/src/components/alert/test/preview/index.html b/core/src/components/alert/test/preview/index.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md
index d40bafdbd1..14a8f06e3a 100644
--- a/core/src/components/alert/usage/angular.md
+++ b/core/src/components/alert/usage/angular.md
@@ -73,6 +73,13 @@ export class AlertExample {
           value: 'hello',
           placeholder: 'Placeholder 2'
         },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
         {
           name: 'name3',
           value: 'http://ionicframework.com',
diff --git a/core/src/components/alert/usage/javascript.md b/core/src/components/alert/usage/javascript.md
index 0edf9b0331..496d1ffdb5 100644
--- a/core/src/components/alert/usage/javascript.md
+++ b/core/src/components/alert/usage/javascript.md
@@ -58,6 +58,13 @@ function presentAlertPrompt() {
       value: 'hello',
       placeholder: 'Placeholder 2'
     },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
     {
       name: 'name3',
       value: 'http://ionicframework.com',
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index b066e44aab..39d9df4ed6 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -36,7 +36,6 @@ export * from './utils/overlays-interface';
 export * from './global/config';
 export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
 
-// Global aux types
 export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time';
 export type Side = 'start' | 'end';
 export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';