Skip to content

feat: add CustomScrollView.Tint#9359

Open
SevereCloud wants to merge 5 commits intomasterfrom
SevereCloud/feat/add-CustomScrollView.Tint
Open

feat: add CustomScrollView.Tint#9359
SevereCloud wants to merge 5 commits intomasterfrom
SevereCloud/feat/add-CustomScrollView.Tint

Conversation

@SevereCloud
Copy link
Contributor

@SevereCloud SevereCloud commented Jan 16, 2026

  • Unit-тесты
  • e2e-тесты
  • Дизайн-ревью
  • Документация фичи
  • Release notes

Описание

Добавляем компонент для создания теней к прокручиваемой области

Release notes

Новые компоненты

  • CustomScrollViewTint: Подкомпонент, который добавляет тени к краям прокручиваемой области

@SevereCloud SevereCloud requested a review from a team as a code owner January 16, 2026 11:30
@SevereCloud SevereCloud added this to VKUI Jan 16, 2026
@SevereCloud SevereCloud added this to the v8.1.0 milestone Jan 16, 2026
@SevereCloud SevereCloud force-pushed the SevereCloud/feat/add-CustomScrollView.Tint branch from a85a9af to 886c55f Compare January 16, 2026 11:32
@github-actions
Copy link
Contributor

github-actions bot commented Jan 16, 2026 •
edited
Loading

size-limit report 📦

Path Size
JS 411.88 KB (+0.15% 🔺)
JS (gzip) 126.41 KB (+0.18% 🔺)
JS (brotli) 104.38 KB (+0.14% 🔺)
JS import Div (tree shaking) 811 B (0%)
CSS 373.64 KB (+0.04% 🔺)
CSS (gzip) 46.33 KB (+0.09% 🔺)
CSS (brotli) 36.58 KB (+0.03% 🔺)

@github-actions
Copy link
Contributor

github-actions bot commented Jan 16, 2026 •
edited
Loading

e2e tests

Playwright Report

@github-actions
Copy link
Contributor

github-actions bot commented Jan 16, 2026 •
edited
Loading

📊 Найдены изменения в собранных файлах: Отчет

Commit ad82164

@github-actions
Copy link
Contributor

github-actions bot commented Jan 16, 2026 •
edited
Loading

👀 Docs deployed

📦 Package ✅

yarn add @vkontakte/vkui@https://development.s3.prodcloud.vk.team/pull/9359/ad82164d2e5497fcb51b9ae27b746ec0b3c89c4e/pkg/@vkontakte/vkui/_pkg.tgz

Commit ad82164

@codecov
Copy link

codecov bot commented Jan 16, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.80%. Comparing base (6e3da5e) to head (ad82164).
⚠️ Report is 82 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #9359      +/-   ##
==========================================
+ Coverage   94.73%   94.80%   +0.07%     
==========================================
  Files         440      441       +1     
  Lines       11898    11922      +24     
  Branches     4386     4394       +8     
==========================================
+ Hits        11271    11303      +32     
+ Misses        627      619       -8
Flag Coverage Δ
unittests 94.80% <100.00%> (+0.07%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

EldarMuhamethanov
EldarMuhamethanov reviewed Jan 16, 2026
View reviewed changes
Copy link
Contributor

@EldarMuhamethanov EldarMuhamethanov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

packages/vkui/src/components/CustomScrollView/Tint/CustomScrollViewTint.tsx
Comment on lines 66 to 69
const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
const target = e.currentTarget;
updateTint(target);
};
Copy link
Contributor

@EldarMuhamethanov EldarMuhamethanov Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Пересчет теней происходит только при скролле, но при изменении размеров контейнера не происходит пересчет. Может добавить useResizeObserver?

Copy link
Contributor

@EldarMuhamethanov EldarMuhamethanov Jan 16, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я тут подумал, размер контейнера CustomScrollView может и не измениться при изменении реального размера содержимого, так что тут useResizeObserver будет бесполезным. Тут либо добавлять еще один контейнер, у которого будет меняться размер, при изменении размеров содержимого, либо забить надо это и вовсе убрать useResizeObserver, но тогда могут появиться баги в будущем

packages/vkui/src/components/CustomScrollView/Tint/CustomScrollViewTint.tsx
)}
{...restProps}
>
{children({ getRootRef: scrollRef, onScroll })}
Copy link
Contributor

@EldarMuhamethanov EldarMuhamethanov Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

У нас вроде не очень приветствуется использование renderFn подхода, потому что нужно мемоизировать children функцию снаружи и свойства прокидываемые в функцию. Может лучше использовать контекст как в Accordion.

@SevereCloud SevereCloud force-pushed the SevereCloud/feat/add-CustomScrollView.Tint branch from 9be823d to a778ed1 Compare January 16, 2026 13:33
@SevereCloud SevereCloud force-pushed the SevereCloud/feat/add-CustomScrollView.Tint branch from 698fda9 to 021b56a Compare January 16, 2026 14:47
@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels Jan 24, 2026
@vkcom-publisher vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Feb 1, 2026
@vkcom-publisher vkcom-publisher removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Feb 2, 2026
@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels Feb 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@EldarMuhamethanov EldarMuhamethanov EldarMuhamethanov left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

VKUI
Status: No status

Milestone

v8.1.0

Development

Successfully merging this pull request may close these issues.

3 participants

@SevereCloud @EldarMuhamethanov @vkcom-publisher