tech(Flex): add support flex with gap #8212
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 d96c39f |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8212 +/- ##
==========================================
+ Coverage 95.49% 95.51% +0.01%
==========================================
Files 403 402 -1
Lines 11503 11522 +19
Branches 3812 3828 +16
==========================================
+ Hits 10985 11005 +20
+ Misses 518 517 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
EldarMuhamethanov
dismissed stale reviews from SevereCloud and andrey-medvedev-vk
via
8d6659c
| @@ -1,5 +1,8 @@ | |||
| Базовый компонент для позиционирования элементов. Построен на базе `flex layout`. | |||
|
|
|||
| > ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании | |||
| > свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется `fallback` логика с использование свойства `margin`. | |||
There was a problem hiding this comment.
тут нужно оставить рекомендацию, что если пользователь хочет, чтобы при фолбеке всё было норм, избегать использования React.Fragment, а то сейчас пользователю ничего не говорит факт переключения на фолбек
нужно представить себя пользователем бибилотеки, который ничего не знает о внутренней кухне и читает документацию
There was a problem hiding this comment.
про React.Fragment это в частности, если есть что-то ещё, то про это тоже стоит упомянуть
There was a problem hiding this comment.
Добавил инфу про React.Fragment, кейс с вложенными Flex у нас покрыт для фолбэка, не стал его писать, чтобы не пугать пользователя. Больше примеров пока не придумал, если будут появляться, то обновим
Описание
На данный момент мы не можем использовать свойство
gapв flex контейнере - наша браузерная поддержка не покрывает поддержку этого свойства совместно сdisplay: flex. Поэтому в компонентеFlexдля реализацииgapиспользуются хаки с margin-ами. Хотелось бы использовать свойствоgapкак основную реализацию, и если она не поддерживается, то использовать фолбэк с текущей реализацией. Нужно придумать как это можно сделать используя толькоcss.Исследования
Первым делом попробовал использовать
@support (gap: 1px)для проверки поддержкиgap. Как оказалось этот способ не работает, так как само свойство появилось раньше. А его поддержка вflexконтейнере появилась позжеНашел issue на github в котором обсуждали эту проблему. В одном из комментариев пользователь предложил следующий способ:
Можно использовать
@support (inset: 0), так как его браузерная поддержка максимально близка к поддержкеgap + flexПоддержка gap + flex
Поддержка inset
Из этого можно сделать вывод:
@support (inset: 0)не будет срабатывать на все браузеры, которые не поддерживаютflex + gap. Но также и не будет срабатывать для нескольких версий браузеров, гдеgapуже поддерживается, а именно:Chrome 84 - 86,Edge 84 - 86,Firefox 63 - 65,Opera 70 - 72.Решение есть, осталось только определить плюсы и минусы данной доработки:
Плюс и минусы
+У большинства пользователей будет использоваться нативное решение, у которого не будет багов, которые есть у фолбек решения, такие как вложенныеFlexи тд.-Разработчикам придется поддерживать в будущем(пока полностью не откажемся от фолбека) два подхода. Но я бы не сказал, что это будет проблемно, учитывая, что кода в целом то немного. Плюс небольшая вероятность, что в компонентFlexбудет добавляться много функционала.Немного статистики
Есть страничка со статистикой использования браузеров и их версий на caniuse. Исходя из нее можно сделать вывод, что очень мало пользователей пользуется браузерами, которые еще не поддерживают
gapЕще сайт со статистикой по браузерам
Кейсы, которые будут работать в новой реализации
Если прокинуть в
childrenодин Fragment, в котором будет несколькоchildrenРеализация через
gap:В fallback реализации не будет выставлен:
Это происходит из-за этого кода:
Данный код правит баг из #7463. Можно, конечно, рекурсивно рассчитывать настоящее количество
child-ов, но скорее всего это может ударить по производительностиВ новой реализации обоих этих багов не будет
Изменения
gapесли поддерживается свойствоinsetgapрассчитывались всегда, даже, когда 1children. Это исправляет проблему, когда вchildrenпрокинутFragmentс множествомchild-ов. Правда это исправляет проблему только для нового решения черезgapstorybookкомпонента для более удобной работы сFlexRelease notes