Skip to content

Commit a9eea25

Browse files
desig9steindesig9stein
committed
refactor(input-group): refactor file type input structure
1 parent b28b211 commit a9eea25

File tree

7 files changed

+131
-29
lines changed

7 files changed

+131
-29
lines changed

‎projects/igniteui-angular/src/lib/input-group/input-group.component.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
class="igx-input-group__upload-button"
1414
[disabled]="disabled"
1515
tabindex="-1"
16-
(click)="uploadButtonHandler()"
1716
>
1817
{{ resourceStrings.igx_input_upload_button }}
1918
</button>
@@ -24,8 +23,8 @@
2423
<ng-template #files>
2524
@if (isFileType) {
2625
<div
27-
class="igx-input-group__file-input"
28-
[title]="fileNames"
26+
class="igx-input-group__file-input"
27+
[title]="fileNames"
2928
>
3029
<span>{{ fileNames }}</span>
3130
</div>
@@ -48,7 +47,7 @@
4847

4948
<ng-template #bundle>
5049
@if (!isTypeBorder) {
51-
<ng-container (click)="isFileType ? uploadButtonHandler() : null" *ngTemplateOutlet="label"></ng-container>
50+
<ng-container *ngTemplateOutlet="label"></ng-container>
5251
}
5352

5453
<div class="igx-input-group__bundle">
@@ -66,7 +65,7 @@
6665
</div>
6766
}
6867

69-
<div class="igx-input-group__bundle-main" (click)="isFileType ? uploadButtonHandler() : null">
68+
<div class="igx-input-group__bundle-main">
7069
<ng-content select="[igxInput]"></ng-content>
7170

7271
@if (isFileType) {

‎projects/igniteui-angular/src/lib/input-group/input-group.component.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
287287
/** @hidden @internal */
288288
@HostBinding('class.igx-input-group--suffixed')
289289
public get hasSuffixes() {
290-
return this._suffixes.length > 0;
290+
return this._suffixes.length > 0 || (this.isFileType && this.isFilled && !this.disabled);
291291
}
292292

293293
/** @hidden @internal */
@@ -348,11 +348,6 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
348348
return this.type === 'box' && this._theme === 'material';
349349
}
350350

351-
/** @hidden @internal */
352-
public uploadButtonHandler() {
353-
this.input.nativeElement.click();
354-
}
355-
356351
/** @hidden @internal */
357352
public clearValueHandler() {
358353
this.input.clear();

‎projects/igniteui-angular/src/lib/input-group/themes/_base.scss‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,17 @@ $base-scale-size: (
217217
}
218218

219219
&[type='file'] {
220-
@include hide-default();
220+
opacity: 0;
221+
z-index: 2;
222+
width: 100%;
223+
height: 100%;
224+
225+
&::-webkit-file-upload-button {
226+
width: inherit;
227+
height: inherit;
228+
}
221229
}
222230

223-
224231
&[type='number'] {
225232
-moz-appearance: textfield;
226233
}
@@ -266,8 +273,9 @@ $base-scale-size: (
266273
width: 100%;
267274
max-width: 100%;
268275
overflow: hidden;
269-
height: calc(var-get($theme, 'size') - 2px);
276+
height: var-get($theme, 'size');
270277
color: var-get($theme, 'placeholder-color');
278+
grid-column: 3 / -2;
271279

272280
span {
273281
@include ellipsis();
@@ -280,6 +288,16 @@ $base-scale-size: (
280288
}
281289
}
282290

291+
@include m(file, $not: (disabled)) {
292+
@include e(input) {
293+
&[type='file'] {
294+
&::-webkit-file-upload-button {
295+
cursor: pointer;
296+
}
297+
}
298+
}
299+
}
300+
283301
@include m(file, $not: (border)) {
284302
--_bundle-template-columns: auto auto 1fr auto;
285303

@@ -298,13 +316,12 @@ $base-scale-size: (
298316
}
299317

300318
@include m(file) {
301-
302-
@include e(bundle-main) {
303-
cursor: pointer;
319+
@include e(input) {
320+
grid-column: 2 / -2;
304321
}
305322

306-
@include e(label) {
307-
pointer-events: none;
323+
@include e(bundle-main) {
324+
display: contents;
308325
}
309326
}
310327

‎projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss‎

Lines changed: 92 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,15 @@ $border-radius: var-get($_theme, 'border-border-radius');
2727
.igx-input-group__bundle-main {
2828
border-start-start-radius: $border-radius;
2929
border-end-start-radius: $border-radius;
30+
3031
}
3132
}
3233

3334
igx-input-group:not(.igx-input-group--suffixed) {
3435
.igx-input-group__bundle-main {
3536
border-start-end-radius: $border-radius;
3637
border-end-end-radius: $border-radius;
38+
border-inline-start-width: $border-size;
3739
}
3840
}
3941

@@ -42,6 +44,20 @@ $border-radius: var-get($_theme, 'border-border-radius');
4244
border-radius: $border-radius;
4345
}
4446
}
47+
48+
igx-suffix + .igx-input-group__toggle-button,
49+
[igxSuffix] + .igx-input-group__toggle-button {
50+
// Add border between the toggle button and the rest of the suffixes
51+
border-inline-start: $border-size solid $border-color;
52+
}
53+
54+
igx-input-group:not(.igx-input-group--disabled) {
55+
.igx-input-group__clear-icon + igx-suffix,
56+
.igx-input-group__clear-icon + [igxSuffix] {
57+
// Add border between the clear button and the rest of the suffixes
58+
border-inline-start: $border-size solid $border-color;
59+
}
60+
}
4561
}
4662
}
4763

@@ -64,9 +80,7 @@ $border-radius: var-get($_theme, 'border-border-radius');
6480
@include e(upload) {
6581
@extend %border-styles;
6682

67-
border-block-width: $border-size;
68-
border-inline-start-width: $border-size;
69-
border-inline-end-width: 0;
83+
border-width: $border-size;
7084
background: var-get($_theme, 'input-prefix-background');
7185
grid-row: 2;
7286
}
@@ -114,6 +128,8 @@ $border-radius: var-get($_theme, 'border-border-radius');
114128
font-size: sizable(rem(16px), rem(16px), rem(20px));
115129
height: 100%;
116130
padding-block: 0;
131+
border-block: $border-size solid $border-color;
132+
border-inline-end: $border-size solid $border-color;
117133
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
118134
}
119135

@@ -153,6 +169,14 @@ $border-radius: var-get($_theme, 'border-border-radius');
153169
}
154170
}
155171

172+
@include m(file, $not: (suffixed)) {
173+
@include e(file-input) {
174+
border-start-end-radius: $border-radius;
175+
border-end-end-radius: $border-radius;
176+
border-inline-start-width: $border-size;
177+
}
178+
}
179+
156180
@include e(bundle-start) {
157181
&:empty {
158182
border: 0;
@@ -192,13 +216,22 @@ $border-radius: var-get($_theme, 'border-border-radius');
192216
transition: border .15s ease-out;
193217
border-color: var-get($_theme, 'focused-border-color');
194218
}
219+
220+
@include e(file-input) {
221+
transition: border .15s ease-out;
222+
border-color: var-get($_theme, 'focused-border-color');
223+
}
195224
}
196225

197226
@include m(invalid) {
198227
@include e(bundle-main) {
199228
border-color: var-get($_theme, 'error-secondary-color');
200229
}
201230

231+
@include e(file-input) {
232+
border-color: var-get($_theme, 'error-secondary-color');
233+
}
234+
202235
@include e(hint) {
203236
color: var-get($_theme, 'error-secondary-color');
204237
}
@@ -209,6 +242,10 @@ $border-radius: var-get($_theme, 'border-border-radius');
209242
border-color: var-get($_theme, 'warning-secondary-color');
210243
}
211244

245+
@include e(file-input) {
246+
border-color: var-get($_theme, 'warning-secondary-color');
247+
}
248+
212249
@include e(hint) {
213250
color: var-get($_theme, 'warning-secondary-color');
214251
}
@@ -219,6 +256,10 @@ $border-radius: var-get($_theme, 'border-border-radius');
219256
border-color: var-get($_theme, 'success-secondary-color');
220257
}
221258

259+
@include e(file-input) {
260+
border-color: var-get($_theme, 'success-secondary-color');
261+
}
262+
222263
@include e(hint) {
223264
color: var-get($_theme, 'success-secondary-color');
224265
}
@@ -228,18 +269,30 @@ $border-radius: var-get($_theme, 'border-border-radius');
228269
@include e(bundle-main) {
229270
border-color: var-get($_theme, 'error-secondary-color');
230271
}
272+
273+
@include e(file-input) {
274+
border-color: var-get($_theme, 'error-secondary-color');
275+
}
231276
}
232277

233278
@include mx(focused, warning) {
234279
@include e(bundle-main) {
235280
border-color: var-get($_theme, 'warning-secondary-color');
236281
}
282+
283+
@include e(file-input) {
284+
border-color: var-get($_theme, 'warning-secondary-color');
285+
}
237286
}
238287

239288
@include mx(focused, valid) {
240289
@include e(bundle-main) {
241290
border-color: var-get($_theme, 'success-secondary-color');
242291
}
292+
293+
@include e(bundle-main) {
294+
border-color: var-get($_theme, 'warning-secondary-color');
295+
}
243296
}
244297

245298
@include m(focused, $not: (file)) {
@@ -261,12 +314,12 @@ $border-radius: var-get($_theme, 'border-border-radius');
261314
}
262315
}
263316

264-
// TODO: This state has no schema variable
265-
//@include mx(focused, warning, ('not': (file))) {
266-
// @include e(bundle-main) {
267-
// box-shadow: 0 0 0 rem(4px) var-get($_theme, 'warning-shadow-color');
268-
// }
269-
//}
317+
@include mx(focused, warning, ('not': (file))) {
318+
@include e(bundle-main) {
319+
// TODO: This state has no schema variable
320+
box-shadow: 0 0 0 rem(4px) color($color: 'warning', $variant: 500, $opacity: .38);
321+
}
322+
}
270323

271324
$transition-border: border .15s ease-out;
272325
$transition-box-shadow: box-shadow .15s ease-out;
@@ -308,6 +361,12 @@ $border-radius: var-get($_theme, 'border-border-radius');
308361
@include e(bundle-end) {
309362
border-color: var-get($_theme, 'focused-border-color');
310363
}
364+
365+
.igx-input-group__clear-icon + igx-suffix,
366+
.igx-input-group__clear-icon + [igxSuffix] {
367+
// Add border between the clear button and the rest of the suffixes
368+
border-color: var-get($_theme, 'focused-border-color');
369+
}
311370
}
312371

313372
@include mx(file, valid) {
@@ -322,6 +381,12 @@ $border-radius: var-get($_theme, 'border-border-radius');
322381
@include e(bundle-end) {
323382
border-color: var-get($_theme, 'success-secondary-color');
324383
}
384+
385+
.igx-input-group__clear-icon + igx-suffix,
386+
.igx-input-group__clear-icon + [igxSuffix] {
387+
// Add border between the clear button and the rest of the suffixes
388+
border-color: var-get($_theme, 'success-secondary-color');
389+
}
325390
}
326391

327392
@include mx(file, invalid) {
@@ -350,6 +415,12 @@ $border-radius: var-get($_theme, 'border-border-radius');
350415
@include e(bundle-end) {
351416
border-color: var-get($_theme, 'warning-secondary-color');
352417
}
418+
419+
.igx-input-group__clear-icon + igx-suffix,
420+
.igx-input-group__clear-icon + [igxSuffix] {
421+
// Add border between the clear button and the rest of the suffixes
422+
border-color: var-get($_theme, 'warning-secondary-color');
423+
}
353424
}
354425

355426
@include mx(file, focused, valid) {
@@ -392,6 +463,18 @@ $border-radius: var-get($_theme, 'border-border-radius');
392463
@extend %disabled-styles;
393464
}
394465

466+
@include e(file-input) {
467+
border-color: var-get($_theme, 'disabled-border-color');
468+
}
469+
470+
@include e(clear-icon) {
471+
pointer-events: none;
472+
}
473+
474+
@include e(toggle-button) {
475+
border-color: var-get($_theme, 'disabled-border-color') !important;
476+
}
477+
395478
igx-prefix,
396479
[igxPrefix],
397480
igx-suffix:not(.igx-input-group__toggle-button),

‎projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ $_theme: $indigo;
8383
}
8484

8585
@include m(file) {
86+
@include e(input) {
87+
padding-block: 0;
88+
}
89+
8690
@include e(bundle) {
8791
> * {
8892
grid-row: 1;

‎projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ $input-bottom-spacing: rem(6px);
102102

103103
@include e(file-input) {
104104
@extend %input-paddings;
105+
106+
padding-inline: $input-inline-padding;
105107
}
106108

107109
@include e(bundle-start) {
@@ -754,6 +756,7 @@ $input-bottom-spacing: rem(6px);
754756
@include m(file, $not: (border)) {
755757
@include e(label) {
756758
@extend %box-floating-label;
759+
grid-row: 1 / -1;
757760
}
758761
}
759762

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,14 +136,15 @@ <h1 class="showcase__title">Angular</h1>
136136
[style.--ig-size]="getSize()">
137137

138138
@if (getLabel()) {
139-
<label igxLabel>{{ getLabel() }}</label>
139+
<label igxLabel for="file-in">{{ getLabel() }}</label>
140140
}
141141

142142
@if (hidePrefix()) {
143143
<igx-icon igxPrefix>face</igx-icon>
144144
}
145145

146146
<input
147+
id="file-in"
147148
formControlName="fieldFile"
148149
[required]="isRequired()"
149150
[type]="'file'"

0 commit comments

Comments
 (0)