Skip to content

Commit b28cf02

Browse files
tawfiekliamdebeasi
authored andcommitted
feat(alert): add support for textarea (#16851)
resolves #14153
1 parent bef0f53 commit b28cf02

File tree

10 files changed

+83
-22
lines changed

10 files changed

+83
-22
lines changed

core/src/components/alert/alert-interface.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface AlertOptions {
2020
}
2121

2222
export interface AlertInput {
23-
type?: TextFieldTypes | 'checkbox' | 'radio';
23+
type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
2424
name?: string;
2525
placeholder?: string;
2626
value?: any;

core/src/components/alert/alert.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,3 +197,8 @@
197197
.alert-checkbox-inner {
198198
box-sizing: border-box;
199199
}
200+
201+
textarea.alert-input {
202+
min-height: $alert-input-min-height;
203+
resize: none;
204+
}

core/src/components/alert/alert.tsx

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -373,25 +373,46 @@ export class Alert implements ComponentInterface, OverlayInterface {
373373
}
374374
return (
375375
<div class="alert-input-group" aria-labelledby={labelledby}>
376-
{ inputs.map(i => (
377-
<div class="alert-input-wrapper">
378-
<input
379-
placeholder={i.placeholder}
380-
value={i.value}
381-
type={i.type}
382-
min={i.min}
383-
max={i.max}
384-
onInput={e => i.value = (e.target as any).value}
385-
id={i.id}
386-
disabled={i.disabled}
387-
tabIndex={0}
388-
class={{
389-
'alert-input': true,
390-
'alert-input-disabled': i.disabled || false
391-
}}
392-
/>
393-
</div>
394-
))}
376+
{ inputs.map(i => {
377+
if (i.type === 'textarea') {
378+
return (
379+
<div class="alert-input-wrapper">
380+
<textarea
381+
placeholder={i.placeholder}
382+
value={i.value}
383+
onInput={e => i.value = (e.target as any).value}
384+
id={i.id}
385+
disabled={i.disabled}
386+
tabIndex={0}
387+
class={{
388+
'alert-input': true,
389+
'alert-input-disabled': i.disabled || false
390+
}}
391+
/>
392+
</div>
393+
);
394+
} else {
395+
return (
396+
<div class="alert-input-wrapper">
397+
<input
398+
placeholder={i.placeholder}
399+
value={i.value}
400+
type={i.type}
401+
min={i.min}
402+
max={i.max}
403+
onInput={e => i.value = (e.target as any).value}
404+
id={i.id}
405+
disabled={i.disabled}
406+
tabIndex={0}
407+
class={{
408+
'alert-input': true,
409+
'alert-input-disabled': i.disabled || false
410+
}}
411+
/>
412+
</div>
413+
);
414+
}
415+
})}
395416
</div>
396417
);
397418
}

core/src/components/alert/alert.vars.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ $alert-button-line-height: 20px !default;
1414

1515
/// @prop - Font size of the alert button
1616
$alert-button-font-size: 14px !default;
17+
18+
/// @prop - Minimum height of a textarea in the alert
19+
$alert-input-min-height: 37px !default;

core/src/components/alert/readme.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `
1717

1818
### Inputs
1919

20-
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.
20+
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.
2121

2222

2323
<!-- Auto Generated Below -->
@@ -102,6 +102,13 @@ export class AlertExample {
102102
value: 'hello',
103103
placeholder: 'Placeholder 2'
104104
},
105+
// multiline input.
106+
{
107+
name: 'paragraph',
108+
id: 'paragraph',
109+
type: 'textarea',
110+
placeholder: 'Placeholder 3'
111+
},
105112
{
106113
name: 'name3',
107114
value: 'http://ionicframework.com',
@@ -346,6 +353,13 @@ function presentAlertPrompt() {
346353
value: 'hello',
347354
placeholder: 'Placeholder 2'
348355
},
356+
// multiline input.
357+
{
358+
name: 'paragraph',
359+
id: 'paragraph',
360+
type: 'textarea',
361+
placeholder: 'Placeholder 3'
362+
},
349363
{
350364
name: 'name3',
351365
value: 'http://ionicframework.com',

core/src/components/alert/test/basic/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,11 @@
131131
placeholder: 'Placeholder 3',
132132
disabled: true
133133
},
134+
{
135+
type: 'textarea',
136+
placeholder: 'Placeholder 4',
137+
value: 'Textarea hello'
138+
},
134139
{
135140
name: 'name3',
136141
type: 'text',

core/src/components/alert/test/preview/index.html

Whitespace-only changes.

core/src/components/alert/usage/angular.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,13 @@ export class AlertExample {
7373
value: 'hello',
7474
placeholder: 'Placeholder 2'
7575
},
76+
// multiline input.
77+
{
78+
name: 'paragraph',
79+
id: 'paragraph',
80+
type: 'textarea',
81+
placeholder: 'Placeholder 3'
82+
},
7683
{
7784
name: 'name3',
7885
value: 'http://ionicframework.com',

core/src/components/alert/usage/javascript.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@ function presentAlertPrompt() {
5858
value: 'hello',
5959
placeholder: 'Placeholder 2'
6060
},
61+
// multiline input.
62+
{
63+
name: 'paragraph',
64+
id: 'paragraph',
65+
type: 'textarea',
66+
placeholder: 'Placeholder 3'
67+
},
6168
{
6269
name: 'name3',
6370
value: 'http://ionicframework.com',

core/src/interface.d.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export * from './utils/overlays-interface';
3636
export * from './global/config';
3737
export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
3838

39-
// Global aux types
4039
export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time';
4140
export type Side = 'start' | 'end';
4241
export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';

0 commit comments

Comments
 (0)