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

Fix SearchBar styles & update StoryBook stories for custom styles

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx

@@ -16,7 +16,7 @@
 
 import React, { ComponentType } from 'react';
 
-import { Grid, makeStyles, Paper } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import LabelIcon from '@material-ui/icons/Label';
 
 import { TestApiProvider } from '@backstage/test-utils';
@@ -45,51 +45,24 @@ export default {
   ],
 };
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(1),
-  },
-}));
-
 export const Default = () => {
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />
-    </Paper>
-  );
+  return <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />;
 };
 
 export const Outlined = () => {
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root} variant="outlined">
-      <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />
-    </Paper>
-  );
+  return <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />;
 };
 
 export const Initialized = () => {
-  const classes = useStyles();
   const options = ['hello-word', 'petstore', 'spotify'];
-  return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete options={options} value={options[0]} />
-    </Paper>
-  );
+  return <SearchAutocomplete options={options} value={options[0]} />;
 };
 
 export const LoadingOptions = () => {
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete options={[]} loading />
-    </Paper>
-  );
+  return <SearchAutocomplete options={[]} loading />;
 };
 
 export const RenderingCustomOptions = () => {
-  const classes = useStyles();
   const options = [
     {
       title: 'hello-world',
@@ -106,17 +79,15 @@ export const RenderingCustomOptions = () => {
   ];
 
   return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete
-        options={options}
-        renderOption={option => (
-          <SearchAutocompleteDefaultOption
-            icon={<LabelIcon titleAccess="Option icon" />}
-            primaryText={option.title}
-            secondaryText={option.text}
-          />
-        )}
-      />
-    </Paper>
+    <SearchAutocomplete
+      options={options}
+      renderOption={option => (
+        <SearchAutocompleteDefaultOption
+          icon={<LabelIcon titleAccess="Option icon" />}
+          primaryText={option.title}
+          secondaryText={option.text}
+        />
+      )}
+    />
   );
 };

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -16,7 +16,7 @@
 
 import React, { ChangeEvent, useCallback, useMemo } from 'react';
 
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress, makeStyles } from '@material-ui/core';
 import {
   Autocomplete,
   AutocompleteProps,
@@ -28,6 +28,13 @@ import {
 import { SearchContextProvider, useSearch } from '../../context';
 import { SearchBar, SearchBarProps } from '../SearchBar';
 
+const useStyles = makeStyles(theme => ({
+  loading: {
+    right: theme.spacing(1),
+    position: 'absolute',
+  },
+}));
+
 /**
  * Props for {@link SearchAutocomplete}.
  *
@@ -61,6 +68,18 @@ const withContext = (
   );
 };
 
+const SearchAutocompleteLoadingAdornment = () => {
+  const classes = useStyles();
+  return (
+    <CircularProgress
+      className={classes.loading}
+      data-testid="search-autocomplete-progressbar"
+      color="inherit"
+      size={20}
+    />
+  );
+};
+
 /**
  * Recommended search autocomplete when you use the Search Provider or Search Context.
  *
@@ -116,7 +135,7 @@ export const SearchAutocomplete = withContext(
 
     const renderInput = useCallback(
       ({
-        InputProps: { ref, endAdornment },
+        InputProps: { ref, className, endAdornment },
         InputLabelProps,
         ...params
       }: AutocompleteRenderInputParams) => (
@@ -128,16 +147,9 @@ export const SearchAutocomplete = withContext(
           placeholder={inputPlaceholder}
           debounceTime={inputDebounceTime}
           endAdornment={
-            loading ? (
-              <CircularProgress
-                data-testid="search-autocomplete-progressbar"
-                color="inherit"
-                size={20}
-              />
-            ) : (
-              endAdornment
-            )
+            loading ? <SearchAutocompleteLoadingAdornment /> : endAdornment
           }
+          InputProps={{ className }}
         />
       ),
       [loading, inputValue, inputPlaceholder, inputDebounceTime],

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

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { Grid, makeStyles, Paper } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 
 import { TestApiProvider } from '@backstage/test-utils';
 
@@ -43,67 +43,51 @@ export default {
 };
 
 export const Default = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar />
-    </Paper>
-  );
+  return <SearchBar />;
 };
 
 export const CustomPlaceholder = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar placeholder="This is a custom placeholder" />
-    </Paper>
-  );
+  return <SearchBar placeholder="This is a custom placeholder" />;
 };
 
 export const CustomLabel = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar label="This is a custom label" />
-    </Paper>
-  );
+  return <SearchBar label="This is a custom label" />;
 };
 
 export const Focused = () => {
   return (
-    <Paper style={{ padding: '8px' }}>
-      {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
-      {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-      <SearchBar autoFocus />
-    </Paper>
+    // decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    <SearchBar autoFocus />
   );
 };
 
 export const WithoutClearButton = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar clearButton={false} />
-    </Paper>
-  );
+  return <SearchBar clearButton={false} />;
 };
 
-const useStyles = makeStyles({
-  search: {
-    display: 'flex',
-    justifyContent: 'space-between',
+const useStyles = makeStyles(theme => ({
+  searchBarRoot: {
     padding: '8px 16px',
+    background: theme.palette.background.paper,
+    boxShadow: theme.shadows[1],
     borderRadius: '50px',
-    margin: 'auto',
   },
-  notchedOutline: {
+  searchBarOutline: {
     borderStyle: 'none',
   },
-});
+}));
 
 export const CustomStyles = () => {
   const classes = useStyles();
   return (
-    <Paper className={classes.search}>
-      <SearchBar
-        InputProps={{ classes: { notchedOutline: classes.notchedOutline } }}
-      />
-    </Paper>
+    <SearchBar
+      InputProps={{
+        classes: {
+          root: classes.searchBarRoot,
+          notchedOutline: classes.searchBarOutline,
+        },
+      }}
+    />
   );
 };

plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx

@@ -61,6 +61,9 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '50px',
     margin: 'auto',
   },
+  searchBarOutline: {
+    borderStyle: 'none',
+  },
 }));
 
 export const CustomStyles = () => {
@@ -71,6 +74,7 @@ export const CustomStyles = () => {
       <Grid container item xs={12} alignItems="center" direction="row">
         <HomePageSearchBar
           classes={{ root: classes.searchBar }}
+          InputProps={{ classes: { notchedOutline: classes.searchBarOutline } }}
           placeholder="Search"
         />
       </Grid>

plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx

@@ -23,10 +23,12 @@ import {
 import { useNavigateToQuery } from '../util';
 
 const useStyles = makeStyles({
-  root: {
+  searchBarRoot: {
+    fontSize: '1.5em',
+  },
+  searchBarOutline: {
     border: '1px solid #555',
     borderRadius: '6px',
-    fontSize: '1.5em',
   },
 });
 
@@ -60,10 +62,17 @@ export const HomePageSearchBar = (props: HomePageSearchBarProps) => {
 
   return (
     <SearchBarBase
-      classes={{ root: classes.root }}
       value={query}
       onSubmit={handleSubmit}
       onChange={handleChange}
+      InputProps={{
+        ...props.InputProps,
+        classes: {
+          root: classes.searchBarRoot,
+          notchedOutline: classes.searchBarOutline,
+          ...props.InputProps?.classes,
+        },
+      }}
       {...props}
     />
   );

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}
+    />
   );
 };