diff --git a/.changeset/nine-laws-run.md b/.changeset/nine-laws-run.md new file mode 100644 index 0000000000..742ec4d8b6 --- /dev/null +++ b/.changeset/nine-laws-run.md @@ -0,0 +1,11 @@ +--- +'@backstage/core-components': patch +--- + +Change the Table search field placeholder to "Filter" and change icon accordingly + +We had feedback that users expected the catalog table search field to have more sophisticated behaviour +than simple filtering. This change sets the search field placeholder to read "Filter" +to avoid confusion with the search feature. The icon is updated to match. This change is applied +generally in core-components so this change is made consistently across the app given the search +field is present on all pages via the sidebar. diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx index f61811938e..234b64ec54 100644 --- a/packages/core-components/src/components/Table/Table.tsx +++ b/packages/core-components/src/components/Table/Table.tsx @@ -32,7 +32,6 @@ import FirstPage from '@material-ui/icons/FirstPage'; import LastPage from '@material-ui/icons/LastPage'; import Remove from '@material-ui/icons/Remove'; import SaveAlt from '@material-ui/icons/SaveAlt'; -import Search from '@material-ui/icons/Search'; import ViewColumn from '@material-ui/icons/ViewColumn'; import { isEqual, transform } from 'lodash'; import MTable, { @@ -73,7 +72,7 @@ const tableIcons: Icons = { )), ResetSearch: forwardRef((props, ref) => ), - Search: forwardRef((props, ref) => ), + Search: forwardRef((props, ref) => ), SortArrow: forwardRef((props, ref) => ), ThirdStateCheck: forwardRef((props, ref) => ), ViewColumn: forwardRef((props, ref) => ), @@ -497,6 +496,7 @@ export function Table(props: TableProps) { } data={typeof data === 'function' ? data : tableData} style={{ width: '100%' }} + localization={{ toolbar: { searchPlaceholder: 'Filter' } }} {...restProps} />