From a27db5fb02a97f6375d834ad61e33fa82b1c5ff4 Mon Sep 17 00:00:00 2001
From: eldar-jetbrains <eldar.isiangulov@jetbrains.com>
Date: Tue, 4 Feb 2025 12:28:27 +0100
Subject: [PATCH] UX-2323: Link Guideline, preview image bug fixed, small text
 changes

---
 .../{link.png => inpsections_link.png}          | Bin
 topics/ui/controls/link.md                      |  16 ++++++++++------
 topics/ui/text/inspections.md                   |   2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)
 rename images/ui/inspections/{link.png => inpsections_link.png} (100%)

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/topics/ui/controls/link.md b/topics/ui/controls/link.md
index 81c805555..3ceb9b772 100644
--- a/topics/ui/controls/link.md
+++ b/topics/ui/controls/link.md
@@ -35,7 +35,7 @@ Use a regular link for navigation between pages of the same window.
 
 Use an external link for navigation to web resources. See below for the [external link icon](#external-link-icon).
 
-![Text 'Learn more about what is logged' with 'what is logged' as an external link with arrow icon.](link_when_to_2.png){width=706}
+![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
 
@@ -143,7 +143,7 @@ Add an ellipsis to a button-link if it opens another UI area where input is poss
 
 #### Wording
 
-Do not use words like "navigate" or "click here". A link already implies navigation or clicking.
+Do not use words like <code>navigate</code> or <code>click here</code>. A link already implies navigation or clicking.
 
 <table style="none" border="false">
   <tr>
@@ -173,7 +173,7 @@ Do not use words like "navigate" or "click here". A link already implies navigat
 
 #### Make it informative
 
-When possible, replace "Learn more" and other generic phrases with more informative ones.
+When possible, replace <code>Learn more</code> and other generic phrases with more informative ones.
 
 <table style="none" border="false">
   <tr>
@@ -215,8 +215,10 @@ Add the arrow icon for an external link. The icon shows that the user will switc
 
 ![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}
 
-<tabs group="languages">
-  <tab title="Kotlin" group-key="kotlin">
+<chapter title="Implementation" collapsible="true">
+
+  <tabs group="languages">
+    <tab title="Kotlin" group-key="kotlin">
 
   ```kotlin
   val externalLink = ActionLink("External link") {
@@ -236,7 +238,9 @@ Add the arrow icon for an external link. The icon shows that the user will switc
   externalLink.setExternalLinkIcon();
   ```
   </tab>
-</tabs>
+  </tabs>
+
+</chapter>
 
 ### Help icon
 
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 <ui-path>Java | Probable bugs | 'equals()' called on array</ui-path> adding such an example helps to understand the inspection quicker: