diff --git a/images/ui/inspections/link.png b/images/ui/inspections/inpsections_link.png similarity index 100% rename from images/ui/inspections/link.png rename to images/ui/inspections/inpsections_link.png diff --git a/images/ui/link/link.png b/images/ui/link/link.png new file mode 100644 index 000000000..49773c732 Binary files /dev/null and b/images/ui/link/link.png differ diff --git a/images/ui/link/link_dark.png b/images/ui/link/link_dark.png new file mode 100644 index 000000000..eaaa9bd42 Binary files /dev/null and b/images/ui/link/link_dark.png differ diff --git a/images/ui/link/link_dropdown.png b/images/ui/link/link_dropdown.png new file mode 100644 index 000000000..d117b7afe Binary files /dev/null and b/images/ui/link/link_dropdown.png differ diff --git a/images/ui/link/link_dropdown_dark.png b/images/ui/link/link_dropdown_dark.png new file mode 100644 index 000000000..2ab30d959 Binary files /dev/null and b/images/ui/link/link_dropdown_dark.png differ diff --git a/images/ui/link/link_how_to_1_correct-1.png b/images/ui/link/link_how_to_1_correct-1.png new file mode 100644 index 000000000..a1ef24e95 Binary files /dev/null and b/images/ui/link/link_how_to_1_correct-1.png differ diff --git a/images/ui/link/link_how_to_1_correct.png b/images/ui/link/link_how_to_1_correct.png new file mode 100644 index 000000000..2fb928842 Binary files /dev/null and b/images/ui/link/link_how_to_1_correct.png differ diff --git a/images/ui/link/link_how_to_1_correct_dark.png b/images/ui/link/link_how_to_1_correct_dark.png new file mode 100644 index 000000000..a1ef24e95 Binary files /dev/null and b/images/ui/link/link_how_to_1_correct_dark.png differ diff --git a/images/ui/link/link_how_to_1_incorrect-1.png b/images/ui/link/link_how_to_1_incorrect-1.png new file mode 100644 index 000000000..f253584dd Binary files /dev/null and b/images/ui/link/link_how_to_1_incorrect-1.png differ diff --git a/images/ui/link/link_how_to_1_incorrect.png b/images/ui/link/link_how_to_1_incorrect.png new file mode 100644 index 000000000..e10b045c1 Binary files /dev/null and b/images/ui/link/link_how_to_1_incorrect.png differ diff --git a/images/ui/link/link_how_to_1_incorrect_dark.png b/images/ui/link/link_how_to_1_incorrect_dark.png new file mode 100644 index 000000000..f253584dd Binary files /dev/null and b/images/ui/link/link_how_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_2_correct.png b/images/ui/link/link_how_to_2_correct.png new file mode 100644 index 000000000..677742c87 Binary files /dev/null and b/images/ui/link/link_how_to_2_correct.png differ diff --git a/images/ui/link/link_how_to_2_correct_dark.png b/images/ui/link/link_how_to_2_correct_dark.png new file mode 100644 index 000000000..03b155f1d Binary files /dev/null and b/images/ui/link/link_how_to_2_correct_dark.png differ diff --git a/images/ui/link/link_how_to_2_incorrect.png b/images/ui/link/link_how_to_2_incorrect.png new file mode 100644 index 000000000..3f654942e Binary files /dev/null and b/images/ui/link/link_how_to_2_incorrect.png differ diff --git a/images/ui/link/link_how_to_2_incorrect_dark.png b/images/ui/link/link_how_to_2_incorrect_dark.png new file mode 100644 index 000000000..04216a198 Binary files /dev/null and b/images/ui/link/link_how_to_2_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_3_correct.png b/images/ui/link/link_how_to_3_correct.png new file mode 100644 index 000000000..625034696 Binary files /dev/null and b/images/ui/link/link_how_to_3_correct.png differ diff --git a/images/ui/link/link_how_to_3_correct_dark.png b/images/ui/link/link_how_to_3_correct_dark.png new file mode 100644 index 000000000..02c8c4136 Binary files /dev/null and b/images/ui/link/link_how_to_3_correct_dark.png differ diff --git a/images/ui/link/link_how_to_3_incorrect.png b/images/ui/link/link_how_to_3_incorrect.png new file mode 100644 index 000000000..4c8135235 Binary files /dev/null and b/images/ui/link/link_how_to_3_incorrect.png differ diff --git a/images/ui/link/link_how_to_3_incorrect_dark.png b/images/ui/link/link_how_to_3_incorrect_dark.png new file mode 100644 index 000000000..7a484f120 Binary files /dev/null and b/images/ui/link/link_how_to_3_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_4_correct.png b/images/ui/link/link_how_to_4_correct.png new file mode 100644 index 000000000..ce0b1bdf1 Binary files /dev/null and b/images/ui/link/link_how_to_4_correct.png differ diff --git a/images/ui/link/link_how_to_4_correct_dark.png b/images/ui/link/link_how_to_4_correct_dark.png new file mode 100644 index 000000000..b8df3e3de Binary files /dev/null and b/images/ui/link/link_how_to_4_correct_dark.png differ diff --git a/images/ui/link/link_how_to_4_incorrect.png b/images/ui/link/link_how_to_4_incorrect.png new file mode 100644 index 000000000..2d21a77bf Binary files /dev/null and b/images/ui/link/link_how_to_4_incorrect.png differ diff --git a/images/ui/link/link_how_to_4_incorrect_dark.png b/images/ui/link/link_how_to_4_incorrect_dark.png new file mode 100644 index 000000000..1c73b6ad2 Binary files /dev/null and b/images/ui/link/link_how_to_4_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_5_correct.png b/images/ui/link/link_how_to_5_correct.png new file mode 100644 index 000000000..689c3902a Binary files /dev/null and b/images/ui/link/link_how_to_5_correct.png differ diff --git a/images/ui/link/link_how_to_5_correct_dark.png b/images/ui/link/link_how_to_5_correct_dark.png new file mode 100644 index 000000000..e7609225d Binary files /dev/null and b/images/ui/link/link_how_to_5_correct_dark.png differ diff --git a/images/ui/link/link_how_to_5_incorrect.png b/images/ui/link/link_how_to_5_incorrect.png new file mode 100644 index 000000000..442455e19 Binary files /dev/null and b/images/ui/link/link_how_to_5_incorrect.png differ diff --git a/images/ui/link/link_how_to_5_incorrect_dark.png b/images/ui/link/link_how_to_5_incorrect_dark.png new file mode 100644 index 000000000..67f6a99c4 Binary files /dev/null and b/images/ui/link/link_how_to_5_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_6-1.png b/images/ui/link/link_how_to_6-1.png new file mode 100644 index 000000000..5bc3c1eb2 Binary files /dev/null and b/images/ui/link/link_how_to_6-1.png differ diff --git a/images/ui/link/link_how_to_6.png b/images/ui/link/link_how_to_6.png new file mode 100644 index 000000000..c49118588 Binary files /dev/null and b/images/ui/link/link_how_to_6.png differ diff --git a/images/ui/link/link_how_to_6_dark.png b/images/ui/link/link_how_to_6_dark.png new file mode 100644 index 000000000..7fc5cad4e Binary files /dev/null and b/images/ui/link/link_how_to_6_dark.png differ diff --git a/images/ui/link/link_how_to_7_correct.png b/images/ui/link/link_how_to_7_correct.png new file mode 100644 index 000000000..23dff211d Binary files /dev/null and b/images/ui/link/link_how_to_7_correct.png differ diff --git a/images/ui/link/link_how_to_7_correct_dark.png b/images/ui/link/link_how_to_7_correct_dark.png new file mode 100644 index 000000000..1ef1dfa2c Binary files /dev/null and b/images/ui/link/link_how_to_7_correct_dark.png differ diff --git a/images/ui/link/link_how_to_7_incorrect.png b/images/ui/link/link_how_to_7_incorrect.png new file mode 100644 index 000000000..22518bb5d Binary files /dev/null and b/images/ui/link/link_how_to_7_incorrect.png differ diff --git a/images/ui/link/link_how_to_7_incorrect_dark.png b/images/ui/link/link_how_to_7_incorrect_dark.png new file mode 100644 index 000000000..aa7b2b068 Binary files /dev/null and b/images/ui/link/link_how_to_7_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_8.png b/images/ui/link/link_how_to_8.png new file mode 100644 index 000000000..39afbf66a Binary files /dev/null and b/images/ui/link/link_how_to_8.png differ diff --git a/images/ui/link/link_how_to_8_dark.png b/images/ui/link/link_how_to_8_dark.png new file mode 100644 index 000000000..e198178b1 Binary files /dev/null and b/images/ui/link/link_how_to_8_dark.png differ diff --git a/images/ui/link/link_how_to_9.png b/images/ui/link/link_how_to_9.png new file mode 100644 index 000000000..8685d5c31 Binary files /dev/null and b/images/ui/link/link_how_to_9.png differ diff --git a/images/ui/link/link_how_to_9_correct.png b/images/ui/link/link_how_to_9_correct.png new file mode 100644 index 000000000..9ccf48423 Binary files /dev/null and b/images/ui/link/link_how_to_9_correct.png differ diff --git a/images/ui/link/link_how_to_9_correct_dark.png b/images/ui/link/link_how_to_9_correct_dark.png new file mode 100644 index 000000000..f7a19a1b8 Binary files /dev/null and b/images/ui/link/link_how_to_9_correct_dark.png differ diff --git a/images/ui/link/link_how_to_9_dark.png b/images/ui/link/link_how_to_9_dark.png new file mode 100644 index 000000000..a56bdcc41 Binary files /dev/null and b/images/ui/link/link_how_to_9_dark.png differ diff --git a/images/ui/link/link_how_to_9_incorrect.png b/images/ui/link/link_how_to_9_incorrect.png new file mode 100644 index 000000000..e2de93d9f Binary files /dev/null and b/images/ui/link/link_how_to_9_incorrect.png differ diff --git a/images/ui/link/link_how_to_9_incorrect_dark.png b/images/ui/link/link_how_to_9_incorrect_dark.png new file mode 100644 index 000000000..78bdd7125 Binary files /dev/null and b/images/ui/link/link_how_to_9_incorrect_dark.png differ diff --git a/images/ui/link/link_when_not_to_1_correct-1.png b/images/ui/link/link_when_not_to_1_correct-1.png new file mode 100644 index 000000000..7708b91a6 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_correct-1.png differ diff --git a/images/ui/link/link_when_not_to_1_correct.png b/images/ui/link/link_when_not_to_1_correct.png new file mode 100644 index 000000000..4261f35b8 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_correct.png differ diff --git a/images/ui/link/link_when_not_to_1_correct_dark.png b/images/ui/link/link_when_not_to_1_correct_dark.png new file mode 100644 index 000000000..7708b91a6 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_correct_dark.png differ diff --git a/images/ui/link/link_when_not_to_1_incorrect-1.png b/images/ui/link/link_when_not_to_1_incorrect-1.png new file mode 100644 index 000000000..fb72e0ac9 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_incorrect-1.png differ diff --git a/images/ui/link/link_when_not_to_1_incorrect.png b/images/ui/link/link_when_not_to_1_incorrect.png new file mode 100644 index 000000000..8bafc14dd Binary files /dev/null and b/images/ui/link/link_when_not_to_1_incorrect.png differ diff --git a/images/ui/link/link_when_not_to_1_incorrect_dark.png b/images/ui/link/link_when_not_to_1_incorrect_dark.png new file mode 100644 index 000000000..fb72e0ac9 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_when_not_to_2_correct-1.png b/images/ui/link/link_when_not_to_2_correct-1.png new file mode 100644 index 000000000..1e2801a08 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_correct-1.png differ diff --git a/images/ui/link/link_when_not_to_2_correct.png b/images/ui/link/link_when_not_to_2_correct.png new file mode 100644 index 000000000..39ea78e51 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_correct.png differ diff --git a/images/ui/link/link_when_not_to_2_correct_dark.png b/images/ui/link/link_when_not_to_2_correct_dark.png new file mode 100644 index 000000000..e3c79242b Binary files /dev/null and b/images/ui/link/link_when_not_to_2_correct_dark.png differ diff --git a/images/ui/link/link_when_not_to_2_incorrect-1.png b/images/ui/link/link_when_not_to_2_incorrect-1.png new file mode 100644 index 000000000..5f74b9502 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_incorrect-1.png differ diff --git a/images/ui/link/link_when_not_to_2_incorrect.png b/images/ui/link/link_when_not_to_2_incorrect.png new file mode 100644 index 000000000..c0aaa8c90 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_incorrect.png differ diff --git a/images/ui/link/link_when_not_to_2_incorrect_dark.png b/images/ui/link/link_when_not_to_2_incorrect_dark.png new file mode 100644 index 000000000..e82cfadf4 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_incorrect_dark.png differ diff --git a/images/ui/link/link_when_to_1.png b/images/ui/link/link_when_to_1.png new file mode 100644 index 000000000..2b3b9a144 Binary files /dev/null and b/images/ui/link/link_when_to_1.png differ diff --git a/images/ui/link/link_when_to_1_correct.png b/images/ui/link/link_when_to_1_correct.png new file mode 100644 index 000000000..87475bc66 Binary files /dev/null and b/images/ui/link/link_when_to_1_correct.png differ diff --git a/images/ui/link/link_when_to_1_correct_dark.png b/images/ui/link/link_when_to_1_correct_dark.png new file mode 100644 index 000000000..9695f67e4 Binary files /dev/null and b/images/ui/link/link_when_to_1_correct_dark.png differ diff --git a/images/ui/link/link_when_to_1_dark.png b/images/ui/link/link_when_to_1_dark.png new file mode 100644 index 000000000..f13ffa917 Binary files /dev/null and b/images/ui/link/link_when_to_1_dark.png differ diff --git a/images/ui/link/link_when_to_1_incorrect.png b/images/ui/link/link_when_to_1_incorrect.png new file mode 100644 index 000000000..9d58f6101 Binary files /dev/null and b/images/ui/link/link_when_to_1_incorrect.png differ diff --git a/images/ui/link/link_when_to_1_incorrect_dark.png b/images/ui/link/link_when_to_1_incorrect_dark.png new file mode 100644 index 000000000..0e6f89ff0 Binary files /dev/null and b/images/ui/link/link_when_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_when_to_2.png b/images/ui/link/link_when_to_2.png new file mode 100644 index 000000000..de42aba20 Binary files /dev/null and b/images/ui/link/link_when_to_2.png differ diff --git a/images/ui/link/link_when_to_2_dark.png b/images/ui/link/link_when_to_2_dark.png new file mode 100644 index 000000000..a8ad91d44 Binary files /dev/null and b/images/ui/link/link_when_to_2_dark.png differ diff --git a/images/ui/link/link_when_to_3.png b/images/ui/link/link_when_to_3.png new file mode 100644 index 000000000..47e04e7de Binary files /dev/null and b/images/ui/link/link_when_to_3.png differ diff --git a/images/ui/link/link_when_to_3_dark.png b/images/ui/link/link_when_to_3_dark.png new file mode 100644 index 000000000..2c435c584 Binary files /dev/null and b/images/ui/link/link_when_to_3_dark.png differ diff --git a/images/ui/link/link_when_to_4.png b/images/ui/link/link_when_to_4.png new file mode 100644 index 000000000..a26ed08b0 Binary files /dev/null and b/images/ui/link/link_when_to_4.png differ diff --git a/images/ui/link/link_when_to_4_dark.png b/images/ui/link/link_when_to_4_dark.png new file mode 100644 index 000000000..dcb5d9f7f Binary files /dev/null and b/images/ui/link/link_when_to_4_dark.png differ diff --git a/images/ui/link/link_when_to_5.png b/images/ui/link/link_when_to_5.png new file mode 100644 index 000000000..cbaa6d2c1 Binary files /dev/null and b/images/ui/link/link_when_to_5.png differ diff --git a/images/ui/link/link_when_to_5_dark.png b/images/ui/link/link_when_to_5_dark.png new file mode 100644 index 000000000..47bd8827d Binary files /dev/null and b/images/ui/link/link_when_to_5_dark.png differ diff --git a/images/ui/link/link_when_to_6.png b/images/ui/link/link_when_to_6.png new file mode 100644 index 000000000..ba143f1f5 Binary files /dev/null and b/images/ui/link/link_when_to_6.png differ diff --git a/images/ui/link/link_when_to_6_1.png b/images/ui/link/link_when_to_6_1.png new file mode 100644 index 000000000..1981f6175 Binary files /dev/null and b/images/ui/link/link_when_to_6_1.png differ diff --git a/images/ui/link/link_when_to_6_1_dark.png b/images/ui/link/link_when_to_6_1_dark.png new file mode 100644 index 000000000..8b3c85513 Binary files /dev/null and b/images/ui/link/link_when_to_6_1_dark.png differ diff --git a/images/ui/link/link_when_to_6_1dark.png b/images/ui/link/link_when_to_6_1dark.png new file mode 100644 index 000000000..1a492063a Binary files /dev/null and b/images/ui/link/link_when_to_6_1dark.png differ diff --git a/images/ui/link/link_when_to_6_2.png b/images/ui/link/link_when_to_6_2.png new file mode 100644 index 000000000..3df5a81cb Binary files /dev/null and b/images/ui/link/link_when_to_6_2.png differ diff --git a/images/ui/link/link_when_to_6_2_dark.png b/images/ui/link/link_when_to_6_2_dark.png new file mode 100644 index 000000000..a660e6ca1 Binary files /dev/null and b/images/ui/link/link_when_to_6_2_dark.png differ diff --git a/images/ui/link/link_when_to_6_3.png b/images/ui/link/link_when_to_6_3.png new file mode 100644 index 000000000..8d25c598c Binary files /dev/null and b/images/ui/link/link_when_to_6_3.png differ diff --git a/images/ui/link/link_when_to_6_3_dark.png b/images/ui/link/link_when_to_6_3_dark.png new file mode 100644 index 000000000..6c062413f Binary files /dev/null and b/images/ui/link/link_when_to_6_3_dark.png differ diff --git a/images/ui/link/link_when_to_6_correct.png b/images/ui/link/link_when_to_6_correct.png new file mode 100644 index 000000000..cc710680d Binary files /dev/null and b/images/ui/link/link_when_to_6_correct.png differ diff --git a/images/ui/link/link_when_to_6_correct_dark.png b/images/ui/link/link_when_to_6_correct_dark.png new file mode 100644 index 000000000..ddc7a64ac Binary files /dev/null and b/images/ui/link/link_when_to_6_correct_dark.png differ diff --git a/images/ui/link/link_when_to_6_dark.png b/images/ui/link/link_when_to_6_dark.png new file mode 100644 index 000000000..9a66e9a4b Binary files /dev/null and b/images/ui/link/link_when_to_6_dark.png differ diff --git a/images/ui/link/link_when_to_6_incorrect.png b/images/ui/link/link_when_to_6_incorrect.png new file mode 100644 index 000000000..354f9aa2b Binary files /dev/null and b/images/ui/link/link_when_to_6_incorrect.png differ diff --git a/images/ui/link/link_when_to_6_incorrect_dark.png b/images/ui/link/link_when_to_6_incorrect_dark.png new file mode 100644 index 000000000..c4446ce8d Binary files /dev/null and b/images/ui/link/link_when_to_6_incorrect_dark.png differ diff --git a/topics/ui/Principles.md b/topics/ui/Principles.md index ae01c36c4..6aead928c 100644 --- a/topics/ui/Principles.md +++ b/topics/ui/Principles.md @@ -8,3 +8,4 @@ - [](platform_theme_colors.md) - [](typography.md) - [](validation_errors.md) +- [](Window-sizes.md) diff --git a/topics/ui/controls/link.md b/topics/ui/controls/link.md index 63639098d..d4bda47cd 100644 --- a/topics/ui/controls/link.md +++ b/topics/ui/controls/link.md @@ -10,127 +10,297 @@ -![](01_link_example.png){width=120} +![A preview of link types: default, drop-down, and external.](link.png){width=706} ## When to use -Use a regular link for navigation between pages of the same window. +### Navigation inside a window -![](02_deployment_server.png){width=494} +Use a regular link for navigation between pages of the same window. In the example bellow Manage scopes… opens another page in Settings for editing the values. -*This option is in the Settings dialog. "Configure servers" opens another page of the same dialog.* + + + + + +
+ Correct + A vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed by a 'Manage scopes…' link below. + + Incorrect + A vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed 'Manage scopes' button below. +
-![](03_manage_scopes.png){width=411} - -*Do not use a button to navigate to another page of the same window.* +### Web resources Use an external link for navigation to web resources. See below for the [external link icon](#external-link-icon). -![](04_external_link.png){width=248} +![Text 'Learn more about what is logged' with 'what is logged' as an external link with an arrow icon.](link_when_to_2.png){width=706} + +### Secondary actions in packed UI areas Use a regular or [drop-down link](#drop-down-link) for secondary actions in packed or small UI areas. -![](05_action_regular_link.png){width=367} -*The "Reset" action is a link for two reasons: (1) The action appears only when the default value in the field is changed and reverting to a default is considered a rare scenario. (2) A lightweight link fits better than a button in this busy layout.* +![Build and run section with 'Modify options' drop-down link. Contains a Java SDK selector, a command line arguments selector, and a program arguments input.](link_when_to_4.png){width=706} -![](06_action_dropdown.png){width=550} +### Secondary actions in a tree or table -*The "Modify options" drop-down link fits into the top right corner of a busy layout.* +#### Some items can be changed -Do not use links for primary actions or when a UI is not constrained. -Use a [button](button.topic) or a [drop down list](drop_down.md) instead. +Use a link as a secondary action for some items of a tree or table. + +![A tree with a checkbox and four dependent controls, and links 'Set…' in the first and the fourth control](link_when_to_5.png){width=706} + +#### All items can be changed + + + + + + + + + + + + + + +
+ Table with a toolbar with icon buttons + +

Add an icon button to a toolbar.

+
+ Table with a toolbar with icon buttons + +

For a list of choices, add a separate table column of drop-down cells (see Table).

+
+ Links in the Push Commits window 'origin : master' + +

If a link in every tree or table line has meaningful formatting, leave it.

+

For example, links in the Push Commits window help understand the relation between them: [remote repository] : [branch]; moving these links elsewhere would break this meaning.

+
+ + + + + + +
+ Correct + Table with a toolbar with icon-buttons + + Incorrect + Table with a link 'Edit…' in every row +
+ +## When not to use + +### Primary actions + +Use a [button](button.topic) or a [drop down list](drop_down.md) for primary actions. These controls can be selected from the keyboard and are bigger and easier to click. + + + + + + +
+ Correct + The Commit Message input with primary and secondary actions as buttons. + + Incorrect + The Commit Message input with primary and secondary actions as links. +
+ +### Simple UI + +Use a [button](button.topic) or a [drop down list](drop_down.md) when a UI is not constrained. These controls can be selected from the keyboard and are bigger and easier to click. -![](07_android_sdk.png){width=451} + + + + + + + +
+ Correct + A stack of controls with a button 'Edit' following one of the controls. +
+ Incorrect + A stack of controls with a link 'Edit' following one of the controls. +
## How to use ### Writing guidelines -Use sentence capitalization. +#### Use sentence capitalization -Add an ellipsis to a button-link if it opens another UI area where input is possible. See examples for the [Button](button.topic). +Follow the [sentence capilaziation](capitalization.md#sentence) guideline. -Do not use words like "navigate" or "click here". A link already implies navigation or clicking. + + + + + +
+ Correct + A 'Modify options' drod-down with the sentence style capitalization. + + Incorrect + A 'Modify Options' drod-down with the title style capitalization. +
-![](08_writing_1.png){width=398} +#### Ellipsis -When possible, replace "Learn more" and other generic phrases with more informative ones. +Add an ellipsis to a link if it opens another UI area where input is possible. See examples for the [Button](button.topic). -![](08_writing_2.png){width=316} + + + + + +
+ Correct + A vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed by a 'Manage scopes…' link below. The link has an ellipsis in the end. + + Incorrect + Vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed by a 'Manage scopes' link below. The link doesn't have an ellipsis in the end. +
+ +#### Wording + +Do not use words like navigate or click here. A link already implies navigation or clicking. + + + + + + +
+ Correct + Link 'Proxy settings…'. + + Incorrect + Link 'Navigate to general proxy settings'. +
+ + + + + + +
+ Correct + Link 'Download drivers…'. + + Incorrect + Text reading 'Click here to download drivers' where 'here' is a link. +
+ +#### Make it informative + +When possible, replace Learn more and other generic phrases with more informative ones. + + + + + + +
+ Correct + Link 'How to use Closure Linter'. + + Incorrect + Link 'Learn more'. +
### Link as a part of text -A link can be a part of a checkbox or radio button label or of any stand-alone text, like the text in an [empty state](empty_state.md) or in [context help](context_help.md). +A link can be a part of a checkbox or radio button label or of any stand-alone text, like the text in an [empty state](empty_state.md) or in [context help](context_help.md): -![](09_part_of_text_1.png){width=403} +![Checkbox 'Use console font instead of the default font' where 'deafult font' is a link.](link_how_to_6.png){width=706} -Make a link the minimum phrase that is enough to understand what will happen without reading the whole text. +Make a link the minimum phrase that is enough to understand what will happen without reading the whole text: -![](09_part_of_text_2.png){width=489} - -### Link in a tree or table - -Use a link as a secondary action for some items of a tree or table. - -![](10_tree.png){width=387} - -If an action is needed for all items of a tree or table: - -* Add an [icon button](icon_button.md) to a toolbar. -* For a list of choices, add a separate table column of drop-down cells (see [Table](table.md#editing-values)). -* If a link in every tree or table line has meaningful formatting, leave it: - ![](11_table.png){width=342} - *Links in the "Push Commits" window have the format that helps understand the relation between them: "[remote repository] : [branch]". Moving these links elsewhere would break this meaning.* + + + + + +
+ Correct + Text reading 'Learn more about what is logged' where 'what is logged' is a link. + + Incorrect + Link 'Learn more about what is logged'. +
### External link icon -Always add the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context. +Add the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context. -![](04_external_link.png){width=248} - - +![Text 'Learn more about what is logged' where 'what is logged' is an external link with the external link icon.](link_how_to_8.png){width=706} -```kotlin -val externalLink = ActionLink("External link") { - BrowserUtil.browse("https://www.jetbrains.com") -}.apply { - setExternalLinkIcon() -} -``` + - - + + -```java -ActionLink externalLink = new ActionLink( - "External link", - event -> BrowserUtil.browse("https://www.jetbrains.com") -); -externalLink.setExternalLinkIcon(); -``` + ```kotlin + val externalLink = ActionLink("External link") { + BrowserUtil.browse("https://www.jetbrains.com") + }.apply { + setExternalLinkIcon() + } + ``` + + - - + ```java + ActionLink externalLink = new ActionLink( + "External link", + event -> BrowserUtil.browse("https://www.jetbrains.com") + ); + externalLink.setExternalLinkIcon(); + ``` + + -An exception is a help topic link in [empty states](empty_state.md). -The help icon already hints that this is an external help resource, so the arrow icon is unnecessary. + -![](12_external_link_no_icon.png){width=164} +### Help icon + +Use the help icon in links in [empty states](empty_state.md) to indicate that this is an external help resource. The arrow icon in this case is unnecessary. + + + + + + +
+ Correct + Empty state in the Database tool window with an explanation text and a help source link 'Defining a database' with the help icon. + + Incorrect + Empty state in the Database tool window with an explanation text and an external link 'Defining a database' with the external link icon. +
### Drop-down link -Drop-down links show a context menu or a popup. -Use [`DropDownLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/DropDownLink.kt) to implement a drop-down link. +Drop-down links show a context menu or a popup. To implement, use [`DropDownLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/DropDownLink.kt). -![](13_drop_down_links.png){width=445} +![Control 'Changes from 2 commits' where '2 commits' is a drop-down link opening a list of all commits](link_dropdown.png){width=706} ## Placement -Lay out button-links as buttons and dropdown-links as combo boxes. See [Layout](layout.md). +* For default links follow [layout of buttons and links](layout.md#buttons-and-links). +* For drop-down links follow [layout of labeled controls](layout.md#labeled-input-controls). ## Built-in behavior A focused link is activated from the keyboard with Space. - diff --git a/topics/ui/text/inspections.md b/topics/ui/text/inspections.md index 7a557ca61..eed95c517 100644 --- a/topics/ui/text/inspections.md +++ b/topics/ui/text/inspections.md @@ -66,7 +66,7 @@ Provide details, such as: * A link to the language or framework docs explaining the correct usage of the syntax or feature, if applicable. -![](link.png){width=520} +![](inpsections_link.png){width=520} * Two code samples: the code with a problem and the code that bypasses this problem. By comparing the good code and the bad code, users can work out what causes the problem and how to avoid it. For example, for Java | Probable bugs | 'equals()' called on array adding such an example helps to understand the inspection quicker: