From bdc08fbf4f12ce76a11347341ad856fe34c07c21 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Mon, 21 Mar 2022 14:06:13 -0400 Subject: [PATCH] [Global Search Bar] Updated placeholder text to be more directive (#127903) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit And: * Fixed search bar’s width on smaller screens * Added an `append` with the symbol form of the keyboard shortcut --- .../public/components/search_bar.scss | 7 +++- .../public/components/search_bar.tsx | 36 ++++++++++++++++++- .../translations/translations/fr-FR.json | 1 - .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 5 files changed, 41 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.scss b/x-pack/plugins/global_search_bar/public/components/search_bar.scss index 7e6c3ddaa3126..045b0b5324630 100644 --- a/x-pack/plugins/global_search_bar/public/components/search_bar.scss +++ b/x-pack/plugins/global_search_bar/public/components/search_bar.scss @@ -16,7 +16,6 @@ //TODO add these overrides to EUI so that search behaves the same globally (eui/issues/4363) .kbnSearchBar { - width: 400px; max-width: 100%; will-change: width; } @@ -27,6 +26,12 @@ } } +@include euiBreakpoint('m', 'l', 'xl') { + .kbnSearchBar { + width: 400px; + } +} + @include euiBreakpoint('l', 'xl') { .kbnSearchBar:focus { animation: kbnAnimateSearchBar $euiAnimSpeedFast forwards; diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx index 95dc6a555564e..ab7bea265c626 100644 --- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx +++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx @@ -11,6 +11,8 @@ import useEvent from 'react-use/lib/useEvent'; import useMountedState from 'react-use/lib/useMountedState'; import { Subscription } from 'rxjs'; import { + useEuiTheme, + EuiFormLabel, EuiHeaderSectionItemButton, EuiIcon, EuiSelectableTemplateSitewide, @@ -69,6 +71,7 @@ export const SearchBar: FC = ({ darkMode, }) => { const isMounted = useMountedState(); + const { euiTheme } = useEuiTheme(); const [initialLoad, setInitialLoad] = useState(false); const [searchValue, setSearchValue] = useState(''); const [searchTerm, setSearchTerm] = useState(''); @@ -77,6 +80,7 @@ export const SearchBar: FC = ({ const searchSubscription = useRef(null); const [options, _setOptions] = useState([]); const [searchableTypes, setSearchableTypes] = useState([]); + const [showAppend, setShowAppend] = useState(true); const UNKNOWN_TAG_ID = '__unknown__'; useEffect(() => { @@ -252,8 +256,25 @@ export const SearchBar: FC = ({ const emptyMessage = ; const placeholderText = i18n.translate('xpack.globalSearchBar.searchBar.placeholder', { - defaultMessage: 'Search Elastic', + defaultMessage: 'Find apps, content, and more. Ex: Discover', }); + const keyboardShortcutTooltip = `${i18n.translate( + 'xpack.globalSearchBar.searchBar.shortcutTooltip.description', + { + defaultMessage: 'Keyboard shortcut', + } + )}: ${ + isMac + ? i18n.translate('xpack.globalSearchBar.searchBar.shortcutTooltip.macCommandDescription', { + defaultMessage: 'Command + /', + }) + : i18n.translate( + 'xpack.globalSearchBar.searchBar.shortcutTooltip.windowsCommandDescription', + { + defaultMessage: 'Control + /', + } + ) + }`; useEvent('keydown', onKeyDown); @@ -277,7 +298,20 @@ export const SearchBar: FC = ({ onFocus: () => { trackUiMetric(METRIC_TYPE.COUNT, 'search_focus'); setInitialLoad(true); + setShowAppend(false); + }, + onBlur: () => { + setShowAppend(true); }, + fullWidth: true, + append: showAppend ? ( + + {isMac ? '⌘/' : '^/'} + + ) : undefined, }} emptyMessage={emptyMessage} noMatchesMessage={emptyMessage} diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 3aaea1021494d..31521ca81e037 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -10449,7 +10449,6 @@ "xpack.globalSearchBar.searchBar.noResultsImageAlt": "Illustration d'un trou noir", "xpack.globalSearchBar.searchBar.optionTagListAriaLabel": "Balises", "xpack.globalSearchBar.searchbar.overflowTagsAriaLabel": "{n} {n, plural, one {balise} other {balises}} de plus : {tags}", - "xpack.globalSearchBar.searchBar.placeholder": "Rechercher dans Elastic", "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "Commande + /", "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}", "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "Raccourci", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 6969f983ab430..d64b50fde976c 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -12473,7 +12473,6 @@ "xpack.globalSearchBar.searchBar.noResultsImageAlt": "ブラックホールの図", "xpack.globalSearchBar.searchBar.optionTagListAriaLabel": "タグ", "xpack.globalSearchBar.searchbar.overflowTagsAriaLabel": "{n} その他の {n, plural, other {個のタグ}}：{tags}", - "xpack.globalSearchBar.searchBar.placeholder": "Elastic を検索", "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "コマンド+ /", "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}", "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "ショートカット", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index e1b4231f9479d..fda2023a170f5 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -12496,7 +12496,6 @@ "xpack.globalSearchBar.searchBar.noResultsImageAlt": "黑洞的图示", "xpack.globalSearchBar.searchBar.optionTagListAriaLabel": "标签", "xpack.globalSearchBar.searchbar.overflowTagsAriaLabel": "另外 {n} 个{n, plural, other {标签}}：{tags}", - "xpack.globalSearchBar.searchBar.placeholder": "搜索 Elastic", "xpack.globalSearchBar.searchBar.shortcutDescription.macCommandDescription": "Command + /", "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail": "{shortcutDescription} {commandDescription}", "xpack.globalSearchBar.searchBar.shortcutDescription.shortcutInstructionDescription": "快捷方式",