Skip to content

Commit 4322935

Browse files
brandyscarneybrandyscarney
authored
fix(textarea): update helper text and counter color (#30148)
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11559-ionic1.vercel.app/src/components/textarea/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <[email protected]>
1 parent fdd5283 commit 4322935

File tree

265 files changed

+299
-177
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

265 files changed

+299
-177
lines changed

‎core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png

-543 Bytes
Loading

‎core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Firefox-linux.png

41 Bytes
Loading

‎core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Safari-linux.png

117 Bytes
Loading

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

-572 Bytes
Loading

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

12 Bytes
Loading

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

81 Bytes
Loading

‎core/src/components/textarea/test/bottom-content/index.html

+79-33
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<style>
1616
.grid {
1717
display: grid;
18-
grid-template-columns: repeat(3, minmax(250px, 1fr));
18+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1919
grid-row-gap: 20px;
2020
grid-column-gap: 20px;
2121
}
@@ -29,20 +29,13 @@
2929
margin-top: 10px;
3030
}
3131

32-
@media screen and (max-width: 800px) {
33-
.grid {
34-
grid-template-columns: 1fr;
35-
padding: 0;
36-
}
37-
}
38-
3932
ion-textarea.custom-error-color {
4033
--highlight-color-invalid: purple;
4134
}
4235
</style>
4336
</head>
4437

45-
<body>
38+
<body onLoad="onLoad()">
4639
<ion-app>
4740
<ion-header>
4841
<ion-toolbar>
@@ -54,67 +47,120 @@
5447
<div class="grid">
5548
<div class="grid-item">
5649
<h2>No Hint</h2>
57-
<ion-textarea label="Email"></ion-textarea>
50+
<ion-textarea label="Label"></ion-textarea>
51+
</div>
52+
53+
<div class="grid-item">
54+
<h2>No Hint: Stacked</h2>
55+
<ion-textarea label="Label" label-placement="stacked"></ion-textarea>
56+
</div>
57+
58+
<div class="grid-item">
59+
<h2>Helper Text</h2>
60+
<ion-textarea label="Label" helper-text="Helper text"></ion-textarea>
61+
</div>
62+
63+
<div class="grid-item">
64+
<h2>Helper Text: Stacked</h2>
65+
<ion-textarea label="Label" label-placement="stacked" helper-text="Helper text"></ion-textarea>
5866
</div>
5967

6068
<div class="grid-item">
61-
<h2>Helper Hint</h2>
62-
<ion-textarea label="Email" helper-text="Enter your email"></ion-textarea>
69+
<h2>Error Text</h2>
70+
<ion-textarea class="ion-touched ion-invalid" label="Label" error-text="Error text"></ion-textarea>
6371
</div>
6472

6573
<div class="grid-item">
66-
<h2>Error Hint</h2>
74+
<h2>Error Text: Stacked</h2>
6775
<ion-textarea
6876
class="ion-touched ion-invalid"
69-
label="Email"
70-
error-text="Please enter a valid email"
77+
label="Label"
78+
label-placement="stacked"
79+
error-text="Error text"
7180
></ion-textarea>
7281
</div>
7382

7483
<div class="grid-item">
75-
<h2>Custom Error Color</h2>
84+
<h2>Error Text: Custom Color</h2>
7685
<ion-textarea
7786
class="ion-touched ion-invalid custom-error-color"
78-
label="Email"
79-
error-text="Please enter a valid email"
87+
label="Label"
88+
error-text="Error text"
8089
></ion-textarea>
8190
</div>
8291

92+
<div class="grid-item">
93+
<h2>Helper Text: Wrapping</h2>
94+
<ion-textarea
95+
label="Label"
96+
helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text"
97+
>
98+
</ion-textarea>
99+
</div>
100+
83101
<div class="grid-item">
84102
<h2>Counter</h2>
85-
<ion-textarea label="Email" counter="true" maxlength="100"></ion-textarea>
103+
<ion-textarea label="Label" counter="true" maxlength="100"></ion-textarea>
86104
</div>
87105

88106
<div class="grid-item">
89-
<h2>Custom Counter</h2>
90-
<ion-textarea id="custom-counter" label="Email" counter="true" maxlength="100"></ion-textarea>
107+
<h2>Counter: Custom</h2>
108+
<ion-textarea id="custom-counter" label="Label" counter="true" maxlength="100"></ion-textarea>
91109
</div>
92110

93111
<div class="grid-item">
94-
<h2>Counter with Helper</h2>
95-
<ion-textarea label="Email" counter="true" maxlength="100" helper-text="Enter an email"></ion-textarea>
112+
<h2>Counter: with Helper</h2>
113+
<ion-textarea label="Label" counter="true" maxlength="100" helper-text="Helper text"></ion-textarea>
96114
</div>
97115

98116
<div class="grid-item">
99-
<h2>Counter with Error</h2>
117+
<h2>Counter: with Error</h2>
100118
<ion-textarea
101119
class="ion-touched ion-invalid"
102-
label="Email"
120+
label="Label"
103121
counter="true"
104122
maxlength="100"
105-
error-text="Please enter a valid email"
123+
error-text="Error text"
106124
></ion-textarea>
107125
</div>
108126
</div>
109127

110-
<script>
111-
const customCounterTextarea = document.querySelector('ion-textarea#custom-counter');
112-
customCounterTextarea.counterFormatter = (inputLength, maxLength) => {
113-
const length = maxLength - inputLength;
114-
return `${maxLength - inputLength} characters left`;
115-
};
116-
</script>
128+
<button class="expand" onclick="toggleFill()">Toggle Fill</button>
117129
</ion-content>
118130
</ion-app>
131+
132+
<script>
133+
// Hide the toggle fill button on ios mode since it's not supported
134+
function onLoad() {
135+
const toggleFillButton = document.querySelector('button');
136+
137+
if (Ionic.mode === 'ios' && toggleFillButton) {
138+
toggleFillButton.style.display = 'none';
139+
}
140+
}
141+
142+
const customCounterTextarea = document.querySelector('ion-textarea#custom-counter');
143+
customCounterTextarea.counterFormatter = (inputLength, maxLength) => {
144+
const length = maxLength - inputLength;
145+
return `${maxLength - inputLength} characters left`;
146+
};
147+
148+
const textareas = document.querySelectorAll('ion-textarea');
149+
150+
function toggleFill() {
151+
textareas.forEach((textarea) => {
152+
switch (textarea.fill) {
153+
case 'outline':
154+
textarea.fill = 'solid';
155+
break;
156+
case 'solid':
157+
textarea.fill = undefined;
158+
break;
159+
default:
160+
textarea.fill = 'outline';
161+
}
162+
});
163+
}
164+
</script>
119165
</body>
120166
</html>

0 commit comments

Comments
 (0)