Skip to content

Commit 42d0450

Browse files
SisIvanovaSisIvanova
committed
fix(DRP): readonly state
1 parent 12a0b1d commit 42d0450

File tree

10 files changed

+119
-77
lines changed

10 files changed

+119
-77
lines changed

‎src/components/date-range-picker/themes/dark/_themes.scss‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,38 @@
11
@use 'sass:map';
22
@use 'styles/utilities' as *;
33
@use 'igniteui-theming/sass/themes/schemas/components/dark/date-range-picker' as *;
4+
@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
45
@use 'components/calendar/themes/dark/themes' as calendar-theme;
5-
@use 'components/input/themes/dark/themes' as input-theme;
66

7-
$material: map.merge(digest-schema($dark-material-date-range-picker), (
7+
$material: map.merge(digest-schema($dark-material-date-range-picker), digest-schema(input-theme.$dark-material-input-group));
8+
$bootstrap: map.merge(digest-schema($dark-bootstrap-date-range-picker), digest-schema(input-theme.$dark-bootstrap-input-group));
9+
$fluent: map.merge(digest-schema($dark-fluent-date-range-picker), digest-schema(input-theme.$dark-fluent-input-group));
10+
$indigo: map.merge(digest-schema($dark-indigo-date-range-picker), digest-schema(input-theme.$dark-indigo-input-group));
11+
$material: map.merge($material, (
812
default-size: map.get(calendar-theme.$material, 'default-size'),
913
border-radius: map.get(calendar-theme.$material, 'border-radius'),
1014
border-color: map.get(calendar-theme.$material, 'border-color'),
1115
content-background: map.get(calendar-theme.$material, 'content-background'),
1216
actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
13-
size: map.get(input-theme.$material, 'size'),
14-
input-prefix-color: map.get(input-theme.$material, 'input-prefix-color'),
15-
input-prefix-color--filled: map.get(input-theme.$material, 'input-prefix-color--filled'),
16-
input-prefix-color--focused: map.get(input-theme.$material, 'input-prefix-color--focused'),
17-
helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
18-
disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
19-
error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
2017
));
21-
$bootstrap: map.merge(digest-schema($dark-bootstrap-date-range-picker), (
18+
$bootstrap: map.merge($bootstrap, (
2219
default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
2320
border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
2421
border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
2522
content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
2623
actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
27-
size: map.get(input-theme.$bootstrap, 'size'),
28-
input-prefix-color: map.get(input-theme.$bootstrap, 'input-prefix-color'),
29-
input-prefix-color--filled: map.get(input-theme.$bootstrap, 'input-prefix-color--filled'),
30-
input-prefix-color--focused: map.get(input-theme.$bootstrap, 'input-prefix-color--focused'),
31-
helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
32-
disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
33-
error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
3424
));
35-
$fluent: map.merge(digest-schema($dark-fluent-date-range-picker), (
25+
$fluent: map.merge($fluent, (
3626
default-size: map.get(calendar-theme.$fluent, 'default-size'),
3727
border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
3828
border-color: map.get(calendar-theme.$fluent, 'border-color'),
3929
content-background: map.get(calendar-theme.$fluent, 'content-background'),
4030
actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
41-
size: map.get(input-theme.$fluent, 'size'),
42-
input-prefix-color: map.get(input-theme.$fluent, 'input-prefix-color'),
43-
input-prefix-color--filled: map.get(input-theme.$fluent, 'input-prefix-color--filled'),
44-
input-prefix-color--focused: map.get(input-theme.$fluent, 'input-prefix-color--focused'),
45-
helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
46-
disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
47-
error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
4831
));
49-
$indigo: map.merge(digest-schema($dark-indigo-date-range-picker), (
32+
$indigo: map.merge($indigo, (
5033
default-size: map.get(calendar-theme.$indigo, 'default-size'),
5134
border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
5235
border-color: map.get(calendar-theme.$indigo, 'border-color'),
5336
content-background: map.get(calendar-theme.$indigo, 'content-background'),
5437
actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
55-
size: map.get(input-theme.$indigo, 'size'),
56-
input-prefix-color: map.get(input-theme.$indigo, 'input-prefix-color'),
57-
input-prefix-color--filled: map.get(input-theme.$indigo, 'input-prefix-color--filled'),
58-
input-prefix-color--focused: map.get(input-theme.$indigo, 'input-prefix-color--focused'),
59-
helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
60-
disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
61-
error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
6238
));

‎src/components/date-range-picker/themes/light/_themes.scss‎

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,39 @@
11
@use 'sass:map';
22
@use 'styles/utilities' as *;
33
@use 'igniteui-theming/sass/themes/schemas/components/light/date-range-picker' as *;
4+
@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as input-theme;
45
@use 'components/calendar/themes/light/themes' as calendar-theme;
5-
@use 'components/input/themes/light/themes' as input-theme;
66

7+
$material: map.merge(digest-schema($material-date-range-picker), digest-schema(input-theme.$material-input-group));
8+
$bootstrap: map.merge(digest-schema($bootstrap-date-range-picker), digest-schema(input-theme.$bootstrap-input-group));
9+
$fluent: map.merge(digest-schema($fluent-date-range-picker), digest-schema(input-theme.$fluent-input-group));
10+
$indigo: map.merge(digest-schema($indigo-date-range-picker), digest-schema(input-theme.$indigo-input-group));
711
$base: digest-schema($light-date-range-picker);
8-
$material: map.merge(digest-schema($material-date-range-picker), (
12+
$material: map.merge($material, (
913
default-size: map.get(calendar-theme.$material, 'default-size'),
1014
border-radius: map.get(calendar-theme.$material, 'border-radius'),
1115
border-color: map.get(calendar-theme.$material, 'border-color'),
1216
content-background: map.get(calendar-theme.$material, 'content-background'),
1317
actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
14-
size: map.get(input-theme.$material, 'size'),
15-
input-prefix-color: map.get(input-theme.$material, 'input-prefix-color'),
16-
input-prefix-color--filled: map.get(input-theme.$material, 'input-prefix-color--filled'),
17-
input-prefix-color--focused: map.get(input-theme.$material, 'input-prefix-color--focused'),
18-
helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
19-
disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
20-
error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
2118
));
22-
$bootstrap: map.merge(digest-schema($bootstrap-date-range-picker), (
19+
$bootstrap: map.merge($bootstrap, (
2320
default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
2421
border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
2522
border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
2623
content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
2724
actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
28-
size: map.get(input-theme.$bootstrap, 'size'),
29-
input-prefix-color: map.get(input-theme.$bootstrap, 'input-prefix-color'),
30-
input-prefix-color--filled: map.get(input-theme.$bootstrap, 'input-prefix-color--filled'),
31-
input-prefix-color--focused: map.get(input-theme.$bootstrap, 'input-prefix-color--focused'),
32-
helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
33-
disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
34-
error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
3525
));
36-
$fluent: map.merge(digest-schema($fluent-date-range-picker), (
26+
$fluent: map.merge($fluent, (
3727
default-size: map.get(calendar-theme.$fluent, 'default-size'),
3828
border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
3929
border-color: map.get(calendar-theme.$fluent, 'border-color'),
4030
content-background: map.get(calendar-theme.$fluent, 'content-background'),
4131
actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
42-
size: map.get(input-theme.$fluent, 'size'),
43-
input-prefix-color: map.get(input-theme.$fluent, 'input-prefix-color'),
44-
input-prefix-color--filled: map.get(input-theme.$fluent, 'input-prefix-color--filled'),
45-
input-prefix-color--focused: map.get(input-theme.$fluent, 'input-prefix-color--focused'),
46-
helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
47-
disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
48-
error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
4932
));
50-
$indigo: map.merge(digest-schema($indigo-date-range-picker), (
33+
$indigo: map.merge($indigo, (
5134
default-size: map.get(calendar-theme.$indigo, 'default-size'),
5235
border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
5336
border-color: map.get(calendar-theme.$indigo, 'border-color'),
5437
content-background: map.get(calendar-theme.$indigo, 'content-background'),
55-
actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
56-
size: map.get(input-theme.$indigo, 'size'),
57-
input-prefix-color: map.get(input-theme.$indigo, 'input-prefix-color'),
58-
input-prefix-color--filled: map.get(input-theme.$indigo, 'input-prefix-color--filled'),
59-
input-prefix-color--focused: map.get(input-theme.$indigo, 'input-prefix-color--focused'),
60-
helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
61-
disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
62-
error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
38+
actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color')
6339
));

‎src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,17 @@ $theme: $bootstrap;
2828
}
2929
}
3030

31+
:host([readonly]) {
32+
igc-input::part(container),
33+
igc-input::part(prefix),
34+
igc-input::part(suffix),
35+
igc-date-time-input::part(container),
36+
igc-date-time-input::part(prefix),
37+
igc-date-time-input::part(suffix) {
38+
background: var-get($theme, 'border-disabled-background');
39+
}
40+
}
41+
3142
[part='separator'] {
3243
@include type-style('body-1');
3344
}

‎src/components/date-range-picker/themes/shared/date-range-picker.common.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,15 @@ $theme: $material;
6060
:host(:not([readonly])) {
6161
--affix-color: #{var-get($theme, 'input-prefix-color')};
6262

63+
igc-date-time-input[readonly] {
64+
--affix-color: #{var-get($theme, 'input-prefix-color')};
65+
66+
&::part(prefix),
67+
&::part(suffix) {
68+
color: var(--affix-color);
69+
}
70+
}
71+
6372
[part='calendar-icon'],
6473
[part='calendar-icon-open'],
6574
[part='clear-icon'] {

‎src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,29 @@ $theme: $fluent;
2424
}
2525
}
2626

27+
:host(:not([disabled])[readonly]) {
28+
igc-input::part(prefix),
29+
igc-input::part(suffix),
30+
igc-date-time-input::part(prefix),
31+
igc-date-time-input::part(suffix) {
32+
background: transparent;
33+
}
34+
}
35+
36+
:host([readonly]:hover) {
37+
igc-input::part(container),
38+
igc-date-time-input::part(container) {
39+
border-color: var-get($theme, 'border-color');
40+
}
41+
}
42+
43+
:host([readonly]:focus-within) {
44+
igc-input::part(container),
45+
igc-date-time-input::part(container) {
46+
border-color: var-get($theme, 'focused-border-color');
47+
}
48+
}
49+
2750
:host(:disabled),
2851
:host([disabled]) {
2952
::part(label)::after {

‎src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,24 @@ $theme: $indigo;
3232
padding: rem(8px) rem(16px);
3333
}
3434

35+
:host([readonly]) {
36+
igc-input::part(container),
37+
igc-date-time-input::part(container) {
38+
border-color: var-get($theme, 'disabled-text-color');
39+
}
40+
}
41+
42+
:host(:not([readonly]):hover) {
43+
igc-input[readonly]::part(container) {
44+
background: var-get($theme, 'box-background-hover');
45+
border-color: var-get($theme, 'hover-bottom-line-color');
46+
}
47+
48+
igc-input[readonly]::part(filled) {
49+
color: var-get($theme, 'filled-text-hover-color');
50+
}
51+
}
52+
3553
:host(:not([disabled])[invalid]),
3654
:host(:not(:disabled)[invalid]) {
3755
::part(helper-text) {

‎src/components/input/themes/shared/input.bootstrap.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ $theme: $bootstrap;
6262
border-end-end-radius: 0;
6363
}
6464

65-
[part*='input prefixed suffixed'] {
65+
[part*='input prefixed suffixed'],
66+
[part*='input filled prefixed suffixed'] {
6667
border-radius: 0;
6768
}
6869

@@ -161,6 +162,14 @@ $theme: $bootstrap;
161162
}
162163
}
163164

165+
:host(:not([aria-haspopup='dialog'])[readonly]) {
166+
[part='prefix'],
167+
[part='suffix'],
168+
[part~='container'] {
169+
background: var-get($theme, 'border-disabled-background');
170+
}
171+
}
172+
164173
:host(:not([disabled])[invalid]),
165174
:host(:not([disabled])[invalid]:focus-within) {
166175
[part~='input'] {

‎src/components/input/themes/shared/input.common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ $theme: $base;
3030
}
3131

3232
:host(:focus-within),
33-
:host(:hover) {
33+
:host(:not([readonly]):hover) {
3434
[part~='input']::placeholder {
3535
color: var-get($theme, 'hover-placeholder-color');
3636
}

‎src/components/input/themes/shared/input.fluent.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,25 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
7676
}
7777
}
7878

79+
:host(:not([aria-haspopup='dialog'])[readonly]) {
80+
[part='prefix'],
81+
[part='suffix'] {
82+
background: transparent;
83+
}
84+
}
85+
86+
:host(:not([aria-haspopup='dialog'])[readonly]:hover) {
87+
[part^='container'] {
88+
border-color: var-get($theme, 'border-color');
89+
}
90+
}
91+
92+
:host(:not([aria-haspopup='dialog'])[readonly]:focus-within) {
93+
[part^='container'] {
94+
border-color: var-get($theme, 'focused-border-color');
95+
}
96+
}
97+
7998
:host(:hover) {
8099
[part^='container'] {
81100
border-color: var-get($theme, 'hover-border-color');

‎src/components/input/themes/shared/input.indigo.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -119,27 +119,21 @@ $transition-duration: .25s;
119119
}
120120
}
121121

122-
:host(:focus-within),
123-
:host(:hover) {
124-
[part^='container'] {
125-
background: var-get($theme, 'box-background-hover');
126-
}
127-
}
128-
129122
[part~='filled'] {
130123
[part~='input'] {
131124
color: var-get($theme, 'filled-text-color');
132125
}
133126
}
134127

135-
:host(:hover) {
128+
:host(:not([readonly]):hover) {
136129
[part~='filled'] {
137130
[part~='input'] {
138131
color: var-get($theme, 'filled-text-hover-color');
139132
}
140133
}
141134

142135
[part^='container'] {
136+
background: var-get($theme, 'box-background-hover');
143137
border-color: var-get($theme, 'hover-bottom-line-color');
144138
}
145139
}
@@ -153,6 +147,7 @@ $transition-duration: .25s;
153147
}
154148

155149
[part^='container'] {
150+
background: var-get($theme, 'box-background-hover');
156151
caret-color: var-get($theme, 'focused-bottom-line-color');
157152

158153
&::after {
@@ -171,6 +166,12 @@ $transition-duration: .25s;
171166
}
172167
}
173168

169+
:host(:not([aria-haspopup='dialog'])[readonly]) {
170+
[part^='container'] {
171+
border-color: var-get($theme, 'disabled-text-color');
172+
}
173+
}
174+
174175
:host([invalid]) {
175176
[part^='container'] {
176177
caret-color: initial;

0 commit comments

Comments
 (0)