diff --git a/.changeset/friendly-kids-judge.md b/.changeset/friendly-kids-judge.md new file mode 100644 index 0000000000..e4809c1f40 --- /dev/null +++ b/.changeset/friendly-kids-judge.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search': patch +--- + +Removes the card UI from the search results type filter for a cleaner UI consistent with other filters diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx index bdd13f2fb2..e823ebe49a 100644 --- a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx @@ -20,9 +20,7 @@ import { searchApiRef, useSearch } from '@backstage/plugin-search-react'; import Accordion from '@material-ui/core/Accordion'; import AccordionSummary from '@material-ui/core/AccordionSummary'; import AccordionDetails from '@material-ui/core/AccordionDetails'; -import Card from '@material-ui/core/Card'; -import CardContent from '@material-ui/core/CardContent'; -import CardHeader from '@material-ui/core/CardHeader'; +import Box from '@material-ui/core/Box'; import Divider from '@material-ui/core/Divider'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; @@ -30,16 +28,11 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import { makeStyles } from '@material-ui/core/styles'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import Typography from '@material-ui/core/Typography'; import AllIcon from '@material-ui/icons/FontDownload'; import useAsync from 'react-use/esm/useAsync'; const useStyles = makeStyles(theme => ({ - card: { - backgroundColor: 'rgba(0, 0, 0, .11)', - }, - cardContent: { - paddingTop: theme.spacing(1), - }, icon: { color: theme.palette.text.primary, }, @@ -149,61 +142,59 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => { }, [filters, showCounts, term, types]); return ( - - - - + {name} + + } + IconButtonProps={{ size: 'small' }} > - } - IconButtonProps={{ size: 'small' }} + {expanded + ? 'Collapse' + : definedTypes.filter(t => t.value === selected)[0]!.name} + + + - {expanded - ? 'Collapse' - : definedTypes.filter(t => t.value === selected)[0]!.name} - - - - {definedTypes.map(type => ( - - - - - {cloneElement(type.icon, { - className: classes.listItemIcon, - })} - - - - - ))} - - - - - + {definedTypes.map(type => ( + + + + + {cloneElement(type.icon, { + className: classes.listItemIcon, + })} + + + + + ))} + + + + ); };