diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 9d208056ee..21f5993997 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -213,6 +213,7 @@ "no_preview_available": "", "no_search_results": "", "no_symbols_found": "", + "showing_symbol_search_results": "", "normal": "", "off": "", "ok": "", diff --git a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js index 39d5e6d5c1..97f9cf948f 100644 --- a/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js +++ b/services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js @@ -66,10 +66,13 @@ export default function SymbolPaletteContent({ handleSelect }) {
- 0} - /> + {input.length <= 0 ? ( + + ) : ( +
+ {t('showing_symbol_search_results', { search: input })} +
+ )}
{categories.map(category => ( - + {category.label} ))} @@ -23,5 +19,4 @@ SymbolPaletteTabs.propTypes = { label: PropTypes.string.isRequired, }) ).isRequired, - disabled: PropTypes.bool, } diff --git a/services/web/frontend/stylesheets/app/editor/symbol-palette.less b/services/web/frontend/stylesheets/app/editor/symbol-palette.less index d256a6a7b4..5da0483e85 100644 --- a/services/web/frontend/stylesheets/app/editor/symbol-palette.less +++ b/services/web/frontend/stylesheets/app/editor/symbol-palette.less @@ -28,6 +28,11 @@ margin-left: @margin-xs; } +.symbol-palette-search-hint { + padding-left: @padding-xs; + margin-left: @margin-xs; +} + .symbol-palette-tab-list[data-reach-tab-list] { background: none; border-bottom: none; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index c40341a3fc..43095ed966 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1462,6 +1462,7 @@ "category_misc": "Misc", "no_symbols_found": "No symbols found", "find_out_more_about_latex_symbols": "Find out more about LaTeX symbols", + "showing_symbol_search_results": "Showing search results for \"__search__\"", "search": "Search", "also": "Also", "add_email": "Add Email", diff --git a/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js b/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js index 1dc5253e32..2a15461f5b 100644 --- a/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js +++ b/services/web/test/frontend/features/symbol-palette/components/symbol-palette.test.js @@ -69,6 +69,9 @@ describe('symbol palette', function () { expect(symbols).to.have.length(2) }) + // check the search hint is displayed + screen.getByText('Showing search results for "pi"') + // press Tab to select the symbols fireEvent.keyDown(container, { key: 'Tab' })