Skip to content

Commit 911684f

Browse files
brandyscarneybrandyscarney
authored
feat(input-otp): add styling for the ionic theme (#30465)
Adds styles for the ionic theme, splits the scss files into common and native, and adds the theme to the e2e tests. --------- Co-authored-by: Brandy Smith <[email protected]>
1 parent ecfffe9 commit 911684f

File tree

120 files changed

+332
-131
lines changed

Some content is hidden

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

120 files changed

+332
-131
lines changed

‎core/api.txt‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1047,50 +1047,76 @@ ion-input-otp,event,ionChange,InputOtpChangeEventDetail,true
10471047
ion-input-otp,event,ionComplete,InputOtpCompleteEventDetail,true
10481048
ion-input-otp,event,ionFocus,FocusEvent,true
10491049
ion-input-otp,event,ionInput,InputOtpInputEventDetail,true
1050+
ion-input-otp,css-prop,--background,ionic
10501051
ion-input-otp,css-prop,--background,ios
10511052
ion-input-otp,css-prop,--background,md
1053+
ion-input-otp,css-prop,--border-color,ionic
10521054
ion-input-otp,css-prop,--border-color,ios
10531055
ion-input-otp,css-prop,--border-color,md
1056+
ion-input-otp,css-prop,--border-radius,ionic
10541057
ion-input-otp,css-prop,--border-radius,ios
10551058
ion-input-otp,css-prop,--border-radius,md
1059+
ion-input-otp,css-prop,--border-style,ionic
1060+
ion-input-otp,css-prop,--border-style,ios
1061+
ion-input-otp,css-prop,--border-style,md
1062+
ion-input-otp,css-prop,--border-width,ionic
10561063
ion-input-otp,css-prop,--border-width,ios
10571064
ion-input-otp,css-prop,--border-width,md
1065+
ion-input-otp,css-prop,--color,ionic
10581066
ion-input-otp,css-prop,--color,ios
10591067
ion-input-otp,css-prop,--color,md
1068+
ion-input-otp,css-prop,--height,ionic
10601069
ion-input-otp,css-prop,--height,ios
10611070
ion-input-otp,css-prop,--height,md
1071+
ion-input-otp,css-prop,--highlight-color-focused,ionic
10621072
ion-input-otp,css-prop,--highlight-color-focused,ios
10631073
ion-input-otp,css-prop,--highlight-color-focused,md
1074+
ion-input-otp,css-prop,--highlight-color-invalid,ionic
10641075
ion-input-otp,css-prop,--highlight-color-invalid,ios
10651076
ion-input-otp,css-prop,--highlight-color-invalid,md
1077+
ion-input-otp,css-prop,--highlight-color-valid,ionic
10661078
ion-input-otp,css-prop,--highlight-color-valid,ios
10671079
ion-input-otp,css-prop,--highlight-color-valid,md
1080+
ion-input-otp,css-prop,--margin-bottom,ionic
10681081
ion-input-otp,css-prop,--margin-bottom,ios
10691082
ion-input-otp,css-prop,--margin-bottom,md
1083+
ion-input-otp,css-prop,--margin-end,ionic
10701084
ion-input-otp,css-prop,--margin-end,ios
10711085
ion-input-otp,css-prop,--margin-end,md
1086+
ion-input-otp,css-prop,--margin-start,ionic
10721087
ion-input-otp,css-prop,--margin-start,ios
10731088
ion-input-otp,css-prop,--margin-start,md
1089+
ion-input-otp,css-prop,--margin-top,ionic
10741090
ion-input-otp,css-prop,--margin-top,ios
10751091
ion-input-otp,css-prop,--margin-top,md
1092+
ion-input-otp,css-prop,--min-width,ionic
10761093
ion-input-otp,css-prop,--min-width,ios
10771094
ion-input-otp,css-prop,--min-width,md
1095+
ion-input-otp,css-prop,--padding-bottom,ionic
10781096
ion-input-otp,css-prop,--padding-bottom,ios
10791097
ion-input-otp,css-prop,--padding-bottom,md
1098+
ion-input-otp,css-prop,--padding-end,ionic
10801099
ion-input-otp,css-prop,--padding-end,ios
10811100
ion-input-otp,css-prop,--padding-end,md
1101+
ion-input-otp,css-prop,--padding-start,ionic
10821102
ion-input-otp,css-prop,--padding-start,ios
10831103
ion-input-otp,css-prop,--padding-start,md
1104+
ion-input-otp,css-prop,--padding-top,ionic
10841105
ion-input-otp,css-prop,--padding-top,ios
10851106
ion-input-otp,css-prop,--padding-top,md
1107+
ion-input-otp,css-prop,--separator-border-radius,ionic
10861108
ion-input-otp,css-prop,--separator-border-radius,ios
10871109
ion-input-otp,css-prop,--separator-border-radius,md
1110+
ion-input-otp,css-prop,--separator-color,ionic
10881111
ion-input-otp,css-prop,--separator-color,ios
10891112
ion-input-otp,css-prop,--separator-color,md
1113+
ion-input-otp,css-prop,--separator-height,ionic
10901114
ion-input-otp,css-prop,--separator-height,ios
10911115
ion-input-otp,css-prop,--separator-height,md
1116+
ion-input-otp,css-prop,--separator-width,ionic
10921117
ion-input-otp,css-prop,--separator-width,ios
10931118
ion-input-otp,css-prop,--separator-width,md
1119+
ion-input-otp,css-prop,--width,ionic
10941120
ion-input-otp,css-prop,--width,ios
10951121
ion-input-otp,css-prop,--width,md
10961122

‎core/src/components/input-otp/input-otp.scss‎ renamed to ‎core/src/components/input-otp/input-otp.common.scss‎

Lines changed: 4 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@import "../../themes/native/native.globals";
1+
@import "../../themes/mixins";
22

3-
// Input OTP
3+
// Input OTP Common
44
// --------------------------------------------------
55

66
:host {
@@ -10,6 +10,7 @@
1010
* @prop --border-radius: Border radius of the input boxes
1111
*
1212
* @prop --border-width: Border width of the input boxes
13+
* @prop --border-style: Border style of the input boxes
1314
* @prop --border-color: Border color of the input boxes
1415
*
1516
* @prop --color: Text color of the input
@@ -41,19 +42,7 @@
4142
--margin-end: 0;
4243
--margin-bottom: 0;
4344
--margin-start: 0;
44-
--padding-top: 16px;
45-
--padding-end: 0;
46-
--padding-bottom: 16px;
47-
--padding-start: 0;
48-
--color: initial;
49-
--min-width: 40px;
50-
--separator-width: 8px;
5145
--separator-height: var(--separator-width);
52-
--separator-border-radius: 999px;
53-
--separator-color: #{$background-color-step-150};
54-
--highlight-color-focused: #{ion-color(primary, base)};
55-
--highlight-color-valid: #{ion-color(success, base)};
56-
--highlight-color-invalid: #{ion-color(danger, base)};
5746

5847
/**
5948
* This is a private API that is used to switch
@@ -65,8 +54,6 @@
6554

6655
display: block;
6756
position: relative;
68-
69-
font-size: dynamic-font(14px);
7057
}
7158

7259
.input-otp-group {
@@ -101,7 +88,7 @@
10188
height: var(--height);
10289

10390
border-width: var(--border-width);
104-
border-style: solid;
91+
border-style: var(--border-style);
10592
border-color: var(--border-color);
10693

10794
background: var(--background);
@@ -121,12 +108,6 @@
121108
// ----------------------------------------------------------------
122109

123110
.input-otp-description {
124-
color: $text-color-step-300;
125-
126-
font-size: dynamic-font(12px);
127-
128-
line-height: dynamic-font(20px);
129-
130111
text-align: center;
131112
}
132113

@@ -148,72 +129,16 @@
148129
background: var(--separator-color);
149130
}
150131

151-
// Sizes
152-
// --------------------------------------------------
153-
154-
:host(.input-otp-size-small) {
155-
--width: 40px;
156-
--height: 40px;
157-
}
158-
159-
:host(.input-otp-size-small) .input-otp-group {
160-
gap: 8px;
161-
}
162-
163-
:host(.input-otp-size-medium) {
164-
--width: 48px;
165-
--height: 48px;
166-
}
167-
168-
:host(.input-otp-size-large) {
169-
--width: 56px;
170-
--height: 56px;
171-
}
172-
173-
:host(.input-otp-size-medium) .input-otp-group,
174-
:host(.input-otp-size-large) .input-otp-group {
175-
gap: 12px;
176-
}
177-
178-
// Shapes
179-
// --------------------------------------------------
180-
181-
:host(.input-otp-shape-round) {
182-
--border-radius: 16px;
183-
}
184-
185-
:host(.input-otp-shape-soft) {
186-
--border-radius: 8px;
187-
}
188-
189-
:host(.input-otp-shape-rectangular) {
190-
--border-radius: 0;
191-
}
192-
193132
// Fills
194133
// --------------------------------------------------
195134

196135
:host(.input-otp-fill-outline) {
197136
--background: none;
198137
}
199138

200-
:host(.input-otp-fill-solid) {
201-
--border-color: #{$background-color-step-50};
202-
--background: #{$background-color-step-50};
203-
}
204-
205139
// States
206140
// --------------------------------------------------
207141

208-
:host(.input-otp-disabled) {
209-
--color: #{$text-color-step-650};
210-
}
211-
212-
:host(.input-otp-fill-outline.input-otp-disabled) {
213-
--background: #{$background-color-step-50};
214-
--border-color: #{$background-color-step-100};
215-
}
216-
217142
:host(.input-otp-disabled),
218143
:host(.input-otp-disabled) .native-input:disabled {
219144
cursor: not-allowed;
@@ -225,16 +150,6 @@
225150
outline: none;
226151
}
227152

228-
:host(.input-otp-fill-outline.input-otp-readonly) {
229-
--background: #{$background-color-step-50};
230-
}
231-
232-
:host(.input-otp-fill-solid.input-otp-disabled),
233-
:host(.input-otp-fill-solid.input-otp-readonly) {
234-
--border-color: #{$background-color-step-100};
235-
--background: #{$background-color-step-100};
236-
}
237-
238153
// Input Highlight
239154
// ----------------------------------------------------------------
240155

@@ -270,38 +185,3 @@
270185
:host(.ion-touched.ion-invalid) {
271186
--border-color: var(--highlight-color);
272187
}
273-
274-
// Colors
275-
// ----------------------------------------------------------------
276-
277-
:host(.ion-color) {
278-
--highlight-color-focused: #{current-color(base)};
279-
}
280-
281-
// Outline border should match the current color
282-
// and the solid border should match when focused
283-
:host(.input-otp-fill-outline.ion-color) .native-input,
284-
:host(.input-otp-fill-solid.ion-color) .native-input:focus {
285-
border-color: current-color(base, 0.6);
286-
}
287-
288-
// Invalid
289-
:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,
290-
:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
291-
:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
292-
:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
293-
border-color: ion-color(danger, base);
294-
}
295-
296-
// Valid
297-
:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
298-
:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
299-
:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
300-
:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
301-
border-color: ion-color(success, base);
302-
}
303-
304-
// Outline & Disabled
305-
:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {
306-
border-color: current-color(base, 0.3);
307-
}

0 commit comments

Comments
 (0)