Skip to content

Commit bd2457a

Browse files
authored
fix(autocomplete): update autocomplete design (#288)
* fix(autocomplete): update autocomplete design #287 * fix(autocomplete): fix no results message * test(autocomplete): fix broken test
1 parent bb79559 commit bd2457a

File tree

3 files changed

+17
-18
lines changed

3 files changed

+17
-18
lines changed

lib/autocomplete/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ class AutoComplete extends Component {
247247
{item[`${labelKey}`]}
248248
</div>
249249
);
250-
}) : 'No results found!';
250+
}) : <span className={theme['no-results']}>No results found!</span>;
251251
};
252252

253253
render() {

lib/autocomplete/tests/edgecases.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('AutoComplete Edge Cases tests', () => {
2929
wrappedComponent.setProps({ data: [] });
3030
const simulatedValue = () => wrappedComponent
3131
.find('#autocomplete-list')
32-
.children().length;
32+
.children('div').length;
3333

3434
wrappedComponent.find('input').simulate('focus');
3535
expect(simulatedValue()).equal(expectedValue);

lib/autocomplete/theme.module.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import '../globals/_theme.scss';
22
@import '../globals/animations.module.scss';
33
@import '../globals/common.scss';
4-
54
:local(.autocomplete) {
65
@include customScroll();
76
width: 16em;
@@ -18,43 +17,43 @@
1817
border: none;
1918
border-bottom: 2px solid $input-bottom-border;
2019
outline: none;
21-
&:focus {
22-
border-bottom: 2px solid $secondary-input-active-border;
23-
}
2420
}
2521
}
26-
27-
2822
:local(.autocomplete-list) {
2923
z-index: 1;
3024
box-sizing: border-box;
3125
height: fit-content;
3226
height: -moz-fit-content;
33-
text-align: center;
3427
max-height: 300px;
3528
width: 100%;
3629
overflow-y: auto;
3730
box-shadow: $dropdown-menu-shadow;
3831
border-radius: 2px;
39-
margin-top: 10px;
32+
margin-top: 0.2em;
4033
padding: 2% 0;
4134
position: absolute;
4235
background-color: white;
43-
4436
@include sectionEntry(0.25s);
45-
37+
:local(.no-results) {
38+
display: flex;
39+
padding: 2% 5%;
40+
box-sizing: border-box;
41+
color: rgba(0, 0, 0, 0.5);
42+
font-size: 0.8em;
43+
}
4644
:local(.autocomplete-list-item) {
4745
display: block;
4846
box-sizing: border-box;
47+
text-align: left;
4948
cursor: pointer;
50-
padding: 2% 2%;
49+
padding: 5% 4%;
5150
box-shadow: none;
5251
&:hover {
53-
background-color: $input-active-item;
52+
background-color: rgba(160, 198, 255, 0.77);
5453
}
5554
}
5655
:local(.item-hover) {
57-
background-color: $input-active-item;
56+
background-color: rgba(160, 198, 255, 0.77);
5857
}
5958
}
6059
}
@@ -63,16 +62,16 @@
6362
&::after {
6463
content: '';
6564
display: block;
66-
background-color: $primary-input-active-border !important;
65+
background-color: rgba(160, 198, 255, 0.77) !important;
6766
height: 2px;
6867
@include inputFocus();
6968
animation-duration: 0.3s;
7069
animation-timing-function: linear;
7170
margin-top: -2px;
7271
position: relative;
7372
/* Safari only style */
74-
@media not all and (min-resolution:.001dpcm) {
75-
bottom: 2px;
73+
@media not all and (min-resolution: .001dpcm) {
74+
bottom: 2px;
7675
}
7776
}
7877
}

0 commit comments

Comments
 (0)