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

Fix SearchBar styles for custom SearchModal in StoryBook

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

@@ -13,32 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { wrapInTestApp } from '@backstage/test-utils';
 import {
+  DefaultResultListItem,
+  MockSearchApi,
+  searchApiRef,
+  SearchBar,
+  SearchContextProvider,
+  SearchResult,
+  SearchResultPager,
+} from '@backstage/plugin-search-react';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
+import {
+  Box,
   Button,
   DialogActions,
   DialogContent,
   DialogTitle,
   Grid,
+  IconButton,
   List,
-  Paper,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
 import React, { ComponentType, PropsWithChildren } from 'react';
 import { rootRouteRef } from '../../plugin';
-import {
-  SearchBar,
-  DefaultResultListItem,
-  searchApiRef,
-  MockSearchApi,
-  SearchContextProvider,
-  SearchResult,
-  SearchResultPager,
-} from '@backstage/plugin-search-react';
-import { TestApiProvider } from '@backstage/test-utils';
-import { SearchModal } from './SearchModal';
 import { SearchType } from '../SearchType';
+import { SearchModal } from './SearchModal';
 import { useSearchModal } from './useSearchModal';
 
 const mockResults = {
@@ -103,10 +103,10 @@ export const Default = () => {
 };
 
 const useStyles = makeStyles(theme => ({
-  container: {
-    borderRadius: 30,
+  titleContainer: {
     display: 'flex',
-    height: '2.4em',
+    alignItems: 'center',
+    gap: theme.spacing(1),
   },
   input: {
     flex: 1,
@@ -127,9 +127,13 @@ export const CustomModal = () => {
         {() => (
           <>
             <DialogTitle>
-              <Paper className={classes.container}>
+              <Box className={classes.titleContainer}>
                 <SearchBar className={classes.input} />
-              </Paper>
+
+                <IconButton aria-label="close" onClick={toggleModal}>
+                  <CloseIcon />
+                </IconButton>
+              </Box>
             </DialogTitle>
             <DialogContent>
               <Grid container direction="column">