feat(Link): add props – before, after, noUnderline

[inomdzhon]

• close [BREAKING CHANGE][Bug]: Применение стилей для иконки внутри <Link> #6855

---

• Unit-тесты
• e2e-тесты
• [ ] Дизайн-ревью – вернул старое поведение
• Документация фичи
• Release notes

Описание

Решение из #7579 не подошло из-за того, что подчеркивания распространяется и на пробел.

До #7579

После #7579

По аналогии с другими компонентами, самое простое оказалось добавить before / after с указанием отступов через соответствующие CSS классы, что избавляет от каскада .host :global(.vkuiIcon).

Заодно добавил свойство noUnderline.

Нюансы про альтернативное решение

Решение через .host :global(.vkuiIcon:first-child) и .host :global(.vkuiIcon:last-child) не работает без оборачивания текстового блока в DOM-элемент. Здесь без просьбы пользователя оборачивать в <span> никак.

Release notes

BREAKING CHANGE

• Link: теперь для передачи иконок следует использовать параметры before и after, CSS свойства, которые через каскад задавались переданным иконкам в children, удалены

  Пример миграции

  <Link
    href="#"
  + after={<Icon12Example />}
  >
    Текст ссылки
  - <Icon12Example />
  </Link>

Улучшения

• Link: появился параметр noUnderline, отключающий подчеркивание при наведении

[github-actions]

size-limit report 📦

Path	Size
JS	382.13 KB (+0.07% 🔺)
JS (gzip)	115.82 KB (+0.06% 🔺)
JS (brotli)	95.26 KB (+0.02% 🔺)
JS import Div (tree shaking)	1.46 KB (0%)
CSS	332.84 KB (+0.04% 🔺)
CSS (gzip)	42.17 KB (+0.06% 🔺)
CSS (brotli)	33.27 KB (+0.08% 🔺)

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 0cfb864

[andrey-medvedev-vk]

👏 Хорошее решение проблемы!

[EldarMuhamethanov]

👍