Skip to content

Commit b57f4be

Browse files
brandyscarneybrandyscarney
authored
feat(textarea): add ionic theme design with medium size (#29776)
- Adds the typography styles for the default size (medium) - Adds the styles for the outline fill - Adds the styles for the label & helper text - Adds the spacing for the label, textarea, counter and helper text
1 parent 59ba289 commit b57f4be

23 files changed

+470
-104
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2280,6 +2280,7 @@ ion-textarea,prop,readonly,boolean,false,false,false
22802280
ion-textarea,prop,required,boolean,false,false,false
22812281
ion-textarea,prop,rows,number | undefined,undefined,false,false
22822282
ion-textarea,prop,shape,"round" | undefined,undefined,false,false
2283+
ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
22832284
ion-textarea,prop,spellcheck,boolean,false,false,false
22842285
ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false
22852286
ion-textarea,prop,value,null | string | undefined,'',false,false

‎core/src/components.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3620,6 +3620,10 @@ export namespace Components {
36203620
* The shape of the textarea. If "round" it will have an increased border radius.
36213621
*/
36223622
"shape"?: 'round';
3623+
/**
3624+
* The size of the textarea. If "large", it will have an increased height. By default the size is "medium". This property only applies to the `"ionic"` theme.
3625+
*/
3626+
"size"?: 'small' | 'medium' | 'large';
36233627
/**
36243628
* If `true`, the element will have its spelling and grammar checked.
36253629
*/
@@ -8976,6 +8980,10 @@ declare namespace LocalJSX {
89768980
* The shape of the textarea. If "round" it will have an increased border radius.
89778981
*/
89788982
"shape"?: 'round';
8983+
/**
8984+
* The size of the textarea. If "large", it will have an increased height. By default the size is "medium". This property only applies to the `"ionic"` theme.
8985+
*/
8986+
"size"?: 'small' | 'medium' | 'large';
89798987
/**
89808988
* If `true`, the element will have its spelling and grammar checked.
89818989
*/

‎core/src/components/textarea/test/basic/index.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,18 @@
2222
</ion-toolbar>
2323
</ion-header>
2424

25-
<ion-content id="content">
26-
<ion-textarea label="Textarea"></ion-textarea>
25+
<ion-content id="content" class="ion-padding">
26+
<ion-textarea
27+
fill="outline"
28+
label="Label"
29+
label-placement="stacked"
30+
placeholder="Placeholder"
31+
helper-text="Helper message"
32+
counter="true"
33+
maxlength="999"
34+
>
35+
<ion-icon slot="end" name="square-outline"></ion-icon>
36+
</ion-textarea>
2737
</ion-content>
2838
</ion-app>
2939
</body>

‎core/src/components/textarea/test/size/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Textarea - Size</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<style>
16+
.grid {
17+
display: grid;
18+
grid-template-columns: repeat(2, minmax(250px, 1fr));
19+
grid-row-gap: 20px;
20+
grid-column-gap: 20px;
21+
}
22+
23+
h2 {
24+
font-size: 12px;
25+
font-weight: normal;
26+
27+
color: #6f7378;
28+
29+
margin-top: 10px;
30+
padding-left: 16px;
31+
}
32+
33+
@media screen and (max-width: 800px) {
34+
.grid {
35+
grid-template-columns: 1fr;
36+
padding: 0;
37+
}
38+
}
39+
</style>
40+
</head>
41+
42+
<body>
43+
<ion-app>
44+
<ion-header>
45+
<ion-toolbar>
46+
<ion-title>Textarea - Size</ion-title>
47+
</ion-toolbar>
48+
</ion-header>
49+
50+
<ion-content id="content" class="ion-padding">
51+
<div class="grid">
52+
<div class="grid-item">
53+
<h2>No Fill: No Size</h2>
54+
<ion-textarea label="Label" label-placement="stacked" placeholder="Placeholder"></ion-textarea>
55+
</div>
56+
57+
<div class="grid-item">
58+
<h2>Outline: No Size</h2>
59+
<ion-textarea fill="outline" label="Label" label-placement="stacked"></ion-textarea>
60+
</div>
61+
62+
<div class="grid-item">
63+
<h2>No Fill: No Size, Round Shape</h2>
64+
<ion-textarea shape="round" label="Label" label-placement="stacked"></ion-textarea>
65+
</div>
66+
67+
<div class="grid-item">
68+
<h2>Outline: No Size, Round Shape</h2>
69+
<ion-textarea fill="outline" shape="round" label="Label" label-placement="stacked"></ion-textarea>
70+
</div>
71+
</div>
72+
</ion-content>
73+
</ion-app>
74+
</body>
75+
</html>

‎core/src/components/textarea/test/size/textarea.e2e.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* Size is only available in the Ionic theme
6+
*/
7+
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
8+
test.describe(title('textarea: size'), () => {
9+
test.describe('textarea: size medium', () => {
10+
test('should not have visual regressions', async ({ page }) => {
11+
await page.setContent(
12+
`
13+
<ion-textarea
14+
label="Email"
15+
value="[email protected]"
16+
></ion-textarea>
17+
`,
18+
config
19+
);
20+
21+
const textarea = page.locator('ion-textarea');
22+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium`));
23+
});
24+
test('should render correctly with stacked label', async ({ page }) => {
25+
await page.setContent(
26+
`
27+
<ion-textarea
28+
label="Email"
29+
label-placement="stacked"
30+
value="[email protected]"
31+
></ion-textarea>
32+
`,
33+
config
34+
);
35+
36+
const textarea = page.locator('ion-textarea');
37+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-label-stacked`));
38+
});
39+
test('should not have visual regressions with fill outline', async ({ page }) => {
40+
await page.setContent(
41+
`
42+
<ion-textarea
43+
fill="outline"
44+
label="Email"
45+
label-placement="stacked"
46+
value="[email protected]"
47+
></ion-textarea>
48+
`,
49+
config
50+
);
51+
52+
const textarea = page.locator('ion-textarea');
53+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-outline`));
54+
});
55+
});
56+
});
57+
});

‎core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.16 KB
Loading

‎core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

3.34 KB
Loading

‎core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png‎

2.12 KB
Loading

‎core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.22 KB
Loading

‎core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

3.68 KB
Loading

0 commit comments

Comments
 (0)