[Global Search Bar] Updated placeholder text to be more directive (#1…

…27903) And: * Fixed search bar’s width on smaller screens * Added an `append` with the symbol form of the keyboard shortcut
elastic · Mar 21, 2022 · bdc08fb · bdc08fb
1 parent ebc98cc
commit bdc08fb
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 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
@@ -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
@@ -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<SearchBarProps> = ({
   darkMode,
 }) => {
   const isMounted = useMountedState();
+  const { euiTheme } = useEuiTheme();
   const [initialLoad, setInitialLoad] = useState(false);
   const [searchValue, setSearchValue] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -77,6 +80,7 @@ export const SearchBar: FC<SearchBarProps> = ({
   const searchSubscription = useRef<Subscription | null>(null);
   const [options, _setOptions] = useState<EuiSelectableTemplateSitewideOption[]>([]);
   const [searchableTypes, setSearchableTypes] = useState<string[]>([]);
+  const [showAppend, setShowAppend] = useState<boolean>(true);
   const UNKNOWN_TAG_ID = '__unknown__';
 
   useEffect(() => {
@@ -252,8 +256,25 @@ export const SearchBar: FC<SearchBarProps> = ({
 
   const emptyMessage = <PopoverPlaceholder darkMode={darkMode} basePath={basePathUrl} />;
   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<SearchBarProps> = ({
         onFocus: () => {
           trackUiMetric(METRIC_TYPE.COUNT, 'search_focus');
           setInitialLoad(true);
+          setShowAppend(false);
+        },
+        onBlur: () => {
+          setShowAppend(true);
         },
+        fullWidth: true,
+        append: showAppend ? (
+          <EuiFormLabel
+            title={keyboardShortcutTooltip}
+            css={{ fontFamily: euiTheme.font.familyCode }}
+          >
+            {isMac ? '⌘/' : '^/'}
+          </EuiFormLabel>
+        ) : 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
@@ -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
@@ -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
@@ -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": "快捷方式",