Skip to content

Commit fdd5283

Browse files
brandyscarneybrandyscarney
authored
fix(input): update helper text and counter color (#30149)
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-11558-ionic1.vercel.app/src/components/input/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <[email protected]>
1 parent f4941f2 commit fdd5283

File tree

259 files changed

+286
-186
lines changed

Some content is hidden

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

259 files changed

+286
-186
lines changed

‎core/src/components/input/input.md.solid.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@
3232
--border-color: var(--highlight-color);
3333
}
3434

35+
/**
36+
* The bottom content should never have
37+
* a border with the solid style.
38+
*/
3539
:host(.input-fill-solid) .input-bottom {
3640
border-top: none;
3741
}

‎core/src/components/input/input.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,8 @@
306306
border-top: var(--border-width) var(--border-style) var(--border-color);
307307

308308
font-size: dynamic-font(12px);
309+
310+
white-space: normal;
309311
}
310312

311313
/**
@@ -340,7 +342,7 @@
340342
.input-bottom .helper-text {
341343
display: block;
342344

343-
color: #{$text-color-step-450};
345+
color: $text-color-step-300;
344346
}
345347

346348
:host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -362,7 +364,7 @@
362364
*/
363365
@include margin-horizontal(auto, null);
364366

365-
color: #{$text-color-step-450};
367+
color: $text-color-step-300;
366368

367369
white-space: nowrap;
368370

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

-500 Bytes
Loading

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

25 Bytes
Loading

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

114 Bytes
Loading

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

-540 Bytes
Loading

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

7 Bytes
Loading

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

85 Bytes
Loading

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

Lines changed: 80 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@
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
}
22+
2223
h2 {
2324
font-size: 12px;
2425
font-weight: normal;
@@ -27,20 +28,14 @@
2728

2829
margin-top: 10px;
2930
}
30-
@media screen and (max-width: 800px) {
31-
.grid {
32-
grid-template-columns: 1fr;
33-
padding: 0;
34-
}
35-
}
3631

3732
ion-input.custom-error-color {
3833
--highlight-color-invalid: purple;
3934
}
4035
</style>
4136
</head>
4237

43-
<body>
38+
<body onLoad="onLoad()">
4439
<ion-app>
4540
<ion-header>
4641
<ion-toolbar>
@@ -52,67 +47,120 @@
5247
<div class="grid">
5348
<div class="grid-item">
5449
<h2>No Hint</h2>
55-
<ion-input label="Email"></ion-input>
50+
<ion-input label="Label"></ion-input>
51+
</div>
52+
53+
<div class="grid-item">
54+
<h2>No Hint: Stacked</h2>
55+
<ion-input label="Label" label-placement="stacked"></ion-input>
56+
</div>
57+
58+
<div class="grid-item">
59+
<h2>Helper Text</h2>
60+
<ion-input label="Label" helper-text="Helper text"></ion-input>
61+
</div>
62+
63+
<div class="grid-item">
64+
<h2>Helper Text: Stacked</h2>
65+
<ion-input label="Label" label-placement="stacked" helper-text="Helper text"></ion-input>
5666
</div>
5767

5868
<div class="grid-item">
59-
<h2>Helper Hint</h2>
60-
<ion-input label="Email" helper-text="Enter your email"></ion-input>
69+
<h2>Error Text</h2>
70+
<ion-input class="ion-touched ion-invalid" label="Label" error-text="Error text"></ion-input>
6171
</div>
6272

6373
<div class="grid-item">
64-
<h2>Error Hint</h2>
74+
<h2>Error Text: Stacked</h2>
6575
<ion-input
6676
class="ion-touched ion-invalid"
67-
label="Email"
68-
error-text="Please enter a valid email"
77+
label="Label"
78+
label-placement="stacked"
79+
error-text="Error text"
6980
></ion-input>
7081
</div>
7182

7283
<div class="grid-item">
73-
<h2>Custom Error Color</h2>
84+
<h2>Error Text: Custom Color</h2>
7485
<ion-input
7586
class="ion-touched ion-invalid custom-error-color"
76-
label="Email"
77-
error-text="Please enter a valid email"
87+
label="Label"
88+
error-text="Error text"
7889
></ion-input>
7990
</div>
8091

92+
<div class="grid-item">
93+
<h2>Helper Text: Wrapping</h2>
94+
<ion-input
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-input>
99+
</div>
100+
81101
<div class="grid-item">
82102
<h2>Counter</h2>
83-
<ion-input label="Email" counter="true" maxlength="100"></ion-input>
103+
<ion-input label="Label" counter="true" maxlength="100"></ion-input>
84104
</div>
85105

86106
<div class="grid-item">
87-
<h2>Custom Counter</h2>
88-
<ion-input id="custom-counter" label="Email" counter="true" maxlength="100"></ion-input>
107+
<h2>Counter: Custom</h2>
108+
<ion-input id="custom-counter" label="Label" counter="true" maxlength="100"></ion-input>
89109
</div>
90110

91111
<div class="grid-item">
92-
<h2>Counter with Helper</h2>
93-
<ion-input label="Email" counter="true" maxlength="100" helper-text="Enter an email"></ion-input>
112+
<h2>Counter: with Helper</h2>
113+
<ion-input label="Label" counter="true" maxlength="100" helper-text="Helper text"></ion-input>
94114
</div>
95115

96116
<div class="grid-item">
97-
<h2>Counter with Error</h2>
117+
<h2>Counter: with Error</h2>
98118
<ion-input
99119
class="ion-touched ion-invalid"
100-
label="Email"
120+
label="Label"
101121
counter="true"
102122
maxlength="100"
103-
error-text="Please enter a valid email"
123+
error-text="Error text"
104124
></ion-input>
105125
</div>
106126
</div>
107127

108-
<script>
109-
const customCounterInput = document.querySelector('ion-input#custom-counter');
110-
customCounterInput.counterFormatter = (inputLength, maxLength) => {
111-
const length = maxLength - inputLength;
112-
return `${maxLength - inputLength} characters left`;
113-
};
114-
</script>
128+
<button class="expand" onclick="toggleFill()">Toggle Fill</button>
115129
</ion-content>
116130
</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 customCounterInput = document.querySelector('ion-input#custom-counter');
143+
customCounterInput.counterFormatter = (inputLength, maxLength) => {
144+
const length = maxLength - inputLength;
145+
return `${maxLength - inputLength} characters left`;
146+
};
147+
148+
const inputs = document.querySelectorAll('ion-input');
149+
150+
function toggleFill() {
151+
inputs.forEach((input) => {
152+
switch (input.fill) {
153+
case 'outline':
154+
input.fill = 'solid';
155+
break;
156+
case 'solid':
157+
input.fill = undefined;
158+
break;
159+
default:
160+
input.fill = 'outline';
161+
}
162+
});
163+
}
164+
</script>
117165
</body>
118166
</html>

0 commit comments

Comments
 (0)