feat(Popover, Tooltip): add prop strategy to positioning element #8017

EldarMuhamethanov · 2024-11-29T13:44:28Z

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

Описание

Сейчас всплывающие элементы позиционируются с помощью position: 'fixed'. Но библиотеки floating-ui позвояет позицонировать элемент с помощью absolute. Это можно сделать с помощью свойства strategy: 'fixed' | 'absolute'. Нужно добавить возможность прокинуть свойство strategy снаружи.

Кейс, в котором понадобился бы такой функционал. То есть когда якорный элемент может перемещаться по экрану

7244975311484.mp4

Изменения

Добавил возможность прокинуть свойство strategy в Popover и Tooltip
Сделал рефакторинг SliderThumb - переиcпользовал там компонент Tooltip

Release notes

Улучшения

Popover: Добавлено свойство strategy, которое позволяет изменять способ позиционирования элемента
Tooltip: Добавлено свойство strategy, которое позволяет изменять способ позиционирования элемента

github-actions · 2024-11-29T13:46:50Z

size-limit report 📦

Path	Size
JS	385.6 KB (+0.03% 🔺)
JS (gzip)	116.61 KB (+0.03% 🔺)
JS (brotli)	96.07 KB (+0.12% 🔺)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	337.16 KB (0%)
CSS (gzip)	42.77 KB (0%)
CSS (brotli)	33.71 KB (0%)

codesandbox-ci · 2024-11-29T13:49:07Z

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 · 2024-11-29T13:50:28Z

e2e tests

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

codecov · 2024-11-29T13:50:44Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.50%. Comparing base (625a8d0) to head (992fc96).
Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #8017   +/-   ##
=======================================
  Coverage   95.49%   95.50%           
=======================================
  Files         393      393           
  Lines       11199    11216   +17     
  Branches     3711     3716    +5     
=======================================
+ Hits        10695    10712   +17     
  Misses        504      504

Flag	Coverage Δ
unittests	`95.50% <100.00%> (+<0.01%)`	⬆️

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.

github-actions · 2024-11-29T13:50:47Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 992fc96

andrey-medvedev-vk

Отличная работа 👍

Классный рефакторинг SliderThumb, давно пора. 💠
Но заметны отличия от прошлого поведения.
Было бы лучше вернуть именно поведение как было.

packages/vkui/src/components/Slider/SliderThumb/SliderThumb.tsx

.../__image_snapshots__/slider-with-tooltip-slider-with-tooltip-vkcom-chromium-light-1-snap.png

andrey-medvedev-vk

🔥

# Conflicts: # packages/vkui/src/components/Popover/Popover.test.tsx # packages/vkui/src/components/Popover/Popover.tsx

packages/vkui/src/components/Slider/SliderThumb/SliderThumb.tsx

packages/vkui/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

inomdzhon

🙏

нужно будет Release notes отредактировать

и странно, что скриншоты Slider не упали после реверта SliderThumb 🤔

EldarMuhamethanov · 2024-12-04T13:19:40Z

и странно, что скриншоты Slider не упали после реверта SliderThumb 🤔

Это в целом логично, так как по сути в логике ничего не поменялось, те же отступы и тд. Вообще сейчас скришоты одинаковые, но из-за того, что они единожды были изменены в этом pr, поэтому показывается, будто бы они изменены

vkcom-publisher · 2024-12-20T12:59:24Z

✅ v7.1.0 🎉

EldarMuhamethanov added 2 commits November 29, 2024 16:30

feat(Popover, Tooltip): add prop strategy to positioning element

61ae7f9

refactor(SliderThumb): use Tooltip component

a96d05c

EldarMuhamethanov added type:feature cmp:slider cmp:tooltip cmp:popover Бывший dropdown labels Nov 29, 2024

EldarMuhamethanov added this to the v7.1.0 milestone Nov 29, 2024

EldarMuhamethanov self-assigned this Nov 29, 2024

EldarMuhamethanov requested a review from a team as a code owner November 29, 2024 13:44

test(SliderThumb): update screenshots

9d045ef

andrey-medvedev-vk reviewed Nov 29, 2024

View reviewed changes

packages/vkui/src/components/Slider/SliderThumb/SliderThumb.tsx Outdated Show resolved Hide resolved

.../__image_snapshots__/slider-with-tooltip-slider-with-tooltip-vkcom-chromium-light-1-snap.png Outdated Show resolved Hide resolved

feat(Popover,Tooltip): add props overflowPadding and flipOptions

1230b39

andrey-medvedev-vk previously approved these changes Dec 2, 2024

View reviewed changes

EldarMuhamethanov added 2 commits December 4, 2024 10:33

Merge branch 'master' into e.muhamethanov/add-popover-strategy-prop

13eb5a5

# Conflicts: # packages/vkui/src/components/Popover/Popover.test.tsx # packages/vkui/src/components/Popover/Popover.tsx

fix(usePopover): resolve conflicts after merge

ea3a58e

EldarMuhamethanov dismissed andrey-medvedev-vk’s stale review via ea3a58e December 4, 2024 07:36

andrey-medvedev-vk previously approved these changes Dec 4, 2024

View reviewed changes

inomdzhon reviewed Dec 4, 2024

View reviewed changes

packages/vkui/src/components/Slider/SliderThumb/SliderThumb.tsx Outdated Show resolved Hide resolved

packages/vkui/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts Outdated Show resolved Hide resolved

fix(SliderThumb): return SlideThumb tooltip realization

992fc96

EldarMuhamethanov dismissed andrey-medvedev-vk’s stale review via 992fc96 December 4, 2024 11:49

andrey-medvedev-vk approved these changes Dec 4, 2024

View reviewed changes

inomdzhon approved these changes Dec 4, 2024

View reviewed changes

EldarMuhamethanov removed the cmp:slider label Dec 4, 2024

EldarMuhamethanov merged commit 507a00d into master Dec 4, 2024
28 checks passed

EldarMuhamethanov deleted the e.muhamethanov/add-popover-strategy-prop branch December 4, 2024 13:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Popover, Tooltip): add prop strategy to positioning element #8017

feat(Popover, Tooltip): add prop strategy to positioning element #8017

EldarMuhamethanov commented Nov 29, 2024 •

edited

Loading

github-actions bot commented Nov 29, 2024 •

edited

Loading

codesandbox-ci bot commented Nov 29, 2024 •

edited

Loading

github-actions bot commented Nov 29, 2024 •

edited

Loading

codecov bot commented Nov 29, 2024 •

edited

Loading

github-actions bot commented Nov 29, 2024 •

edited

Loading

andrey-medvedev-vk left a comment

andrey-medvedev-vk left a comment

inomdzhon left a comment

EldarMuhamethanov commented Dec 4, 2024

vkcom-publisher commented Dec 20, 2024

feat(Popover, Tooltip): add prop strategy to positioning element #8017

feat(Popover, Tooltip): add prop strategy to positioning element #8017

Conversation

EldarMuhamethanov commented Nov 29, 2024 • edited Loading

Описание

Изменения

Release notes

Улучшения

github-actions bot commented Nov 29, 2024 • edited Loading

size-limit report 📦

codesandbox-ci bot commented Nov 29, 2024 • edited Loading

github-actions bot commented Nov 29, 2024 • edited Loading

e2e tests

codecov bot commented Nov 29, 2024 • edited Loading

Codecov Report

github-actions bot commented Nov 29, 2024 • edited Loading

👀 Docs deployed

andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

inomdzhon left a comment

Choose a reason for hiding this comment

EldarMuhamethanov commented Dec 4, 2024

vkcom-publisher commented Dec 20, 2024

EldarMuhamethanov commented Nov 29, 2024 •

edited

Loading

github-actions bot commented Nov 29, 2024 •

edited

Loading

codesandbox-ci bot commented Nov 29, 2024 •

edited

Loading

github-actions bot commented Nov 29, 2024 •

edited

Loading

codecov bot commented Nov 29, 2024 •

edited

Loading

github-actions bot commented Nov 29, 2024 •

edited

Loading