feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image #7166

EldarMuhamethanov · 2024-07-10T09:36:03Z

close [Feature][Image]: Сабкомпонент для абсолютного позиционирования элементов поверх изображения #6924

Unit-тесты
Документация фичи

Описание

Нужно добавить сабкомпонент для компонента Image для позиционированирования компонентов внутри Image.

Изменения

Добавил сабкомпонент ImageBaseFloatElement для абсолютного позиционирования компонентов в компоненте Image.
Добавил тесты для компонента
Добавил стори для компонента
Добавил использование компонента в документацию

Release notes

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

Image: Добавлен сабкомпонент Image.FloatElement для позиционирования компонента относительно картинки

…omponent in Image - Добавил сабкомпонент ImageBasePositionedComponent для абсолютного позиционирования компонентов в компоненте Image. - Добавил тесты для компонента - Добавил стори для компонента - Добавил использование компонента в документацию

github-actions · 2024-07-10T09:38:36Z

size-limit report 📦

Path	Size
JS	390.09 KB (+0.9% 🔺)
JS (gzip)	117.65 KB (+0.66% 🔺)
JS (brotli)	96.59 KB (+0.62% 🔺)
JS import Div (tree shaking)	1.46 KB (0%)
CSS	337.95 KB (+1.31% 🔺)
CSS (gzip)	42.19 KB (+0.93% 🔺)
CSS (brotli)	33.39 KB (+0.99% 🔺)

codesandbox-ci · 2024-07-10T09:39:49Z

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-07-10T09:42:05Z

e2e tests

Playwright Report

github-actions · 2024-07-10T09:42:17Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 537bc0e

codecov · 2024-07-10T09:43:29Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.17%. Comparing base (763daf7) to head (537bc0e).
Report is 84 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7166      +/-   ##
==========================================
+ Coverage   95.14%   95.17%   +0.02%     
==========================================
  Files         384      386       +2     
  Lines       11357    11426      +69     
  Branches     3727     3746      +19     
==========================================
+ Hits        10806    10875      +69     
  Misses        551      551

Flag	Coverage Δ
unittests	`95.17% <100.00%> (+0.02%)`	⬆️

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.

mendrew

Выглядит здорово.

Я так понимаю, что он сразу сделан с возможностью использовать несколько Image.PositionedComponent. 👍

Оставил пару комментариев.

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx

…ation from image

mendrew

Шикарно 🔥

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx

mendrew

👍

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx

inomdzhon · 2024-07-19T15:22:35Z

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx

+  React.useEffect(
+    function updateHiddenSubscribe() {
+      const wrapper = (containerRef && containerRef.current) || imageWrapperRef.current;
+      if (wrapper && visibility === 'on-image-hover') {
+        const onMouseOver = () => setHidden(false);
+        const onMouseOut = () => setHidden(true);
+
+        wrapper.addEventListener('mouseover', onMouseOver);
+        wrapper.addEventListener('mouseout', onMouseOut);
+
+        return () => {
+          wrapper.removeEventListener('mouseover', onMouseOver);
+          wrapper.removeEventListener('mouseout', onMouseOut);
+        };
+      }
+      return;
+    },
+    [visibility, imageWrapperRef, containerRef],
+  );


Не думал по поводу такой реализации?

<ImageBase src=""> <ImageBase.Overlay // можно без disableInteractive если хочется клик на весь блок disableInteractive > <ImageBase.OverlayFloatElement position="top-start"> <Button>Кнопка</Button> </ImageBase.OverlayFloatElement> </ImageBase.Overlay> </ImageBase>

разрешит непонятку по поводу совместного использования с ImageBase.Overlay, в целом идеологически будет корректней;

не нужно будет вещать события mouse, т.к. ImageBase.Overlay уже умеет в это – параметры visibility и containerRef можно будет удалить

Точно ли будет удобно пользоваться такой API. Для каждого элемента, надо будет создавать OverlayFloatElement обернутый в Overlay

@inomdzhon Попробовал реализовать через Overlay и понял, что будут проблемы, когда нужно будет спозиционировать несколько элементов на картинке, потому что overlay растягивается на весь размер картинки. И получается, что последний отрендеренный элемент перекроет другие и не появится при наведении на картинку

имеешь ввиду про вот такой кейс?

<ImageBase src=""> <ImageBase.Overlay // можно без disableInteractive если хочется клик на весь блок disableInteractive > <ImageBase.OverlayFloatElement position="top-start"> <Button>👍</Button> </ImageBase.OverlayFloatElement> <ImageBase.OverlayFloatElement position="top-start"> <Button>⚙️</Button> </ImageBase.OverlayFloatElement> </ImageBase.Overlay> </ImageBase>

если да, то это скорее вот так должно быть свёрстано

<ImageBase src=""> <ImageBase.Overlay // можно без disableInteractive если хочется клик на весь блок disableInteractive > <ImageBase.OverlayFloatElement position="top-start"> <Flex> <Flex.Item><Button>👍</Button></Flex.Item> <Flex.Item><Button>⚙️</Button></Flex.Item> </Flex> </ImageBase.OverlayFloatElement> </ImageBase.Overlay> </ImageBase>

да, так будет работать, но не во всех кейсах. Если понадобится сделать так, чтобы один элемент был виден всегда, а другой только при наведении на картинку. Тогда по идее верстка будет следующая:

<ImageBase src=""> <ImageBase.Overlay // можно без disableInteractive если хочется клик на весь блок disableInteractive visibility="on-hover" > <ImageBase.OverlayFloatElement position="top-start"> <Flex.Item><Button>👍</Button></Flex.Item> </ImageBase.OverlayFloatElement> </ImageBase.Overlay> <ImageBase.Overlay // можно без disableInteractive если хочется клик на весь блок disableInteractive visibility="always" > <ImageBase.OverlayFloatElement position="bottom-start"> <Flex.Item><Button>⚙️</Button></Flex.Item> </ImageBase.OverlayFloatElement> </ImageBase.Overlay> </ImageBase>

При этом второй элемент перекроет первый и первый не появится при наведении

Если понадобится сделать так, чтобы один элемент был виден всегда, а другой только при наведении на картинку.

@MrZillaGold у вас есть такой кейс?

Кстати, к этой задаче нужно подключить дизайн (@Zaycevq или @qurle) – на уровне дизайн-системы нужно зафиксировать поведение

@inomdzhon Обсудили с дизайном, могут быть кейсы с несколькими элементами

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx

# Conflicts: # packages/vkui/src/components/ImageBase/ImageBase.tsx

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

…image-hover' to 'on-hover'

…nt to block and inline

inomdzhon · 2024-08-30T09:05:17Z

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

+  /**
+   * Позиция компонента относительно родителя
+   */
+  position: FloatElementPlacement | FloatElementPosition;


что на счёт вместо FloatElementPosition использовать синтаксис <x> <y> + вынести это в отдельный параметрм offset? Выбираешь где будет элемент, а если нужно, добавляешь смещение

<ImageBaseFloatElement position="top" offset="5% 5%"> <Icon24Add /> </ImageBaseFloatElement> <ImageBaseFloatElement position="middle-start" offset="0 10px"> <Icon24Add /> </ImageBaseFloatElement>

или как в lib/floating/useFloatingMiddlewaresBootstrap/index.ts сделать два отдельных параметра offsetByMainAxis и offsetByCrossAxis

По сути у нас же есть свойства blockIndent и inlineIndent, которые позволяют устанавливать отступы. Как будто данного функционала должно хватить. Также свойства blockIndent и inlineIndent работают с токенами дизайн системы, что добавляет системности

EldarMuhamethanov added 2 commits July 10, 2024 11:21

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

9844cbd

EldarMuhamethanov requested a review from a team as a code owner July 10, 2024 09:36

mendrew reviewed Jul 15, 2024

View reviewed changes

EldarMuhamethanov added 5 commits July 16, 2024 09:26

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

2bdca6d

feat(ImageBasePositionedComponent): add placement to position component

07b86ea

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

029571d

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

5aba85c

fix(ImageBasePositionedComponent): add horizontal and vertical indent…

0b0237f

…ation from image

mendrew reviewed Jul 17, 2024

View reviewed changes

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx Outdated Show resolved Hide resolved

.../vkui/src/components/ImageBase/ImageBasePositionedComponent/ImageBasePositionedComponent.tsx Outdated Show resolved Hide resolved

feat(ImageBasePositionedComponent): add 2xs and 4xl size of indent

82269e2

mendrew previously approved these changes Jul 17, 2024

View reviewed changes

inomdzhon reviewed Jul 19, 2024

View reviewed changes

fix(ImageBasePositionedComponent): rewrite calculate indent logic

a23447e

EldarMuhamethanov dismissed mendrew’s stale review via a23447e July 21, 2024 16:44

EldarMuhamethanov added 3 commits July 22, 2024 10:46

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

f03330d

# Conflicts: # packages/vkui/src/components/ImageBase/ImageBase.tsx

fix(ImageBaseFloatElement): rename component

47a41a9

fix(ImageBaseFloatElement): fix test

ebf6926

vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Aug 7, 2024

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

de6a7e0

vkcom-publisher removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Aug 8, 2024

EldarMuhamethanov added 2 commits August 8, 2024 17:17

fix: rename PositionedComponent to FloatElement

2f3ec3c

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

3cba881

MrZillaGold reviewed Aug 13, 2024

View reviewed changes

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx Outdated Show resolved Hide resolved

MrZillaGold reviewed Aug 13, 2024

View reviewed changes

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx Outdated Show resolved Hide resolved

EldarMuhamethanov added 2 commits August 13, 2024 11:10

fix(ImageBaseFloatElement): remove containerRef props and rename 'on-…

9cee169

…image-hover' to 'on-hover'

fix(ImageBaseFloatElement): fix tests

1a15e9a

EldarMuhamethanov added 2 commits August 27, 2024 10:31

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

0ce252b

fix(ImageBaseFloatElement): rename props vertical and horizontal inde…

57a7753

…nt to block and inline

SevereCloud requested review from inomdzhon and MrZillaGold August 27, 2024 08:17

inomdzhon reviewed Aug 30, 2024

View reviewed changes

EldarMuhamethanov added 2 commits September 13, 2024 15:21

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

cc7d574

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

e7e5822

EldarMuhamethanov requested a review from inomdzhon September 19, 2024 07:57

vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Sep 26, 2024

inomdzhon mentioned this pull request Sep 26, 2024

[BREAKING CHANGE][Epic]: синхронизировать названия параметров с дизайном #7660

Closed

25 tasks

vkcom-publisher removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Sep 27, 2024

vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Oct 21, 2024

Merge branch 'master' into e.muhamethanov/6924/image-overlay-components

537bc0e

vkcom-publisher removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Oct 22, 2024

vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Nov 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image #7166

feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image #7166

EldarMuhamethanov commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

codesandbox-ci bot commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

codecov bot commented Jul 10, 2024 •

edited

Loading

mendrew left a comment

mendrew left a comment

mendrew left a comment

inomdzhon Jul 19, 2024 •

edited

Loading

EldarMuhamethanov Jul 22, 2024

EldarMuhamethanov Aug 7, 2024

inomdzhon Aug 27, 2024 •

edited

Loading

EldarMuhamethanov Aug 28, 2024

inomdzhon Aug 30, 2024

EldarMuhamethanov Sep 16, 2024

inomdzhon Aug 30, 2024

EldarMuhamethanov Sep 16, 2024

feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image #7166

Are you sure you want to change the base?

feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image #7166

Conversation

EldarMuhamethanov commented Jul 10, 2024 • edited Loading

Описание

Изменения

Release notes

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

github-actions bot commented Jul 10, 2024 • edited Loading

size-limit report 📦

codesandbox-ci bot commented Jul 10, 2024 • edited Loading

github-actions bot commented Jul 10, 2024 • edited Loading

e2e tests

github-actions bot commented Jul 10, 2024 • edited Loading

👀 Docs deployed

codecov bot commented Jul 10, 2024 • edited Loading

Codecov Report

mendrew left a comment

Choose a reason for hiding this comment

mendrew left a comment

Choose a reason for hiding this comment

mendrew left a comment

Choose a reason for hiding this comment

inomdzhon Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

EldarMuhamethanov Jul 22, 2024

Choose a reason for hiding this comment

EldarMuhamethanov Aug 7, 2024

Choose a reason for hiding this comment

inomdzhon Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

EldarMuhamethanov Aug 28, 2024

Choose a reason for hiding this comment

inomdzhon Aug 30, 2024

Choose a reason for hiding this comment

EldarMuhamethanov Sep 16, 2024

Choose a reason for hiding this comment

inomdzhon Aug 30, 2024

Choose a reason for hiding this comment

EldarMuhamethanov Sep 16, 2024

Choose a reason for hiding this comment

EldarMuhamethanov commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

codesandbox-ci bot commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

codecov bot commented Jul 10, 2024 •

edited

Loading

inomdzhon Jul 19, 2024 •

edited

Loading

inomdzhon Aug 27, 2024 •

edited

Loading