Skip to content

Commit 1725a20

Browse files
desig9steinSisIvanovarkaraivanov
authored
fix(input-group): replace fluent border with box-shadow (#1726)
--------- Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>
1 parent 3b516ae commit 1725a20

5 files changed

Lines changed: 169 additions & 125 deletions

File tree

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,27 @@ $dropdown-theme: dropdown-theme.$fluent;
2727

2828
igc-input::part(container) {
2929
background: transparent;
30-
border-inline-start: 0;
31-
border-inline-end-color: transparent;
32-
border-block-start: 0;
3330
border-radius: 0;
31+
border-inline: 0;
32+
border-block-start: 0;
33+
34+
&::before {
35+
inset-inline-start: 0;
36+
width: calc(100% - var(--input-border-size));
37+
38+
// The shadow color is set by the color: prop set on the input-group [part=container]::before element
39+
// Here we only change the shadow to look like border bottom
40+
box-shadow: inset 0 calc(var(--input-border-size) * -1) 0 0;
41+
border-radius: 0;
42+
}
43+
}
44+
45+
igc-input:focus-within::part(container) {
46+
&::before {
47+
// The shadow color is set by the color: prop set on the input-group [part=container]::before element
48+
// Here we only change the shadow to look like border bottom
49+
box-shadow: inset 0 calc((var(--input-border-size) + #{rem(1px)}) * -1) 0 0;
50+
}
3451
}
3552

3653
igc-input::part(start) {
@@ -80,23 +97,6 @@ $dropdown-theme: dropdown-theme.$fluent;
8097
}
8198
}
8299

83-
:host([invalid]:focus-within) {
84-
igc-input::part(input) {
85-
height: calc(var(--size) - #{rem(4px)});
86-
}
87-
88-
igc-input::part(suffix) {
89-
height: var(--size);
90-
margin-inline-end: rem(-1px);
91-
margin-block-start: rem(-2px);
92-
}
93-
94-
igc-input::part(prefix) {
95-
margin-inline-start: rem(-1px);
96-
margin-block-start: rem(-2px);
97-
}
98-
}
99-
100100
:host(:disabled),
101101
:host([disabled]) {
102102
::slotted([slot='prefix']),

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

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

36-
:host(:not([invalid])[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(:not([invalid])[readonly]:focus-within) {
44-
igc-input::part(container) {
45-
border-color: var-get($theme, 'focused-border-color');
46-
}
47-
}
48-
49-
:host(:not([invalid])[readonly]) {
50-
igc-date-time-input:focus-within {
51-
&::part(container) {
52-
border-color: var-get($theme, 'focused-border-color');
36+
:host(:not([readonly], [invalid], [disabled])) {
37+
igc-input[readonly]:not(:focus):hover::part(container) {
38+
&::before {
39+
// This represents the shadow color
40+
color: var-get($theme, 'hover-border-color');
5341
}
5442
}
5543
}

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

Lines changed: 80 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,18 @@
22
@use '../light/themes' as *;
33

44
$theme: $fluent;
5-
$resting-border-width: rem(1px);
6-
$focused-border-width: rem(2px);
7-
$resting-height: calc(var-get($theme, 'size') - #{($resting-border-width * 2)});
8-
$focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
95

106
:host {
117
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
128
--input-size: var(--component-size);
139
--helper-text-top-spacer: rem(5px);
10+
--input-border-size: #{rem(1px)};
1411

1512
[part='prefix'],
1613
[part='suffix'] {
1714
font-size: rem(14px);
1815
cursor: default;
16+
z-index: 0;
1917

2018
::slotted(*) {
2119
color: inherit;
@@ -59,17 +57,35 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
5957

6058
[part^='container'] {
6159
height: var-get($theme, 'size');
60+
background: var-get($theme, 'border-background');
61+
border: var(--input-border-size) solid transparent;
6262
border-radius: var-get($theme, 'border-border-radius');
63-
border: #{$resting-border-width} solid var-get($theme, 'border-color');
6463
transition: none;
6564
cursor: text;
6665
grid-template-columns: auto 1fr auto;
67-
overflow: hidden;
66+
67+
&::before {
68+
content: '';
69+
position: absolute;
70+
inset: calc(var(--input-border-size) * -1);
71+
width: calc(100% + (var(--input-border-size) * 2));
72+
height: calc(100% + (var(--input-border-size) * 2));
73+
74+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
75+
// defaults to the css color: prop the same way as border-color: do.
76+
// We do this in order to have the shadow working correctly inside the Combo search
77+
// We can't change the var-get($theme, 'border-color') in the combo search, but we can change the shadow
78+
color: var-get($theme, 'border-color');
79+
box-shadow: inset 0 0 0 var(--input-border-size);
80+
border-radius: var-get($theme, 'border-border-radius');
81+
user-select: none;
82+
pointer-events: none;
83+
z-index: 1;
84+
}
6885
}
6986

7087
[part~='input'] {
7188
color: var-get($theme, 'idle-text-color');
72-
height: $resting-height;
7389
background: initial;
7490
font-size: rem(14px);
7591
padding-inline: rem(8px);
@@ -79,47 +95,58 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
7995
}
8096
}
8197

82-
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]) {
83-
[part='prefix'],
84-
[part='suffix'] {
85-
background: transparent;
98+
:host(:not([readonly], [invalid], :focus-within):hover) {
99+
[part^='container'] {
100+
&::before {
101+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
102+
// defaults to the css color: prop the same way as border-color: do.
103+
// We do this in order to have the shadow working correctly inside the Combo search
104+
// We can't change the var-get($theme, 'hover-border-color') in the combo search, but we can change the shadow
105+
color: var-get($theme, 'hover-border-color');
106+
box-shadow: inset 0 0 0 var(--input-border-size);
107+
}
86108
}
87109
}
88110

89-
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]:hover) {
111+
:host([aria-expanded][readonly]:not([invalid], :focus-within):hover) {
90112
[part^='container'] {
91-
border-color: var-get($theme, 'border-color');
113+
&::before {
114+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
115+
// defaults to the css color: prop the same way as border-color: do.
116+
// We do this in order to have the shadow working correctly inside the Combo search
117+
// We can't change the var-get($theme, 'hover-border-color') in the combo search, but we can change the shadow
118+
color: var-get($theme, 'hover-border-color');
119+
box-shadow: inset 0 0 0 var(--input-border-size);
120+
}
92121
}
93122
}
94123

95-
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) {
124+
:host([aria-haspopup]:not([readonly], [invalid], :focus-within):hover) {
96125
[part^='container'] {
97-
border-color: var-get($theme, 'focused-border-color');
126+
&::before {
127+
color: var-get($theme, 'hover-border-color');
128+
box-shadow: inset 0 0 0 var(--input-border-size);
129+
}
98130
}
99131
}
100132

101-
:host(:hover) {
102-
[part^='container'] {
103-
border-color: var-get($theme, 'hover-border-color');
133+
:host(:not([aria-haspopup],[aria-expanded])[readonly]) {
134+
[part='prefix'],
135+
[part='suffix'] {
136+
background: transparent;
104137
}
105138
}
106139

107140
:host(:focus-within) {
108141
[part^='container'] {
109-
border-color: var-get($theme, 'focused-border-color');
110-
border-width: #{$focused-border-width};
111-
}
112-
113-
[part~='input'] {
114-
height: $focused-height;
115-
}
116-
117-
[part='prefix'] {
118-
margin-inline-start: rem(-1px);
119-
}
120-
121-
[part='suffix'] {
122-
margin-inline-end: rem(-1px);
142+
&::before {
143+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
144+
// defaults to the css color: prop the same way as border-color: do.
145+
// We do this in order to have the shadow working correctly inside the Combo search
146+
// We can't change the var-get($theme, 'focused-border-color') in the combo search, but we can change the shadow
147+
color: var-get($theme, 'focused-border-color');
148+
box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)});
149+
}
123150
}
124151

125152
[name='prefix']::slotted(*),
@@ -166,15 +193,32 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
166193
:host([invalid]:hover),
167194
:host([readonly][invalid]:hover),
168195
:host([readonly][invalid]:focus-within) {
169-
[part^='container'] {
170-
border-color: var-get($theme, 'error-secondary-color');
196+
::part(helper-text) {
197+
color: var-get($theme, 'error-secondary-color');
198+
}
199+
200+
[part~='container'] {
201+
&::before {
202+
box-shadow: inset 0 0 0 var(--input-border-size) var-get($theme, 'error-secondary-color');
203+
}
204+
}
205+
}
206+
207+
:host([invalid]:focus-within),
208+
:host([readonly][invalid]:focus-within) {
209+
[part~='container'] {
210+
&::before {
211+
box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
212+
}
171213
}
172214
}
173215

174216
:host(:disabled),
175217
:host([disabled]) {
176-
[part^='container'] {
177-
border-color: var-get($theme, 'disabled-border-color');
218+
[part~='container'] {
219+
&::before {
220+
box-shadow: inset 0 0 0 var(--input-border-size) var-get($theme, 'disabled-border-color');
221+
}
178222
}
179223

180224
[part^='container'],

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
$theme: $fluent;
77
$dropdown-theme: dropdown-theme.$fluent;
88
$input-theme: input-theme.$fluent;
9-
$focused-border-width: rem(2px);
109

1110
:host {
1211
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
@@ -40,23 +39,21 @@ $focused-border-width: rem(2px);
4039
background: var-get($theme, 'toggle-button-background-focus');
4140
}
4241

43-
igc-input[readonly]:not([disabled])::part(container) {
44-
border-width: #{$focused-border-width};
45-
}
4642
}
4743

4844
:host(:not([invalid]):focus-within) {
4945
igc-input[readonly]:not([disabled])::part(container) {
50-
border-color: var-get($input-theme, 'focused-border-color');
51-
border-width: #{$focused-border-width};
52-
}
53-
54-
igc-input[readonly]:not([disabled])::part(prefix) {
55-
margin-inline-start: rem(-1px);
46+
&::before {
47+
box-shadow: inset 0 0 0 calc((var(--input-border-size) + #{rem(1px)})) var-get($input-theme, 'focused-border-color');
48+
}
5649
}
50+
}
5751

58-
igc-input[readonly]:not([disabled])::part(suffix) {
59-
margin-inline-end: rem(-1px);
52+
:host([invalid]:focus-within) {
53+
igc-input[readonly]:not([disabled])::part(container) {
54+
&::before {
55+
box-shadow: inset 0 0 0 calc((var(--input-border-size) + #{rem(1px)})) var-get($input-theme, 'error-secondary-color');
56+
}
6057
}
6158
}
6259

@@ -82,3 +79,4 @@ $focused-border-width: rem(2px);
8279
}
8380
}
8481
}
82+

0 commit comments

Comments
 (0)