Skip to content

Commit ee6f29d

Browse files
brandyscarneybrandyscarney
committed
fix(input-otp): design fixes and invalid state
1 parent ce38d95 commit ee6f29d

File tree

6 files changed

+45
-23
lines changed

6 files changed

+45
-23
lines changed

‎core/api.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -830,6 +830,8 @@ ion-input-otp,css-prop,--padding-start,ios
830830
ion-input-otp,css-prop,--padding-start,md
831831
ion-input-otp,css-prop,--padding-top,ios
832832
ion-input-otp,css-prop,--padding-top,md
833+
ion-input-otp,css-prop,--separator-border-radius,ios
834+
ion-input-otp,css-prop,--separator-border-radius,md
833835
ion-input-otp,css-prop,--separator-color,ios
834836
ion-input-otp,css-prop,--separator-color,md
835837
ion-input-otp,css-prop,--separator-height,ios

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
@import "./input-otp";
22
@import "../../themes/ionic.globals.ios";
33

4+
// iOS Input OTP
5+
// --------------------------------------------------
6+
47
:host {
58
--border-width: 0.55px;
69
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
@import "./input-otp";
22
@import "../../themes/ionic.globals.md";
33

4+
// Material Design Input OTP
5+
// --------------------------------------------------
6+
47
:host {
58
--border-width: 1px;
69
}

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
* @prop --margin-bottom: Bottom margin of the input group
2222
* @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group
2323
*
24-
* @prop --padding-top: Top padding of the input boxes
25-
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input boxes
26-
* @prop --padding-bottom: Bottom padding of the input boxes
27-
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input boxes
24+
* @prop --padding-top: Top padding of the input group
25+
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group
26+
* @prop --padding-bottom: Bottom padding of the input group
27+
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group
2828
*
2929
* @prop --height: Height of input boxes
3030
* @prop --width: Width of input boxes
@@ -33,16 +33,17 @@
3333
* @prop --separator-color: Color of the separator between boxes
3434
* @prop --separator-width: Width of the separator between boxes
3535
* @prop --separator-height: Height of the separator between boxes
36+
* @prop --separator-border-radius: Border radius of the separator between boxes
3637
*
37-
* @prop --highlight-color: Color used for the invalid state
38+
* @prop --highlight-color-invalid: Color used for the invalid state
3839
*/
39-
--margin-top: 16px;
40+
--margin-top: 0;
4041
--margin-end: 0;
41-
--margin-bottom: 16px;
42+
--margin-bottom: 0;
4243
--margin-start: 0;
43-
--padding-top: 0;
44+
--padding-top: 16px;
4445
--padding-end: 0;
45-
--padding-bottom: 0;
46+
--padding-bottom: 16px;
4647
--padding-start: 0;
4748
--min-width: 40px;
4849
--separator-width: 8px;
@@ -51,13 +52,15 @@
5152
--separator-color: #{$background-color-step-150};
5253
--background-focused: var(--background);
5354
--border-color-focused: #{ion-color(primary, base, 0.4)};
55+
--highlight-color-invalid: #{ion-color(danger, base)};
5456

5557
display: block;
5658
position: relative;
5759
}
5860

5961
.input-otp-group {
6062
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
63+
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
6164

6265
display: flex;
6366

@@ -76,15 +79,16 @@
7679

7780
.native-input {
7881
@include border-radius(var(--border-radius));
79-
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
8082

8183
width: var(--width);
8284

8385
// Required to shrink the input box width
8486
min-width: inherit;
8587
height: var(--height);
8688

87-
border: var(--border-width, 1px) solid var(--border-color, var(--ion-border-color));
89+
border-width: var(--border-width);
90+
border-color: var(--border-color);
91+
border-style: solid;
8892

8993
background: var(--background, var(--ion-background-color));
9094
color: var(--color, var(--ion-text-color));
@@ -203,6 +207,10 @@
203207
background: var(--background-focused);
204208
}
205209

210+
:host(.ion-invalid) .native-input {
211+
border-color: var(--highlight-color-invalid);
212+
}
213+
206214
// Colors
207215
// --------------------------------------------------
208216

‎core/src/components/input-otp/test/basic/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ <h2>Disabled</h2>
5151
<ion-input-otp fill="solid" disabled></ion-input-otp>
5252
</div>
5353

54+
<div class="grid-item">
55+
<h2>Invalid</h2>
56+
<ion-input-otp class="ion-invalid"></ion-input-otp>
57+
<ion-input-otp fill="solid" class="ion-invalid"></ion-input-otp>
58+
</div>
59+
5460
<div class="grid-item">
5561
<h2>Types</h2>
5662
<ion-input-otp length="6"> Numbers only </ion-input-otp>

‎core/src/components/input-otp/test/size/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,26 +39,26 @@
3939
<div class="grid">
4040
<div class="grid-item">
4141
<h2>Small</h2>
42-
<ion-input-otp size="small"></ion-input-otp>
43-
<ion-input-otp size="small" separators="all"></ion-input-otp>
44-
<ion-input-otp size="small" fill="solid"></ion-input-otp>
45-
<ion-input-otp size="small" fill="solid" separators="all"></ion-input-otp>
42+
<ion-input-otp size="small">Description</ion-input-otp>
43+
<ion-input-otp size="small" separators="all">Description</ion-input-otp>
44+
<ion-input-otp size="small" fill="solid">Description</ion-input-otp>
45+
<ion-input-otp size="small" fill="solid" separators="all">Description</ion-input-otp>
4646
</div>
4747

4848
<div class="grid-item">
4949
<h2>Medium</h2>
50-
<ion-input-otp size="medium"></ion-input-otp>
51-
<ion-input-otp size="medium" separators="all"></ion-input-otp>
52-
<ion-input-otp size="medium" fill="solid"></ion-input-otp>
53-
<ion-input-otp size="medium" fill="solid" separators="all"></ion-input-otp>
50+
<ion-input-otp size="medium">Description</ion-input-otp>
51+
<ion-input-otp size="medium" separators="all">Description</ion-input-otp>
52+
<ion-input-otp size="medium" fill="solid">Description</ion-input-otp>
53+
<ion-input-otp size="medium" fill="solid" separators="all">Description</ion-input-otp>
5454
</div>
5555

5656
<div class="grid-item">
5757
<h2>Large</h2>
58-
<ion-input-otp size="large"></ion-input-otp>
59-
<ion-input-otp size="large" separators="all"></ion-input-otp>
60-
<ion-input-otp size="large" fill="solid"></ion-input-otp>
61-
<ion-input-otp size="large" fill="solid" separators="all"></ion-input-otp>
58+
<ion-input-otp size="large">Description</ion-input-otp>
59+
<ion-input-otp size="large" separators="all">Description</ion-input-otp>
60+
<ion-input-otp size="large" fill="solid">Description</ion-input-otp>
61+
<ion-input-otp size="large" fill="solid" separators="all">Description</ion-input-otp>
6262
</div>
6363
</div>
6464
</ion-content>

0 commit comments

Comments
 (0)