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..c7e5a7a8b54 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..5adbc366daa 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..6a4ac816aef 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..5d9f9c2e72f 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..db521c6a4a6 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..fb1aba0f929 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..4431eb1587e 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..eaf4480c307 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..70638cecb3d 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..dfd5308eab3 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..c612b91b73a 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..bbfc426abec 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..879477a9c8f 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..ebe13d53b0e 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..26ea0cf64bd 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..90c241b9d72 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..e500299ccf4 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..662b9530d30 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..b0174b03fdd 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..db8ede0eadc 100644 --- a/topics/ui/controls/search_field.md +++ b/topics/ui/controls/search_field.md @@ -12,180 +12,94 @@ A search field is an input field that helps users locate objects, actions or text in an application. -![](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 the 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. +* 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 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: + + + + + +
CorrectIncorrect
-![](structural-replace.png){width=865} +### Hints and scope 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.png){width=581} -### 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 labels or 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 and to be able to use them in already packed UI such as the Speed Search popup in trees or lists. -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 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} +![](search_field.png){width=706} -#### Multiline Search Strings +### Multiline Search Strings -Searching for multiline matches can be achieved with a separate New Line action button: +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. -![](new-line.png){width=342} +![](search_field_multiline.png){width=706} -Put the New line action button on the left of the option buttons: +The default shortcut for the New Line action: ⇧⌘⏎ for macOS and Ctrl + Shift + Enter for Windows/Linux. -![](newline-options.png){width=300} +### Filters -Move the New Line action button below the option buttons when the search field becomes a multi-line one: +Provide attribute filters for complex searches. Don't use filter attributes in the search query. -![](multiline.png){width=300} - -Add a vertical separator when the scrollbar appears: - -![](multiline-scrollbar.png){width=300} - -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} - -And without an arrow when it's not: - -![](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: +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-history-empty.png){width=256} +![](search_field_history.png){width=706} The keyboard shortcut for the History action is Alt + Down on all systems. @@ -199,97 +113,30 @@ 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: +For example, the search field in Settings dialog is aligned with the filtered settings tree. -Correct +![](search_field_placement.png){width=706} -![](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 - -![](keymap-search-incorrect.png){width=491} - -Correct - -![](keymap-search-correct.png){width=491} +#### Inline search Fit the search field to the popup windows and to a toolbar if it has top borders. This way the overall form looks less complex. -Incorrect - -![](log-incorrect.png){width=475} - -Correct - -![](log-correct.png){width=475} + + + + + +
CorrectIncorrect
-| Incorrect | Correct | -|-----------------------------------------------------|-----------------------------------------------------| -| ![](popup-incorrect.png){width="235"} | ![](popup-correct.png){width="235"} | +#### Speed Search 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: +For example, space in the Project view is limited and too loaded to always show the 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} - -## Style - -### Colors and Fonts - -For a general search field, use the same colors as for an input field. - -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} - -Use the same font for the search string as used for showing the results. - -Use the Context help font color for the attributes' names as they are secondary to their values. - +* For a search field shown without a toolbar, for example, Search in trees, the search width could be adjusted on typing to accommodate input. +* For a search field that is not fitted to a toolbar, set the minimum width to 200 +* For a search which is fitted to the toolbar, expand the field to the toolbar width.