diff --git a/images/ui/search_field/clear-search-correct.png b/images/ui/search_field/clear-search-correct.png index 01bf1c026bb..4dc56eb6d7d 100644 Binary files a/images/ui/search_field/clear-search-correct.png and b/images/ui/search_field/clear-search-correct.png differ diff --git a/images/ui/search_field/clear-search-incorrect.png b/images/ui/search_field/clear-search-incorrect.png index 3f0f02ccd99..2e4ecba8247 100644 Binary files a/images/ui/search_field/clear-search-incorrect.png and b/images/ui/search_field/clear-search-incorrect.png differ diff --git a/images/ui/search_field/completion-filtered.png b/images/ui/search_field/completion-filtered.png index 5e7b5bdb05b..e8dc6e7386a 100644 Binary files a/images/ui/search_field/completion-filtered.png and b/images/ui/search_field/completion-filtered.png differ diff --git a/images/ui/search_field/completion-mes-2.png b/images/ui/search_field/completion-mes-2.png index a43a4d2771c..c4053d2d3e5 100644 Binary files a/images/ui/search_field/completion-mes-2.png and b/images/ui/search_field/completion-mes-2.png differ diff --git a/images/ui/search_field/completion-mes.png b/images/ui/search_field/completion-mes.png index fd687b4f28c..d8899575ddc 100644 Binary files a/images/ui/search_field/completion-mes.png and b/images/ui/search_field/completion-mes.png differ diff --git a/images/ui/search_field/completion-variants.png b/images/ui/search_field/completion-variants.png index fcf84fb48ba..5bf979c07cb 100644 Binary files a/images/ui/search_field/completion-variants.png and b/images/ui/search_field/completion-variants.png differ diff --git a/images/ui/search_field/filters-correct.png b/images/ui/search_field/filters-correct.png index bd1da048afd..56c401c7e56 100644 Binary files a/images/ui/search_field/filters-correct.png and b/images/ui/search_field/filters-correct.png differ diff --git a/images/ui/search_field/filters-incorrect.png b/images/ui/search_field/filters-incorrect.png index ebc095df4b2..368b6d4ec76 100644 Binary files a/images/ui/search_field/filters-incorrect.png and b/images/ui/search_field/filters-incorrect.png differ diff --git a/images/ui/search_field/keymap-search-correct.png b/images/ui/search_field/keymap-search-correct.png index fec33819006..aee40df799c 100644 Binary files a/images/ui/search_field/keymap-search-correct.png and b/images/ui/search_field/keymap-search-correct.png differ diff --git a/images/ui/search_field/keymap-search-incorrect.png b/images/ui/search_field/keymap-search-incorrect.png index 97a3e8065ad..ba8ad5f0964 100644 Binary files a/images/ui/search_field/keymap-search-incorrect.png and b/images/ui/search_field/keymap-search-incorrect.png differ diff --git a/images/ui/search_field/log-correct.png b/images/ui/search_field/log-correct.png index e581e092972..6b48b3493f8 100644 Binary files a/images/ui/search_field/log-correct.png and b/images/ui/search_field/log-correct.png differ diff --git a/images/ui/search_field/log-focused.png b/images/ui/search_field/log-focused.png index 30083c48192..602f97bb4a2 100644 Binary files a/images/ui/search_field/log-focused.png and b/images/ui/search_field/log-focused.png differ diff --git a/images/ui/search_field/log-incorrect.png b/images/ui/search_field/log-incorrect.png index 69ab3355ca0..95ee39c65b1 100644 Binary files a/images/ui/search_field/log-incorrect.png and b/images/ui/search_field/log-incorrect.png differ diff --git a/images/ui/search_field/multiline-mes.png b/images/ui/search_field/multiline-mes.png index 32ff2844426..0438669c0c2 100644 Binary files a/images/ui/search_field/multiline-mes.png and b/images/ui/search_field/multiline-mes.png differ diff --git a/images/ui/search_field/multiline-scrollbar.png b/images/ui/search_field/multiline-scrollbar.png index 9b307db2ab9..f8f6cfa83d5 100644 Binary files a/images/ui/search_field/multiline-scrollbar.png and b/images/ui/search_field/multiline-scrollbar.png differ diff --git a/images/ui/search_field/multiline.png b/images/ui/search_field/multiline.png index c367d04c8a4..e61b249ce83 100644 Binary files a/images/ui/search_field/multiline.png and b/images/ui/search_field/multiline.png differ diff --git a/images/ui/search_field/new-line.png b/images/ui/search_field/new-line.png index 126e3371dc6..74ecf277236 100644 Binary files a/images/ui/search_field/new-line.png and b/images/ui/search_field/new-line.png differ diff --git a/images/ui/search_field/newline-options.png b/images/ui/search_field/newline-options.png index 7eec893b74f..1507a9684cb 100644 Binary files a/images/ui/search_field/newline-options.png and b/images/ui/search_field/newline-options.png differ diff --git a/images/ui/search_field/options-focused.png b/images/ui/search_field/options-focused.png index 8bf5a556878..d9139a857a0 100644 Binary files a/images/ui/search_field/options-focused.png and b/images/ui/search_field/options-focused.png differ diff --git a/images/ui/search_field/options-hovered.png b/images/ui/search_field/options-hovered.png index 9d7ce4e5157..d862ea2dbf3 100644 Binary files a/images/ui/search_field/options-hovered.png and b/images/ui/search_field/options-hovered.png differ diff --git a/images/ui/search_field/options-on.png b/images/ui/search_field/options-on.png index 3b1bb0d5814..84747eef5e2 100644 Binary files a/images/ui/search_field/options-on.png and b/images/ui/search_field/options-on.png differ diff --git a/images/ui/search_field/options.png b/images/ui/search_field/options.png index 0f402066f5d..4a631f8d89f 100644 Binary files a/images/ui/search_field/options.png and b/images/ui/search_field/options.png differ diff --git a/images/ui/search_field/placeholder.png b/images/ui/search_field/placeholder.png index 087cf60c25c..48cb69f7243 100644 Binary files a/images/ui/search_field/placeholder.png and b/images/ui/search_field/placeholder.png differ diff --git a/images/ui/search_field/popup-correct.png b/images/ui/search_field/popup-correct.png index 03d7b5857d8..5140f379ba2 100644 Binary files a/images/ui/search_field/popup-correct.png and b/images/ui/search_field/popup-correct.png differ diff --git a/images/ui/search_field/popup-incorrect.png b/images/ui/search_field/popup-incorrect.png index 60aa5a52575..cdfdb30a6ae 100644 Binary files a/images/ui/search_field/popup-incorrect.png and b/images/ui/search_field/popup-incorrect.png differ diff --git a/images/ui/search_field/ptree-correct.png b/images/ui/search_field/ptree-correct.png index 2c3c84ae8ee..1dd34329af8 100644 Binary files a/images/ui/search_field/ptree-correct.png and b/images/ui/search_field/ptree-correct.png differ diff --git a/images/ui/search_field/ptree-incorrect.png b/images/ui/search_field/ptree-incorrect.png index 681712cdf32..44ea3127ec6 100644 Binary files a/images/ui/search_field/ptree-incorrect.png and b/images/ui/search_field/ptree-incorrect.png differ diff --git a/images/ui/search_field/ptree-sizes.png b/images/ui/search_field/ptree-sizes.png index 11fd2f0efcc..0472fcfee4c 100644 Binary files a/images/ui/search_field/ptree-sizes.png and b/images/ui/search_field/ptree-sizes.png differ diff --git a/images/ui/search_field/search-everywhere.png b/images/ui/search_field/search-everywhere.png index ef99fbb0742..f42e0505d9a 100644 Binary files a/images/ui/search_field/search-everywhere.png and b/images/ui/search_field/search-everywhere.png differ diff --git a/images/ui/search_field/search-history-empty.png b/images/ui/search_field/search-history-empty.png index 4a1feaa189c..2b150cd7595 100644 Binary files a/images/ui/search_field/search-history-empty.png and b/images/ui/search_field/search-history-empty.png differ diff --git a/images/ui/search_field/search-history-popup-mes.png b/images/ui/search_field/search-history-popup-mes.png index 3e5134f91ff..b17e0040d62 100644 Binary files a/images/ui/search_field/search-history-popup-mes.png and b/images/ui/search_field/search-history-popup-mes.png differ diff --git a/images/ui/search_field/search-history-popup.png b/images/ui/search_field/search-history-popup.png index 72ca9d3036c..835ef3e19a0 100644 Binary files a/images/ui/search_field/search-history-popup.png and b/images/ui/search_field/search-history-popup.png differ diff --git a/images/ui/search_field/search-icon-position-big.png b/images/ui/search_field/search-icon-position-big.png index af4c267b06a..8c692effa52 100644 Binary files a/images/ui/search_field/search-icon-position-big.png and b/images/ui/search_field/search-icon-position-big.png differ diff --git a/images/ui/search_field/search-icon-position-small.png b/images/ui/search_field/search-icon-position-small.png index 62930481429..8dcdbea9974 100644 Binary files a/images/ui/search_field/search-icon-position-small.png and b/images/ui/search_field/search-icon-position-small.png differ diff --git a/images/ui/search_field/search-no-history.png b/images/ui/search_field/search-no-history.png index 1ca48119699..bc7cc12c39d 100644 Binary files a/images/ui/search_field/search-no-history.png and b/images/ui/search_field/search-no-history.png differ diff --git a/images/ui/search_field/search-with-history.png b/images/ui/search_field/search-with-history.png index 7916a87d39c..18d8769d877 100644 Binary files a/images/ui/search_field/search-with-history.png and b/images/ui/search_field/search-with-history.png differ diff --git a/images/ui/search_field/search_field.png b/images/ui/search_field/search_field.png new file mode 100644 index 00000000000..5d8f845a8db Binary files /dev/null and b/images/ui/search_field/search_field.png differ diff --git a/images/ui/search_field/search_field_attributes.png b/images/ui/search_field/search_field_attributes.png new file mode 100644 index 00000000000..f72cd3727a3 Binary files /dev/null and b/images/ui/search_field/search_field_attributes.png differ diff --git a/images/ui/search_field/search_field_attributes_ccorrect_dark.png b/images/ui/search_field/search_field_attributes_ccorrect_dark.png new file mode 100644 index 00000000000..5adbc366daa Binary files /dev/null and b/images/ui/search_field/search_field_attributes_ccorrect_dark.png differ diff --git a/images/ui/search_field/search_field_attributes_correct.png b/images/ui/search_field/search_field_attributes_correct.png new file mode 100644 index 00000000000..3cd9dee7bad Binary files /dev/null and b/images/ui/search_field/search_field_attributes_correct.png differ diff --git a/images/ui/search_field/search_field_attributes_correct_dark.png b/images/ui/search_field/search_field_attributes_correct_dark.png new file mode 100644 index 00000000000..0c608b39ff1 Binary files /dev/null and b/images/ui/search_field/search_field_attributes_correct_dark.png differ diff --git a/images/ui/search_field/search_field_attributes_dark.png b/images/ui/search_field/search_field_attributes_dark.png new file mode 100644 index 00000000000..f3b97f982d0 Binary files /dev/null and b/images/ui/search_field/search_field_attributes_dark.png differ diff --git a/images/ui/search_field/search_field_attributes_incorrect.png b/images/ui/search_field/search_field_attributes_incorrect.png new file mode 100644 index 00000000000..cde1fee7e23 Binary files /dev/null and b/images/ui/search_field/search_field_attributes_incorrect.png differ diff --git a/images/ui/search_field/search_field_attributes_incorrect_dark.png b/images/ui/search_field/search_field_attributes_incorrect_dark.png new file mode 100644 index 00000000000..7a58138a83e Binary files /dev/null and b/images/ui/search_field/search_field_attributes_incorrect_dark.png differ diff --git a/images/ui/search_field/search_field_clear_search.png b/images/ui/search_field/search_field_clear_search.png new file mode 100644 index 00000000000..560553f2ff8 Binary files /dev/null and b/images/ui/search_field/search_field_clear_search.png differ diff --git a/images/ui/search_field/search_field_clear_search_dark.png b/images/ui/search_field/search_field_clear_search_dark.png new file mode 100644 index 00000000000..61e68056cd3 Binary files /dev/null and b/images/ui/search_field/search_field_clear_search_dark.png differ diff --git a/images/ui/search_field/search_field_close_icon.png b/images/ui/search_field/search_field_close_icon.png new file mode 100644 index 00000000000..8e529e0ad77 Binary files /dev/null and b/images/ui/search_field/search_field_close_icon.png differ diff --git a/images/ui/search_field/search_field_close_icon_dark.png b/images/ui/search_field/search_field_close_icon_dark.png new file mode 100644 index 00000000000..4f3fb312616 Binary files /dev/null and b/images/ui/search_field/search_field_close_icon_dark.png differ diff --git a/images/ui/search_field/search_field_completion.png b/images/ui/search_field/search_field_completion.png index 52129fb79ed..4df32319e32 100644 Binary files a/images/ui/search_field/search_field_completion.png and b/images/ui/search_field/search_field_completion.png differ diff --git a/images/ui/search_field/search_field_dark.png b/images/ui/search_field/search_field_dark.png new file mode 100644 index 00000000000..7a5961c6045 Binary files /dev/null and b/images/ui/search_field/search_field_dark.png differ diff --git a/images/ui/search_field/search_field_enabled_icons.png b/images/ui/search_field/search_field_enabled_icons.png new file mode 100644 index 00000000000..6dc465dc024 Binary files /dev/null and b/images/ui/search_field/search_field_enabled_icons.png differ diff --git a/images/ui/search_field/search_field_enabled_icons_dark.png b/images/ui/search_field/search_field_enabled_icons_dark.png new file mode 100644 index 00000000000..60090e76c41 Binary files /dev/null and b/images/ui/search_field/search_field_enabled_icons_dark.png differ diff --git a/images/ui/search_field/search_field_example.png b/images/ui/search_field/search_field_example.png index faa811377a8..6f11e0d33e5 100644 Binary files a/images/ui/search_field/search_field_example.png and b/images/ui/search_field/search_field_example.png differ diff --git a/images/ui/search_field/search_field_hints.png b/images/ui/search_field/search_field_hints.png new file mode 100644 index 00000000000..440d28710c0 Binary files /dev/null and b/images/ui/search_field/search_field_hints.png differ diff --git a/images/ui/search_field/search_field_hints_dark.png b/images/ui/search_field/search_field_hints_dark.png new file mode 100644 index 00000000000..f0665646db7 Binary files /dev/null and b/images/ui/search_field/search_field_hints_dark.png differ diff --git a/images/ui/search_field/search_field_history.png b/images/ui/search_field/search_field_history.png new file mode 100644 index 00000000000..6eb86d0e182 Binary files /dev/null and b/images/ui/search_field/search_field_history.png differ diff --git a/images/ui/search_field/search_field_history_dark.png b/images/ui/search_field/search_field_history_dark.png new file mode 100644 index 00000000000..89dda6fe662 Binary files /dev/null and b/images/ui/search_field/search_field_history_dark.png differ diff --git a/images/ui/search_field/search_field_label_correct.png b/images/ui/search_field/search_field_label_correct.png new file mode 100644 index 00000000000..b1cd1e69cea Binary files /dev/null and b/images/ui/search_field/search_field_label_correct.png differ diff --git a/images/ui/search_field/search_field_label_correct_dark.png b/images/ui/search_field/search_field_label_correct_dark.png new file mode 100644 index 00000000000..802da9ab60a Binary files /dev/null and b/images/ui/search_field/search_field_label_correct_dark.png differ diff --git a/images/ui/search_field/search_field_label_incorrect.png b/images/ui/search_field/search_field_label_incorrect.png new file mode 100644 index 00000000000..8d186ae59a6 Binary files /dev/null and b/images/ui/search_field/search_field_label_incorrect.png differ diff --git a/images/ui/search_field/search_field_label_incorrect_dark.png b/images/ui/search_field/search_field_label_incorrect_dark.png new file mode 100644 index 00000000000..61850809d35 Binary files /dev/null and b/images/ui/search_field/search_field_label_incorrect_dark.png differ diff --git a/images/ui/search_field/search_field_multiline.png b/images/ui/search_field/search_field_multiline.png new file mode 100644 index 00000000000..d598d9a3cdb Binary files /dev/null and b/images/ui/search_field/search_field_multiline.png differ diff --git a/images/ui/search_field/search_field_multiline_dark.png b/images/ui/search_field/search_field_multiline_dark.png new file mode 100644 index 00000000000..90e26a2e8e6 Binary files /dev/null and b/images/ui/search_field/search_field_multiline_dark.png differ diff --git a/images/ui/search_field/search_field_new_line_icon.png b/images/ui/search_field/search_field_new_line_icon.png new file mode 100644 index 00000000000..50558d52d46 Binary files /dev/null and b/images/ui/search_field/search_field_new_line_icon.png differ diff --git a/images/ui/search_field/search_field_new_line_icon_dark.png b/images/ui/search_field/search_field_new_line_icon_dark.png new file mode 100644 index 00000000000..28b91eae949 Binary files /dev/null and b/images/ui/search_field/search_field_new_line_icon_dark.png differ diff --git a/images/ui/search_field/search_field_placement.png b/images/ui/search_field/search_field_placement.png new file mode 100644 index 00000000000..20cc5434f6d Binary files /dev/null and b/images/ui/search_field/search_field_placement.png differ diff --git a/images/ui/search_field/search_field_placement_correct.png b/images/ui/search_field/search_field_placement_correct.png new file mode 100644 index 00000000000..21403ee4ce0 Binary files /dev/null and b/images/ui/search_field/search_field_placement_correct.png differ diff --git a/images/ui/search_field/search_field_placement_correct_dark.png b/images/ui/search_field/search_field_placement_correct_dark.png new file mode 100644 index 00000000000..c8913e9bbfa Binary files /dev/null and b/images/ui/search_field/search_field_placement_correct_dark.png differ diff --git a/images/ui/search_field/search_field_placement_dark.png b/images/ui/search_field/search_field_placement_dark.png new file mode 100644 index 00000000000..dfce67f4488 Binary files /dev/null and b/images/ui/search_field/search_field_placement_dark.png differ diff --git a/images/ui/search_field/search_field_placement_incorrect.png b/images/ui/search_field/search_field_placement_incorrect.png new file mode 100644 index 00000000000..864ac8287b6 Binary files /dev/null and b/images/ui/search_field/search_field_placement_incorrect.png differ diff --git a/images/ui/search_field/search_field_placement_incorrect_dark.png b/images/ui/search_field/search_field_placement_incorrect_dark.png new file mode 100644 index 00000000000..396aa352877 Binary files /dev/null and b/images/ui/search_field/search_field_placement_incorrect_dark.png differ diff --git a/images/ui/search_field/search_field_project.png b/images/ui/search_field/search_field_project.png new file mode 100644 index 00000000000..f0b458bab65 Binary files /dev/null and b/images/ui/search_field/search_field_project.png differ diff --git a/images/ui/search_field/search_field_project_dark.png b/images/ui/search_field/search_field_project_dark.png new file mode 100644 index 00000000000..2f24e15344d Binary files /dev/null and b/images/ui/search_field/search_field_project_dark.png differ diff --git a/images/ui/search_field/search_field_search_options.png b/images/ui/search_field/search_field_search_options.png new file mode 100644 index 00000000000..188109112c8 Binary files /dev/null and b/images/ui/search_field/search_field_search_options.png differ diff --git a/images/ui/search_field/search_field_search_options_1.png b/images/ui/search_field/search_field_search_options_1.png new file mode 100644 index 00000000000..c03670d2949 Binary files /dev/null and b/images/ui/search_field/search_field_search_options_1.png differ diff --git a/images/ui/search_field/search_field_search_options_1_dark.png b/images/ui/search_field/search_field_search_options_1_dark.png new file mode 100644 index 00000000000..95cdfcb9fa8 Binary files /dev/null and b/images/ui/search_field/search_field_search_options_1_dark.png differ diff --git a/images/ui/search_field/search_field_search_options_2.png b/images/ui/search_field/search_field_search_options_2.png new file mode 100644 index 00000000000..3287c11c23d Binary files /dev/null and b/images/ui/search_field/search_field_search_options_2.png differ diff --git a/images/ui/search_field/search_field_search_options_2_dark.png b/images/ui/search_field/search_field_search_options_2_dark.png new file mode 100644 index 00000000000..3132ad1d9e5 Binary files /dev/null and b/images/ui/search_field/search_field_search_options_2_dark.png differ diff --git a/images/ui/search_field/search_field_search_options_3.png b/images/ui/search_field/search_field_search_options_3.png new file mode 100644 index 00000000000..3ecb65a7506 Binary files /dev/null and b/images/ui/search_field/search_field_search_options_3.png differ diff --git a/images/ui/search_field/search_field_search_options_3_dark.png b/images/ui/search_field/search_field_search_options_3_dark.png new file mode 100644 index 00000000000..8f386cf1645 Binary files /dev/null and b/images/ui/search_field/search_field_search_options_3_dark.png differ diff --git a/images/ui/search_field/search_field_search_options_dark.png b/images/ui/search_field/search_field_search_options_dark.png new file mode 100644 index 00000000000..9ea441489b4 Binary files /dev/null and b/images/ui/search_field/search_field_search_options_dark.png differ diff --git a/images/ui/search_field/search_field_search_replace.png b/images/ui/search_field/search_field_search_replace.png new file mode 100644 index 00000000000..462e9aef249 Binary files /dev/null and b/images/ui/search_field/search_field_search_replace.png differ diff --git a/images/ui/search_field/search_field_search_replace_dark.png b/images/ui/search_field/search_field_search_replace_dark.png new file mode 100644 index 00000000000..e895fb169be Binary files /dev/null and b/images/ui/search_field/search_field_search_replace_dark.png differ diff --git a/images/ui/search_field/search_field_settings.png b/images/ui/search_field/search_field_settings.png index e3effd6ec1b..9cded919fbb 100644 Binary files a/images/ui/search_field/search_field_settings.png and b/images/ui/search_field/search_field_settings.png differ diff --git a/images/ui/search_field/search_field_tab_focus.png b/images/ui/search_field/search_field_tab_focus.png new file mode 100644 index 00000000000..aceac5aab77 Binary files /dev/null and b/images/ui/search_field/search_field_tab_focus.png differ diff --git a/images/ui/search_field/search_field_tab_focus_dark.png b/images/ui/search_field/search_field_tab_focus_dark.png new file mode 100644 index 00000000000..f355be3ab5b Binary files /dev/null and b/images/ui/search_field/search_field_tab_focus_dark.png differ diff --git a/images/ui/search_field/search_field_width.png b/images/ui/search_field/search_field_width.png index f0a70500c3a..8f580f9e60e 100644 Binary files a/images/ui/search_field/search_field_width.png and b/images/ui/search_field/search_field_width.png differ diff --git a/images/ui/search_field/structural-replace.png b/images/ui/search_field/structural-replace.png index a77ff9f876b..4cf297bb0ad 100644 Binary files a/images/ui/search_field/structural-replace.png and b/images/ui/search_field/structural-replace.png differ diff --git a/images/ui/search_field/width-toolbar.png b/images/ui/search_field/width-toolbar.png index aae8a6d96a4..c0d10eeac30 100644 Binary files a/images/ui/search_field/width-toolbar.png and b/images/ui/search_field/width-toolbar.png differ diff --git a/topics/ui/controls/search_field.md b/topics/ui/controls/search_field.md index e8d9094dfbf..8702b623074 100644 --- a/topics/ui/controls/search_field.md +++ b/topics/ui/controls/search_field.md @@ -10,182 +10,96 @@ -A search field is an input field that helps users locate objects, actions or text in an application. +A search field is an [input field](input_field.md) that helps users locate objects, actions, or text. -![](search_field_example.png){width=400} - -This article focuses on the search field. +![](search_field.png){width=706} [//]: # (TODO: See another article for [search results](search_results.md).) ## When to use -Use the search field when specific objects are difficult to find at a glance, for example: +Use a search field when specific objects are difficult to find at a glance: -* There are many objects, for example, in the VCS Log table or in the Editor with a large file opened. -* Objects aren't in a single location, for example controls are located on different setting pages. +* There are many objects, as in the VCS Log table or in the Editor with a large file opened. +* Objects aren't in a single location, for example, controls are located on different setting pages. ## How to use -### Label and Placeholder - -Do **not** add a label to the search field. The magnifying glass icon is self-explanatory. - -Incorrect - -![](ptree-incorrect.png){width=360} - -Correct +### Label -![](ptree-correct.png){width=360} +Don't add a label Search to the search field. The magnifying glass icon is self-explanatory. -Mark the replace field with a label or a placeholder when shown together with the search field to distinguish between them: - -![](structural-replace.png){width=865} + + + + + +
CorrectIncorrect
-Provide hints and scope as placeholder text. -For example, the placeholder for plugins' search depends on the settings page tab to make it clear that search depends on the tab: +### Placeholder -![](placeholder.png){width=581} +Provide hints such as search scope as placeholder text. -### Icons +![](search_field_hints.png){width=706} -#### Search Options +### Search and Replace fields -Use icon buttons inside the search field to save space and not to overload the UI and to be able to use them in already packed UI such as the Speed Search popup in trees or lists: +Mark the Search and Replace fields with placeholders when shown together to distinguish between them: -![](options.png){width=400} +![](search_field_search_replace.png){width=706} -Available option icons: +### Search options -| ![](matchCase.png){width=16} | Match case | -|--------------------------------|--------------| -| ![](regex.png){width=16} | Regex | -| ![](words.png){width=16} | Words | -| ![](inSelection.png){width=16} | In selection | -{style=none} +Use [icon buttons](icon_button.md) inside the search field to save space and not to overload the UI. -Change the state of options icons on hover so that it is clear that they are clickable: +![](search_field_search_options.png){width="706"} -![](options-hovered.png){width=400} +Icon buttons should change background color when enabled so that it is clear which options are currently enabled. -Make icon buttons easily accessible with Tab navigation. -Option icons should be placed on the right of the search field in the tabbing order. -Show a border around the focused option. +![](search_field_enabled_icons.png){width=706} -![](options-focused.png){width=400} +### Tab navigation -Icon buttons should change color when enabled so that it is clear which options are currently enabled: +Make icon buttons easily accessible with Tab. Focused button should have a colored border. -![](options-on.png){width=400} +![](search_field_tab_focus.png){width=706} -#### Clear a Search String +### Clear a Search String -Show the clear button only when filtering on-screen content. +Show the Clear button when the search field has been filled. When the button is clicked, clear the search field and restore the content to its default state. -Do **not** show the clear button if the search field is empty. - -![](clear-search-correct.png){width=581} - -Do **not** show the clear button when the initial data state is empty or doesn't differ from the result. -For example, the close icon is not really useful in the editor search field since matches are highlighted and not filtered: -Incorrect - -![](clear-search-incorrect.png){width=419} +![](search_field_clear_search.png){width=706} When search can be configured with options, show the clear button on the left of the option buttons. This way, option buttons won't jump when the clear button appears. -The separator between the options and the clear button makes it harder to mis-click the potentially dangerous clear icon. - -![](search_field_example.png){width=400} - -#### Multiline Search Strings - -Searching for multiline matches can be achieved with a separate New Line action button: -![](new-line.png){width=342} +![](search_field.png){width=706} -Put the New line action button on the left of the option buttons: +### Multiline search strings -![](newline-options.png){width=300} +If multiline search is needed, use the New Line action button. It should be placed on the left of the rest of the search options. -Move the New Line action button below the option buttons when the search field becomes a multi-line one: +![](search_field_multiline.png){width=706} -![](multiline.png){width=300} +The default shortcut for the New Line action: ⇧⌘⏎ for macOS and Ctrl + Shift + Enter for Windows/Linux. -Add a vertical separator when the scrollbar appears: +### Filters -![](multiline-scrollbar.png){width=300} +Provide filters for complex searches. Don't use filter attributes in the search query. -The default shortcut for the New Line action: - - - - - - - - - - +
macOS⇧⌘⏎
Windows/LinuxCtrl + Shift + Enter
+ + + +
CorrectIncorrect
-### Completion - -Provide completion for complex searches with filtering by attributes: - -![](search_field_completion.png){width=354} - -Do **not** use filter attributes as separate controls on the toolbar. -Not all of them are needed every time while they take a lot of space and overload the interface. -Use completion instead: - -Incorrect - -![](filters-incorrect.png){width=550} - -Correct - -![](filters-correct.png){width=550} - -The following syntax is used for attributes: - -* Binary attributes are marked with a number sign (#), for example, _#by-jetbrains_ to show plugins which are developed by JetBrains. - -* Values for open attributes are provided after a colon, for example, _status: disabled_ to show all disabled plugins. - -Provide aliases to the main attributes where possible, this way it would be easier for users to find the required filter. -For example, the User attribute in the VCS Log search field can have the Author alias. - -Show a popup with search attributes when the field gets focus, and after each space character except the space character following an attribute's name. -This will make it clear that filtering by attributes is available. - -Filter out the completion suggestions as the user types: - -![](completion-filtered.png){width=354} - -Show a popup with values right after the user has entered an attribute. - -![](completion-variants.png){width=354} - -### Search History - -Use the magnifying glass icon with an arrow when search history is available: - -![](search-with-history.png){width=250} +### Search history -And without an arrow when it's not: +Use the magnifying glass icon with an arrow when search history is available. Show search history in a popup when clicking on the magnifying glass icon. -![](search-no-history.png){width=250} - -Show search history in a popup when clicking on the magnifying glass icon: - -![](search-history-popup.png){width=256} - -Show context help in the history popup when it is empty: - -![](search-history-empty.png){width=256} +![](search_field_history.png){width=706} The keyboard shortcut for the History action is Alt + Down on all systems. @@ -198,98 +112,44 @@ Add a search string to history: ### Placement -Put the search field on top of the on-screen content that is being searched, and align them vertically. -For example, the search field in Settings dialog is aligned with the filtered settings tree: - -Correct - -![](search_field_settings.png){width=256} - -The search field is not aligned with the content on the Keymap settings page, which makes it harder to relate the content and the search string: - -Incorrect +Put the search field on top of the content that is being searched and align them vertically. +For example, the search field in Settings dialog is aligned with the filtered settings tree. -![](keymap-search-incorrect.png){width=491} +![](search_field_placement.png){width=706} -Correct + -Incorrect +#### Speed Search -![](log-incorrect.png){width=475} +Show the search field on demand when search is supplementary to other functionality or if space is limited. The search field should be accessible with cmd+F on macOS and Ctrl + F on Windows/Linux. +For example, space in the Project view is limited and too loaded to always show the Search bar: -Correct - -![](log-correct.png){width=475} - -| Incorrect | Correct | -|-----------------------------------------------------|-----------------------------------------------------| -| ![](popup-incorrect.png){width="235"} | ![](popup-correct.png){width="235"} | - -Show the search field on demand when search is supplementary to other functionality or if space is limited. -For example, space in the Project view is limited and too loaded to always show the _Speed Search_ bar: - -![](ptree-correct.png){width=360} - -When searching through content that is not displayed on the screen, put the search field on top of the active frame as a popup. -This makes it more prominent and gives space for search results. -For example, Search Everywhere is shown on top of the main IDE frame: - -![](search-everywhere.png){width=686} +![](search_field_project.png){width=706} ### Sizes -For a search field shown without a toolbar (i.e. _Speed Search_ in trees), the search width could be adjusted on typing to accommodate input: - -![](search_field_width.png){width=160} - -For a search field that is not fitted to a toolbar, set the minimum width to 200: - -![](width-toolbar.png){width=425} - -For a search which is fitted to the toolbar, expand the field to the toolbar width. - -Center-align icons and the search string with the one-line search field vertically. Adjust the right and left paddings to the higher search fields: - -![](search-icon-position-small.png){width=297} - -![](search-icon-position-big.png){width=296} - -Save the position of the search and option icons when the search field becomes a multi-line one: - -![](multiline-mes.png){width=250} - -### Spaces - -Between the floating search field and on-screen content: - -![](ptree-sizes.png){width=265} - -Between history and the search field: - -![](search-history-popup-mes.png){width=269} - -Between search string and completion popup: - -![](completion-mes-2.png){width=266} - -Completion popup: - -![](completion-mes.png){width=95} +#### Grouped with other controls {#grouped-search-size} -## Style +For a search field which is displayed as an input field in a group of controls, for example, in a tool window toolbar, follow the [input sizes guideline](input_field.md#sizes-and-placement). -### Colors and Fonts +#### Above lists and trees {#list-trees-search-size} -For a general search field, use the same colors as for an input field. +When placed above lists or trees, expand the field to the width of the list or tree. -For a search field that is fitted to the toolbar, use a narrower focus border on macOS. The border width is 2px in that case: -![](log-focused.png){width=475} +#### Speed search {#speed-search-size} -Use the same font for the search string as used for showing the results. +For a search field shown on demand, for example, in the Project tool window, expand the field to the width of the tool window. -Use the Context help font color for the attributes' names as they are secondary to their values. +