Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
enemyXXX opened this issue Apr 26, 2024 · 4 comments
Assignees
Milestone

Comments

@enemyXXX
Copy link

Описание

Для inline использования Link - иконки получают margin-left стиль.
Но иконка не должна их наследовать, если находится не прямым потомком .
<Link>text<Icon /></Link> - валидный кейс применения, иконка получает отступ от контента
<Link>text<div><Icon /></div></Link> - кажется иконка не должна наследовать стили отступа, так как не является прямым чайлдом Link.

Сейчас стиль применяется по правилу: .vkuiLink .vkuiIcon {}
Корректное поведение, если смотреть логически - vkuiLink > .vkuiIcon {}

Версия

latest

В каких браузерах воспроизводится проблема?

Firefox, Chrome, Safari, Microsoft Edge, Yandex Browser

Шаги воспроизведения

В описании

Ожидаемое поведение

Иконка будет наследовать отступ тогда, когда является прямым чайлдом

Скриншоты

Снимок экрана 2024-04-26 в 15 13 56

Пример с воспроизведением

No response

@mendrew
Copy link
Contributor

mendrew commented Apr 26, 2024

Спасибо за задачу! Звучит разумно!

@MrZillaGold
Copy link
Contributor

MrZillaGold commented May 2, 2024

Но тут стоит еще обратить внимание на кейсы когда внтури ссылки лежит типографика с иконкой:

<Link>
  <Footnote weight="2">
    Текст <Icon12Dropdown />
  </Footnote>
</Link>

кажется что именно для такого кейса сейчас селктор так и написан, это ломающее изменение

для Link сейчас возможно передавать Component пропом, и отдавать туда типографику, но вроде на уровне типов нельзя будет передать дополнительные пропы для нее по типу weight, этот кейс нужно поддержать

@inomdzhon inomdzhon self-assigned this May 6, 2024
@inomdzhon
Copy link
Contributor

В целом уберём margin-left. Сейчас расчёт такой, что иконка всегда после текста, а она может быть перед текстом. Обычный пробел уже даёт тот отступ, который позволяет не слипаться тексту и иконке.

Note

Лучше даже использовать &nbsp; вместо обычного пробела

@inomdzhon inomdzhon added this to the v7.0.0 milestone May 13, 2024
@inomdzhon
Copy link
Contributor

@enemyXXX т.к. изменение брейкинг чендж, фикс будет в v7.0.0

релиз планируем на конец года

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🗃 Backlog
Development

Successfully merging a pull request may close this issue.

4 participants