Merge pull request #17856 from luchillo17/fix/BCKSTG-162-broken-custom-styles-on-searc

Fix SearchBar styles & update StoryBook stories for custom styles

plugins/techdocs/src/search/components/TechDocsSearch.tsx

@@ -21,20 +21,10 @@ import {
   SearchContextProvider,
   useSearch,
 } from '@backstage/plugin-search-react';
-import { makeStyles, Paper } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem';
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    width: '100%',
-  },
-  bar: {
-    padding: theme.spacing(1),
-  },
-}));
-
 /**
  * Props for {@link TechDocsSearch}
  *
@@ -75,7 +65,6 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
     setFilters,
     result: { loading, value: searchVal },
   } = useSearch();
-  const classes = useStyles();
   const [options, setOptions] = useState<any[]>([]);
   useEffect(() => {
     let mounted = true;
@@ -117,43 +106,40 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
   };
 
   return (
-    <Paper className={classes.bar} variant="outlined">
-      <SearchAutocomplete
-        classes={{ root: classes.root }}
-        data-testid="techdocs-search-bar"
-        size="small"
-        open={open}
-        getOptionLabel={() => ''}
-        filterOptions={x => {
-          return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
-        }}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onFocus={() => {
-          setOpen(true);
-        }}
-        onChange={handleSelection}
-        blurOnSelect
-        noOptionsText="No results found"
-        value={null}
-        options={options}
-        renderOption={({ document, highlight }) => (
-          <TechDocsSearchResultListItem
-            result={document}
-            lineClamp={3}
-            asListItem={false}
-            asLink={false}
-            title={document.title}
-            highlight={highlight}
-          />
-        )}
-        loading={loading}
-        inputDebounceTime={debounceTime}
-        inputPlaceholder={`Search ${entityTitle || entityId.name} docs`}
-        freeSolo={false}
-      />
-    </Paper>
+    <SearchAutocomplete
+      data-testid="techdocs-search-bar"
+      size="small"
+      open={open}
+      getOptionLabel={() => ''}
+      filterOptions={x => {
+        return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onFocus={() => {
+        setOpen(true);
+      }}
+      onChange={handleSelection}
+      blurOnSelect
+      noOptionsText="No results found"
+      value={null}
+      options={options}
+      renderOption={({ document, highlight }) => (
+        <TechDocsSearchResultListItem
+          result={document}
+          lineClamp={3}
+          asListItem={false}
+          asLink={false}
+          title={document.title}
+          highlight={highlight}
+        />
+      )}
+      loading={loading}
+      inputDebounceTime={debounceTime}
+      inputPlaceholder={`Search ${entityTitle || entityId.name} docs`}
+      freeSolo={false}
+    />
   );
 };