Skip to content

Commit 8b5215f

Browse files
JoaoFerreira-FrontEndIonitron
JoaoFerreira-FrontEnd
and
Ionitron
authored
feat(input): add styles for ionic theme for fill=solid (#30417)
Issue number: Internal --------- ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - add fill solid to ionic theme input; - move input.outline.scss to input.ionic.scss; - add fill solid to states page; - remove highlight styles for ionic theme; - add tests for ionic solid input; ## 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/docs/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. --> - fill: https://ionic-framework-git-rou-11889-ionic1.vercel.app/src/components/input/test/fill?ionic:theme=ionic - states: https://ionic-framework-git-rou-11889-ionic1.vercel.app/src/components/input/test/states?ionic:theme=ionic --------- Co-authored-by: ionitron <hi@ionicframework.com>
1 parent fc4e5ae commit 8b5215f

15 files changed

+377
-164
lines changed

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

Lines changed: 2 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,6 @@
11
@use "../../themes/ionic/ionic.globals.scss" as globals;
22

3-
// Input Fill: Outline (Ionic Theme)
4-
// ----------------------------------------------------------------
5-
63
:host(.input-fill-outline) {
7-
--border-radius: #{globals.$ion-border-radius-100};
8-
--padding-start: #{globals.$ion-space-300};
9-
--padding-end: #{globals.$ion-space-300};
10-
}
11-
12-
:host(.input-fill-outline.input-size-large) {
13-
--padding-start: #{globals.$ion-space-400};
14-
--padding-end: #{globals.$ion-space-400};
15-
}
16-
17-
:host(.input-fill-outline.input-size-xlarge) {
18-
--padding-start: #{globals.$ion-space-500};
19-
--padding-end: #{globals.$ion-space-500};
20-
}
21-
22-
/**
23-
* The bottom content should never have
24-
* a border with the outline style.
25-
*/
26-
:host(.input-fill-outline) .input-bottom {
27-
border-top: none;
28-
}
29-
30-
:host(.input-fill-outline) .input-wrapper {
31-
/**
32-
* For the ionic theme, the padding needs to sit on the
33-
* native wrapper instead, so that it sits within the
34-
* outline container but does not always affect the
35-
* label text.
36-
*/
37-
@include globals.padding(0);
38-
39-
/**
40-
* Outline inputs do not have a bottom border.
41-
* Instead, they have a border that wraps the
42-
* input + label.
43-
*/
44-
border-bottom: none;
45-
46-
/**
47-
* Do not show a background on the input wrapper as
48-
* this includes the label, instead we apply the
49-
* background to the native wrapper.
50-
*/
51-
background: transparent;
52-
}
53-
54-
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
55-
@include globals.transform-origin(start, top);
56-
57-
/**
58-
* Label text should not extend
59-
* beyond the bounds of the input.
60-
*/
61-
max-width: calc(100% - var(--padding-start) - var(--padding-end));
62-
}
63-
64-
:host(.input-fill-outline) .label-text-wrapper {
65-
/**
66-
* The label should appear on top of an outline
67-
* container that overlaps it so it is always clickable.
68-
*/
69-
position: relative;
70-
}
71-
72-
:host(.input-fill-outline) .native-wrapper {
73-
@include globals.border-radius(inherit);
74-
@include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
75-
76-
min-height: globals.$ion-scale-1000;
77-
78-
/**
79-
* Apply the background to the native input
80-
* wrapper to only style the input.
81-
*/
82-
background: var(--background);
83-
}
84-
85-
// Input Fill: Outline, Outline Container
86-
// ----------------------------------------------------------------
87-
88-
:host(.input-fill-outline) .input-outline {
89-
@include globals.position(0, 0, 0, 0);
90-
@include globals.border-radius(var(--border-radius));
91-
92-
position: absolute;
93-
94-
width: 100%;
95-
height: 100%;
96-
97-
pointer-events: none;
98-
99-
border: var(--border-width) var(--border-style) var(--border-color);
100-
}
101-
102-
// Input Fill: Outline, Label Placement: Stacked
103-
// ----------------------------------------------------------------
104-
105-
// This makes the label sit above the input.
106-
:host(.label-floating.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
107-
@include globals.margin(0);
108-
@include globals.padding(globals.$ion-space-100, null);
109-
}
110-
111-
// Start/End Slots
112-
// ----------------------------------------------------------------
113-
114-
:host(.input-fill-outline) ::slotted([slot="start"]) {
115-
margin-inline-end: globals.$ion-space-200;
116-
}
117-
118-
:host(.input-fill-outline) ::slotted([slot="end"]) {
119-
margin-inline-start: globals.$ion-space-200;
120-
}
121-
122-
// Input Shapes
123-
// --------------------------------------------------
124-
125-
:host(.input-fill-outline.input-shape-soft) {
126-
--border-radius: #{globals.$ion-border-radius-200};
127-
}
128-
129-
:host(.input-fill-outline.input-shape-round) {
130-
--border-radius: #{globals.$ion-border-radius-400};
131-
}
132-
133-
:host(.input-fill-outline.input-shape-rectangular) {
134-
--border-radius: #{globals.$ion-border-radius-0};
135-
}
136-
137-
// Input Focus
138-
// ----------------------------------------------------------------
139-
140-
:host(.input-fill-outline.has-focus) {
141-
--border-width: #{globals.$ion-border-size-050};
4+
--background: #{globals.$ion-primitives-base-white};
5+
--border-color: #{globals.$ion-primitives-neutral-500};
1426
}

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

Lines changed: 136 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,128 @@
11
@use "../../themes/ionic/ionic.globals.scss" as globals;
22
@use "./input.common";
33
@forward "./input.ionic.outline.scss";
4-
4+
@forward "./input.ionic.solid.scss";
55
// Ionic Input
66
// --------------------------------------------------
77

88
:host {
99
--color: #{globals.$ion-primitives-neutral-1200};
1010
--border-width: #{globals.$ion-border-size-025};
11-
--border-color: #{globals.$ion-primitives-neutral-500};
1211
--highlight-color-valid: #{globals.$ion-semantics-success-900};
13-
--highlight-color-invalid: #{globals.$ion-semantics-danger-800};
12+
--highlight-color-invalid: #{globals.$ion-border-danger-default};
1413
--placeholder-color: #{globals.$ion-primitives-neutral-800};
1514
--placeholder-opacity: 1;
16-
--background: #{globals.$ion-primitives-base-white};
1715

1816
@include globals.typography(globals.$ion-body-md-regular);
1917
}
2018

19+
// Input Outline Container
20+
// ----------------------------------------------------------------
21+
22+
.input-outline {
23+
@include globals.position(0, 0, 0, 0);
24+
@include globals.border-radius(var(--border-radius));
25+
26+
position: absolute;
27+
28+
width: 100%;
29+
height: 100%;
30+
31+
pointer-events: none;
32+
33+
border: var(--border-width) var(--border-style) var(--border-color);
34+
}
35+
36+
// Input Label Placement: Stacked
37+
// ----------------------------------------------------------------
38+
39+
// This makes the label sit above the input.
40+
:host(.label-floating.input-label-placement-stacked) .label-text-wrapper {
41+
@include globals.margin(0);
42+
@include globals.padding(globals.$ion-space-100, null);
43+
}
44+
45+
.input-wrapper {
46+
/**
47+
* For the ionic theme, the padding needs to sit on the
48+
* native wrapper instead, so that it sits within the
49+
* outline container but does not always affect the
50+
* label text.
51+
*/
52+
@include globals.padding(0);
53+
54+
/**
55+
* Outline inputs do not have a bottom border.
56+
* Instead, they have a border that wraps the
57+
* input + label.
58+
*/
59+
border-bottom: none;
60+
61+
/**
62+
* Do not show a background on the input wrapper as
63+
* this includes the label, instead we apply the
64+
* background to the native wrapper.
65+
*/
66+
background: transparent;
67+
}
68+
69+
.label-text-wrapper {
70+
/**
71+
* The label should appear on top of an outline
72+
* container that overlaps it so it is always clickable.
73+
*/
74+
position: relative;
75+
}
76+
77+
:host(.input-label-placement-stacked) .label-text-wrapper {
78+
@include globals.transform-origin(start, top);
79+
80+
/**
81+
* Label text should not extend
82+
* beyond the bounds of the input.
83+
*/
84+
max-width: calc(100% - var(--padding-start) - var(--padding-end));
85+
}
86+
87+
/**
88+
* The bottom content should never have
89+
* a border with the outline style.
90+
*/
91+
.input-bottom {
92+
border-top: none;
93+
}
94+
95+
.native-wrapper {
96+
@include globals.border-radius(inherit);
97+
@include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
98+
99+
min-height: globals.$ion-scale-1000;
100+
101+
/**
102+
* Apply the background to the native input
103+
* wrapper to only style the input.
104+
*/
105+
background: var(--background);
106+
}
107+
21108
// Ionic Input Sizes
22109
// --------------------------------------------------
23110

111+
:host(.input-size-medium) {
112+
--padding-start: #{globals.$ion-space-300};
113+
--padding-end: #{globals.$ion-space-300};
114+
}
115+
116+
:host(.input-size-large) {
117+
--padding-start: #{globals.$ion-space-400};
118+
--padding-end: #{globals.$ion-space-400};
119+
}
120+
121+
:host(.input-size-xlarge) {
122+
--padding-start: #{globals.$ion-space-500};
123+
--padding-end: #{globals.$ion-space-500};
124+
}
125+
24126
:host(.input-size-medium) .native-wrapper {
25127
min-height: globals.$ion-scale-1000;
26128
}
@@ -33,10 +135,25 @@
33135
min-height: globals.$ion-scale-1400;
34136
}
35137

138+
// Input Shapes
139+
// --------------------------------------------------
140+
141+
:host(.input-shape-soft) {
142+
--border-radius: #{globals.$ion-soft-xl};
143+
}
144+
145+
:host(.input-shape-round) {
146+
--border-radius: #{globals.$ion-round-xl};
147+
}
148+
149+
:host(.input-shape-rectangular) {
150+
--border-radius: #{globals.$ion-rectangular-xl};
151+
}
152+
36153
// Ionic Input Password Toggle Sizes
37154
// --------------------------------------------------
38155

39-
:host ion-input-password-toggle {
156+
:host(.input-size-medium) ion-input-password-toggle {
40157
--size: #{globals.$ion-scale-1000};
41158
}
42159

@@ -50,7 +167,8 @@
50167

51168
// Target area
52169
// --------------------------------------------------
53-
:host .native-wrapper::after {
170+
171+
.native-wrapper::after {
54172
@include globals.position(50%, 0, null, 0);
55173

56174
position: absolute;
@@ -78,6 +196,17 @@
78196
z-index: 2;
79197
}
80198

199+
// Start/End Slots
200+
// ----------------------------------------------------------------
201+
202+
::slotted([slot="start"]) {
203+
margin-inline-end: globals.$ion-space-200;
204+
}
205+
206+
::slotted([slot="end"]) {
207+
margin-inline-start: globals.$ion-space-200;
208+
}
209+
81210
// Input Clear Button
82211
// ----------------------------------------------------------------
83212

@@ -202,29 +331,12 @@
202331
--background: #{globals.$ion-primitives-neutral-100};
203332
}
204333

205-
// Input Highlight
206-
// ----------------------------------------------------------------
207-
208-
.input-highlight {
209-
@include globals.position(null, null, -1px, 0);
210-
211-
position: absolute;
212-
213-
width: 100%;
214-
height: globals.$ion-border-size-050;
215-
216-
transform: scale(0);
217-
218-
transition: transform globals.$ion-transition-time-200;
219-
220-
background: var(--border-color);
221-
}
222-
223334
// Input Focus
224335
// ----------------------------------------------------------------
225336

226337
:host(.has-focus) {
227338
--border-color: #{globals.$ion-border-focus-default};
339+
--border-width: #{globals.$ion-border-size-050};
228340
}
229341

230342
:host(.has-focus) .input-highlight {

0 commit comments

Comments
 (0)