Skip to content

Commit 81c3e17

Browse files
desig9steindesig9stein
committed
fix(input-group): replace fluent border with box-shadow
1 parent e1c79b9 commit 81c3e17

File tree

4 files changed

+133
-95
lines changed

4 files changed

+133
-95
lines changed

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

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,22 @@ $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+
32+
&::before {
33+
// The color value of the shadow is set by the color prop set by the input-group::before
34+
// Here we only change the shadow to look like border bottom
35+
box-shadow: inset 0 rem(-1px) 0 0;
36+
border-radius: 0;
37+
}
38+
}
39+
40+
igc-input:focus-within::part(container) {
41+
&::before {
42+
// The color value of the shadow is set by the color prop set by the input-group::before
43+
// Here we only change the shadow to look like border bottom
44+
box-shadow: inset 0 rem(-2px) 0 0;
45+
}
3446
}
3547

3648
igc-input::part(start) {
@@ -87,13 +99,7 @@ $dropdown-theme: dropdown-theme.$fluent;
8799

88100
igc-input::part(suffix) {
89101
height: var(--size);
90-
margin-inline-end: rem(-1px);
91-
margin-block-start: rem(-2px);
92-
}
93102

94-
igc-input::part(prefix) {
95-
margin-inline-start: rem(-1px);
96-
margin-block-start: rem(-2px);
97103
}
98104
}
99105

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

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
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)});
5+
$border-size: rem(1px);
96

107
:host {
118
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
@@ -16,6 +13,7 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
1613
[part='suffix'] {
1714
font-size: rem(14px);
1815
cursor: default;
16+
z-index: 0;
1917

2018
::slotted(*) {
2119
color: inherit;
@@ -56,17 +54,34 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
5654

5755
[part^='container'] {
5856
height: var-get($theme, 'size');
59-
border-radius: var-get($theme, 'border-border-radius');
60-
border: #{$resting-border-width} solid var-get($theme, 'border-color');
57+
background: var-get($theme, 'border-background');
6158
transition: none;
6259
cursor: text;
6360
grid-template-columns: auto 1fr auto;
6461
overflow: hidden;
62+
63+
&::before {
64+
content: '';
65+
position: absolute;
66+
inset: 0;
67+
width: 100%;
68+
height: 100%;
69+
70+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
71+
// defaults to the css color: prop the same way as border-color: do.
72+
// We do this in order to have the shadow working correctly inside the Combo search
73+
// We can't change the var-get($theme, 'border-color') in the combo search, but we can change the shadow
74+
color: var-get($theme, 'border-color');
75+
box-shadow: inset 0 0 0 $border-size;
76+
border-radius: var-get($theme, 'border-border-radius');
77+
user-select: none;
78+
pointer-events: none;
79+
z-index: 1;
80+
}
6581
}
6682

6783
[part~='input'] {
6884
color: var-get($theme, 'idle-text-color');
69-
height: $resting-height;
7085
background: initial;
7186
font-size: rem(14px);
7287
padding-inline: rem(8px);
@@ -78,26 +93,27 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
7893

7994
:host(:hover) {
8095
[part^='container'] {
81-
border-color: var-get($theme, 'hover-border-color');
96+
&::before {
97+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
98+
// defaults to the css color: prop the same way as border-color: do.
99+
// We do this in order to have the shadow working correctly inside the Combo search
100+
// We can't change the var-get($theme, 'hover-border-color') in the combo search, but we can change the shadow
101+
color: var-get($theme, 'hover-border-color');
102+
box-shadow: inset 0 0 0 $border-size;
103+
}
82104
}
83105
}
84106

85107
:host(:focus-within) {
86108
[part^='container'] {
87-
border-color: var-get($theme, 'focused-border-color');
88-
border-width: #{$focused-border-width};
89-
}
90-
91-
[part~='input'] {
92-
height: $focused-height;
93-
}
94-
95-
[part='prefix'] {
96-
margin-inline-start: rem(-1px);
97-
}
98-
99-
[part='suffix'] {
100-
margin-inline-end: rem(-1px);
109+
&::before {
110+
// The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
111+
// defaults to the css color: prop the same way as border-color: do.
112+
// We do this in order to have the shadow working correctly inside the Combo search
113+
// We can't change the var-get($theme, 'focused-border-color') in the combo search, but we can change the shadow
114+
color: var-get($theme, 'focused-border-color');
115+
box-shadow: inset 0 0 0 calc($border-size + #{rem(1px)}),
116+
}
101117
}
102118

103119
[name='prefix']::slotted(*),
@@ -134,16 +150,34 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
134150
}
135151
}
136152

137-
:host([invalid]) {
153+
:host([invalid]:not(:disabled)),
154+
:host([invalid]:not([disabled])) {
155+
::part(helper-text) {
156+
color: var-get($theme, 'error-secondary-color');
157+
}
158+
159+
[part~='container'] {
160+
&::before {
161+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'error-secondary-color')
162+
}
163+
}
164+
}
165+
166+
:host(:not(:disabled)[invalid]:focus-within),
167+
:host(:not([disabled])[invalid]:focus-within) {
138168
[part^='container'] {
139-
border-color: var-get($theme, 'error-secondary-color');
169+
&::before {
170+
box-shadow: inset 0 0 0 calc($border-size + #{rem(1px)}) var-get($theme, 'error-secondary-color');
171+
}
140172
}
141173
}
142174

143175
:host(:disabled),
144176
:host([disabled]) {
145-
[part^='container'] {
146-
border-color: var-get($theme, 'disabled-border-color');
177+
[part~='container'] {
178+
&::before {
179+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'disabled-border-color');
180+
}
147181
}
148182

149183
[part^='container'],

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

Lines changed: 0 additions & 20 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')});
@@ -39,25 +38,6 @@ $focused-border-width: rem(2px);
3938
[part~='toggle-icon'] {
4039
background: var-get($theme, 'toggle-button-background-focus');
4140
}
42-
43-
igc-input[readonly]:not([disabled])::part(container) {
44-
border-width: #{$focused-border-width};
45-
}
46-
}
47-
48-
:host(:not([invalid]):focus-within) {
49-
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);
56-
}
57-
58-
igc-input[readonly]:not([disabled])::part(suffix) {
59-
margin-inline-end: rem(-1px);
60-
}
6141
}
6242

6343
:host([invalid]:not([disabled])),

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

Lines changed: 58 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '../light/themes' as *;
33

44
$theme: $fluent;
5+
$border-size: rem(1px);
56

67
:host {
78
@include type-style('body-2');
@@ -17,44 +18,6 @@ $theme: $fluent;
1718
}
1819
}
1920

20-
:host(:hover) {
21-
[part~='container'] {
22-
border-color: var-get($theme, 'hover-border-color');
23-
}
24-
}
25-
26-
:host(:focus-within) {
27-
[part~='container'] {
28-
border-color: var-get($theme, 'focused-border-color');
29-
border-width: rem(2px);
30-
}
31-
32-
[part~='prefix']:not([hidden]) {
33-
margin-inline-start: rem(-1px);
34-
}
35-
36-
[part~='suffix']:not([hidden]) {
37-
margin-inline-end: rem(-1px);
38-
}
39-
40-
textarea {
41-
margin-block: rem(-1px);
42-
margin-inline-start: rem(-1px);
43-
}
44-
45-
[part~='prefix']:not([hidden]) ~ textarea {
46-
margin-inline: initial;
47-
}
48-
}
49-
50-
[part~='container'] {
51-
border: rem(1px) solid var-get($theme, 'border-color');
52-
background: var-get($theme, 'border-background');
53-
align-items: stretch;
54-
overflow: hidden;
55-
border-radius: var-get($theme, 'border-border-radius');
56-
}
57-
5821
[part~='label'] {
5922
display: block;
6023
font-size: rem(14px);
@@ -67,6 +30,46 @@ $theme: $fluent;
6730
margin-block-end: rem(5px);
6831
}
6932

33+
[part~='container'] {
34+
position: relative;
35+
background: var-get($theme, 'border-background');
36+
align-items: stretch;
37+
overflow: hidden;
38+
border-radius: var-get($theme, 'border-border-radius');
39+
40+
&::before {
41+
content: '';
42+
position: absolute;
43+
inset: 0;
44+
width: 100%;
45+
height: 100%;
46+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'border-color');
47+
border-radius: var-get($theme, 'border-border-radius');
48+
user-select: none;
49+
pointer-events: none;
50+
z-index: 1;
51+
}
52+
}
53+
54+
55+
:host(:hover) {
56+
[part~='container'] {
57+
&::before {
58+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'hover-border-color');
59+
}
60+
}
61+
}
62+
63+
:host(:focus-within) {
64+
[part~='container'] {
65+
&::before {
66+
box-shadow: 0 0 0 $border-size var-get($theme, 'focused-border-color'),
67+
inset 0 0 0 calc($border-size + #{rem(1px)}) var-get($theme, 'focused-border-color');
68+
}
69+
}
70+
}
71+
72+
7073
:host([invalid]) {
7174
[part~='label'] {
7275
color: var-get($theme, 'idle-text-color');
@@ -95,14 +98,29 @@ textarea {
9598
}
9699

97100
[part~='container'] {
98-
border-color: var-get($theme, 'error-secondary-color');
101+
&::before {
102+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'error-secondary-color')
103+
}
104+
}
105+
}
106+
107+
:host(:not(:disabled)[invalid]:focus-within),
108+
:host(:not([disabled])[invalid]:focus-within) {
109+
[part^='container'] {
110+
&::before {
111+
box-shadow: 0 0 0 $border-size var-get($theme, 'error-secondary-color'),
112+
inset 0 0 0 calc($border-size + #{rem(1px)}) var-get($theme, 'error-secondary-color');
113+
}
99114
}
100115
}
101116

102117
:host(:disabled),
103118
:host([disabled]) {
104119
[part~='container'] {
105-
border-color: var-get($theme, 'disabled-border-color');
106120
background: var-get($theme, 'border-disabled-background');
121+
122+
&::before {
123+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'disabled-border-color');
124+
}
107125
}
108126
}

0 commit comments

Comments
 (0)