Skip to content

Commit ca4c0a5

Browse files
brandyscarneybrandyscarney
authored
feat(textarea): add support for the shape property with soft, round and rectangular options (#29788)
- Adds support for `"soft"`, `"round"` and `"rectangular"` shapes in the Ionic theme, with `"round"` as the default - Adds a `shape` folder and test with examples - Adds an e2e test with screenshots for all shapes
1 parent 0d67c83 commit ca4c0a5

25 files changed

+238
-46
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2279,7 +2279,7 @@ ion-textarea,prop,placeholder,string | undefined,undefined,false,false
22792279
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
2282-
ion-textarea,prop,shape,"round" | undefined,undefined,false,false
2282+
ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
22832283
ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
22842284
ion-textarea,prop,spellcheck,boolean,false,false,false
22852285
ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false

‎core/src/components.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3617,9 +3617,9 @@ export namespace Components {
36173617
*/
36183618
"setFocus": () => Promise<void>;
36193619
/**
3620-
* The shape of the textarea. If "round" it will have an increased border radius.
3620+
* Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
36213621
*/
3622-
"shape"?: 'round';
3622+
"shape"?: 'soft' | 'round' | 'rectangular';
36233623
/**
36243624
* The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
36253625
*/
@@ -8977,9 +8977,9 @@ declare namespace LocalJSX {
89778977
*/
89788978
"rows"?: number;
89798979
/**
8980-
* The shape of the textarea. If "round" it will have an increased border radius.
8980+
* Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
89818981
*/
8982-
"shape"?: 'round';
8982+
"shape"?: 'soft' | 'round' | 'rectangular';
89838983
/**
89848984
* The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
89858985
*/

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Textarea - Shape</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+
}
31+
32+
@media screen and (max-width: 800px) {
33+
.grid {
34+
grid-template-columns: 1fr;
35+
padding: 0;
36+
}
37+
}
38+
</style>
39+
</head>
40+
41+
<body>
42+
<ion-app>
43+
<ion-header>
44+
<ion-toolbar>
45+
<ion-title>Textarea - Shape</ion-title>
46+
</ion-toolbar>
47+
</ion-header>
48+
49+
<ion-content id="content" class="ion-padding">
50+
<div class="grid">
51+
<div class="grid-item">
52+
<h2>Default</h2>
53+
<ion-textarea
54+
fill="outline"
55+
label="Label"
56+
label-placement="stacked"
57+
placeholder="Placeholder"
58+
></ion-textarea>
59+
</div>
60+
61+
<div class="grid-item">
62+
<h2>Round</h2>
63+
<ion-textarea
64+
shape="round"
65+
fill="outline"
66+
label="Label"
67+
label-placement="stacked"
68+
placeholder="Placeholder"
69+
></ion-textarea>
70+
</div>
71+
72+
<div class="grid-item">
73+
<h2>Soft</h2>
74+
<ion-textarea
75+
shape="soft"
76+
fill="outline"
77+
label="Label"
78+
label-placement="stacked"
79+
placeholder="Placeholder"
80+
></ion-textarea>
81+
</div>
82+
83+
<div class="grid-item">
84+
<h2>Rectangular</h2>
85+
<ion-textarea
86+
shape="rectangular"
87+
fill="outline"
88+
label="Label"
89+
label-placement="stacked"
90+
placeholder="Placeholder"
91+
></ion-textarea>
92+
</div>
93+
</div>
94+
</ion-content>
95+
</ion-app>
96+
</body>
97+
</html>

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior does not vary across directions
6+
* The round shape is only available in the Ionic and Material Design themes
7+
*/
8+
configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
9+
test.describe(title('textarea: shape'), () => {
10+
test.describe('default', () => {
11+
test('should not have visual regressions', async ({ page }) => {
12+
await page.setContent(
13+
`
14+
<ion-textarea
15+
fill="outline"
16+
label="Email"
17+
label-placement="stacked"
18+
value="[email protected]"
19+
></ion-textarea>
20+
`,
21+
config
22+
);
23+
24+
const textarea = page.locator('ion-textarea');
25+
26+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-default`));
27+
});
28+
});
29+
30+
test.describe('round', () => {
31+
test('should not have visual regressions', async ({ page }) => {
32+
await page.setContent(
33+
`
34+
<ion-textarea
35+
shape="round"
36+
fill="outline"
37+
label="Email"
38+
label-placement="stacked"
39+
value="[email protected]"
40+
></ion-textarea>
41+
`,
42+
config
43+
);
44+
45+
const textarea = page.locator('ion-textarea');
46+
47+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-round`));
48+
});
49+
});
50+
});
51+
});
52+
53+
/**
54+
* The soft and rectangular shapes are only available in the Ionic theme
55+
*/
56+
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
57+
test.describe(title('textarea: shape'), () => {
58+
test.describe('soft', () => {
59+
test('should not have visual regressions', async ({ page }) => {
60+
await page.setContent(
61+
`
62+
<ion-textarea
63+
shape="soft"
64+
fill="outline"
65+
label="Email"
66+
label-placement="stacked"
67+
value="[email protected]"
68+
></ion-textarea>
69+
`,
70+
config
71+
);
72+
73+
const textarea = page.locator('ion-textarea');
74+
75+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-soft`));
76+
});
77+
});
78+
79+
test.describe('rectangular', () => {
80+
test('should not have visual regressions', async ({ page }) => {
81+
await page.setContent(
82+
`
83+
<ion-textarea
84+
shape="rectangular"
85+
fill="outline"
86+
label="Email"
87+
label-placement="stacked"
88+
value="[email protected]"
89+
></ion-textarea>
90+
`,
91+
config
92+
);
93+
94+
const textarea = page.locator('ion-textarea');
95+
96+
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rectangular`));
97+
});
98+
});
99+
});
100+
});

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

2.97 KB
Loading

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

4.48 KB
Loading

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

3.07 KB
Loading

‎core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Chrome-linux.png‎

2.05 KB
Loading

‎core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Firefox-linux.png‎

2.69 KB
Loading

‎core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Safari-linux.png‎

1.83 KB
Loading

0 commit comments

Comments
 (0)