tech(Flex): add support flex with gap #8212
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 bd3505e |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8212 +/- ##
=======================================
Coverage 95.51% 95.51%
=======================================
Files 404 404
Lines 11531 11531
Branches 3830 3829 -1
=======================================
Hits 11014 11014
Misses 517 517
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
SevereCloud
previously approved these changes
Jan 30, 2025
EldarMuhamethanov
dismissed stale reviews from SevereCloud and andrey-medvedev-vk
via
8d6659c
inomdzhon
reviewed
Jan 30, 2025
SevereCloud
previously approved these changes
Jan 31, 2025
andrey-medvedev-vk
previously approved these changes
Feb 3, 2025
SevereCloud
approved these changes
Feb 3, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
На данный момент мы не можем использовать свойство
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