diff --git a/.changeset/search-over-tysta-skogor.md b/.changeset/search-over-tysta-skogor.md new file mode 100644 index 0000000000..5398ae7f5f --- /dev/null +++ b/.changeset/search-over-tysta-skogor.md @@ -0,0 +1,58 @@ +--- +'@backstage/create-app': patch +--- + +The `` filter in the composed `SearchPage.tsx` was replaced with the `` variant. + +This is an entirely optional change; if you wish to display a control surface for search `types` as a single-select accordion (as opposed to the current multi-select of checkboxes), you can make the following (or similar) changes to your search page layout: + +```diff +--- a/packages/app/src/components/search/SearchPage.tsx ++++ b/packages/app/src/components/search/SearchPage.tsx +@@ -11,7 +11,7 @@ import { + SearchType, + DefaultResultListItem, + } from '@backstage/plugin-search'; +-import { Content, Header, Page } from '@backstage/core-components'; ++import { CatalogIcon, Content, DocsIcon, Header, Page } from '@backstage/core-components'; + + const useStyles = makeStyles((theme: Theme) => ({ + bar: { +@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({ + }, + filters: { + padding: theme.spacing(2), ++ marginTop: theme.spacing(2), + }, + filter: { + '& + &': { +@@ -41,12 +42,23 @@ const SearchPage = () => { + + + ++ , ++ }, ++ { ++ value: 'techdocs', ++ name: 'Documentation', ++ icon: , ++ }, ++ ]} ++ /> + +- + ({ bar: { @@ -19,6 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, filters: { padding: theme.spacing(2), + marginTop: theme.spacing(2), }, filter: { '& + &': { @@ -41,12 +48,23 @@ const SearchPage = () => { + , + }, + { + value: 'techdocs', + name: 'Documentation', + icon: , + }, + ]} + /> -