feat(SubnavigationBar): add prop withFade

[fm-designer]

Описание

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

Изменения

• Добавлен prop withFade, которой позволяет отображать или скрывать затенение по краям контейнера при горизонтальной прокрутке содержимого
• Доработаны стили комопнента для отображения затенения

[github-actions]

e2e tests

Playwright Report

[github-actions]

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

Commit 3dfe9d7

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook
• ✅ Docs beta

📦 Package ✅

yarn add @vkontakte/vkui@https://vkui-screenshot.hb.bizmrg.com/pull/9116/3dfe9d77078d1cce6dff94156d3491661ee149ff/pkg/@vkontakte/vkui/_pkg.tgz

Commit 3dfe9d7

[codecov]

Codecov Report

❌ Patch coverage is 57.89474% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.89%. Comparing base (9101b62) to head (3dfe9d7).
⚠️ Report is 5 commits behind head on master.

Files with missing lines	Patch %	Lines
...c/components/SubnavigationBar/SubnavigationBar.tsx	57.89%	16 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9116      +/-   ##
==========================================
- Coverage   95.96%   95.89%   -0.07%     
==========================================
  Files         455      455              
  Lines       26525    26562      +37     
  Branches     4923     4927       +4     
==========================================
+ Hits        25454    25471      +17     
- Misses       1071     1091      +20     

Flag	Coverage Δ
unittests	95.89% <57.89%> (-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.

[inomdzhon]

mask-image (см. https://caniuse.com/?search=mask-image), к сожалению, поддерживается только в современных браузерах

Если говорить о том, что это фича будет только для современных браузеров (a.k.a Graceful Degaration), то нужно сделать без лишних обёрток. Нужно будет доработать HorizontalScroll, чтобы можно было передавать класс туда, где сейчас styles.in.

И тогда всё будет очень просто:

<ScrollWrapper contentInClassName={style.inFade} />

.inFade {
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

[fm-designer]

Нам нужно несколько классов, для того чтобы отображать тень. Так как в зависисмости от позиции прокрутки, тень может быть:

• только слева
• только справа
• слева и справа

[inomdzhon]

В любом случае, я бы это сделал через текущую структуру на основе HorizontalScroll, без создания новой

Нам градиент прям большой нужен? Если делать размером в var(--vkui--size_base_padding_horizontal--regular) (оступы по бокам), то нет необходимости делать лишние вычисления

.inFade {
  mask-image: linear-gradient(to right, transparent 0, black var(--vkui--size_base_padding_horizontal--regular), black calc(100% - var(--vkui--size_base_padding_horizontal--regular)), transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

И всё, весь PR будет состоять только из styles.inFade и свойства withFade (хотя подумаю как иначе переименовать, на более семантичное)

Вот демо

2025-10-31.15.39.25.mov

[inomdzhon]

Решили отложить добавление fade в компонент – нужно для начала утвердить этот паттерн в дизайн-системе