Skip to content

Commit 1504a5f

Browse files
kacheshmarovakacheshmarova
authored
Merge branch '20.0.x' into ikitanov/fix-15839
2 parents 78ad0c1 + f02e0a0 commit 1504a5f

29 files changed

+1244
-400
lines changed

‎projects/igniteui-angular/src/lib/core/i18n/input-resources.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ export interface IInputResourceStrings {
44
}
55

66
export const InputResourceStringsEN: IInputResourceStrings = {
7-
igx_input_upload_button: 'Upload File',
7+
igx_input_upload_button: 'Browse',
88
igx_input_file_placeholder: 'No file chosen',
99
};

‎projects/igniteui-angular/src/lib/core/styles/components/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,4 @@
5252
@forward 'tooltip/tooltip-theme';
5353
@forward 'tree/tree-theme';
5454
@forward 'watermark/watermark-theme';
55+
@forward 'input/file-input-theme';

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -880,7 +880,10 @@
880880
width: 100%;
881881
max-width: rem(200px);
882882
min-width: rem(140px);
883-
border: rem(1px) solid color($color: 'gray', $variant: 300);
883+
884+
@if $variant != 'fluent' {
885+
border: rem(1px) solid color($color: 'gray', $variant: 300);
886+
}
884887

885888
--size: calc(#{$filtering-row-height} - #{rem(8px)});
886889

@@ -892,9 +895,8 @@
892895
background: transparent;
893896
border-radius: 0;
894897

895-
&:hover,
896-
&:focus,
897-
&:focus-within {
898+
/* stylelint-disable-next-line */
899+
&:hover {
898900
background: transparent;
899901
}
900902
}
@@ -918,9 +920,8 @@
918920
.igx-input-group__input {
919921
border: 0;
920922

921-
&:hover,
922-
&:focus,
923-
&:focus-within {
923+
/* stylelint-disable-next-line */
924+
&:hover {
924925
border: 0;
925926
box-shadow: none;
926927
}
@@ -930,31 +931,53 @@
930931
display: none;
931932
}
932933

933-
.igx-input-group__bundle:focus,
934-
.igx-input-group__bundle:focus-within {
935-
.igx-input-group__bundle-main,
936-
.igx-input-group__bundle-start,
937-
.igx-input-group__bundle-end {
938-
margin: 0 !important;
939-
}
940-
941-
border-width: rem(1px);
942-
}
943-
944934
.igx-input-group__bundle-main {
945935
padding-inline-start: 0;
946936
}
947937

948938
color: var-get($theme, 'filtering-row-text-color');
949939

950-
&:hover,
951-
&:focus,
952-
&:focus-within {
940+
&:hover{
953941
color: var-get($theme, 'filtering-row-text-color');
954942
border-color: color($color: 'primary', $variant: 500);
955943
}
956944
}
957945

946+
.igx-input-group--focused {
947+
@if $variant != 'fluent' {
948+
border-color: color($color: 'primary', $variant: 500);
949+
border-width: rem(1px);
950+
}
951+
952+
color: var-get($theme, 'filtering-row-text-color');
953+
954+
.igx-input-group__bundle,
955+
.igx-input-group__bundle-start,
956+
.igx-input-group__bundle-end,
957+
.igx-input-group__input {
958+
border: 0 !important;
959+
960+
@if $variant != 'fluent' {
961+
box-shadow: none !important;
962+
}
963+
}
964+
965+
.igx-input-group__bundle-main,
966+
.igx-input-group__bundle-start,
967+
.igx-input-group__bundle-end {
968+
margin: 0 !important;
969+
}
970+
971+
.igx-input-group__bundle,
972+
.igx-input-group__bundle-start,
973+
.igx-input-group__bundle-end,
974+
igx-prefix,
975+
igx-suffix {
976+
background: transparent !important;
977+
border-radius: 0;
978+
}
979+
}
980+
958981
.igx-input-group__line {
959982
display: none;
960983
}

‎projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-component.scss

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@use '../../base' as *;
2+
@use 'sass:string';
3+
4+
/// @access private
5+
@mixin component {
6+
@include b(igx-file-input) {
7+
$this: bem--selector-to-string(&);
8+
9+
@include register-component(
10+
$name: string.slice($this, 2, -1),
11+
$deps: (igx-input-group)
12+
);
13+
14+
@include e(file-names) {
15+
@extend %file-names !optional;
16+
}
17+
18+
@include e(upload-button-wrapper) {
19+
@extend %upload-button-wrapper !optional;
20+
}
21+
22+
@include e(upload-button) {
23+
@extend %upload-button !optional;
24+
}
25+
26+
@include e(clear-icon) {
27+
@extend %clear-icon !optional;
28+
}
29+
30+
@include m(filled) {
31+
@include e(file-names) {
32+
@extend %file-names--filled !optional;
33+
}
34+
35+
@include e(upload-button-wrapper) {
36+
@extend %upload-button-wrapper--filled !optional;
37+
}
38+
39+
@include e(upload-button) {
40+
@extend %upload-button--filled !optional;
41+
}
42+
}
43+
44+
@include m(focused) {
45+
@include e(file-names) {
46+
@extend %file-names--focused !optional;
47+
}
48+
49+
@include e(upload-button-wrapper) {
50+
@extend %upload-button-wrapper--focused !optional;
51+
}
52+
53+
@include e(upload-button) {
54+
@extend %upload-button--focused !optional;
55+
}
56+
}
57+
58+
@include m(disabled) {
59+
@include e(file-names) {
60+
@extend %file-names--disabled !optional;
61+
}
62+
63+
@include e(upload-button-wrapper) {
64+
@extend %upload-button-wrapper--disabled !optional;
65+
}
66+
67+
@include e(upload-button) {
68+
@extend %upload-button--disabled !optional;
69+
}
70+
}
71+
}
72+
}

‎projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
@use 'sass:map';
2+
@use 'sass:meta';
3+
@use '../../base' as *;
4+
@use '../../themes/schemas' as *;
5+
@use 'igniteui-theming/sass/animations/easings' as *;
6+
7+
////
8+
/// @group themes
9+
/// @access public
10+
////
11+
12+
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
13+
/// @param {Color} $file-names-background [null] - The file names container background color.
14+
/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
15+
/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
16+
/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
17+
/// @param {Color} $file-names-foreground [null] - The file names color.
18+
/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
19+
/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
20+
/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
21+
/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
22+
/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
23+
/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
24+
/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
25+
/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
26+
/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
27+
/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
28+
/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
29+
/// @example scss Change the focused border and label colors
30+
/// $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
31+
/// // Pass the theme to the css-vars() mixin
32+
/// @include css-vars($my-file-input-theme);
33+
@function file-input-theme(
34+
$schema: $light-material-schema,
35+
$file-names-background: null,
36+
$file-names-background--focused: null,
37+
$file-names-background--filled: null,
38+
$file-names-background--disabled: null,
39+
$file-names-foreground: null,
40+
$file-names-foreground--focused: null,
41+
$file-names-foreground--filled: null,
42+
$file-names-foreground--disabled: null,
43+
44+
$file-selector-button-background: null,
45+
$file-selector-button-background--focused: null,
46+
$file-selector-button-background--filled: null,
47+
$file-selector-button-background--disabled: null,
48+
$file-selector-button-foreground: null,
49+
$file-selector-button-foreground--focused: null,
50+
$file-selector-button-foreground--filled: null,
51+
$file-selector-button-foreground--disabled: null,
52+
) {
53+
$name: 'igx-file-input';
54+
55+
// the variable are scoped to the selector so no other input except the file type will have them.
56+
$selector: '.igx-file-input';
57+
58+
$file-input-schema: ();
59+
@if map.has-key($schema, 'file-input') {
60+
$file-input-schema: map.get($schema, 'file-input');
61+
} @else {
62+
$file-input-schema: $schema;
63+
}
64+
65+
$theme: digest-schema($file-input-schema);
66+
67+
@return extend(
68+
$theme,
69+
(
70+
name: $name,
71+
selector: $selector,
72+
file-names-background: $file-names-background,
73+
file-names-background--focused: $file-names-background--focused,
74+
file-names-background--filled: $file-names-background--filled,
75+
file-names-background--disabled: $file-names-background--disabled,
76+
file-names-foreground: $file-names-foreground,
77+
file-names-foreground--focused: $file-names-foreground--focused,
78+
file-names-foreground--filled: $file-names-foreground--filled,
79+
file-names-foreground--disabled: $file-names-foreground--disabled,
80+
81+
file-selector-button-background: $file-selector-button-background,
82+
file-selector-button-background--focused: $file-selector-button-background--focused,
83+
file-selector-button-background--filled: $file-selector-button-background--filled,
84+
file-selector-button-background--disabled: $file-selector-button-background--disabled,
85+
file-selector-button-foreground: $file-selector-button-foreground,
86+
file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
87+
file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
88+
file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
89+
),
90+
);
91+
}
92+
93+
/// @deprecated Use the `css-vars` mixin instead.
94+
/// @see {mixin} css-vars
95+
/// @param {Map} $theme - The theme used to style the component.
96+
@mixin file-input($theme) {
97+
@include css-vars($theme);
98+
$variant: map.get($theme, '_meta', 'theme');
99+
100+
%file-names {
101+
color: var-get($theme, 'file-names-foreground');
102+
background-color: var-get($theme, 'file-names-background');
103+
}
104+
105+
%file-names--filled {
106+
color: var-get($theme, 'file-names-foreground--filled');
107+
background-color: var-get($theme, 'file-names-background--filled');
108+
}
109+
110+
%file-names--focused {
111+
color: var-get($theme, 'file-names-foreground--focused');
112+
background-color: var-get($theme, 'file-names-background--focused');
113+
}
114+
115+
%file-names--disabled {
116+
color: var-get($theme, 'file-names-foreground--disabled');
117+
background-color: var-get($theme, 'file-names-background--disabled');
118+
}
119+
120+
%upload-button-wrapper {
121+
background: #{var-get($theme, 'file-selector-button-background')}
122+
}
123+
124+
%upload-button {
125+
border-inline: 0;
126+
127+
// That button can't have :focus, :active, :hover states, that's why we dont need to override them here.
128+
--foreground: #{var-get($theme, 'file-selector-button-foreground')};
129+
--background: transparent;
130+
--resting-elevation: none;
131+
--shadow-color: none;
132+
--border-radius: 0;
133+
}
134+
135+
136+
%upload-button-wrapper--filled {
137+
color: #{var-get($theme, 'file-selector-button-foreground--filled')};
138+
background: #{var-get($theme, 'file-selector-button-background--filled')};
139+
}
140+
141+
%upload-button--filled {
142+
--foreground: #{var-get($theme, 'file-selector-button-foreground--filled')};
143+
--background: transparent;
144+
}
145+
146+
%upload-button-wrapper--focused {
147+
color: #{var-get($theme, 'file-selector-button-foreground--focused')};
148+
background: #{var-get($theme, 'file-selector-button-background--focused')};
149+
}
150+
151+
%upload-button--focused {
152+
--foreground: #{var-get($theme, 'file-selector-button-foreground--focused')};
153+
--background: transparent;
154+
}
155+
156+
%upload-button-wrapper--disabled {
157+
color: #{var-get($theme, 'file-selector-button-foreground--disabled')};
158+
background: #{var-get($theme, 'file-selector-button-background--disabled')};
159+
}
160+
161+
%upload-button--disabled {
162+
--disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')};
163+
--disabled-background: transparent;
164+
}
165+
166+
%clear-icon {
167+
&:focus {
168+
@if $variant == 'indigo' or $variant == 'fluent' {
169+
background-color: color($color: 'primary', $variant: 500);
170+
color: contrast-color($color: 'primary', $variant: 600);
171+
}
172+
173+
@if $variant == 'material' {
174+
background-color: transparent;
175+
color: color($color: 'secondary', $variant: 500);
176+
}
177+
178+
@if $variant == 'bootstrap' {
179+
color: contrast-color($color: 'primary', $variant: 600);
180+
background-color: color($color: 'primary', $variant: 500);
181+
}
182+
}
183+
}
184+
}
185+
186+
/// Adds typography styles for the .igx-file-input.
187+
/// Uses the 'subtitle-1', 'caption'
188+
/// category from the typographic scale.
189+
/// @group typography
190+
/// @param {Map} $categories [(file-text: 'subtitle-1')] - The categories from the typographic scale used for type styles.
191+
@mixin file-input-typography(
192+
$categories: (
193+
file-text: 'subtitle-1'
194+
)
195+
) {
196+
$file-text: map.get($categories, 'file-text');
197+
198+
%file-names {
199+
@include type-style($file-text) {
200+
margin: 0;
201+
}
202+
}
203+
}

0 commit comments

Comments
 (0)