fix(Link): rm margin from icon (#7579)

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

@@ -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>

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;
 }

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} />
       </>
     ),
   },

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>