Skip to content

Commit 928a2db

Browse files
SisIvanovaSisIvanova
committed
refactor(input/DRP): material theme readonly state
1 parent 5ee3046 commit 928a2db

File tree

5 files changed

+182
-12
lines changed

5 files changed

+182
-12
lines changed

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,27 @@ $theme: $fluent;
3333
}
3434
}
3535

36-
:host([readonly]:hover) {
36+
:host(:not([invalid])[readonly]:hover) {
3737
igc-input::part(container),
3838
igc-date-time-input::part(container) {
3939
border-color: var-get($theme, 'border-color');
4040
}
4141
}
4242

43-
:host([readonly]:focus-within) {
44-
igc-input::part(container),
45-
igc-date-time-input::part(container) {
43+
:host(:not([invalid])[readonly]:focus-within) {
44+
igc-input::part(container) {
4645
border-color: var-get($theme, 'focused-border-color');
4746
}
4847
}
4948

49+
:host(:not([invalid])[readonly]) {
50+
igc-date-time-input:focus-within {
51+
&::part(container) {
52+
border-color: var-get($theme, 'focused-border-color');
53+
}
54+
}
55+
}
56+
5057
:host(:disabled),
5158
:host([disabled]) {
5259
::part(label)::after {

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $theme: $indigo;
3333
padding: rem(8px) rem(16px);
3434
}
3535

36-
:host([readonly]) {
36+
:host(:not([invalid])[readonly]) {
3737
igc-input::part(container),
3838
igc-date-time-input::part(container) {
3939
border-color: var-get($theme, 'disabled-text-color');
@@ -43,14 +43,19 @@ $theme: $indigo;
4343
:host(:not([readonly]):hover) {
4444
igc-input[readonly]::part(container) {
4545
background: var-get($theme, 'box-background-hover');
46-
border-color: var-get($theme, 'hover-bottom-line-color');
4746
}
4847

4948
igc-input[readonly]::part(filled) {
5049
color: var-get($theme, 'filled-text-hover-color');
5150
}
5251
}
5352

53+
:host(:not([readonly], [invalid]):hover) {
54+
igc-input[readonly]::part(container) {
55+
border-color: var-get($theme, 'hover-bottom-line-color');
56+
}
57+
}
58+
5459
:host(:not([disabled])[invalid]),
5560
:host(:not(:disabled)[invalid]) {
5661
::part(helper-text) {

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
@use 'styles/utilities' as *;
2+
@use '../light/themes' as *;
3+
4+
$theme: $material;
5+
6+
:host(:not([invalid])[outlined][readonly]:hover) {
7+
igc-input::part(start),
8+
igc-input::part(end),
9+
igc-input::part(filler),
10+
igc-date-time-input::part(start),
11+
igc-date-time-input::part(end),
12+
igc-date-time-input::part(filler) {
13+
border-color: var-get($theme, 'border-color');
14+
}
15+
16+
igc-input::part(notch),
17+
igc-date-time-input::part(notch) {
18+
border-bottom-color: var-get($theme, 'border-color');
19+
}
20+
}
21+
22+
:host(:not([invalid])[outlined][readonly]:focus-within) {
23+
igc-input::part(start),
24+
igc-input::part(end),
25+
igc-input::part(filler) {
26+
border-color: var-get($theme, 'focused-border-color');
27+
}
28+
29+
igc-input::part(notch) {
30+
border-bottom-color: var-get($theme, 'focused-border-color');
31+
}
32+
}
33+
34+
:host(:not([invalid])[outlined][readonly]) {
35+
igc-date-time-input:focus-within {
36+
&::part(start),
37+
&::part(end),
38+
&::part(filler) {
39+
border-color: var-get($theme, 'focused-border-color');
40+
}
41+
42+
&::part(notch) {
43+
border-bottom-color: var-get($theme, 'focused-border-color');
44+
}
45+
}
46+
}
47+
48+
:host(:not([outlined],[disabled])[readonly]) {
49+
igc-input::part(container),
50+
igc-date-time-input::part(container) {
51+
background: var-get($theme, 'box-background-focus');
52+
}
53+
}
54+
55+
:host(:not([outlined],[invalid])[readonly]:hover) {
56+
igc-input::part(container) {
57+
border-bottom-color: var-get($theme, 'idle-bottom-line-color');
58+
59+
&::after {
60+
background: var-get($theme, 'idle-bottom-line-color');
61+
}
62+
}
63+
}
64+
65+
:host(:not([outlined],[invalid])[readonly]:focus-within) {
66+
igc-input::part(container) {
67+
border-bottom-color: var-get($theme, 'focused-bottom-line-color');
68+
69+
&::after {
70+
background: var-get($theme, 'focused-bottom-line-color');
71+
}
72+
}
73+
}
74+
75+
:host(:not([outlined],[invalid])[readonly]) {
76+
igc-date-time-input:hover {
77+
&::part(container) {
78+
border-bottom-color: var-get($theme, 'idle-bottom-line-color');
79+
80+
&::after {
81+
background: var-get($theme, 'idle-bottom-line-color');
82+
}
83+
}
84+
}
85+
86+
igc-date-time-input:focus-within {
87+
&::part(container) {
88+
border-bottom-color: var-get($theme, 'focused-bottom-line-color');
89+
90+
&::after {
91+
background: var-get($theme, 'focused-bottom-line-color');
92+
}
93+
}
94+
}
95+
}
96+
97+
:host(:not([outlined])[invalid][readonly]:hover),
98+
:host(:not([outlined])[invalid][readonly]:focus-within) {
99+
igc-input::part(container) {
100+
border-color: var-get($theme, 'error-secondary-color');
101+
102+
&::after {
103+
border-color: var-get($theme, 'error-secondary-color');
104+
}
105+
}
106+
}
107+
108+
:host(:not([outlined])[readonly][invalid]) {
109+
igc-date-time-input:hover,
110+
igc-date-time-input:focus-within {
111+
&::part(container) {
112+
border-color: var-get($theme, 'error-secondary-color');
113+
114+
&::after {
115+
border-color: var-get($theme, 'error-secondary-color');
116+
}
117+
}
118+
}
119+
}

‎src/components/date-range-picker/themes/themes.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { styles as shared } from './light/date-range-picker.shared.css.js';
1616
import { styles as bootstrap } from './shared/date-range-picker.bootstrap.css.js';
1717
import { styles as fluent } from './shared/date-range-picker.fluent.css.js';
1818
import { styles as indigo } from './shared/date-range-picker.indigo.css.js';
19+
import { styles as material } from './shared/date-range-picker.material.css.js';
1920

2021
const light = {
2122
shared: css`
@@ -25,7 +26,7 @@ const light = {
2526
${bootstrap} ${bootstrapLight}
2627
`,
2728
material: css`
28-
${materialLight}
29+
${material} ${materialLight}
2930
`,
3031
fluent: css`
3132
${fluent} ${fluentLight}
@@ -43,7 +44,7 @@ const dark = {
4344
${bootstrap} ${bootstrapDark}
4445
`,
4546
material: css`
46-
${materialDark}
47+
${material} ${materialDark}
4748
`,
4849
fluent: css`
4950
${fluent} ${fluentDark}

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

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,23 @@ input:placeholder-shown + [part='notch'] [part='label'],
206206
}
207207
}
208208

209+
:host(:not([outlined],[type='search'],[aria-haspopup='dialog'],[role='combobox'])[readonly]) {
210+
[part~='container'] {
211+
background: var-get($theme, 'box-background-focus');
212+
}
213+
}
214+
215+
:host(:not([outlined],[aria-haspopup='dialog'],[role='combobox'])[readonly]:hover) {
216+
[part~='container'] {
217+
background: var-get($theme, 'box-background-focus');
218+
border-bottom-color: var-get($theme, 'idle-bottom-line-color');
219+
220+
&::after {
221+
background: var-get($theme, 'idle-bottom-line-color');
222+
}
223+
}
224+
}
225+
209226
:host(:not([outlined]):hover) {
210227
[part~='container'] {
211228
background: var-get($theme, 'box-background-hover');
@@ -217,7 +234,8 @@ input:placeholder-shown + [part='notch'] [part='label'],
217234
}
218235
}
219236

220-
:host(:not([outlined]):focus-within) {
237+
:host(:not([outlined]):focus-within),
238+
:host(:not([outlined],[aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) {
221239
[part~='container'] {
222240
background: var-get($theme, 'box-background-focus');
223241
border-bottom-color: var-get($theme, 'focused-bottom-line-color');
@@ -235,7 +253,8 @@ input:placeholder-shown + [part='notch'] [part='label'],
235253
}
236254

237255
:host(:not([outlined])[invalid]),
238-
:host(:not([outlined])[invalid]:focus-within) {
256+
:host(:not([outlined])[invalid]:focus-within),
257+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[invalid][readonly]:hover) {
239258
[part~='container'] {
240259
border-color: var-get($theme, 'error-secondary-color');
241260

@@ -272,7 +291,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
272291
}
273292
}
274293

275-
:host([type='search']:hover),
294+
:host(:not([readonly])[type='search']:hover),
276295
:host([type='search']:focus-within) {
277296
[part^='container'] {
278297
box-shadow: var-get($theme, 'search-hover-elevation');
@@ -382,6 +401,24 @@ input:placeholder-shown + [part='notch'] [part='label'],
382401
}
383402
}
384403

404+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly]:hover) {
405+
[part='notch'],
406+
[part='start'],
407+
[part='end'],
408+
[part='filler'] {
409+
border-color: var-get($theme, 'border-color');
410+
}
411+
}
412+
413+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly]:focus-within) {
414+
[part='notch'],
415+
[part='start'],
416+
[part='end'],
417+
[part='filler'] {
418+
border-color: var-get($theme, 'focused-border-color');
419+
}
420+
}
421+
385422
:host(:not([type='search'])[readonly][outlined]:focus-within) {
386423
:not([part~='filled']) {
387424
input:not(:placeholder-shown) + [part='notch'] [part='label'] {
@@ -478,7 +515,8 @@ input:placeholder-shown + [part='notch'] [part='label'],
478515
}
479516

480517
:host(:not([type='search'])[outlined][invalid]),
481-
:host(:not([type='search'])[outlined][invalid]:focus-within) {
518+
:host(:not([type='search'])[outlined][invalid]:focus-within),
519+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly][invalid]:hover) {
482520
[part='start'],
483521
[part='notch'],
484522
[part='filler'],

0 commit comments

Comments
 (0)