Skip to content

Commit ad905c7

Browse files
francoischalifourfrancoischalifour
authored
feat(refinement-list): implement InstantSearch.css to searchbox (#3263)
1 parent b3aa71e commit ad905c7

File tree

4 files changed

+285
-209
lines changed

4 files changed

+285
-209
lines changed

‎src/components/RefinementList/RefinementList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import isEqual from 'lodash/isEqual';
55
import { isSpecialClick } from '../../lib/utils.js';
66
import Template from '../Template/Template';
77
import RefinementListItem from './RefinementListItem.js';
8-
import SearchBox from '../SearchBox';
8+
import SearchBox from '../SearchBox/Searchbox';
99

1010
class RefinementList extends Component {
1111
constructor(props) {

‎src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap‎

Lines changed: 150 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -254,85 +254,108 @@ exports[`RefinementList rendering with facets from search 1`] = `
254254
<div
255255
className="searchBox"
256256
>
257-
<form
258-
className="searchbox sbx-sffv"
259-
noValidate="novalidate"
260-
onReset={[Function]}
261-
onSubmit={[Function]}
257+
<div
258+
className="ais-SearchBox"
262259
>
263-
<svg
264-
style={
265-
Object {
266-
"display": "none",
267-
}
268-
}
269-
xmlns="http://www.w3.org/2000/svg"
270-
>
271-
<symbol
272-
id="sbx-icon-search-12"
273-
viewBox="0 0 40 41"
274-
xmlns="http://www.w3.org/2000/svg"
275-
>
276-
<path
277-
d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
278-
fillRule="evenodd"
279-
/>
280-
</symbol>
281-
<symbol
282-
id="sbx-icon-clear-2"
283-
viewBox="0 0 20 20"
284-
xmlns="http://www.w3.org/2000/svg"
285-
>
286-
<path
287-
d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z"
288-
fillRule="evenodd"
289-
/>
290-
</symbol>
291-
</svg>
292-
<div
293-
className="sbx-sffv__wrapper"
260+
<form
261+
action=""
262+
className="ais-SearchBox-form"
263+
noValidate="novalidate"
264+
onReset={[Function]}
265+
onSubmit={[Function]}
294266
role="search"
295267
>
296268
<input
269+
autoCapitalize="off"
297270
autoComplete="off"
298-
className="sbx-sffv__input"
271+
autoCorrect="off"
272+
className="ais-SearchBox-input"
299273
disabled={false}
300-
name="search"
274+
maxLength="512"
301275
onChange={[Function]}
302276
placeholder="Search"
303-
required="required"
277+
spellCheck="false"
304278
type="search"
305279
/>
306280
<button
307-
className="sbx-sffv__submit"
308-
title="Submit your search query."
281+
className="ais-SearchBox-submit"
282+
title="Submit the search query."
309283
type="submit"
310284
>
311285
<svg
312-
aria-label="Search"
313-
role="img"
286+
className="ais-SearchBox-submitIcon"
287+
height="10"
288+
viewBox="0 0 40 40"
289+
width="10"
290+
xmlns="http://www.w3.org/2000/svg"
314291
>
315-
<use
316-
xlinkHref="#sbx-icon-search-12"
292+
<path
293+
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
317294
/>
318295
</svg>
319296
</button>
320297
<button
321-
className="sbx-sffv__reset"
298+
className="ais-SearchBox-reset"
299+
hidden={true}
322300
title="Clear the search query."
323301
type="reset"
324302
>
325303
<svg
326-
aria-label="Reset"
327-
role="img"
304+
className="ais-SearchBox-resetIcon"
305+
height="10"
306+
viewBox="0 0 20 20"
307+
width="10"
308+
xmlns="http://www.w3.org/2000/svg"
328309
>
329-
<use
330-
xlinkHref="#sbx-icon-clear-2"
310+
<path
311+
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
331312
/>
332313
</svg>
333314
</button>
334-
</div>
335-
</form>
315+
<span
316+
className="ais-SearchBox-loadingIndicator"
317+
hidden={true}
318+
>
319+
<svg
320+
className="ais-SearchBox-loadingIcon"
321+
height="16"
322+
stroke="#444"
323+
viewBox="0 0 38 38"
324+
width="16"
325+
xmlns="http://www.w3.org/2000/svg"
326+
>
327+
<g
328+
fill="none"
329+
fillRule="evenodd"
330+
>
331+
<g
332+
strokeWidth="2"
333+
transform="translate(1 1)"
334+
>
335+
<circle
336+
cx="18"
337+
cy="18"
338+
r="18"
339+
strokeOpacity=".5"
340+
/>
341+
<path
342+
d="M36 18c0-9.94-8.06-18-18-18"
343+
>
344+
<animateTransform
345+
attributeName="transform"
346+
dur="1s"
347+
from="0 18 18"
348+
repeatCount="indefinite"
349+
to="360 18 18"
350+
type="rotate"
351+
/>
352+
</path>
353+
</g>
354+
</g>
355+
</svg>
356+
</span>
357+
</form>
358+
</div>
336359
</div>
337360
<ul
338361
className="list"
@@ -420,85 +443,108 @@ exports[`RefinementList rendering without facets from search 1`] = `
420443
<div
421444
className="searchBox"
422445
>
423-
<form
424-
className="searchbox sbx-sffv"
425-
noValidate="novalidate"
426-
onReset={[Function]}
427-
onSubmit={[Function]}
446+
<div
447+
className="ais-SearchBox"
428448
>
429-
<svg
430-
style={
431-
Object {
432-
"display": "none",
433-
}
434-
}
435-
xmlns="http://www.w3.org/2000/svg"
436-
>
437-
<symbol
438-
id="sbx-icon-search-12"
439-
viewBox="0 0 40 41"
440-
xmlns="http://www.w3.org/2000/svg"
441-
>
442-
<path
443-
d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
444-
fillRule="evenodd"
445-
/>
446-
</symbol>
447-
<symbol
448-
id="sbx-icon-clear-2"
449-
viewBox="0 0 20 20"
450-
xmlns="http://www.w3.org/2000/svg"
451-
>
452-
<path
453-
d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z"
454-
fillRule="evenodd"
455-
/>
456-
</symbol>
457-
</svg>
458-
<div
459-
className="sbx-sffv__wrapper"
449+
<form
450+
action=""
451+
className="ais-SearchBox-form"
452+
noValidate="novalidate"
453+
onReset={[Function]}
454+
onSubmit={[Function]}
460455
role="search"
461456
>
462457
<input
458+
autoCapitalize="off"
463459
autoComplete="off"
464-
className="sbx-sffv__input"
460+
autoCorrect="off"
461+
className="ais-SearchBox-input"
465462
disabled={false}
466-
name="search"
463+
maxLength="512"
467464
onChange={[Function]}
468465
placeholder="Search"
469-
required="required"
466+
spellCheck="false"
470467
type="search"
471468
/>
472469
<button
473-
className="sbx-sffv__submit"
474-
title="Submit your search query."
470+
className="ais-SearchBox-submit"
471+
title="Submit the search query."
475472
type="submit"
476473
>
477474
<svg
478-
aria-label="Search"
479-
role="img"
475+
className="ais-SearchBox-submitIcon"
476+
height="10"
477+
viewBox="0 0 40 40"
478+
width="10"
479+
xmlns="http://www.w3.org/2000/svg"
480480
>
481-
<use
482-
xlinkHref="#sbx-icon-search-12"
481+
<path
482+
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
483483
/>
484484
</svg>
485485
</button>
486486
<button
487-
className="sbx-sffv__reset"
487+
className="ais-SearchBox-reset"
488+
hidden={true}
488489
title="Clear the search query."
489490
type="reset"
490491
>
491492
<svg
492-
aria-label="Reset"
493-
role="img"
493+
className="ais-SearchBox-resetIcon"
494+
height="10"
495+
viewBox="0 0 20 20"
496+
width="10"
497+
xmlns="http://www.w3.org/2000/svg"
494498
>
495-
<use
496-
xlinkHref="#sbx-icon-clear-2"
499+
<path
500+
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
497501
/>
498502
</svg>
499503
</button>
500-
</div>
501-
</form>
504+
<span
505+
className="ais-SearchBox-loadingIndicator"
506+
hidden={true}
507+
>
508+
<svg
509+
className="ais-SearchBox-loadingIcon"
510+
height="16"
511+
stroke="#444"
512+
viewBox="0 0 38 38"
513+
width="16"
514+
xmlns="http://www.w3.org/2000/svg"
515+
>
516+
<g
517+
fill="none"
518+
fillRule="evenodd"
519+
>
520+
<g
521+
strokeWidth="2"
522+
transform="translate(1 1)"
523+
>
524+
<circle
525+
cx="18"
526+
cy="18"
527+
r="18"
528+
strokeOpacity=".5"
529+
/>
530+
<path
531+
d="M36 18c0-9.94-8.06-18-18-18"
532+
>
533+
<animateTransform
534+
attributeName="transform"
535+
dur="1s"
536+
from="0 18 18"
537+
repeatCount="indefinite"
538+
to="360 18 18"
539+
type="rotate"
540+
/>
541+
</path>
542+
</g>
543+
</g>
544+
</svg>
545+
</span>
546+
</form>
547+
</div>
502548
</div>
503549
<div
504550
className="noResults"

0 commit comments

Comments
 (0)