diff --git a/.changeset/ninety-mugs-sin.md b/.changeset/ninety-mugs-sin.md new file mode 100644 index 0000000000..6b71a00667 --- /dev/null +++ b/.changeset/ninety-mugs-sin.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-react': minor +--- + + accepts InputProp property that can override keys from default diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx index 559ae1776e..7e97d790a7 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx @@ -92,13 +92,18 @@ const useStyles = makeStyles({ borderRadius: '50px', margin: 'auto', }, + notchedOutline: { + borderStyle: 'none', + }, }); export const CustomStyles = () => { const classes = useStyles(); return ( - + ); }; diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 913f515aaa..cfd0538694 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -80,7 +80,8 @@ export const SearchBarBase: ForwardRefExoticComponent = value: defaultValue, label, placeholder, - inputProps: defaultInputProps = {}, + inputProps = {}, + InputProps = {}, endAdornment, ...rest } = props; @@ -168,10 +169,11 @@ export const SearchBarBase: ForwardRefExoticComponent = endAdornment: clearButton ? clearButtonEndAdornment : endAdornment, + ...InputProps, }} inputProps={{ 'aria-label': ariaLabel, - ...defaultInputProps, + ...inputProps, }} fullWidth={fullWidth} onChange={handleChange}