Skip to content

Commit 13b7f8a

Browse files
sean-perkinsbrandyscarney
sean-perkins
and
brandyscarney
authored
feat(input,textarea,select): add --highlight-height variable (#29090)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In v7, using the legacy syntax, the height of the highlight on an item could be adjusted using the `--highlight-height` variable. This variable was not added to input and therefore would not work using the modern syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Adds the `--highlight-height` variable to `ion-input`, `ion-textarea` and `ion-select` so that developers can customize this height in `md` mode. Since the highlight element is not added for `ios` mode, this variable won't do anything for `ios`. Note that this diverges from the v7 behavior, where setting `--highlight-height` enabled the highlight for `ios`. A design document outlining this has been proposed here: https://github.com/ionic-team/ionic-framework-design-documents/pull/252 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Brandy Carney <[email protected]>
1 parent 2956317 commit 13b7f8a

File tree

64 files changed

+808
-10
lines changed

Some content is hidden

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

64 files changed

+808
-10
lines changed

‎core/api.txt

+3
Original file line numberDiff line numberDiff line change
@@ -596,6 +596,7 @@ ion-input,css-prop,--color
596596
ion-input,css-prop,--highlight-color-focused
597597
ion-input,css-prop,--highlight-color-invalid
598598
ion-input,css-prop,--highlight-color-valid
599+
ion-input,css-prop,--highlight-height
599600
ion-input,css-prop,--padding-bottom
600601
ion-input,css-prop,--padding-end
601602
ion-input,css-prop,--padding-start
@@ -1291,6 +1292,7 @@ ion-select,css-prop,--border-width
12911292
ion-select,css-prop,--highlight-color-focused
12921293
ion-select,css-prop,--highlight-color-invalid
12931294
ion-select,css-prop,--highlight-color-valid
1295+
ion-select,css-prop,--highlight-height
12941296
ion-select,css-prop,--padding-bottom
12951297
ion-select,css-prop,--padding-end
12961298
ion-select,css-prop,--padding-start
@@ -1424,6 +1426,7 @@ ion-textarea,css-prop,--color
14241426
ion-textarea,css-prop,--highlight-color-focused
14251427
ion-textarea,css-prop,--highlight-color-invalid
14261428
ion-textarea,css-prop,--highlight-color-valid
1429+
ion-textarea,css-prop,--highlight-height
14271430
ion-textarea,css-prop,--padding-bottom
14281431
ion-textarea,css-prop,--padding-end
14291432
ion-textarea,css-prop,--padding-start

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

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
:host {
55
--border-width: #{$hairlines-width};
66
--border-color: #{$item-ios-border-color};
7+
--highlight-height: 0px;
78

89
font-size: $input-ios-font-size;
910
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
* the input is focused.
4444
*/
4545
:host(.input-fill-outline.has-focus) {
46-
--border-width: 2px;
46+
--border-width: var(--highlight-height);
4747
--border-color: var(--highlight-color);
4848
}
4949

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
:host {
1111
--border-width: 1px;
1212
--border-color: #{$item-md-border-color};
13+
--highlight-height: 2px;
1314

1415
font-size: $input-md-font-size;
1516
}
@@ -73,7 +74,7 @@
7374
position: absolute;
7475

7576
width: 100%;
76-
height: 2px;
77+
height: var(--highlight-height);
7778

7879
transform: scale(0);
7980

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

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
* @prop --placeholder-font-weight: Font weight of the input placeholder text
2020
* @prop --placeholder-opacity: Opacity of the input placeholder text
2121
*
22+
* @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
2223
* @prop --highlight-color-focused: The color of the highlight on the input when focused
2324
* @prop --highlight-color-valid: The color of the highlight on the input when valid
2425
* @prop --highlight-color-invalid: The color of the highlight on the input when invalid

‎core/src/components/input/test/highlight/index.html

+142
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@
3333
padding: 0;
3434
}
3535
}
36+
37+
.custom {
38+
--highlight-color-focused: purple;
39+
--highlight-color-invalid: purple;
40+
--highlight-color-valid: purple;
41+
--highlight-height: 6px;
42+
}
3643
</style>
3744
</head>
3845

@@ -174,6 +181,49 @@ <h2>Invalid</h2>
174181
</div>
175182
</div>
176183

184+
<h1>No Fill, Custom</h1>
185+
<div class="grid">
186+
<div class="grid-item">
187+
<h2>Focus</h2>
188+
<ion-input
189+
label-placement="start"
190+
value="[email protected]"
191+
class="has-focus custom"
192+
label="Email"
193+
error-text="Please enter a valid email"
194+
helper-text="Enter an email"
195+
counter="true"
196+
maxlength="20"
197+
></ion-input>
198+
</div>
199+
200+
<div class="grid-item">
201+
<h2>Valid, Focus</h2>
202+
<ion-input
203+
label-placement="start"
204+
class="ion-valid has-focus custom"
205+
label="Email"
206+
error-text="Please enter a valid email"
207+
helper-text="Enter an email"
208+
counter="true"
209+
maxlength="20"
210+
></ion-input>
211+
</div>
212+
213+
<div class="grid-item">
214+
<h2>Invalid</h2>
215+
<ion-input
216+
label-placement="start"
217+
class="ion-touched ion-invalid custom"
218+
label="Email"
219+
error-text="Please enter a valid email"
220+
helper-text="Enter an email"
221+
counter="true"
222+
maxlength="20"
223+
></ion-input>
224+
</div>
225+
</div>
226+
177227
<h1>Solid, Default</h1>
178228
<div class="grid">
179229
<div class="grid-item">
@@ -312,6 +362,52 @@ <h2>Invalid</h2>
312362
</div>
313363
</div>
314364

365+
<h1>Solid, Custom</h1>
366+
<div class="grid">
367+
<div class="grid-item">
368+
<h2>Focus</h2>
369+
<ion-input
370+
fill="solid"
371+
label-placement="start"
372+
value="[email protected]"
373+
class="has-focus custom"
374+
label="Email"
375+
error-text="Please enter a valid email"
376+
helper-text="Enter an email"
377+
counter="true"
378+
maxlength="20"
379+
></ion-input>
380+
</div>
381+
382+
<div class="grid-item">
383+
<h2>Valid, Focus</h2>
384+
<ion-input
385+
fill="solid"
386+
label-placement="start"
387+
class="ion-valid has-focus custom"
388+
label="Email"
389+
error-text="Please enter a valid email"
390+
helper-text="Enter an email"
391+
counter="true"
392+
maxlength="20"
393+
></ion-input>
394+
</div>
395+
396+
<div class="grid-item">
397+
<h2>Invalid</h2>
398+
<ion-input
399+
fill="solid"
400+
label-placement="start"
401+
class="ion-touched ion-invalid custom"
402+
label="Email"
403+
error-text="Please enter a valid email"
404+
helper-text="Enter an email"
405+
counter="true"
406+
maxlength="20"
407+
></ion-input>
408+
</div>
409+
</div>
410+
315411
<h1>Outline, Default</h1>
316412
<div class="grid">
317413
<div class="grid-item">
@@ -449,6 +545,52 @@ <h2>Invalid</h2>
449545
></ion-input>
450546
</div>
451547
</div>
548+
549+
<h1>Outline, Custom</h1>
550+
<div class="grid">
551+
<div class="grid-item">
552+
<h2>Focus</h2>
553+
<ion-input
554+
fill="outline"
555+
label-placement="start"
556+
value="[email protected]"
557+
class="has-focus custom"
558+
label="Email"
559+
error-text="Please enter a valid email"
560+
helper-text="Enter an email"
561+
counter="true"
562+
maxlength="20"
563+
></ion-input>
564+
</div>
565+
566+
<div class="grid-item">
567+
<h2>Valid, Focus</h2>
568+
<ion-input
569+
fill="outline"
570+
label-placement="start"
571+
class="ion-valid has-focus custom"
572+
label="Email"
573+
error-text="Please enter a valid email"
574+
helper-text="Enter an email"
575+
counter="true"
576+
maxlength="20"
577+
></ion-input>
578+
</div>
579+
580+
<div class="grid-item">
581+
<h2>Invalid</h2>
582+
<ion-input
583+
fill="outline"
584+
label-placement="start"
585+
class="ion-touched ion-invalid custom"
586+
label="Email"
587+
error-text="Please enter a valid email"
588+
helper-text="Enter an email"
589+
counter="true"
590+
maxlength="20"
591+
></ion-input>
592+
</div>
593+
</div>
452594
</ion-content>
453595
</ion-app>
454596
</body>

0 commit comments

Comments
 (0)