diff --git a/images/ui/context_help/context_help_alternatives.png b/images/ui/context_help/context_help_alternatives.png new file mode 100644 index 000000000..4d90e997b Binary files /dev/null and b/images/ui/context_help/context_help_alternatives.png differ diff --git a/images/ui/context_help/context_help_alternatives_dark.png b/images/ui/context_help/context_help_alternatives_dark.png new file mode 100644 index 000000000..a4fd1fc26 Binary files /dev/null and b/images/ui/context_help/context_help_alternatives_dark.png differ diff --git a/images/ui/context_help/context_help_explain.png b/images/ui/context_help/context_help_explain.png new file mode 100644 index 000000000..cb24c63cf Binary files /dev/null and b/images/ui/context_help/context_help_explain.png differ diff --git a/images/ui/context_help/context_help_explain_dark.png b/images/ui/context_help/context_help_explain_dark.png new file mode 100644 index 000000000..4b207e638 Binary files /dev/null and b/images/ui/context_help/context_help_explain_dark.png differ diff --git a/images/ui/context_help/context_help_explain_simple_correct.png b/images/ui/context_help/context_help_explain_simple_correct.png new file mode 100644 index 000000000..2d55fe1b1 Binary files /dev/null and b/images/ui/context_help/context_help_explain_simple_correct.png differ diff --git a/images/ui/context_help/context_help_explain_simple_correct_dark.png b/images/ui/context_help/context_help_explain_simple_correct_dark.png new file mode 100644 index 000000000..2870c8ebb Binary files /dev/null and b/images/ui/context_help/context_help_explain_simple_correct_dark.png differ diff --git a/images/ui/context_help/context_help_explain_simple_incorrect.png b/images/ui/context_help/context_help_explain_simple_incorrect.png new file mode 100644 index 000000000..4e8477c30 Binary files /dev/null and b/images/ui/context_help/context_help_explain_simple_incorrect.png differ diff --git a/images/ui/context_help/context_help_explain_simple_incorrect_dark.png b/images/ui/context_help/context_help_explain_simple_incorrect_dark.png new file mode 100644 index 000000000..8e84e95fa Binary files /dev/null and b/images/ui/context_help/context_help_explain_simple_incorrect_dark.png differ diff --git a/images/ui/context_help/context_help_explain_too_many_correct.png b/images/ui/context_help/context_help_explain_too_many_correct.png new file mode 100644 index 000000000..6fc163e97 Binary files /dev/null and b/images/ui/context_help/context_help_explain_too_many_correct.png differ diff --git a/images/ui/context_help/context_help_explain_too_many_correct_dark.png b/images/ui/context_help/context_help_explain_too_many_correct_dark.png new file mode 100644 index 000000000..67cb64d01 Binary files /dev/null and b/images/ui/context_help/context_help_explain_too_many_correct_dark.png differ diff --git a/images/ui/context_help/context_help_explain_too_many_incorrect.png b/images/ui/context_help/context_help_explain_too_many_incorrect.png new file mode 100644 index 000000000..8ae014cf4 Binary files /dev/null and b/images/ui/context_help/context_help_explain_too_many_incorrect.png differ diff --git a/images/ui/context_help/context_help_explain_too_many_incorrect_dark.png b/images/ui/context_help/context_help_explain_too_many_incorrect_dark.png new file mode 100644 index 000000000..3868ebc96 Binary files /dev/null and b/images/ui/context_help/context_help_explain_too_many_incorrect_dark.png differ diff --git a/images/ui/context_help/context_help_explain_ui_correct.png b/images/ui/context_help/context_help_explain_ui_correct.png new file mode 100644 index 000000000..abd2461d4 Binary files /dev/null and b/images/ui/context_help/context_help_explain_ui_correct.png differ diff --git a/images/ui/context_help/context_help_explain_ui_correct_dark.png b/images/ui/context_help/context_help_explain_ui_correct_dark.png new file mode 100644 index 000000000..be4c90c0a Binary files /dev/null and b/images/ui/context_help/context_help_explain_ui_correct_dark.png differ diff --git a/images/ui/context_help/context_help_explain_ui_incorrect.png b/images/ui/context_help/context_help_explain_ui_incorrect.png new file mode 100644 index 000000000..72d7257d9 Binary files /dev/null and b/images/ui/context_help/context_help_explain_ui_incorrect.png differ diff --git a/images/ui/context_help/context_help_explain_ui_incorrect_dark.png b/images/ui/context_help/context_help_explain_ui_incorrect_dark.png new file mode 100644 index 000000000..ffff5f42d Binary files /dev/null and b/images/ui/context_help/context_help_explain_ui_incorrect_dark.png differ diff --git a/images/ui/context_help/context_help_inline_text.png b/images/ui/context_help/context_help_inline_text.png new file mode 100644 index 000000000..fc474753f Binary files /dev/null and b/images/ui/context_help/context_help_inline_text.png differ diff --git a/images/ui/context_help/context_help_inline_text_dark.png b/images/ui/context_help/context_help_inline_text_dark.png new file mode 100644 index 000000000..ae79c84ae Binary files /dev/null and b/images/ui/context_help/context_help_inline_text_dark.png differ diff --git a/images/ui/context_help/context_help_input_format.png b/images/ui/context_help/context_help_input_format.png new file mode 100644 index 000000000..3f5a7b5c9 Binary files /dev/null and b/images/ui/context_help/context_help_input_format.png differ diff --git a/images/ui/context_help/context_help_input_format_dark.png b/images/ui/context_help/context_help_input_format_dark.png new file mode 100644 index 000000000..21e2ccb6b Binary files /dev/null and b/images/ui/context_help/context_help_input_format_dark.png differ diff --git a/images/ui/context_help/context_help_input_warning.png b/images/ui/context_help/context_help_input_warning.png new file mode 100644 index 000000000..d45f43fe5 Binary files /dev/null and b/images/ui/context_help/context_help_input_warning.png differ diff --git a/images/ui/context_help/context_help_input_warning_dark.png b/images/ui/context_help/context_help_input_warning_dark.png new file mode 100644 index 000000000..4efdfc8c4 Binary files /dev/null and b/images/ui/context_help/context_help_input_warning_dark.png differ diff --git a/images/ui/context_help/context_help_limitation.png b/images/ui/context_help/context_help_limitation.png new file mode 100644 index 000000000..ced9e4f45 Binary files /dev/null and b/images/ui/context_help/context_help_limitation.png differ diff --git a/images/ui/context_help/context_help_limitation_dark.png b/images/ui/context_help/context_help_limitation_dark.png new file mode 100644 index 000000000..09db7bb93 Binary files /dev/null and b/images/ui/context_help/context_help_limitation_dark.png differ diff --git a/images/ui/context_help/context_help_navigation.png b/images/ui/context_help/context_help_navigation.png new file mode 100644 index 000000000..cfd611232 Binary files /dev/null and b/images/ui/context_help/context_help_navigation.png differ diff --git a/images/ui/context_help/context_help_navigation_dark.png b/images/ui/context_help/context_help_navigation_dark.png new file mode 100644 index 000000000..5b97e2cb4 Binary files /dev/null and b/images/ui/context_help/context_help_navigation_dark.png differ diff --git a/images/ui/context_help/context_help_terms.png b/images/ui/context_help/context_help_terms.png new file mode 100644 index 000000000..da5ee8d44 Binary files /dev/null and b/images/ui/context_help/context_help_terms.png differ diff --git a/images/ui/context_help/context_help_terms_dark.png b/images/ui/context_help/context_help_terms_dark.png new file mode 100644 index 000000000..f72fb977a Binary files /dev/null and b/images/ui/context_help/context_help_terms_dark.png differ diff --git a/images/ui/context_help/context_help_tooltip.png b/images/ui/context_help/context_help_tooltip.png new file mode 100644 index 000000000..aabba3f24 Binary files /dev/null and b/images/ui/context_help/context_help_tooltip.png differ diff --git a/images/ui/context_help/context_help_tooltip_dark.png b/images/ui/context_help/context_help_tooltip_dark.png new file mode 100644 index 000000000..56e24a13a Binary files /dev/null and b/images/ui/context_help/context_help_tooltip_dark.png differ diff --git a/images/ui/context_help/database tool window.png b/images/ui/context_help/database tool window.png new file mode 100644 index 000000000..98973d297 Binary files /dev/null and b/images/ui/context_help/database tool window.png differ diff --git a/images/ui/context_help/database tool window_dark.png b/images/ui/context_help/database tool window_dark.png new file mode 100644 index 000000000..44d5122f1 Binary files /dev/null and b/images/ui/context_help/database tool window_dark.png differ diff --git a/images/ui/empty_state/empty_state_structure.png b/images/ui/empty_state/empty_state_structure.png new file mode 100644 index 000000000..62b8df8cf Binary files /dev/null and b/images/ui/empty_state/empty_state_structure.png differ diff --git a/images/ui/empty_state/empty_state_structure_dark.png b/images/ui/empty_state/empty_state_structure_dark.png new file mode 100644 index 000000000..096dc62da Binary files /dev/null and b/images/ui/empty_state/empty_state_structure_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_brackets_correct.png b/images/ui/inline_help_text/inline_text_brackets_correct.png new file mode 100644 index 000000000..893fd2f8f Binary files /dev/null and b/images/ui/inline_help_text/inline_text_brackets_correct.png differ diff --git a/images/ui/inline_help_text/inline_text_brackets_correct_dark.png b/images/ui/inline_help_text/inline_text_brackets_correct_dark.png new file mode 100644 index 000000000..2d53102ac Binary files /dev/null and b/images/ui/inline_help_text/inline_text_brackets_correct_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_brackets_incorrect.png b/images/ui/inline_help_text/inline_text_brackets_incorrect.png new file mode 100644 index 000000000..db55834ed Binary files /dev/null and b/images/ui/inline_help_text/inline_text_brackets_incorrect.png differ diff --git a/images/ui/inline_help_text/inline_text_brackets_incorrect_dark.png b/images/ui/inline_help_text/inline_text_brackets_incorrect_dark.png new file mode 100644 index 000000000..1e14d9b7e Binary files /dev/null and b/images/ui/inline_help_text/inline_text_brackets_incorrect_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_external_link.png b/images/ui/inline_help_text/inline_text_external_link.png new file mode 100644 index 000000000..9a274a867 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_external_link.png differ diff --git a/images/ui/inline_help_text/inline_text_external_link_dark.png b/images/ui/inline_help_text/inline_text_external_link_dark.png new file mode 100644 index 000000000..3df0d65ff Binary files /dev/null and b/images/ui/inline_help_text/inline_text_external_link_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_formatting_correct.png b/images/ui/inline_help_text/inline_text_formatting_correct.png new file mode 100644 index 000000000..96c914900 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_formatting_correct.png differ diff --git a/images/ui/inline_help_text/inline_text_formatting_correct_dark.png b/images/ui/inline_help_text/inline_text_formatting_correct_dark.png new file mode 100644 index 000000000..cd83e4957 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_formatting_correct_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_formatting_incorrect.png b/images/ui/inline_help_text/inline_text_formatting_incorrect.png new file mode 100644 index 000000000..441aa47ba Binary files /dev/null and b/images/ui/inline_help_text/inline_text_formatting_incorrect.png differ diff --git a/images/ui/inline_help_text/inline_text_formatting_incorrect_dark.png b/images/ui/inline_help_text/inline_text_formatting_incorrect_dark.png new file mode 100644 index 000000000..5b57d5b16 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_formatting_incorrect_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_group.png b/images/ui/inline_help_text/inline_text_group.png new file mode 100644 index 000000000..34ab71df3 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_group.png differ diff --git a/images/ui/inline_help_text/inline_text_group_dark.png b/images/ui/inline_help_text/inline_text_group_dark.png new file mode 100644 index 000000000..6af12a893 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_group_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_height.png b/images/ui/inline_help_text/inline_text_height.png new file mode 100644 index 000000000..2aadd429e Binary files /dev/null and b/images/ui/inline_help_text/inline_text_height.png differ diff --git a/images/ui/inline_help_text/inline_text_height_dark.png b/images/ui/inline_help_text/inline_text_height_dark.png new file mode 100644 index 000000000..1cdefb2f3 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_height_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_internal_link.png b/images/ui/inline_help_text/inline_text_internal_link.png new file mode 100644 index 000000000..d6119910f Binary files /dev/null and b/images/ui/inline_help_text/inline_text_internal_link.png differ diff --git a/images/ui/inline_help_text/inline_text_internal_link_dark.png b/images/ui/inline_help_text/inline_text_internal_link_dark.png new file mode 100644 index 000000000..572ddc150 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_internal_link_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_legal.png b/images/ui/inline_help_text/inline_text_legal.png new file mode 100644 index 000000000..c6670165a Binary files /dev/null and b/images/ui/inline_help_text/inline_text_legal.png differ diff --git a/images/ui/inline_help_text/inline_text_legal_dark.png b/images/ui/inline_help_text/inline_text_legal_dark.png new file mode 100644 index 000000000..cb079b7a9 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_legal_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_bottom.png b/images/ui/inline_help_text/inline_text_on_the_bottom.png new file mode 100644 index 000000000..c55ce3bb9 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_bottom.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_bottom_dark.png b/images/ui/inline_help_text/inline_text_on_the_bottom_dark.png new file mode 100644 index 000000000..bb47240ad Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_bottom_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_bottom_master_detail.png b/images/ui/inline_help_text/inline_text_on_the_bottom_master_detail.png new file mode 100644 index 000000000..bed721c84 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_bottom_master_detail.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_bottom_master_detail_dark.png b/images/ui/inline_help_text/inline_text_on_the_bottom_master_detail_dark.png new file mode 100644 index 000000000..8914adfb0 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_bottom_master_detail_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_bottom_tree.png b/images/ui/inline_help_text/inline_text_on_the_bottom_tree.png new file mode 100644 index 000000000..f8b6f0bb1 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_bottom_tree.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_bottom_tree_dark.png b/images/ui/inline_help_text/inline_text_on_the_bottom_tree_dark.png new file mode 100644 index 000000000..efdc9fa69 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_bottom_tree_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_button.png b/images/ui/inline_help_text/inline_text_on_the_right_button.png new file mode 100644 index 000000000..20c6822b4 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_button.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_button_dark.png b/images/ui/inline_help_text/inline_text_on_the_right_button_dark.png new file mode 100644 index 000000000..1b59ca896 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_button_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_checkbox.png b/images/ui/inline_help_text/inline_text_on_the_right_checkbox.png new file mode 100644 index 000000000..40d53c3ce Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_checkbox.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_checkbox_dark.png b/images/ui/inline_help_text/inline_text_on_the_right_checkbox_dark.png new file mode 100644 index 000000000..4d9dfda1d Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_checkbox_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_input_field.png b/images/ui/inline_help_text/inline_text_on_the_right_input_field.png new file mode 100644 index 000000000..fed5968bd Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_input_field.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_input_field_dark.png b/images/ui/inline_help_text/inline_text_on_the_right_input_field_dark.png new file mode 100644 index 000000000..a355831d3 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_input_field_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_tree.png b/images/ui/inline_help_text/inline_text_on_the_right_tree.png new file mode 100644 index 000000000..fb124db4f Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_tree.png differ diff --git a/images/ui/inline_help_text/inline_text_on_the_right_tree_dark.png b/images/ui/inline_help_text/inline_text_on_the_right_tree_dark.png new file mode 100644 index 000000000..0bc47d90b Binary files /dev/null and b/images/ui/inline_help_text/inline_text_on_the_right_tree_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_repetition_correct.png b/images/ui/inline_help_text/inline_text_repetition_correct.png new file mode 100644 index 000000000..196b64bfa Binary files /dev/null and b/images/ui/inline_help_text/inline_text_repetition_correct.png differ diff --git a/images/ui/inline_help_text/inline_text_repetition_correct_dark.png b/images/ui/inline_help_text/inline_text_repetition_correct_dark.png new file mode 100644 index 000000000..fcba44165 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_repetition_correct_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_repetition_incorrect.png b/images/ui/inline_help_text/inline_text_repetition_incorrect.png new file mode 100644 index 000000000..2590b7f4e Binary files /dev/null and b/images/ui/inline_help_text/inline_text_repetition_incorrect.png differ diff --git a/images/ui/inline_help_text/inline_text_repetition_incorrect_dark.png b/images/ui/inline_help_text/inline_text_repetition_incorrect_dark.png new file mode 100644 index 000000000..59228b97a Binary files /dev/null and b/images/ui/inline_help_text/inline_text_repetition_incorrect_dark.png differ diff --git a/images/ui/inline_help_text/inline_text_under_table.png b/images/ui/inline_help_text/inline_text_under_table.png new file mode 100644 index 000000000..94c150818 Binary files /dev/null and b/images/ui/inline_help_text/inline_text_under_table.png differ diff --git a/images/ui/inline_help_text/inline_text_under_table_dark.png b/images/ui/inline_help_text/inline_text_under_table_dark.png new file mode 100644 index 000000000..f323ddeff Binary files /dev/null and b/images/ui/inline_help_text/inline_text_under_table_dark.png differ diff --git a/images/ui/inline_help_text/tooltip_list.png b/images/ui/inline_help_text/tooltip_list.png new file mode 100644 index 000000000..07f8b154c Binary files /dev/null and b/images/ui/inline_help_text/tooltip_list.png differ diff --git a/images/ui/inline_help_text/tooltip_list_dark.png b/images/ui/inline_help_text/tooltip_list_dark.png new file mode 100644 index 000000000..ac54d5723 Binary files /dev/null and b/images/ui/inline_help_text/tooltip_list_dark.png differ diff --git a/topics/ui/controls/inline_help_text.md b/topics/ui/controls/inline_help_text.md index c8191a839..b6f740d6f 100644 --- a/topics/ui/controls/inline_help_text.md +++ b/topics/ui/controls/inline_help_text.md @@ -4,27 +4,27 @@ UI guidelines on using inline help texts. -Inline help text provides useful information about a setting. +Inline help texts provide useful information about settings: -![](01_header_pic.png){width=304} +Inline help text -## When to use + +

Follow the rules for context help.

+
-Follow the rules for [context help](context_help.md). + -## How to use + +Show no more than five lines of help text to not clutter the screen. +Text width is limited to 70 characters. -### Text length and formatting +![](inline_text_height.png){width=706} -Show no more than 5 lines of help text not to clutter the screen. Note that the text width is limited to 70 characters. +Show more than five lines only when a text cannot be shortened for legal purposes. -![](02_text_size.png){width=380} +![](inline_text_legal.png){width=706} -Show more than 5 lines only when a text cannot be shortened for legal purposes. - -![](03_text_size_long.png){width=396} - -

Implementation

+ ```kotlin panel { @@ -46,51 +46,100 @@ panel { } } ``` + -Provide a link to the corresponding help article or to a place in the IDE where the related settings can be found. +
+ + +Provide a [link](link.md) to the corresponding help article or to a place in the IDE where the related settings can be found. Place the link at the end of the text where possible so that it does not disrupt reading. -![](04_link_external.png){width=366 style=block} -*External link* + + + + + +
+ Internal link + Internal link + + External link + External link +
+
-![](04_link_internal.png){width=345 style=block} -*Local link* + -Text style formatting: + +Avoid text highlighting. Usually, the help text is short, and no highlighting in bold or italics is needed: + + + + + +
+ Correct + Avoid highlighting: correct + + Incorrect + Avoid highlighting: incorrect +
+
-* Avoid text highlighting. Usually, the help text is short and no bold or italics are needed. +[//]: # (* Use formatting for code, console commands, or parameters. Use HTML tags. Enclosing text in `` tags is not needed.) - ![](inline_text_no_styling.png){width=364} +[//]: # ( ![](inline_text_parameter_styling.png){width=213}) -* Use formatting for code, console commands, or parameters. Use HTML tags. Enclosing text in `` tags is not needed. + +Avoid using brackets in control labels and place this information in the inline text instead: + + + + + +
+ Correct + Avoid brackets: correct + + Incorrect + Avoid brackets: incorrect +
+
+
- ![](inline_text_parameter_styling.png){width=213} + -Avoid using brackets. +- Make help text [short and descriptive](writing_short.md). -![](05_no_brackets.png){width=362} +- Do not repeat the setting name in the help text: -### Writing guidelines + + + + + +
+ Correct + Avoid brackets: correct + + Incorrect + Avoid brackets: incorrect +
+
+
-Make help text [short and descriptive](writing_short.md). + -Do not repeat the setting name in the help text. - -![](06_inline_text_dont_repeat_setting.png){width=481} - -## Placement - -### Labeled input, button, checkbox, or radio button - -Labeled inputs are fields, combo boxes, or text areas. - -Place the help text to the right of a labeled input, checkbox, or radio button if all the following applies: + +Place the help text to the right of labeled inputs (fields, combo boxes, or text areas), checkboxes, buttons, or radio buttons if all the following applies: * The space to the right is empty. * The help text has 1–5 words, not counting articles and prepositions. * The control label has 1–5 words. - -![](07_right_inputs.png){width=433} + + +Input fields with inline texts on the right + ```kotlin panel { @@ -104,8 +153,14 @@ panel { } } ``` + + -![](08_right_checkboxes.png){width=438} + + +Checkboxes with inline texts on the right + + ```kotlin panel { @@ -119,32 +174,43 @@ panel { } } ``` + + -![](09_right_button.png){width=309} + + Button with inline texts on the right + + -Otherwise, place the help text under the UI control. +In other cases, place the help text under the UI controls: -![](10_under_field.png){width=484} +Input filed with inline text on the bottom + + ```kotlin panel { row("Default directory:") { textFieldWithBrowseButton() .comment( - "Preselected in \"Open ...\" and \"New | Project\" dialogs" + "Preselected in Open and New | Project dialogs" ) } } ``` + If there is no space under the UI control, use the [help tooltip](tooltip.md#question-mark-icon-for-help-tooltips) with the question mark icon for labeled inputs, checkboxes, and radio buttons. For buttons, use the help tooltip without the icon. + -### List, tree or table - + + If the help text applies to a whole list, tree, or table, place it below the control. -![](11_under_table.png){width=531} +Inline text under the table + + ```kotlin @@ -163,31 +229,36 @@ panel { }.resizableRow() } ``` + + + +If the help text applies to a single list, tree, or table item, its location will depend on its length. + +Place short texts (1–10 words) to the right of the item: -If it applies to a single list, tree or table item: +Inline text under the table + + -* If the help text has 1–10 words, place it to the right of the item. -* +* Place longer texts (more than 10 words) into the detail part of master-detail layouts: -![](12_tree_inline_help_text.png){width=422} +Inline text on the bottom of the master detail layout -* If the text is longer than 10 words: +* For other cases, use the [help tooltip](tooltip.md#question-mark-icon-for-help-tooltips) with the question mark icon: -

For a list or tree in the master part, place the text into the detail part.

+Inline text on the bottom of the master detail layout -![](13_master-detail_help_text.png){width=673} +
+
+
-If the case with the master-detail layout above does not apply, use the [help tooltip](tooltip.md#question-mark-icon-for-help-tooltips) with the question mark icon. - -![](05_question_icon_tree.png){width=390} - -### Group of controls + If the help text applies to several UI controls, place it at the bottom of the group. -![](14_under_group.png){width=430} +Inline text for a group of controls -

Implementation

+ Use [`Panel.group()`](%gh-ic%/platform/platform-impl/src/com/intellij/ui/dsl/builder/Panel.kt) as the border for panels that need title and possibly the gray line on the right of the title: @@ -220,4 +291,9 @@ panel { } ``` -You can find more examples by invoking the Tools | Internal Actions | UI | Kotlin UI DSL | UI DSL Showcase action (available in [internal mode](enabling_internal.md)) and clicking the View source links on specific pages. +You can find more examples by invoking the **Tools | Internal Actions | UI | Kotlin UI DSL | UI DSL Showcase** action (available in [internal mode](enabling_internal.md) and clicking the **View source** links on specific pages. + + +
+
+ diff --git a/topics/ui/principles/context_help.md b/topics/ui/principles/context_help.md index 113c1a2b3..8fcc4fe5b 100644 --- a/topics/ui/principles/context_help.md +++ b/topics/ui/principles/context_help.md @@ -4,101 +4,148 @@ Choosing a proper component for context help. -Use context help to briefly explain how a functionality works if it is not clear from the UI and the application behavior. Provide a full description of the functionality in [product web help](https://www.jetbrains.com/help/idea/). +Use context help to briefly explain how a functionality works if it is not clear from the UI or the application behavior. A full description of the functionality should be provided in [product web help](https://www.jetbrains.com/help/idea/). -There are three ways to show context help: +Context help can be shown as an [inline help text](inline_help_text.md), in a [help tooltip](tooltip.md), and in an [empty state](empty_state.md). -* in a [help tooltip](tooltip.md) -* as [inline help text](inline_help_text.md) -* in an [empty state](empty_state.md) +## Inline help text +Use an [inline help text](inline_help_text.md) in settings dialogs that are not constrained by space and are not frequently used. Since settings are rarely changed, users may forget their purpose, so displaying the information immediately makes sense. -This article explains when to use the first two. For when to use the empty state, see the [](empty_state.md) topic. +Context help in an inline text -## Inline text or a tooltip +## Tooltip -Use **inline help text** in settings dialogs: +Use a [tooltip](tooltip.md): +- If the space is not enough for showing the inline help text. +- In frequently used dialogs, tool windows, or popups. The more often a person uses an interface, the more likely they are to remember what each option does. +- For icons or other controls that do not have a label. -* Settings are rarely changed. Users may forget what a setting does when they use it the next time, so it makes sense to provide additional information straight away. -* Settings dialogs are usually not constrained in space. In most cases, it is possible to fit in a help text. +Context help in a tooltip -![](09_use_inline_help_text.png){width=600} -Use a **help tooltip** if: +## Empty state -* A dialog is often used. The more often a person uses an interface, the more likely they are to remember what each option does. +Fill in [empty states](empty_state.md) of tool windows, tables, trees, and other containers with: +- a reason why the data is missing +- an action that can fix it +- a link to a corresponding article in the web help. - ![](10_use_help_tooltip.png){width=573 style=block} - *A refactoring dialog is used more often than a settings dialog. A help tooltip is less distracting than an inline help text.* +Empty state of a tool window -* There is no space for an inline text. - ![](11_no_space_in_settings.png){width=734} +## When to use -* The control that needs explanation is an icon or does not have a label. - - ![](03_action_help_tooltip.png){width=305} - -## When to use context help - -Explain complex behavior that a short action or a setting name cannot convey clearly. - -![](04_question_icon_tooltip.png){width=543} - -![](02_text_size.png){width=380} - -Explain IDE-specific entities. - -![](01_IDE_specific.png){width=300} - -Provide input format requirements and examples. - -![](02_formatting_example.png){width=478} - -Suggest alternative ways. - -![](03_alternative_ways.png){width=418} - -Warn about possible problems. - -![](04_possible_problems.png){width=361} - -Explain limitations. - -![](05_limitations.png){width=432} - -Provide quick navigation to related settings. - -![](04_link_internal.png){width=345} - -## When not to use - -Do not use context help to explain how the user interface works. If you need to explain that, consider redesigning the UI. - -Incorrect - -![](06_explain_how_ui_works.png){width=418} - -Do not explain common actions and entities. Show a regular tooltip with an action name and shortcut in this case. - - +Below you will find rules for [tooltips](tooltip.md) and [inline texts](inline_help_text.md). +
- - + + - - + + + + + + + + + + + + + + + + + + + + + +
IncorrectCorrect + Explain a setting + +

Explain complex behavior that a short action or a setting name cannot convey clearly.

+
+ Input format requirements + +

Provide input format requirements and examples.

+
+ Suggest alternative ways + +

Suggest alternative ways.

+
+ Warn about possible issues + +

Warn about possible issues.

+
+ Explain limitations + +

Explain limitations.

+
+ Provide quick navigation to related settings + +

Provide quick navigation to related settings.

+
+ Explain IDE-specific entities + +

Explain IDE-specific entities.

+
+## When not to use + +### Do not explain UI +Do not use context help to explain how the user interface works. If you need to explain that, consider redesigning the UI. + + + + + + +
+ Correct + Don't explain how UI elements should work + + Incorrect + Incorrect UI requires additional explanation +
+ +### Do not explain common actions +Do not explain common actions and entities. Show a regular tooltip with an action name and shortcut in this case. + + + + + +
+ Correct + Don't explain common actions + + Incorrect + Common actions are explained in the tooltip +
+ +### Do not clutter UI with context help Do not explain each option. Too many help icons or too much inline text make a dialog cluttered and harder to navigate visually. If all options need to be explained, consider rewriting the labels to make them clearer. -Incorrect - -![](08_explain_all_options.png){width=317} + + + + + +
+ Correct + Don't explain every option + + Incorrect + Every option has its tooltip +
## How to use -See [Inline help text](inline_help_text.md) and [Tooltip](tooltip.md). +See [Inline help text](inline_help_text.md), [Tooltip](tooltip.md), and [](empty_state.md).