fix(ImageBase): fix bug with css selectors of ImageBase #8004
Conversation
size-limit report 📦
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
e2e tests
|
👀 Docs deployed
Commit 84d5cb0 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8004 +/- ##
=======================================
Coverage 95.60% 95.60%
=======================================
Files 398 398
Lines 11321 11321
Branches 3728 3728
=======================================
Hits 10823 10823
Misses 498 498
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
vkcom-publisher
added
pr-needs-work
There was a problem hiding this comment.
Похоже на самое верное и быстрое, на текущий момент, решение. 👍
Можем добавить скриншотные тесты для варианта с Avatar напрямую в PanelHeader и c PanelHeaderButton обёрткой, может быть и где нет BaseImage в after/before, если такого скриншота ещё нету? 🙏
Сейчас при отображении в PanelHeader компонента Avatar в after/before добавляется margin по бокам. Есть ощущение, что эти отступы не нужны.
Судя по дизайну отступ с Аватаром нужен.
В дизайне, при добавлении в after Аватара, тот оборачивается в AvatarLayout
у которого как раз по 8px отступы. Они, видимо, в коде таким образом и реализованы.
| Чтобы это увидеть нужно дизайн себе в драфт сохранить и в right элементе у PanelHeader выбрать в качестве контента Avatar.
Хотя в идеале нам бы как-то это более явно отобразить, а то в будущем тоже будут вопросы. Хотя, может быть, лучше и не сделать.
Или может быть с дизайном обсудить вот эту дополнительную обёртку. Чего-то с ней придумать бы. А то так совсем не явно получается.
В дизайн бы такой пример добавить, чтобы наглядно сразу видеть такой вариант использования и особенность обёртки.
|
упс, пропустил сообщение Андрея #8004 (review) |
@andrey-medvedev-vk Добавил скришоты с |
inomdzhon
added
the
patch
EldarMuhamethanov
deleted the
e.muhamethanov/8000/remove-panel-header-avatar-margins
branch
* fix(ImageBase): remove Avatar margins in PanelHeader * fix(ImageBase): fix bug with css selectors of ImageBase * test(PanelHeader): add screens with Avatar and PanelHeaderButton
Описание
Сейчас при отображении в
PanelHeaderкомпонентаAvatarвafter/beforeдобавляетсяmarginпо бокам. Есть ощущение, что эти отступы не нужны. В общем, погуляя по истории git я нашел pull request в котором был добавлен отступ. Это было сделано аж в 2020 году, так я и не понял, какая тогда была версия VKUI, но точно меньше 3.12.4(это последняя версия, которую можно посмотреть через сайт). Проблема в том, что все также непонятно конкретно зачем это было сделано. Там конечно есть упоминание этой задачи, но связать это с изменениями я не понял как, возможно был запрос от дизайна когда-то тогда, либо автор сам решил, что отступ нужен.Решил, что можно доработать селектор, добавив ">", чтобы только прямому потомку добавлялся отступ. А при использовании
Avatarс оберткой в видеPanelHeaderButtonотступ не будет добавляться.Изменения
Поправил селектор, добавив ">", чтобы только прямому потомку добавлялся отступ
Для DesignReview
Чтобы посмотреть отображение
AvatarвPanelHeader, нужно перейти на страницуPanelHeaderи выключить настройкуhasCustomPanelHeaderAfter.Просьба посмотреть отображение
AvatarвafterPanelHeaderна разных платформах и размерах экранов.Release notes
Исправления
Avatarв компонентеPanelHeaderпри прокидывании вafter/before