Skip to content
This repository has been archived by the owner on Jun 12, 2024. It is now read-only.

new theme for search button #189

Merged
merged 4 commits into from
Nov 6, 2019
Merged

new theme for search button #189

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6c016b
new theme for search button
Sep 20, 2019
cd5d72c
clean up test case
Oct 31, 2019
ee1a608
Merge branch 'master' into search-button
Nov 6, 2019
18fa298
Update CHANGELOG.md
Nov 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions src/components/search/__tests__/__snapshots__/search.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ exports[`search Basic search renders as expected 1`] = `
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand All @@ -36,14 +37,15 @@ exports[`search Basic search with \`site\` set to show filter toggle renders as
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand Down Expand Up @@ -121,14 +123,20 @@ exports[`search Search with \`narrow\` option set renders as expected 1`] = `
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={
Object {
"paddingLeft": "12px",
"paddingRight": "12px",
}
}
>
<span
className=""
>
<svg
className="icon"
className="icon w18 h18"
>
<title>
Search
Expand Down Expand Up @@ -227,14 +235,15 @@ exports[`search Search with \`narrow\` option set renders as expected 2`] = `
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand Down Expand Up @@ -464,14 +473,15 @@ exports[`search Search with dark background, custom placeholder renders as expec
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-white color-lighten50-on-hover bg-lighten10"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke btn--white"
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand Down
13 changes: 8 additions & 5 deletions src/components/search/search-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,15 +247,18 @@ class SearchBox extends React.Component {
) : (
<div>
<button
className={`flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round ${
this.props.background === 'light'
? 'color-gray color-gray-dark-on-hover bg-gray-faint'
: 'color-white color-lighten50-on-hover bg-lighten10'
className={`flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke ${
this.props.background !== 'light' ? 'btn--white' : ''
}`}
style={
this.props.narrow
? { paddingLeft: '12px', paddingRight: '12px' }
: {}
}
onClick={this.openModal}
>
<span className={!this.props.narrow ? 'mr6' : ''}>
<svg className="icon">
<svg className="icon w18 h18">
{this.props.narrow && <title>Search</title>}
<use xlinkHref="#icon-search" />
</svg>
Expand Down