paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

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

Browse Source 
Fix SearchBar styles & update StoryBook stories for custom styles
This commit is contained in:
Patrik Oldsberg
2023-05-24 11:32:10 +02:00
committed by GitHub
parent 6118c54213 6b281bda66
commit 15c3d7cecd
8 changed files with 126 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/pink-goats-talk.md
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/plugin-search-react': patch
'@backstage/plugin-search': patch
'@backstage/plugin-techdocs': patch
---
Fix SearchBar styles & update StoryBook stories for custom styles for `notchedOutline` class.
packages/app/src/components/home/templates/DefaultTemplate.stories.tsx
+9 -8
View File
@@ -140,15 +140,16 @@ export default {
};
const useStyles = makeStyles(theme => ({
searchBar: {
display: 'flex',
searchBarInput: {
maxWidth: '60vw',
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[1],
padding: '8px 0',
borderRadius: '50px',
margin: 'auto',
backgroundColor: theme.palette.background.paper,
borderRadius: '50px',
boxShadow: theme.shadows[1],
},
searchBarOutline: {
borderStyle: 'none'
}
}));
const useLogoStyles = makeStyles(theme => ({
@@ -177,9 +178,9 @@ export const DefaultTemplate = () => {
className={container}
logo={<TemplateBackstageLogo classes={{ svg, path }} />}
/>
<Grid container item xs={12} alignItems="center" direction="row">
<Grid container item xs={12} justifyContent='center'>
<HomePageSearchBar
classes={{ root: classes.searchBar }}
InputProps={{ classes: { root: classes.searchBarInput, notchedOutline: classes.searchBarOutline }}}
placeholder="Search"
/>
</Grid>
plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx
+15 -44
View File
@@ -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
+23 -11
View File
@@ -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
+22 -38
View File
@@ -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
+4
View File
@@ -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
+12 -3
View File
@@ -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
+34 -48
View File
@@ -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}
/>
);
};