From 314d051554600a9767943d49cf8226cf828f4d4e Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Mon, 16 Sep 2024 14:47:18 +0300
Subject: [PATCH] fix(Link): rm margin from icon (#7579)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h2. Описание

Удаляем `margin`, т.к.:
- сейчас расчёт такой, что иконка всегда после текста, а она может быть перед текстом;
- обычный пробел сам по себе и так компенсирует отступ, чтобы текст и иконка не слипались;
- по прошедшим e2e тестам видно, что `margin` не нужен.

h2. Изменения

Заменил в доках обычный пробел на `&npsp;`, т.к. логичнее использовать его, чтобы иконка не переносилась без текста.

h2. Скриншот

<img width="707" alt="image" src="https://github.com/VKCOM/VKUI/assets/5850354/e904297a-cc8b-4c86-a826-85fd5df699f7">


h2. Release notes

h2. Исправления

- Link: из CSS удалён зашитый отступ справа в `4px`, который выставлялся иконке. Был расчёт, что иконка всегда справа, но она может быть и слева, в этом раскладе появлялся ненужный отступ слева. Было решено отдать пользователю управлять отступами. Поэтому, если вам требуется отступ, используйте неразрывный пробел:
  либо через HTML-код `&nbsp;`,
  ```diff
  <Link href="https://google.com" target="_blank">
  -  https://google.com <Icon24ExternalLinkOutline width={16} height={16} />
  +  https://google.com&nbsp;<Icon24ExternalLinkOutline width={16} height={16} />
  </Link>
  ```
  либо через сочетания клавиш _⌥ + ␣_ (на **MacOS**).
---
 packages/vkui/src/components/Link/Link.e2e-playground.tsx    | 4 +++-
 packages/vkui/src/components/Link/Link.module.css            | 1 -
 packages/vkui/src/components/Link/Link.stories.tsx           | 3 ++-
 packages/vkui/src/components/Link/Readme.md                  | 5 +++--
 ...ink-state-focus-visible-android-chromium-light-1-snap.png | 4 ++--
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/vkui/src/components/Link/Link.e2e-playground.tsx b/packages/vkui/src/components/Link/Link.e2e-playground.tsx
index 8c83334e6a..9348597c68 100644
--- a/packages/vkui/src/components/Link/Link.e2e-playground.tsx
+++ b/packages/vkui/src/components/Link/Link.e2e-playground.tsx
@@ -1,3 +1,4 @@
+import { Icon24ExternalLinkOutline } from '@vkontakte/icons';
 import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
 import { Link, type LinkProps } from './Link';
 
@@ -7,7 +8,8 @@ export const LinkFocusVisiblePlayground = (props: ComponentPlaygroundProps) => (
       <div style={{ width: 300, padding: 10 }}>
         Нажимая «Продолжить», вы принимаете{' '}
         <Link href="#" {...props}>
-          пользовательское соглашение
+          пользовательское соглашение&nbsp;
+          <Icon24ExternalLinkOutline width={16} height={16} />
         </Link>
         ...
       </div>
diff --git a/packages/vkui/src/components/Link/Link.module.css b/packages/vkui/src/components/Link/Link.module.css
index 0efa74fad4..bea2bdccd5 100644
--- a/packages/vkui/src/components/Link/Link.module.css
+++ b/packages/vkui/src/components/Link/Link.module.css
@@ -25,7 +25,6 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .Link :global(.vkuiIcon) {
-  margin-inline-start: 4px;
   display: inline-block;
   vertical-align: middle;
 }
diff --git a/packages/vkui/src/components/Link/Link.stories.tsx b/packages/vkui/src/components/Link/Link.stories.tsx
index d91b5e7c6c..a4037a0430 100644
--- a/packages/vkui/src/components/Link/Link.stories.tsx
+++ b/packages/vkui/src/components/Link/Link.stories.tsx
@@ -27,7 +27,8 @@ export const WithIcon: Story = {
     target: '_blank',
     children: (
       <>
-        https://google.com <Icon24ExternalLinkOutline width={16} height={16} />
+        https://google.com&nbsp;
+        <Icon24ExternalLinkOutline width={16} height={16} />
       </>
     ),
   },
diff --git a/packages/vkui/src/components/Link/Readme.md b/packages/vkui/src/components/Link/Readme.md
index 77f1a0ef0a..ffcf59747c 100644
--- a/packages/vkui/src/components/Link/Readme.md
+++ b/packages/vkui/src/components/Link/Readme.md
@@ -19,13 +19,14 @@
   <Spacing size={24} />
 
   <Link href="https://google.com" target="_blank">
-    https://google.com <Icon24ExternalLinkOutline width={16} height={16} />
+    https://google.com&nbsp;
+    <Icon24ExternalLinkOutline width={16} height={16} />
   </Link>
 
   <Spacing size={24} />
 
   <div style={{ width: 304 }}>
-    Нажимая «Продолжить», вы принимаете <Link href="#">пользовательское соглашение</Link> и{' '}
+    Нажимая «Продолжить», вы принимаете&nbsp;<Link href="#">пользовательское соглашение</Link> и{' '}
     <Link href="#">политику конфиденциальности</Link>.
   </div>
 
diff --git a/packages/vkui/src/components/Link/__image_snapshots__/link-state-focus-visible-android-chromium-light-1-snap.png b/packages/vkui/src/components/Link/__image_snapshots__/link-state-focus-visible-android-chromium-light-1-snap.png
index 756a681e7a..ab0543f9b2 100644
--- a/packages/vkui/src/components/Link/__image_snapshots__/link-state-focus-visible-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Link/__image_snapshots__/link-state-focus-visible-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e1d605231604aa87f70d78fe3c3f7bf775d308572d0bea8be9198ad2d04f0450
-size 6436
+oid sha256:44de1380a1fe701cc970d60d6b2817a5e0f0397dbd22b6b538852e24d4d2d7df
+size 6755