Skip to content

Commit e19a5b1

Browse files
JasonStoltzJasonStoltz
committed
Integrated styles
1 parent 73b4d0b commit e19a5b1

File tree

3 files changed

+203
-28
lines changed

3 files changed

+203
-28
lines changed

‎src/components/SearchBox.js‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ function SearchBox(props) {
1313
value
1414
} = props;
1515
const focusedClass = isFocused ? "focus" : "";
16-
16+
const shouldShowSuggestions = !!showSuggestions && suggestions.length > 0;
1717
return (
18-
<React.Fragment>
19-
<form className="searchbox" onSubmit={onSubmit}>
18+
<form
19+
className={"searchbox" + (shouldShowSuggestions ? " query-suggest" : "")}
20+
onSubmit={onSubmit}
21+
>
22+
<div className="query-suggestions-wrapper">
2023
<input
2124
className={`searchbox__text-input ${focusedClass}`}
2225
onChange={onChange}
@@ -25,27 +28,32 @@ function SearchBox(props) {
2528
placeholder="Search your documents&#8230;"
2629
{...inputProps}
2730
/>
28-
<input
29-
type="submit"
30-
value="Search"
31-
className="button searchbox__submit"
32-
/>
33-
</form>
34-
{showSuggestions && suggestions.length > 1 && (
35-
<div>
36-
{/* Using mousedown instead of click to ensure it has higher priority than
31+
{shouldShowSuggestions && (
32+
<ul className="query-suggestions">
33+
{/* Using mousedown instead of click to ensure it has higher priority than
3734
blur handler*/}
38-
{suggestions.map(suggestion => (
39-
<div
40-
onMouseDown={() => onSelectSuggestion(suggestion)}
41-
key={suggestion.suggestion}
42-
>
43-
{suggestion.suggestion}
44-
</div>
45-
))}
46-
</div>
47-
)}
48-
</React.Fragment>
35+
{suggestions.map(suggestion => (
36+
<li key={suggestion.suggestion}>
37+
<a
38+
onMouseDown={e => {
39+
e.preventDefault();
40+
onSelectSuggestion(suggestion);
41+
}}
42+
href=""
43+
>
44+
{suggestion.suggestion}
45+
</a>
46+
</li>
47+
))}
48+
</ul>
49+
)}
50+
</div>
51+
<input
52+
type="submit"
53+
value="Search"
54+
className="button searchbox__submit"
55+
/>
56+
</form>
4957
);
5058
}
5159

‎src/styles/styles.css‎

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,9 @@ a {
340340

341341
.reference-ui-header {
342342
padding: 32px 24px;
343-
border-bottom: 1px solid #eeeeee; }
343+
z-index: 1;
344+
border-bottom: 1px solid #eeeeee;
345+
min-height: 115px; }
344346
.reference-ui-header__title {
345347
font-weight: 400;
346348
text-align: center; }
@@ -367,23 +369,90 @@ a {
367369
display: flex;
368370
overflow: hidden;
369371
justify-content: center;
370-
height: 50px;
371372
align-items: stretch; }
373+
.searchbox .outer-wrapper {
374+
position: relative;
375+
width: 100%;
376+
display: flex; }
377+
.searchbox .query-suggestions-wrapper {
378+
width: 100%;
379+
height: auto;
380+
outline: none;
381+
display: flex;
382+
border-radius: 3px; }
383+
.searchbox .query-suggestions {
384+
display: none; }
372385
.searchbox__text-input {
373386
width: 100%;
374387
border-radius: 3px;
375388
border: 1px solid #abb1b7;
376389
padding: 0 1em;
377-
outline: none; }
390+
outline: none;
391+
height: 50px; }
378392
.searchbox__text-input::placeholder {
379393
color: #aaaaaa; }
380394
.searchbox__text-input.focus {
381395
border: 1px solid #3a56e4; }
382396
.searchbox__submit {
383397
padding: 0 2em;
384-
margin-left: 10px; }
398+
margin-left: 10px;
399+
height: 50px; }
385400
.live-filtering .searchbox__submit {
386401
display: none; }
402+
.searchbox.query-suggest {
403+
overflow: visible;
404+
position: absolute;
405+
width: calc(100% - 3em);
406+
left: 0;
407+
right: 0;
408+
z-index: 1; }
409+
.searchbox.query-suggest .searchbox__text-input {
410+
border-bottom: none;
411+
border-bottom-left-radius: 0;
412+
border-bottom-right-radius: 0; }
413+
.searchbox.query-suggest .query-suggestions-wrapper {
414+
width: 100%;
415+
outline: none;
416+
display: flex;
417+
flex-direction: column;
418+
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); }
419+
.searchbox.query-suggest .query-suggestions {
420+
display: flex;
421+
flex-direction: column;
422+
width: 100%;
423+
top: 50px;
424+
margin: 0;
425+
padding: 1em 0;
426+
line-height: 1.5;
427+
background: white;
428+
border-top: 1px solid #f0f0f0;
429+
border-left: 1px solid #abb1b7;
430+
border-right: 1px solid #abb1b7;
431+
border-bottom: 1px solid #abb1b7;
432+
border-top-left-radius: 0;
433+
border-top-right-radius: 0;
434+
border-bottom-left-radius: 3px;
435+
border-bottom-right-radius: 3px; }
436+
.searchbox.query-suggest .searchbox__text-input.focus + .query-suggestions {
437+
border-left: 1px solid #3a56e4;
438+
border-right: 1px solid #3a56e4;
439+
border-bottom: 1px solid #3a56e4; }
440+
.searchbox.query-suggest .query-suggestions li {
441+
padding: 0;
442+
margin: 0; }
443+
.searchbox.query-suggest .query-suggestions a {
444+
color: #333333;
445+
text-decoration: none;
446+
display: block;
447+
padding: 0 1em; }
448+
.searchbox.query-suggest .query-suggestions a:hover {
449+
background: #f0f0f0; }
450+
.searchbox.query-suggest .query-suggestions a:focus {
451+
outline: none;
452+
background: #f0f0f0; }
453+
.searchbox.query-suggest .query-suggestions em {
454+
font-weight: bold;
455+
font-style: normal; }
387456

388457
.search-results {
389458
max-width: 1300px;

‎src/styles/styles.scss‎

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,9 @@ a {
108108

109109
.reference-ui-header {
110110
padding: $sizeXL $sizeL;
111+
z-index: 1;
111112
border-bottom: 1px solid $headerBorderColor;
113+
min-height: 115px;
112114

113115
&__title {
114116
font-weight: $fontWeightNormal;
@@ -144,15 +146,34 @@ a {
144146
display: flex;
145147
overflow: hidden;
146148
justify-content: center;
147-
height: 50px;
148149
align-items: stretch;
150+
// height: 100%;
151+
152+
.outer-wrapper {
153+
position: relative;
154+
width: 100%;
155+
display: flex;
156+
}
157+
158+
.query-suggestions-wrapper {
159+
width: 100%;
160+
height: auto;
161+
outline: none;
162+
display: flex;
163+
border-radius: 3px;
164+
}
165+
166+
.query-suggestions {
167+
display: none;
168+
}
149169

150170
&__text-input {
151171
width: 100%;
152172
border-radius: 3px;
153173
border: 1px solid $searchboxBorderColor;
154174
padding: 0 1em;
155175
outline: none;
176+
height: 50px;
156177

157178
&::placeholder {
158179
color: #aaaaaa;
@@ -166,11 +187,88 @@ a {
166187
&__submit {
167188
padding: 0 2em;
168189
margin-left: 10px;
190+
height: 50px;
169191

170192
.live-filtering & {
171193
display: none;
172194
}
173195
}
196+
197+
&.query-suggest {
198+
overflow: visible;
199+
position: absolute;
200+
width: calc(100% - 3em);
201+
left: 0;
202+
right: 0;
203+
z-index: 1;
204+
205+
.searchbox__text-input {
206+
border-bottom: none;
207+
border-bottom-left-radius: 0;
208+
border-bottom-right-radius: 0;
209+
}
210+
211+
.query-suggestions-wrapper {
212+
width: 100%;
213+
outline: none;
214+
display: flex;
215+
flex-direction: column;
216+
// position: relative;
217+
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
218+
}
219+
220+
.query-suggestions {
221+
// position: absolute;
222+
display: flex;
223+
flex-direction: column;
224+
width: 100%;
225+
top: 50px;
226+
margin: 0;
227+
padding: 1em 0;
228+
line-height: 1.5;
229+
background: white;
230+
border-top: 1px solid #f0f0f0;
231+
border-left: 1px solid #abb1b7;
232+
border-right: 1px solid #abb1b7;
233+
border-bottom: 1px solid #abb1b7;
234+
border-top-left-radius: 0;
235+
border-top-right-radius: 0;
236+
border-bottom-left-radius: 3px;
237+
border-bottom-right-radius: 3px;
238+
}
239+
240+
.searchbox__text-input.focus + .query-suggestions {
241+
border-left: 1px solid $linkColor;
242+
border-right: 1px solid $linkColor;
243+
border-bottom: 1px solid $linkColor;
244+
}
245+
246+
.query-suggestions li {
247+
padding: 0;
248+
margin: 0;
249+
}
250+
251+
.query-suggestions a {
252+
color: #333333;
253+
text-decoration: none;
254+
display: block;
255+
padding: 0 1em;
256+
257+
&:hover {
258+
background: #f0f0f0;
259+
}
260+
261+
&:focus {
262+
outline: none;
263+
background: #f0f0f0;
264+
}
265+
}
266+
267+
.query-suggestions em {
268+
font-weight: bold;
269+
font-style: normal;
270+
}
271+
}
174272
}
175273

176274
.search-results {

0 commit comments

Comments
 (0)