Group "plain" and "card" modes #1065
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
fedorov-xyz
reviewed
Oct 20, 2020
fedorov-xyz
approved these changes
Oct 21, 2020
4 tasks
andrey-medvedev-vk
added a commit
that referenced
this pull request
Nov 28, 2024
…html elements (#7739) На текущий момент при монтировании приложения в режиме `full/embedded` происходит автоматическое добавление классов: - на `html` элемент добавляются классы: - токенов текущей темы, - класс `.vkui`, - класс `layout` режима, - класс режима адаптивности. - добавляются css-переменные для задания [safeAreaInsets](https://developer.mozilla.org/en-US/docs/Web/CSS/env) - на точку монтирования добавляется: - класс `.vkui__root` - класс `.vkui__embedded` для режима `embedded` - класс `layout` режима, - класс режима адаптивности. В том числе при старте приложения в `body` тут же добавляется контейнер для монтирования плавающих элементов и в режиме `embedded` на него также вешаются css-переменные для задания [safeAreaInsets](https://developer.mozilla.org/en-US/docs/Web/CSS/env) Всё это мешает нормальной работе `SSR`. Требуется минимизировать кол-во изменений в DOM в рантайме при старте приложения. В идеале совсем исключить автоматическое добавление классов, или добавить возможность контролировать эту логику. Решение Перенести все классы и стили внутрь приложения, желательно на уровень `AppRoot` и ниже, чтобы реакт занимался добавлением этих классов, и DOM не менялся в процессе гидратации. В процессе переноса открылись причины установки большинства классов на html: - для правильной установки цветовой схемы нам мало только задать правильный фон и цвета элементов в рамках AppRoot. Для темной/светлой темы также нужный правильные цвета у системного скроллбара. А задать его можно лишь повесив на html элемент свойство `color-scheme` со значением токена `vkui`. - А также нужен верный цвет фона у html элеменета: - для правильного фона при скролее в SplitLayout, - для того, чтобы при bounce эффекте при оверскролле на мобильных устройствах, или Safari появление html элемента не было заметно (так как по умолчанию у него цвет заданные браузером по умолчанию в зависимости от color-scheme) Изменения - Классы `.vkui` и `.vkui__root--embedded` теперь всегда выставляют фон. https://github.com/VKCOM/VKUI/blob/15120965bc40fa5a3a561dfacd10548eafc8d125/packages/vkui/src/styles/common.css#L31-L39 https://github.com/VKCOM/VKUI/blob/15120965bc40fa5a3a561dfacd10548eafc8d125/packages/vkui/src/styles/common.css#L48-L50 Раньше это делалось только в режиме адаптивности `regular`, чтобы у `Group` в `regular` в режиме `card` был правильный фон. (добавлено было в этом PR #1065) https://github.com/VKCOM/VKUI/blob/b86be10e08bc392abb5537706c3712f55316e967/src/styles/styles.css#L126-L128 Сейчас в этом для `Group` нету необходимости, так как фоном для `Group` управляет `Panel` https://github.com/VKCOM/VKUI/blob/3abc6371424e93bae3452812c74f6e8c86acf51e/packages/vkui/src/components/Panel/Panel.module.css#L91-L104 Но совсем убрать фон у `.vkui `нельзя, так как в многоколоночном режиме `SplitLayout` видно фон `html` элемента , если чуть проскролить контент. Это потому, что все вложенные в `SplitLayout` компоненты вплоть до `Panel` имеют `height: 100%`, то есть фон в итоге применяется только на 100% высоты экрана, а ниже фона уже нет. Это можно исправить заменив везде `height: 100%` на `min-height: 100%`, но тут нет гарантий, что ещё чего-нибудь не выстрелит, поэтому я бы этот рефакторинг сделал бы отдельно.⚠️ Из-за этого изменения многие скриншотные тесты, в которых оберткой тестируемых компонентов был лишь `AppRoot` (без `View`, `Panel`), пришлось перезаписать, так как фон `html` поменялся с дефолтного цвета браузера на токены `.vkui`. - В `AppRoot` c помощью свойства `disableSettingVKUIClassesInRuntime` появилась возможность отключить автоматическое выставление классов `.vkui` на `html` и `.vkui__root/.vkui__root--embedded` на точке монтирования приложения в режиме `full/embedded` Использовать это свойство стоит в режиме `SSR`, чтобы в рантайме `VKUI` этим на занимался. Но можно и не отключать это поведение, главное, чтобы при SSR эти классы уже стояли там куда их выставляет `VKUI`, чтобы при гидратации изменений в классах страницы не произошло и браузеру не нужно было бы пересчитывать DOM и CSSOM. В режиме `full` `.vkui` класс навешивается на `html` элемент, а `.vkui__root` на точку монтирования приложения. В режиме `embedded` `.vkui__root` и `.vkui__root--embedded` навешиваются на точку монтирования приложения. - Все остальные классы и токены, требуемые `VKUI`, которые раньше вешались на `html` или точку монтирования приложения, теперь вешаются на контейнер `AppRoot`. Так как `AppRoot` это точка входа в `VKUI` приложение, то такой подход приемлем. Чтобы компоненты, рендерящиеся через порталы вне `DOM` дерева `AppRoot`, тоже имели доступ к токенам и стилям `AppRoot` был создан компонент `AppRootStyleContainer`. Он используется как в `AppRoot`, так и как обертка для порталов (а значит модалок и попапов), в компоненте `AppRootPortal`. `AppRootStyleContainer` через контекст знает какой сейчас режим (`mode`), какой `appearance`, поэтому в модалках и других плавающих элементах всегда будет применена верная цветовая схема и токены. - `AppRootPortal` был переработан Упрощены проверки cвязанные с `usePortal` свойством. `portalRoot`, контейнер для порталов всех плавающих элементов больше не создается при первом рендере. Теперь по умолчанию все плавающие элементы рендерятся в `document.body` через `createPortal`. Это возможно за счёт обертки `AppRootStyleContainer`, которая прокидывается в портал вместе с плавающим элементом и гарантирует наличи нужных токенов и классов у плавающих элементов. В `AppRoot` всё также можно передать свой `portalRoot` как `ref`, так и как `HTML` элемент. - Пропы `popout` и `modal` из `SplitLayout` помечены как `@deprecated`. Так как мы теперь можем обернуть плавающие элементы в токены и классы `AppRoot` при рендере через портал, то отпадает надобность в жесткой привязке `modal/popout `компонентов к `SplitLayout` (`Alert`, `ScreenSpinner`, `ActionSheet`) По умолчанию модалки/попапы будут рендерится в` document.body`. Это позволяет избавить пользователей от необходимости обязательно передавать `ModalRoot` в `SplitLayout` и держать стейт переключения модалок на уровне `SplitLayout`. Теперь `ModalRoot` можно объявить в любой части приложения, как и `Alert`, `ScreenSpinner` и `ActionSheet`. Также можно иметь несколько `ModalRoot` если требудется по смыслу разделить модалки. (Есть ограничение на одновременный рендер модалок из разных `ModalRoot`, так как будет две подложки, их цвета будут складываться и подложка будет темнее. Тем не менее всё ещё можно рендерить модалки/попапы как раньше используся popout/modal свойства. Но по умолчанию `ModalRoot` и `Popout` будут рендерится в `document.body`. Чтобы это изменить можно передать в них `usePortal={false}`.
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.
modeзависит от места нахождения:В модалке всегда
plainВне модалки зависит от
sizeX: приREGULAR = card, приCOMPACT = plainМожно переопределить вручную передав проп