Merged
Conversation
|
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. Latest deployment of this branch, based on commit 0305e7a:
|
Contributor
size-limit report 📦
|
Closed
Contributor
👀 Styleguide deployedSee the styleguide for this PR at https://vkcom.github.io/VKUI/pull/3135/ |
Contributor
Changed screenshots
|
| lines | 3929 / 5076 | 77.40% |
| statements | 3999 / 5173 | 77.30% |
| functions | 879 / 1112 | 79.04% |
| branches | 3560 / 4958 | 71.80% |
| branchesTrue | 0 / 0 | 100.00% |
For CSS of: - PanelHeader - TabsItem
chore(Alert): use css modules
…ules chore(ActionSheet, ActionSheetItem): use css modules
feat: Add animation token
docs: remove helpers.md
Merge branch 'master' into v5
fix(ModalRoot): Исправляет в доке переход по истории модальных окон
- closed #3277
V5 screenshots update
SevereCloud/v5/merge-master-end
…-migration-v5 docs(migration_v5): дополняет секцию "Типографика"
bump(deps): bump @vkontakte/icons from 2.0.0-alpha.3 to 2.0.1
docs(migration_v5): очередной PR, который исправляет опечатки и т.п.
inomdzhon
previously approved these changes
Dec 7, 2022
SevereCloud
approved these changes
Dec 7, 2022
1 task
inomdzhon
added a commit
that referenced
this pull request
Dec 1, 2025
h2. `PanelHeader`
1. Заменил `FixedLayout` на `position: sticky` прямо в компоненте.
2. Перенёс `z-index` перманентно в корень, т.к. `position: sticky`
теперь применяется на `.host`. Это исправляет также перекрытие
`PanelHeaderContext` при `<PanelHeader fixed={false} />`.
3. Заменил компонент `Spacing` на `delimiter="spacing"` на отступ в CSS,
т.к. из-за него высота `PanelHeader` становится больше, появляется
невидимая область и из-за п.2 это теперь блокирует взаимодействие
с другими элементами в ситуации, когда частично зализает на них
(`<Spacing />` добавили в #3135).
h2. `SplitCol`
Для `<SplitCol fixed />` также заменяем `position: fixed` на `position: sticky`.
Также добавляем растягивание на `100vh` с вычетом `safe-area`
и с Graceful Degradation на [dvh](https://caniuse.com/?search=dvh).
h2. `SplitLayout`
Чтобы решить проблему когда стики шапка при `<SplitLayout header={<PanelHeader delimiter="none" />} />`
остается в рамках `100vh` (см. #6609 (comment)),
избавляемся от `height: 100%` у `<html>`, `<body>`, `.vkui__root`.
Вместо этого используем магию с Flexbox.
- на `<html>` `display: flex` + `min-height: 100%`, чтобы страница
растягивалась с учётом контента, а не области видимости;
- для `<body>` используем `flex: 1`, чтобы растягивался также как
и `<html>`, а также `display: flex` + `flex-direction: column`,
чтобы также растягивать потомков (об этом далее);
- для `.vkui__root` повторяем тоже самое, что и для `<body>`.
`height: 100%` у `AppRoot`, `SplitLayout` и так далее по каскаду
не трогаем, т.к. они растягиваются от `flex: 1`.
Ориентировался на статью https://stackoverflow.com/questions/30962863/holy-grail-layout-with-flex-and-always-visible-header.
inomdzhon
added a commit
that referenced
this pull request
Dec 2, 2025
h2. `PanelHeader`
1. Заменил `FixedLayout` на `position: sticky` прямо в компоненте.
2. Перенёс `z-index` перманентно в корень, т.к. `position: sticky`
теперь применяется на `.host`. Это исправляет также перекрытие
`PanelHeaderContext` при `<PanelHeader fixed={false} />`.
3. Заменил компонент `Spacing` на `delimiter="spacing"` на отступ в CSS,
т.к. из-за него высота `PanelHeader` становится больше, появляется
невидимая область и из-за п.2 это теперь блокирует взаимодействие
с другими элементами в ситуации, когда частично зализает на них
(`<Spacing />` добавили в #3135).
4. Сделал `Separator` плавающим элементом, чтобы он не занимал лишние
`0.3-0.5px` в потоке.
5. Удалил в стилях `FixedLayout` не существующий класс `.vkuiInternalPanelHeader__fixed`.
> [!NOTE]
>
> Помимо скриншотов `PanelHeader`, задело:
>
> - `Epic` – из-за п.4
> - `Panel` – из-за п.4
> - `PanelHeaderContext` – из-за п.4
> - `FixedLayout` – из-за п.1 и п.4
>
> Обновил их.
h2. `SplitCol`
Для `<SplitCol fixed />` также заменяем `position: fixed` на `position: sticky`.
Также добавляем растягивание на `100vh` с вычетом `safe-area`
и с Graceful Degradation на [dvh](https://caniuse.com/?search=dvh).
h2. `SplitLayout`
Чтобы решить проблему когда стики шапка при `<SplitLayout header={<PanelHeader delimiter="none" />} />`
остается в рамках `100vh` (см. #6609 (comment)),
избавляемся от `height: 100%` у `<html>`, `<body>`, `.vkui__root`.
Вместо этого используем магию с Flexbox.
- на `<html>` `display: flex` + `min-height: 100%`, чтобы страница
растягивалась с учётом контента, а не области видимости;
- для `<body>` удаляем `block-size: 100%` и задаём `display: flex`,
чтобы растягивался также потомки растягивались на всю высоту.
`height: 100%` у `.vkui__root`, `AppRoot`, `SplitLayout` и так далее
по каскаду – не трогаем, их логика остаётся прежней. Элементы должны
продолжать наследовать `height: 100%`.
Ориентировался на статью https://stackoverflow.com/questions/30962863/holy-grail-layout-with-flex-and-always-visible-header.
Добавил скриншотных тестов для проверки стики элементов. Заодно удалил
`dark` старых скриншотов, т.к. она не нужна в этих проверках.
h3. Ожидаемый эффект
Теперь высота всей страницы зависит от контента. На это можно повлиять
через указание какому-либо элементу высоту через единицы `vh` или `dvh`.
В частности, из-за этого для скриншотов `FixedLayout` делаем теперь
`expectScreenshotClippedToContent({ fullPage: false })`, т.к. внутри
функции `getBoundingClientRect()` отдаёт абсолютную высоту элемента.
h3. Что может сломаться?
- Получение области видимости через `document.body.clientHeight` или его
потомков с `height: 100%`. Необходимо заменить либо на
`document.documentElement.clientHeight`, либо на `window.innerHeight`.
```diff
- document.body.clientHeight
+ document.documentElement.clientHeight
// или
+ window.innerHeight
```
- Применение `position: absolute` на элементе на уровне `<body>`. Вместо
этого использовать `position: fixed`.
h2. Окружение
- **Storybook**: потребовалось перебить стиль `display: block`, который
они навешивают на `<body>`, потому что нам нужен `display: flex`.
- **Playwright**:
- добавил новых параметров для `AppDefaultWrapper` и
`screenshotWithClipToContent`, чтобы была возможность скриншотить
только область видимости.
- `index.ts` подключил `import '../src/styles/layout.css';`, чтобы
собирались новые CSS утилиты для раскладки.
inomdzhon
added a commit
that referenced
this pull request
Dec 2, 2025
h2. `PanelHeader`
1. Заменил `FixedLayout` на `position: sticky` прямо в компоненте.
2. Перенёс `z-index` перманентно в корень, т.к. `position: sticky`
теперь применяется на `.host`. Это исправляет также перекрытие
`PanelHeaderContext` при `<PanelHeader fixed={false} />`.
3. Заменил компонент `Spacing` на `delimiter="spacing"` на отступ в CSS,
т.к. из-за него высота `PanelHeader` становится больше, появляется
невидимая область и из-за п.2 это теперь блокирует взаимодействие
с другими элементами в ситуации, когда частично зализает на них
(`<Spacing />` добавили в #3135).
4. Сделал `Separator` плавающим элементом, чтобы он не занимал лишние
`0.3-0.5px` в потоке.
5. Удалил в стилях `FixedLayout` не существующий класс `.vkuiInternalPanelHeader__fixed`.
> [!NOTE]
>
> Помимо скриншотов `PanelHeader`, задело:
>
> - `Epic` – из-за п.4
> - `Panel` – из-за п.4
> - `PanelHeaderContext` – из-за п.4
> - `FixedLayout` – из-за п.1 и п.4
>
> Обновил их.
h2. `SplitCol`
Для `<SplitCol fixed />` также заменяем `position: fixed` на `position: sticky`.
Также добавляем растягивание на `100vh` с вычетом `safe-area`
и с Graceful Degradation на [dvh](https://caniuse.com/?search=dvh).
h2. `SplitLayout`
Чтобы решить проблему когда стики шапка при `<SplitLayout header={<PanelHeader delimiter="none" />} />`
остается в рамках `100vh` (см. #6609 (comment)),
избавляемся от `height: 100%` у `<html>` и `<body>`.
Вместо этого используем магию с Flexbox.
- на `<html>` `display: flex` + `min-height: 100%`, чтобы страница
растягивалась с учётом контента, а не области видимости;
- для `<body>` удаляем `block-size: 100%` и задаём `display: flex`,
чтобы растягивался также потомки растягивались на всю высоту.
`height: 100%` у `.vkui__root`, `AppRoot`, `SplitLayout` и так далее
по каскаду – не трогаем, их логика остаётся прежней. Элементы должны
продолжать наследовать `height: 100%`.
Ориентировался на статью https://stackoverflow.com/questions/30962863/holy-grail-layout-with-flex-and-always-visible-header.
Добавил скриншотных тестов для проверки стики элементов. Заодно удалил
`dark` старых скриншотов, т.к. она не нужна в этих проверках.
Помимо этого, решил перенести удаление свойств `popout` и `modal` на VKUI v9. А для `getRef` добавил эту пометку.
h3. Ожидаемый эффект
Теперь высота всей страницы зависит от контента. На это можно повлиять
через указание какому-либо элементу высоту через единицы `vh` или `dvh`.
В частности, из-за этого для скриншотов `FixedLayout` делаем теперь
`expectScreenshotClippedToContent({ fullPage: false })`, т.к. внутри
функции `getBoundingClientRect()` отдаёт абсолютную высоту элемента.
h3. Что может сломаться?
- Получение области видимости через `document.body.clientHeight` или его
потомков с `height: 100%`. Необходимо заменить либо на
`document.documentElement.clientHeight`, либо на `window.innerHeight`.
```diff
- document.body.clientHeight
+ document.documentElement.clientHeight
// или
+ window.innerHeight
```
- Применение `position: absolute` на элементе на уровне `<body>`. Необходимо
заменить на `position: fixed`.
h2. Окружение
- **Storybook**: потребовалось перебить стиль `display: block`, который
они навешивают на `<body>`, потому что нам нужен `display: flex`.
- **Playwright**:
- добавил новых параметров для `AppDefaultWrapper` и
`screenshotWithClipToContent`, чтобы была возможность скриншотить
только область видимости.
- `index.ts` подключил `import '../src/styles/layout.css';`, чтобы
собирались новые CSS утилиты для раскладки.
2 tasks
inomdzhon
added a commit
that referenced
this pull request
Dec 8, 2025
- resolve #9251 - fix #6588 - fix #3532 - close #8115 - resolve #3396 --- <!-- Чеклист. Лишние пункты можно удалить если изменения не подразумевают их наличие. Иначе, необходимо обоснование по каждому пункту. --> - ~[ ] Unit-тесты~ - [x] e2e-тесты - ~[ ] Дизайн-ревью~ - ~[ ] Документация фичи~ - [x] Release notes h3. `PanelHeader` 1. Заменил `FixedLayout` на `position: sticky` прямо в компоненте. 2. Перенёс `z-index` перманентно в корень, т.к. `position: sticky` теперь применяется на `.host`. Это исправляет также перекрытие `PanelHeaderContext` при `<PanelHeader fixed={false} />`. 3. Заменил компонент `Spacing` на `delimiter="spacing"` на отступ в CSS, т.к. из-за него высота `PanelHeader` становится больше, появляется невидимая область и из-за п.2 это теперь блокирует взаимодействие с другими элементами в ситуации, когда частично зализает на них (`<Spacing />` добавили в #3135). 4. Сделал `Separator` плавающим элементом, чтобы он не занимал лишние `0.3-0.5px` в потоке. 5. Удалил в стилях `FixedLayout` не существующий класс `.vkuiInternalPanelHeader__fixed`. > [!NOTE] > > Помимо скриншотов `PanelHeader`, задело: > > - `Epic` – из-за п.4 > - `Panel` – из-за п.4 > - `PanelHeaderContext` – из-за п.4 > - `FixedLayout` – из-за п.1 и п.4 > > Обновил их. h3. `SplitCol` Для `<SplitCol fixed />` также заменяем `position: fixed` на `position: sticky`. Также задаем минимальную высоту через [dvh](https://caniuse.com/?search=dvh) (с фолбеком на `100vh` с вычетом `safe-area`) и делаем его Flexbox'ом, чтобы потомки могли растягиваться на всю высоту через `flex: 1` вместо `block-size: 100%`. h3. `SplitLayout` Чтобы решить проблему когда стики шапка при `<SplitLayout header={<PanelHeader delimiter="none" />} />` остается в рамках `100vh` (см. #6609 (comment)), избавляемся от `height: 100%` у `<html>` и `<body>`. Вместо этого используем магию с Flexbox. - на `<html>` `display: flex` + `min-height: 100%`, чтобы страница растягивалась с учётом контента, а не области видимости; - для `<body>` удаляем `block-size: 100%` и задаём `display: flex`, чтобы высота зависела от содержимого, а потомки продолжали растягиваться через `block-size: 100%`. `height: 100%` у `.vkui__root`, `AppRoot`, `SplitLayout` и так далее по каскаду – не трогаем, их логика остаётся прежней. Элементы должны продолжать наследовать `height: 100%`. Ориентировался на статью https://stackoverflow.com/questions/30962863/holy-grail-layout-with-flex-and-always-visible-header. Добавил скриншотных тестов для проверки стики элементов. Заодно удалил `dark` старых скриншотов, т.к. она не нужна в этих проверках. Помимо этого, решил перенести удаление свойств `popout` и `modal` на VKUI v9. А для `getRef` добавил эту пометку. h4. Ожидаемый эффект Теперь высота всей страницы зависит от контента. На это можно повлиять через указание какому-либо элементу высоту через единицы `vh` или `dvh`. В частности, из-за этого для скриншотов `FixedLayout` делаем теперь `expectScreenshotClippedToContent({ fullPage: false })`, т.к. внутри функции `getBoundingClientRect()` отдаёт абсолютную высоту элемента. h4. Что может сломаться? - Получение области видимости через `document.body.clientHeight` или его потомков с `height: 100%`. Необходимо заменить либо на `document.documentElement.clientHeight`, либо на `window.innerHeight`. ```diff - document.body.clientHeight + document.documentElement.clientHeight // или + window.innerHeight ``` - Применение `position: absolute` на элементе на уровне `<body>`. Необходимо заменить на `position: fixed`. h3. Окружение - **Storybook**: потребовалось перебить стиль `display: block`, который они навешивают на `<body>`, потому что нам нужен `display: flex`. - **Playwright**: - добавил новых параметров для `AppDefaultWrapper` и `screenshotWithClipToContent`, чтобы была возможность скриншотить только область видимости. - `index.ts` подключил `import '../src/styles/layout.css';`, чтобы собирались новые CSS утилиты для раскладки. --- #h1. Release notes #h1. BREAKING CHANGE - PanelHeader: изменена реализация `fixed`, который закрепляет шапку в области видимости при скролле – вместо `position: fixed` используется `position: sticky`. Это потребовало изменение раскладки всей страницы – `height: 100%` на `<html>` и `<body>` удалён в пользу `display: flex` и теперь высота страницы зависит от содержимого. - Если вы получали высоту области видимости через `document.body.clientHeight` или на элементе с `height: 100%` по каскаду ниже, то замените такой код либо на [VIsualViewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport), либо на `document.documentElement.clientHeight`, либо на `window.innerHeight`. - Если вам нужно, чтобы какой-то из элементов растягивался на высоты области видимости, то используйте единицы измерения [`vh`](https://caniuse.com/?search=vh) или [`dvh`](https://caniuse.com/?search=dvh) вместо `%` (`height: 100%` → `height: 100dvh`) - SplitCol: - Изменена реализация `fixed`, который закрепляет колонку в области видимости при скролле – вместо `position: fixed` используется `position: sticky`. - Исправлена проблема когда переполненный контент при `fixed` обрезался – теперь высота `SplitCol` зависит от его содержимого. Чтобы растянуть потомок на всю колонку, используйте `flex-grow: 1` на этом потомке.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
8 participants
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.
Драфт для отслеживания изменений v5 на замену #2563 (переименовала ветку в
v5, чтобы потом не было проблем с тегами).