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() + }) })