Skip to content

Commit 0bf4fe5

Browse files
SisIvanovasimeonoffdesig9stein
authored
feat(input-group): add read-only styles (#16144)
* feat(input-group): add read-only styles * feat(date-picker/time-picker): readonly styles * refactor(input-group): add input read only directive Adds the ability to apply and override the read-only state of an input group via a CSS class. * refactor(input-group): read-only styles using new directive * refactor(input-group): update directive name * test(input-group): covering the newly added readonly directive * fix(date-picker/time-picker): remove default readonly state * fix(input): fluent theme search type * spec(excel-style-date-expression): fix failing test * spec(grid-filtering-ui): fix failing tests * build(styles): increase allowed budget --------- Co-authored-by: Simeon Simeonoff <[email protected]> Co-authored-by: Marin Popov <[email protected]>
1 parent 81e8406 commit 0bf4fe5

22 files changed

+320
-83
lines changed

‎angular.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -307,8 +307,8 @@
307307
{
308308
"type": "bundle",
309309
"name": "styles",
310-
"maximumWarning": "480kb",
311-
"maximumError": "490kb"
310+
"maximumWarning": "500kb",
311+
"maximumError": "550kb"
312312
},
313313
{
314314
"type": "anyComponentStyle",

‎projects/igniteui-angular/src/lib/combo/combo.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<ng-content select="igx-hint, [igxHint]"></ng-content>
1010
</ng-container>
1111
<input igxInput #comboInput name="comboInput" type="text" [value]="displayValue" readonly
12-
[attr.placeholder]="placeholder" [disabled]="disabled"
12+
[attr.placeholder]="placeholder" [disabled]="disabled" [igxReadOnlyInput]="false"
1313
role="combobox" aria-haspopup="listbox"
1414
[attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
1515
[attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"

‎projects/igniteui-angular/src/lib/combo/combo.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navig
2525
import { IgxIconComponent } from '../icon/icon.component';
2626
import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
2727
import { IgxInputDirective } from '../directives/input/input.directive';
28+
import { IgxReadOnlyInputDirective } from '../directives/input/read-only-input.directive';
2829

2930
/** Event emitted when an igx-combo's selection is changing */
3031
export interface IComboSelectionChangingEventArgs extends IBaseCancelableEventArgs {
@@ -115,6 +116,7 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
115116
IgxComboAddItemComponent,
116117
IgxButtonDirective,
117118
IgxRippleDirective,
119+
IgxReadOnlyInputDirective,
118120
IgxComboFilteringPipe,
119121
IgxComboGroupingPipe
120122
]

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,11 @@
4242
}
4343

4444
@include e(notch) {
45-
@extend %igx-input-group__notch !optional;
45+
@extend %igx-input-group__notch !optional;
4646
}
4747

4848
@include e(filler) {
49-
@extend %igx-input-group__filler !optional;
49+
@extend %igx-input-group__filler !optional;
5050
}
5151

5252
@include e(input) {
@@ -111,20 +111,24 @@
111111
@extend %suffixed !optional;
112112
}
113113

114+
@include m(readonly) {
115+
@extend %form-group-display--readonly !optional;
116+
}
117+
114118
// Textarea modifier
115119
@include m(textarea-group) {
116120
@extend %textarea-group !optional;
117121

118122
@include e(bundle-main) {
119-
@extend %form-group-textarea-group-bundle-main !optional;
123+
@extend %form-group-textarea-group-bundle-main !optional;
120124
}
121125

122126
@include e(bundle) {
123-
@extend %form-group-textarea-group-bundle !optional;
127+
@extend %form-group-textarea-group-bundle !optional;
124128
}
125129

126130
@include e(label) {
127-
@extend %form-group-textarea-label !optional;
131+
@extend %form-group-textarea-label !optional;
128132
}
129133
}
130134

@@ -282,6 +286,8 @@
282286
}
283287

284288
@include m(invalid) {
289+
@extend %form-group-display--invalid !optional;
290+
285291
@include e(label) {
286292
@extend %form-group-label--error !optional;
287293
}

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

Lines changed: 157 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,91 @@
280280
}
281281
}
282282

283+
%form-group-display--readonly:not(%form-group-display--file) {
284+
igx-prefix,
285+
[igxPrefix],
286+
igx-suffix,
287+
[igxSuffix] {
288+
color: var-get($theme, 'disabled-text-color');
289+
290+
@if $variant == 'fluent' {
291+
background: transparent;
292+
}
293+
294+
@if $variant == 'bootstrap' {
295+
background: var-get($theme, 'border-disabled-background');
296+
}
297+
}
298+
299+
@if $variant == 'bootstrap' {
300+
%form-group-input {
301+
background: var-get($theme, 'border-disabled-background');
302+
}
303+
}
304+
305+
%form-group-bundle--hover::after {
306+
@if $variant == 'material' {
307+
border-block-end-color: var-get($theme, 'idle-bottom-line-color');
308+
}
309+
}
310+
311+
@if $variant == 'indigo' {
312+
%form-group-bundle--hover:not(:focus-within) {
313+
background: unset;
314+
315+
&::after {
316+
border-block-end-color: var-get($theme, 'disabled-text-color');
317+
}
318+
}
319+
}
320+
321+
&%igx-input-group-fluent:not(:focus-within) {
322+
%form-group-bundle--hover::before {
323+
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
324+
}
325+
}
326+
327+
&%form-group-display--box:not(%form-group-display--disabled) {
328+
%form-group-bundle {
329+
background: var-get($theme, 'box-background-focus');
330+
}
331+
}
332+
333+
&%form-group-display--border:not(%form-group-display--disabled) {
334+
%form-group-bundle:hover:not(:focus-within) {
335+
%form-group-bundle-start,
336+
%igx-input-group__filler,
337+
%form-group-bundle-end {
338+
border-color: var-get($theme, 'border-color');
339+
}
340+
341+
%igx-input-group__notch {
342+
border-block-start-color: var-get($theme, 'border-color');
343+
border-block-end-color: var-get($theme, 'border-color');
344+
}
345+
}
346+
}
347+
348+
&%form-group-display--search {
349+
%form-group-bundle-search--hover:not(:focus-within) {
350+
box-shadow: var-get($theme, 'search-resting-shadow');
351+
}
352+
}
353+
354+
&:hover {
355+
%form-group-input--hover {
356+
cursor: default;
357+
color: var-get($theme, 'filled-text-color');
358+
359+
&:not(:focus-within) {
360+
&::placeholder {
361+
color: var-get($theme, 'placeholder-color');
362+
}
363+
}
364+
}
365+
}
366+
}
367+
283368
%form-group-display--disabled {
284369
pointer-events: none;
285370
user-select: none;
@@ -355,8 +440,6 @@
355440
}
356441

357442
%form-group-bundle--hover {
358-
//cursor: pointer;
359-
360443
&::after {
361444
border-block-end-width: rem(1px);
362445
border-block-end-color: var-get($theme, 'hover-bottom-line-color');
@@ -390,13 +473,6 @@
390473
caret-color: initial;
391474
}
392475

393-
%form-group-bundle--error {
394-
&::after {
395-
border-block-end-color: var-get($theme, 'error-secondary-color');
396-
}
397-
caret-color: initial;
398-
}
399-
400476
%form-group-bundle--disabled {
401477
cursor: default;
402478

@@ -606,8 +682,7 @@
606682
%bootstrap-file-focused,
607683
%bootstrap-file-valid,
608684
%bootstrap-file-warning,
609-
%bootstrap-file-invalid
610-
{
685+
%bootstrap-file-invalid {
611686
%form-group-bundle {
612687
border-radius: var-get($theme, 'box-border-radius');
613688
transition: box-shadow .15s ease-out, border .15s ease-out;
@@ -900,22 +975,16 @@
900975
}
901976

902977
&:hover {
903-
%form-group-bundle-start {
904-
border-color: var-get($theme, 'hover-border-color');
905-
}
906-
907-
%igx-input-group__filler {
978+
%form-group-bundle-start,
979+
%igx-input-group__filler,
980+
%form-group-bundle-end {
908981
border-color: var-get($theme, 'hover-border-color');
909982
}
910983

911984
%igx-input-group__notch {
912985
border-block-start-color: var-get($theme, 'hover-border-color');
913986
border-block-end-color: var-get($theme, 'hover-border-color');
914987
}
915-
916-
%form-group-bundle-end {
917-
border-color: var-get($theme, 'hover-border-color');
918-
}
919988
}
920989
}
921990

@@ -1236,10 +1305,6 @@
12361305
color: var-get($theme, 'success-secondary-color');
12371306
}
12381307

1239-
%form-group-label--error {
1240-
color: var-get($theme, 'error-secondary-color');
1241-
}
1242-
12431308
%form-group-label--required {
12441309
&::after {
12451310
content: '#{$required-symbol}';
@@ -1511,11 +1576,8 @@
15111576
}
15121577
}
15131578

1514-
%form-group-line--error {
1515-
background: var-get($theme, 'error-secondary-color');
1516-
}
1517-
1518-
%form-group-border--error {
1579+
%form-group-border--error:not(%form-group-display--readonly),
1580+
%form-group-border--error%form-group-display--file {
15191581
%form-group-bundle-start {
15201582
border-inline-start-color: var-get($theme, 'error-secondary-color');
15211583
border-block-start-color: var-get($theme, 'error-secondary-color');
@@ -1605,10 +1667,6 @@
16051667
%form-group-helper--warning {
16061668
color: var-get($theme, 'warning-secondary-color');
16071669
}
1608-
1609-
%form-group-helper--error {
1610-
color: var-get($theme, 'error-secondary-color');
1611-
}
16121670
}
16131671

16141672
%form-group-helper-item {
@@ -1766,6 +1824,15 @@
17661824
background: var(--igx-input-group-input-suffix-background, transparent);
17671825
color: var(--igx-input-group-input-suffix-color, var(--ig-primary-500));
17681826
}
1827+
1828+
&%form-group-display--readonly {
1829+
igx-prefix,
1830+
[igxPrefix],
1831+
igx-suffix,
1832+
[igxSuffix] {
1833+
color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500));
1834+
}
1835+
}
17691836
}
17701837

17711838
%igx-input-group-fluent-search--focused {
@@ -1778,6 +1845,13 @@
17781845
[igxSuffix] {
17791846
color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
17801847
}
1848+
1849+
&%form-group-display--readonly {
1850+
igx-suffix,
1851+
[igxSuffix] {
1852+
color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
1853+
}
1854+
}
17811855
}
17821856

17831857
// Bundle
@@ -1855,14 +1929,6 @@
18551929
}
18561930
}
18571931

1858-
%form-group-bundle-error--fluent,
1859-
%form-group-bundle-error--fluent--hover,
1860-
%form-group-bundle-error--fluent--focus {
1861-
&::before {
1862-
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
1863-
}
1864-
}
1865-
18661932
%form-group-bundle-success--fluent,
18671933
%form-group-bundle-success--fluent--hover,
18681934
%form-group-bundle-success--fluent--focus {
@@ -1892,6 +1958,48 @@
18921958
}
18931959
}
18941960

1961+
%form-group-display--invalid:not(%form-group-display--readonly),
1962+
%form-group-display--invalid%form-group-display--file {
1963+
@if $variant != 'indigo' {
1964+
%form-group-label--error,
1965+
%form-group-helper--error {
1966+
color: var-get($theme, 'error-secondary-color');
1967+
}
1968+
}
1969+
1970+
%form-group-line--error {
1971+
background: var-get($theme, 'error-secondary-color');
1972+
}
1973+
1974+
%form-group-bundle--error {
1975+
&::after {
1976+
border-block-end-color: var-get($theme, 'error-secondary-color');
1977+
}
1978+
1979+
caret-color: initial;
1980+
}
1981+
1982+
&%form-group-display--bootstrap {
1983+
%bootstrap-input--error {
1984+
border: rem(1px) solid var-get($theme, 'error-secondary-color');
1985+
1986+
&:focus {
1987+
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
1988+
}
1989+
}
1990+
}
1991+
1992+
&%igx-input-group-fluent {
1993+
%form-group-bundle-error--fluent,
1994+
%form-group-bundle-error--fluent--hover,
1995+
%form-group-bundle-error--fluent--focus {
1996+
&::before {
1997+
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
1998+
}
1999+
}
2000+
}
2001+
}
2002+
18952003
// Native input
18962004
%fluent-input {
18972005
font-size: rem(14px);
@@ -2255,14 +2363,16 @@
22552363
box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
22562364
}
22572365

2258-
%bootstrap-input--error {
2259-
border: rem(1px) solid var-get($theme, 'error-secondary-color');
2260-
2261-
&:focus {
2262-
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2366+
%form-group-display:not(%form-group-display--file) {
2367+
%bootstrap-input--error {
2368+
border: rem(1px) solid var-get($theme, 'error-secondary-color');
22632369

2264-
+ %bootstrap-file-input {
2370+
&:focus {
22652371
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2372+
2373+
+ %bootstrap-file-input {
2374+
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2375+
}
22662376
}
22672377
}
22682378
}

0 commit comments

Comments
 (0)