Skip to content

Commit 208448c

Browse files
simeonoffCopilotkdinev
authored
refactor(input-group): add styling support for more input types (#17270)
* refactor(input-group): add CSS support for more input types * refactor(demos): remove dead code from input-group sample * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * refactor(input): inherit color in the color group by default * style(input-group): align focused/hovered empty state colors with webcomponents --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Konstantin Dinev <kdinev@infragistics.com>
1 parent 40a57ca commit 208448c

2 files changed

Lines changed: 121 additions & 20 deletions

File tree

‎projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 104 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'sass:map';
2+
@use 'sass:string';
23
@use '../../base' as *;
34
@use 'igniteui-theming/sass/animations/easings' as *;
45

@@ -11,6 +12,7 @@
1112
// The --variant CSS produced by css-vars is needed also
1213
// when dynamically switching between the input `type` attribute.
1314
$variant: map.get($theme, '_meta', 'theme');
15+
$mode: map.get($theme, '_meta', 'variant');
1416
$transition-timing: .25s $out-cubic;
1517
$material-theme: $variant == 'material';
1618
$indigo-theme: $variant == 'indigo';
@@ -112,7 +114,15 @@
112114

113115
@if $variant == 'material' {
114116
%form-group-display--border {
115-
&:has(input:-webkit-autofill, input:autofill) {
117+
&:has(
118+
input:-webkit-autofill,
119+
input:autofill,
120+
input[type='date'],
121+
input[type='time'],
122+
input[type='datetime-local'],
123+
input[type='month'],
124+
input[type='week']
125+
) {
116126
%igx-input-group__notch--border {
117127
border-block-start-color: transparent;
118128
}
@@ -137,12 +147,14 @@
137147

138148
%form-group-display {
139149
@include sizable();
150+
140151
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
141152
--input-size: var(--component-size);
142153
--input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
143154

144155
position: relative;
145156
display: block;
157+
color-scheme: string.unquote($mode);
146158
color: var-get($theme, 'idle-text-color');
147159

148160
igx-prefix,
@@ -193,6 +205,7 @@
193205

194206
input[type='number'] {
195207
-moz-appearance: textfield;
208+
appearance: textfield;
196209
}
197210

198211
// Don't show the number spinner
@@ -218,7 +231,15 @@
218231

219232
@if $variant == 'material' {
220233
&:not(%form-group-display--border) {
221-
&:has(input:-webkit-autofill, input:autofill) {
234+
&:has(
235+
input:-webkit-autofill,
236+
input:autofill,
237+
input[type='date'],
238+
input[type='time'],
239+
input[type='datetime-local'],
240+
input[type='month'],
241+
input[type='week']
242+
) {
222243
%form-group-label {
223244
--floating-label-position: -73%;
224245

@@ -230,12 +251,36 @@
230251
}
231252

232253
&:not(%form-group-display--focused, %form-group-display--filled) {
233-
&:has(input:not(:placeholder-shown, [type='file'])) {
254+
&:has(input:not(
255+
:placeholder-shown,
256+
[type='file'],
257+
[type='date'],
258+
[type='time'],
259+
[type='datetime-local'],
260+
[type='month'],
261+
[type='week']
262+
)) {
234263
%form-group-label {
235264
@include type-style('subtitle-1');
236265
transform: translateY(0);
237266
}
238267
}
268+
269+
&:has(
270+
input[type='date'],
271+
input[type='time'],
272+
input[type='datetime-local'],
273+
input[type='month'],
274+
input[type='week']
275+
) {
276+
%form-group-label {
277+
@include type-style('caption');
278+
}
279+
280+
%igx-input-group__notch {
281+
border-block-start-color: transparent !important;
282+
}
283+
}
239284
}
240285
}
241286
}
@@ -272,11 +317,31 @@
272317
color: var-get($theme, 'input-suffix-color--filled');
273318
background: var-get($theme, 'input-suffix-background--filled');
274319
}
320+
321+
&:not(%form-group-display--readonly, %form-group-display--disabled) {
322+
&:hover {
323+
%form-group-input {
324+
color: var-get($theme, 'filled-text-hover-color');
325+
}
326+
}
327+
328+
&%form-group-display--focused {
329+
%form-group-input {
330+
color: var-get($theme, 'focused-text-color');
331+
}
332+
}
333+
}
275334
}
276335

277336
%form-group-display--focused {
278337
color: var-get($theme, 'input-prefix-color--focused');
279338

339+
&:not(%form-group-display--filled) {
340+
%form-group-input {
341+
color: var-get($theme, 'idle-text-color');
342+
}
343+
}
344+
280345
igx-prefix,
281346
[igxPrefix] {
282347
color: var-get($theme, 'input-prefix-color--focused');
@@ -364,12 +429,9 @@
364429
&:hover {
365430
%form-group-input--hover {
366431
cursor: default;
367-
color: var-get($theme, 'filled-text-color');
368432

369-
&:not(:focus-within) {
370-
&::placeholder {
371-
color: var-get($theme, 'placeholder-color');
372-
}
433+
&:not(:focus-within)::placeholder {
434+
color: var-get($theme, 'placeholder-color');
373435
}
374436
}
375437
}
@@ -389,6 +451,10 @@
389451
[igxSuffix] {
390452
@extend %form-group-suffix--disabled;
391453
}
454+
455+
input::-webkit-datetime-edit {
456+
color: var-get($theme, 'disabled-text-color');
457+
}
392458
}
393459

394460
%form-group-box-wrapper {
@@ -1334,7 +1400,6 @@
13341400

13351401
%form-group-input {
13361402
position: relative;
1337-
display: block;
13381403
border: none;
13391404
padding-block-start: $input-top-padding;
13401405
padding-block-end: $input-bottom-padding;
@@ -1343,13 +1408,21 @@
13431408
width: 100%;
13441409
min-width: 0;
13451410
background: transparent;
1346-
color: var-get($theme, 'filled-text-color');
1411+
color: inherit;
13471412
outline-style: none;
13481413
box-shadow: none;
13491414
overflow: hidden;
13501415
text-overflow: ellipsis;
1351-
1352-
&:not(%form-group-textarea, [type='date']) {
1416+
appearance: none;
1417+
1418+
&:not(
1419+
%form-group-textarea,
1420+
[type='date'],
1421+
[type='time'],
1422+
[type='datetime-local'],
1423+
[type='month'],
1424+
[type='week']
1425+
) {
13531426
line-height: 0 !important; /* Reset typography */
13541427
}
13551428

@@ -1363,6 +1436,16 @@
13631436
line-height: normal; /* Fix placeholder position in Safari */
13641437
}
13651438

1439+
&::-webkit-datetime-edit-fields-wrapper {
1440+
width: 100%;
1441+
padding: 0;
1442+
}
1443+
1444+
&::-webkit-datetime-edit {
1445+
color: inherit;
1446+
line-height: normal;
1447+
}
1448+
13661449
@if $variant == 'indigo' {
13671450
height: calc(var-get($theme, 'size') - 1px);
13681451

@@ -1427,16 +1510,12 @@
14271510
}
14281511

14291512
%form-group-input--hover {
1430-
color: var-get($theme, 'filled-text-hover-color');
1431-
14321513
&::placeholder {
14331514
color: var-get($theme, 'hover-placeholder-color');
14341515
}
14351516
}
14361517

14371518
%form-group-input--focus {
1438-
color: var-get($theme, 'focused-text-color');
1439-
14401519
&::placeholder {
14411520
color: var-get($theme, 'hover-placeholder-color');
14421521
}
@@ -2299,7 +2378,15 @@
22992378

23002379
// The :not selector is needed otherwise bootstrap will override the %autofill-background-fix
23012380
%form-group-display--bootstrap {
2302-
:not(:has(input:-webkit-autofill, input:autofill)) {
2381+
:not(:has(
2382+
input:-webkit-autofill,
2383+
input:autofill,
2384+
input[type='date'],
2385+
input[type='time'],
2386+
input[type='datetime-local'],
2387+
input[type='month'],
2388+
input[type='week'])
2389+
) {
23032390
%bootstrap-input {
23042391
transition: box-shadow .15s ease-out, border .15s ease-out;
23052392
}

‎src/app/input-group-showcase/input-group-showcase.sample.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,28 @@ export class InputGroupShowcaseSampleComponent {
7171
control: {
7272
type: 'button-group',
7373
options: ['box', 'border', 'line', 'search'],
74-
defaultValue: 'box'
74+
defaultValue: 'border'
7575
}
7676
},
7777
type: {
7878
label: 'Native Input Type',
7979
control: {
8080
type: 'select',
81-
options: ['email', 'number', 'password', 'search', 'tel', 'text', 'url'],
82-
defaultValue: 'text'
81+
options: [
82+
'email',
83+
'number',
84+
'date',
85+
'time',
86+
'datetime-local',
87+
'month',
88+
'week',
89+
'password',
90+
'search',
91+
'tel',
92+
'text',
93+
'url'
94+
],
95+
defaultValue: 'datetime-local'
8396
}
8497
},
8598
label: {
@@ -205,6 +218,7 @@ export class InputGroupShowcaseSampleComponent {
205218
private updateDisabledState(isDisabled: boolean): void {
206219
Object.keys(this.reactiveForm.controls).forEach((controlName) => {
207220
const control = this.reactiveForm.get(controlName);
221+
208222
if (control) {
209223
isDisabled ? control.disable() : control.enable();
210224
}

0 commit comments

Comments
 (0)