diff --git a/package.json b/package.json
index d2532f61..8c3967c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-storefront",
- "version": "8.0.1",
+ "version": "8.1.0",
"description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
"module": "./index.js",
"license": "Apache-2.0",
diff --git a/src/search/SearchField.js b/src/search/SearchField.js
index da3a200a..bf060d70 100644
--- a/src/search/SearchField.js
+++ b/src/search/SearchField.js
@@ -95,6 +95,7 @@ const SearchField = forwardRef(
submitButtonVariant,
showClearButton,
SubmitButtonComponent,
+ SubmitButtonIcon,
clearButtonProps,
inputProps,
value,
@@ -167,6 +168,7 @@ const SearchField = forwardRef(
[classes.hidden]: empty,
})}
text={value}
+ ButtonIcon={SubmitButtonIcon}
{...submitButtonProps}
/>
)}
@@ -184,6 +186,10 @@ SearchField.propTypes = {
* The component to use for the submit button.
*/
SubmitButtonComponent: PropTypes.elementType,
+ /**
+ * An icon to use for the submit button.
+ */
+ SubmitButtonIcon: PropTypes.elementType,
/**
* The type of submit button to display.
*/
diff --git a/src/search/SearchSubmitButton.js b/src/search/SearchSubmitButton.js
index f0ce66af..e7376709 100644
--- a/src/search/SearchSubmitButton.js
+++ b/src/search/SearchSubmitButton.js
@@ -1,7 +1,7 @@
+import SearchIcon from '@material-ui/icons/Search'
import React from 'react'
import makeStyles from '@material-ui/core/styles/makeStyles'
import PropTypes from 'prop-types'
-import SearchIcon from '@material-ui/icons/Search'
export const styles = theme => ({
/**
@@ -20,7 +20,7 @@ const useStyles = makeStyles(styles, { name: 'RSFSearchSubmitButton' })
/**
* A button to submit the search. All other props are spread to the provided `Component`.
*/
-export default function SearchSubmitButton({ Component, classes, text, ...others }) {
+export default function SearchSubmitButton({ Component, ButtonIcon, classes, text, ...others }) {
classes = useStyles({ classes })
return (
@@ -32,7 +32,7 @@ export default function SearchSubmitButton({ Component, classes, text, ...others
disabled={text.trim().length === 0}
{...others}
>
-
+
)
}
@@ -46,10 +46,16 @@ SearchSubmitButton.propTypes = {
* A Material UI button component to display.
*/
Component: PropTypes.elementType.isRequired,
+ /**
+ * A Material UI button component to display.
+ */
+ ButtonIcon: PropTypes.elementType,
/**
* The current search text.
*/
text: PropTypes.string.isRequired,
}
-SearchSubmitButton.defaultProps = {}
+SearchSubmitButton.defaultProps = {
+ ButtonIcon: SearchIcon,
+}
diff --git a/test/search/SearchField.test.js b/test/search/SearchField.test.js
index 29b95982..62a77dc1 100644
--- a/test/search/SearchField.test.js
+++ b/test/search/SearchField.test.js
@@ -1,7 +1,6 @@
import React, { useState } from 'react'
import { mount } from 'enzyme'
import SearchField from 'react-storefront/search/SearchField'
-import SearchContext from 'react-storefront/search/SearchContext'
import SearchSubmitButton from 'react-storefront/search/SearchSubmitButton'
import { Fab, Button } from '@material-ui/core'
import { IconButton } from '@material-ui/core'
diff --git a/test/search/SearchSubmitButton.test.js b/test/search/SearchSubmitButton.test.js
index 1dae5510..2fb8ca0b 100644
--- a/test/search/SearchSubmitButton.test.js
+++ b/test/search/SearchSubmitButton.test.js
@@ -1,3 +1,4 @@
+import { Apps } from '@material-ui/icons'
import React from 'react'
import { mount } from 'enzyme'
import SearchSubmitButton from 'react-storefront/search/SearchSubmitButton'
@@ -24,4 +25,9 @@ describe('SearchSubmitButton', () => {
wrapper = mount()
expect(wrapper.find(Button).prop('spreadprops')).toBe('spreadpropstest')
})
+
+ it('should change the icon based on the given prop', () => {
+ wrapper = mount()
+ expect(wrapper.find(Apps)).toExist()
+ })
})