feat(CustomScrollView): refactor CustomScrollView to the native approach

[EldarMuhamethanov]

• close [BREAKING CHANGE][CustomScrollView]: перейти на CSS-way решение для стилизации ползунка #7699

---

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

Описание

Необходимо сделать рефакторинг компонента CustomScrollView, а именно избавиться от отображения используя JS и сделать кастомизацию нативно с помощью css. Все нюансы расписаны в #7699

Изменения

• Реализовал кастомизацию скроллбара в компоненте CustomScrollView с помощью css свойств scrollbar-width, scrollbar-color, а также с помощью свойств с префиксом webkit для скролла.
• Выпилил лишний код и компоненты
• Выпил свойства CustomScrollView: windowResize(так как теперь оно бессмысленно), boxRef(так как теперь можно использовать getRootRef), autoHideScrollbar и autoHideScrollbarDelay(так как с текущей реализацией реализовать их невозможно)

Release notes

BREAKING CHANGE

• CustomScrollView:
  • так как дизайн не документирует поведение ползунка и полосы прокрутки, было решено перейти на использование системного поведения и тем самым облегчить компонент за счёт стилизации прокрутки полностью через CSS (Firefox < 64 стилизация останется браузерной). Если по какой-то причине вам всё же нужна JS-реализация, то советуем присмотреться к готовой библиотеке react-custom-scrollbars или к другим альтернативам.
  • удалены свойства windowResize, autoHideScrollbar, autoHideScrollbar.

    <CustomScrollView
      className={"className"}
    - windowResize
    - autoHideScrollbar
    - autoHideScrollbarDelay={1000}
      enableHorizontalScroll
    >
    ...
    </CustomScrollView>

  • удалено свойство boxRef, вместо него можно использовать свойство getRootRef

    <CustomScrollView
      className={"className"}
    - boxRef={ref}
    + getRootRef={ref}
      enableHorizontalScroll
    >
    ...
    </CustomScrollView>

  • добавлено свойство scrollbarHidden для скрытия скроллбара.
• CustomSelect: удалены свойства autoHideScrollbar, autoHideScrollbar.

  <CustomSelect
    id="select-type-select-id"
    value={selectType}
    placeholder="Не задан"
    options={selectTypes}
  - autoHideScrollbar
  - autoHideScrollbarDelay={1500}
    onChange={(e) => setSelectType(e.target.value)}
  />

• ChipsSelect: удалены свойства autoHideScrollbar, autoHideScrollbar.

  <ChipsSelect
    id="colors"
    value={selectedColors}
    onChange={setSelectedColors}
    options={colors}
  - autoHideScrollbar
  - autoHideScrollbarDelay={1500}
    placeholder="Не выбраны"
    creatable="Добавить цвет"
    allowClearButton={true}
  />

• Select: удалены свойства autoHideScrollbar, autoHideScrollbar.

  <Select
    id="select-type-select-id"
    value={selectType}
    placeholder="Не задан"
    options={selectTypes}
  - autoHideScrollbar
  - autoHideScrollbarDelay={1500}
    onChange={(e) => setSelectType(e.target.value)}
  />

[codesandbox-ci]

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.

[github-actions]

size-limit report 📦

Path	Size
JS	380.14 KB (-1.59% 🔽)
JS (gzip)	115.33 KB (-1.32% 🔽)
JS (brotli)	94.94 KB (-1.08% 🔽)
JS import Div (tree shaking)	1.46 KB (0%)
CSS	331.84 KB (-0.43% 🔽)
CSS (gzip)	41.59 KB (-0.45% 🔽)
CSS (brotli)	32.95 KB (-0.48% 🔽)

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit f76618e

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.08%. Comparing base (975878d) to head (f76618e).
Report is 27 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7703      +/-   ##
==========================================
- Coverage   95.14%   95.08%   -0.07%     
==========================================
  Files         384      376       -8     
  Lines       11354    11071     -283     
  Branches     3724     3674      -50     
==========================================
- Hits        10803    10527     -276     
+ Misses        551      544       -7     

Flag	Coverage Δ
unittests	95.08% <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.

[inomdzhon]

---

Замени плиз в демкках, в частности в Storybook, стили на контейнер на вот эти:

- width: 600px;
- height: 300px;
+ width:'100%';
+ height:'100%';
+ maxWidth: 600px;
+ maxHeight: 300px;

А то на мобиле норм не глянуть из-за width: 600px

[egorprnn]

сейчас в хроме, когда убираем ховер с ползунка он не возвращается в первоначальный размер, восстановление происходит только после того как он полностью пропадает через время, так и задумано?

[EldarMuhamethanov]

сейчас в хроме, когда убираем ховер с ползунка он не возвращается в первоначальный размер, восстановление происходит только после того как он полностью пропадает через время, так и задумано?

Странно, у меня в хроме нет такого поведения. Можешь скинуть видео воспроизведения?

[egorprnn]

хм, но кажется на макет это норм поведение, штатная полоска в хроме также себя ведет

2024-10-08.00.17.30.mov

[andrey-medvedev-vk]

👏

[inomdzhon]

Note

обновил Realese Note – добавил инфу про альтернативное решение

[qurle]

Да, мне было страшно
Но я это сделал