diff --git a/images/ui/link/link.png b/images/ui/link/link.png index e8622bac3..49773c732 100644 Binary files a/images/ui/link/link.png and b/images/ui/link/link.png differ diff --git a/images/ui/link/link_dark.png b/images/ui/link/link_dark.png index 872ebe22b..eaaa9bd42 100644 Binary files a/images/ui/link/link_dark.png 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 index 76b60b23a..d117b7afe 100644 Binary files a/images/ui/link/link_dropdown.png 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 index 7a18a36b1..2ab30d959 100644 Binary files a/images/ui/link/link_dropdown_dark.png and b/images/ui/link/link_dropdown_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 index 53ea10ca8..677742c87 100644 Binary files a/images/ui/link/link_how_to_2_correct.png 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 index 0ed722c92..03b155f1d 100644 Binary files a/images/ui/link/link_how_to_2_correct_dark.png 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 index 77e038c59..3f654942e 100644 Binary files a/images/ui/link/link_how_to_2_incorrect.png 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 index 944686b30..04216a198 100644 Binary files a/images/ui/link/link_how_to_2_incorrect_dark.png and b/images/ui/link/link_how_to_2_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_6.png b/images/ui/link/link_how_to_6.png index e60b49185..c49118588 100644 Binary files a/images/ui/link/link_how_to_6.png 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 index 5bc3c1eb2..7fc5cad4e 100644 Binary files a/images/ui/link/link_how_to_6_dark.png and b/images/ui/link/link_how_to_6_dark.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 index 9f12a06e5..39ea78e51 100644 Binary files a/images/ui/link/link_when_not_to_2_correct.png 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 index 1e2801a08..e3c79242b 100644 Binary files a/images/ui/link/link_when_not_to_2_correct_dark.png 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.png b/images/ui/link/link_when_not_to_2_incorrect.png index e487bea75..c0aaa8c90 100644 Binary files a/images/ui/link/link_when_not_to_2_incorrect.png 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 index 92c9590e9..e82cfadf4 100644 Binary files a/images/ui/link/link_when_not_to_2_incorrect_dark.png and b/images/ui/link/link_when_not_to_2_incorrect_dark.png differ diff --git a/images/ui/link/link_when_to_1_correct.png b/images/ui/link/link_when_to_1_correct.png index 53ea10ca8..87475bc66 100644 Binary files a/images/ui/link/link_when_to_1_correct.png 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 index 0ed722c92..9695f67e4 100644 Binary files a/images/ui/link/link_when_to_1_correct_dark.png and b/images/ui/link/link_when_to_1_correct_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 index 707155ead..9d58f6101 100644 Binary files a/images/ui/link/link_when_to_1_incorrect.png 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 index 2a63f76d9..0e6f89ff0 100644 Binary files a/images/ui/link/link_when_to_1_incorrect_dark.png and b/images/ui/link/link_when_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_when_to_4.png b/images/ui/link/link_when_to_4.png index 498b8d8d0..a26ed08b0 100644 Binary files a/images/ui/link/link_when_to_4.png 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 index 4ab0b085d..dcb5d9f7f 100644 Binary files a/images/ui/link/link_when_to_4_dark.png 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 index 2f83548c3..cbaa6d2c1 100644 Binary files a/images/ui/link/link_when_to_5.png 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 index ad30a3e59..47bd8827d 100644 Binary files a/images/ui/link/link_when_to_5_dark.png and b/images/ui/link/link_when_to_5_dark.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_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/controls/link.md b/topics/ui/controls/link.md index 3ceb9b772..d4bda47cd 100644 --- a/topics/ui/controls/link.md +++ b/topics/ui/controls/link.md @@ -14,9 +14,9 @@ ## When to use -### Navigation between pages of the same window +### Navigation inside a window -Use a regular link for navigation between pages of the same window. +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. @@ -41,28 +41,59 @@ Use an external link for navigation to web resources. See below for the [externa Use a regular or [drop-down link](#drop-down-link) for secondary actions in packed or small UI areas. -For example, the Reset action bellow is a link for two reasons: -* The action appears only when the default value in the field is changed, and reverting to a default is considered a rare scenario. -* A lightweight link fits better than a button in this busy layout. - -![Form with three settings: 'Hard wrap at' with a Reset link, 'Wrap on typing', and 'Visual guide'.](link_when_to_3.png){width=706} - -The Modify options drop-down link fits into the top right corner of a 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} ### Secondary actions in a tree or table +#### Some items can be changed + 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} -If an action is needed for all items of a tree or table: +#### All items can be changed -* 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. 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: - ![Links in the Push Commits window 'origin : master'](link_when_to_6.png){width=706} +
+ + + + + + + + + + + + +
+ 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 @@ -126,7 +157,7 @@ Follow the [sentence capilaziation](capitalization.md#sentence) guideline. #### Ellipsis -Add an ellipsis to a button-link if it opens another UI area where input is possible. See examples for the [Button](button.topic). +Add an ellipsis to a link if it opens another UI area where input is possible. See examples for the [Button](button.topic). @@ -192,7 +223,7 @@ When possible, replace Learn more and other generic phrases with mo 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): -![Checkbox 'Use color scheme instead of the deafult' where 'deafult' is a link.](link_how_to_6.png){width=706} +![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: @@ -267,8 +298,8 @@ Drop-down links show a context menu or a popup. To implement, use [`DropDownLink ## Placement -* For button-links follow [layout of buttons and links](layout.md#buttons-and-links). -* For dropdown-links follow [layout of labeled controls](layout.md#labeled-input-controls). +* 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