feat: add CustomScrollView.Tint

[SevereCloud]

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

Описание

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

Release notes

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

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

[github-actions]

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]

e2e tests

Playwright Report

[github-actions]

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

Commit ad82164

[github-actions]

👀 Docs deployed

• ✅ Website
• ✅ Playground

📦 Package ✅

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

Commit ad82164

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.80%. Comparing base (6e3da5e) to head (ad82164).
⚠️ Report is 146 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]

Suggested change

	<div
	ref={getRootRef}
	className={classNames(className, styles.host)}
	style={mergeStyle(
	style,
	tintColor ? { '--vkui_internal--CustomScrollView_tint_color': tintColor } : undefined,
	)}
	{...restProps}
	>
	<RootComponent
	baseClassName={styles.host}
	baseStyle={tintColor ? { '--vkui_internal--CustomScrollView_tint_color': tintColor } : undefined}
	{...restProps}
	>

Можно использовать RootComponent, чтобы не деструктуризировать getRootRef, className и style

[inomdzhon]

атрибут tintcolor попадает в DOM

[EldarMuhamethanov]

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

[EldarMuhamethanov]

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

[EldarMuhamethanov]

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

[SevereCloud]

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

  const props = React.use(CustomScrollView.Tint.Context); // {getRootRef, onScroll}

  <CustomScrollView.Tint tintColor="var(--vkui--color_background)">
      <CustomScrollView {...props}>
        {["Say", "Hello", "To", "My", "Little", "Friend"].map((item) => (
          <Cell key={item} before={<Avatar />}>
            {item}
          </Cell>
        ))}
      </CustomScrollView>
  </CustomScrollView.Tint>

[inomdzhon]

А mask-composite: intersect + mask-image работает только с доп оберткой?

Просто если нет, то хорошо бы встал хук нежели подкомпонент

  const scrollTintProps = useScrollTint("var(--vkui--color_background)")
  // ...
  <CustomScrollView {...scrollTintProps}>
    {["Say", "Hello", "To", "My", "Little", "Friend"].map((item) => (
      <Cell key={item} before={<Avatar />}>
        {item}
      </Cell>
    ))}
  </CustomScrollView>