feat(alert): add support for textarea (#16851)

resolves #14153

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;

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;
+}

core/src/components/alert/alert.tsx

@@ -373,7 +373,26 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
     return (
       <div class="alert-input-group" aria-labelledby={labelledby}>
-        { inputs.map(i => (
+        { 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}
@@ -391,7 +410,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
                   }}
                 />
               </div>
-        ))}
+            );
+          }
+        })}
       </div>
     );
   }

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;

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',

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',

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',

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',

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';