Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Commit

Permalink
feat(SearchBox): add default width and height to buttons. (#34)
Browse files Browse the repository at this point in the history 
Since svg allows a width and height attribute, we can use those to provide a default width and height. This has a lower specificity than css defined width or height, because it's an svg.

Especially the situation where people don't use the Algolia theme is improved by this.

before|after
---|---
|
  • Loading branch information
@Haroenv @mthuret
Haroenv authored and mthuret committed Apr 13, 2017
1 parent 9f795c7 commit bcabf9b
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/react-instantsearch/src/components/SearchBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,13 @@ class SearchBox extends Component {

const submitComponent = this.props.submitComponent
? this.props.submitComponent
: <svg role="img">
: <svg role="img" width="1em" height="1em">
<use xlinkHref="#sbx-icon-search-13" />
</svg>;

const resetComponent = this.props.resetComponent
? this.props.resetComponent
: <svg role="img">
: <svg role="img" width="1em" height="1em">
<use xlinkHref="#sbx-icon-clear-3" />
</svg>;

Expand Down
12 changes: 12 additions & 0 deletions packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -81,7 +83,9 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -228,7 +232,9 @@ exports[`Menu Menu with search inside items with search results 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -242,7 +248,9 @@ exports[`Menu Menu with search inside items with search results 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -345,7 +353,9 @@ exports[`Menu applies translations 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -359,7 +369,9 @@ exports[`Menu applies translations 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down
12 changes: 12 additions & 0 deletions packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@ exports[`RefinementList applies translations 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -82,7 +84,9 @@ exports[`RefinementList applies translations 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -318,7 +322,9 @@ exports[`RefinementList refinement list with search inside items but no search r
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -332,7 +338,9 @@ exports[`RefinementList refinement list with search inside items but no search r
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -496,7 +504,9 @@ exports[`RefinementList refinement list with search inside items with search res
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -510,7 +520,9 @@ exports[`RefinementList refinement list with search inside items with search res
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down
24 changes: 24 additions & 0 deletions packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ exports[`SearchBox applies its default props 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -75,7 +77,9 @@ exports[`SearchBox applies its default props 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -147,7 +151,9 @@ exports[`SearchBox lets you customize its theme 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -161,7 +167,9 @@ exports[`SearchBox lets you customize its theme 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -233,7 +241,9 @@ exports[`SearchBox lets you customize its translations 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -247,7 +257,9 @@ exports[`SearchBox lets you customize its translations 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -401,7 +413,9 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -415,7 +429,9 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -487,7 +503,9 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -501,7 +519,9 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down Expand Up @@ -573,7 +593,9 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
type="submit"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-search-13"
Expand All @@ -587,7 +609,9 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
type="reset"
>
<svg
height="1em"
role="img"
width="1em"
>
<use
xlinkHref="#sbx-icon-clear-3"
Expand Down

0 comments on commit bcabf9b

Please sign in to comment.