feat(search): Add optional clear button prop

Co-authored-by: Emma Indal <emma.indahl@gmail.com>
Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/search/src/components/SearchBar/SearchBar.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Paper, Grid } from '@material-ui/core';
+import { Paper, Grid, makeStyles } from '@material-ui/core';
 import { SearchBar, SearchContext } from '../index';
 import { MemoryRouter } from 'react-router';
 
@@ -81,3 +81,48 @@ export const Focused = () => {
     </MemoryRouter>
   );
 };
+
+export const WithoutClearButton = () => {
+  return (
+    <MemoryRouter>
+      {/* @ts-ignore (defaultValue requires more than what is used here) */}
+      <SearchContext.Provider value={defaultValue}>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Paper style={{ padding: '8px 0' }}>
+              <SearchBar clearButton={false} />
+            </Paper>
+          </Grid>
+        </Grid>
+      </SearchContext.Provider>
+    </MemoryRouter>
+  );
+};
+
+const useStyles = makeStyles({
+  search: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '8px 0',
+    borderRadius: '50px',
+    margin: 'auto',
+  },
+});
+
+export const CustomStyles = () => {
+  const classes = useStyles();
+  return (
+    <MemoryRouter>
+      {/* @ts-ignore (defaultValue requires more than what is used here) */}
+      <SearchContext.Provider value={defaultValue}>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Paper className={classes.search}>
+              <SearchBar />
+            </Paper>
+          </Grid>
+        </Grid>
+      </SearchContext.Provider>
+    </MemoryRouter>
+  );
+};

plugins/search/src/components/SearchBar/SearchBar.test.tsx

@@ -149,6 +149,20 @@ describe('SearchBar', () => {
     );
   });
 
+  it('Should not show clear button', async () => {
+    render(
+      <ApiProvider apis={apiRegistry}>
+        <SearchContextProvider initialState={{ ...initialState, term }}>
+          <SearchBar clearButton={false} />
+        </SearchContextProvider>
+      </ApiProvider>,
+    );
+
+    expect(
+      screen.queryByRole('button', { name: 'Clear' }),
+    ).not.toBeInTheDocument();
+  });
+
   it('Adheres to provided debounceTime', async () => {
     jest.useFakeTimers();
 

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -31,6 +31,7 @@ type PresenterProps = {
   className?: string;
   placeholder?: string;
   autoFocus?: boolean;
+  clearButton?: boolean;
 };
 
 export const SearchBarBase = ({
@@ -40,6 +41,7 @@ export const SearchBarBase = ({
   onSubmit,
   className,
   placeholder: overridePlaceholder,
+  clearButton = true,
 }: PresenterProps) => {
   const configApi = useApi(configApiRef);
 
@@ -79,11 +81,13 @@ export const SearchBarBase = ({
         </InputAdornment>
       }
       endAdornment={
-        <InputAdornment position="end">
-          <IconButton aria-label="Clear" onClick={handleClear}>
-            <ClearButton />
-          </IconButton>
-        </InputAdornment>
+        clearButton && (
+          <InputAdornment position="end">
+            <IconButton aria-label="Clear" onClick={handleClear}>
+              <ClearButton />
+            </IconButton>
+          </InputAdornment>
+        )
       }
       {...(className && { className })}
       {...(onSubmit && { onKeyDown })}
@@ -96,6 +100,7 @@ type Props = {
   className?: string;
   debounceTime?: number;
   placeholder?: string;
+  clearButton?: boolean;
 };
 
 export const SearchBar = ({
@@ -103,6 +108,7 @@ export const SearchBar = ({
   className,
   debounceTime = 0,
   placeholder,
+  clearButton = true,
 }: Props) => {
   const { term, setTerm } = useSearch();
   const [value, setValue] = useState<string>(term);
@@ -129,6 +135,7 @@ export const SearchBar = ({
       onChange={handleQuery}
       onClear={handleClear}
       placeholder={placeholder}
+      clearButton={clearButton}
     />
   );
 };