[Bug]: Применение стилей для иконки внутри <Link>
enemyXXX opened this issue · 4 comments
Описание
Для 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
Шаги воспроизведения
В описании
Ожидаемое поведение
Иконка будет наследовать отступ тогда, когда является прямым чайлдом
Скриншоты
Пример с воспроизведением
No response
Спасибо за задачу! Звучит разумно!
Но тут стоит еще обратить внимание на кейсы когда внтури ссылки лежит типографика с иконкой:
<Link>
<Footnote weight="2">
Текст <Icon12Dropdown />
</Footnote>
</Link>
кажется что именно для такого кейса сейчас селктор так и написан, это ломающее изменение
для Link сейчас возможно передавать Component пропом, и отдавать туда типографику, но вроде на уровне типов нельзя будет передать дополнительные пропы для нее по типу weight, этот кейс нужно поддержать
В целом уберём margin-left. Сейчас расчёт такой, что иконка всегда после текста, а она может быть перед текстом. Обычный пробел уже даёт тот отступ, который позволяет не слипаться тексту и иконке.
Note
Лучше даже использовать вместо обычного пробела