feat(ImageBasePositionedComponent): add subcomponent to positioning component in Image by EldarMuhamethanov · Pull Request #7166 · VKCOM/VKUI

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	389.89 KB (+0.75% 🔺)
JS (gzip)	117.81 KB (+0.62% 🔺)
JS (brotli)	96.97 KB (+0.52% 🔺)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	340.57 KB (+1.1% 🔺)
CSS (gzip)	42.16 KB (+0.85% 🔺)
CSS (brotli)	33.6 KB (+0.84% 🔺)

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

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

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

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 4ab0a62

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

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.54%. Comparing base (334e5b2) to head (4ab0a62).
Report is 6 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7166      +/-   ##
==========================================
+ Coverage   95.51%   95.54%   +0.02%     
==========================================
  Files         396      398       +2     
  Lines       11235    11306      +71     
  Branches     3720     3734      +14     
==========================================
+ Hits        10731    10802      +71     
  Misses        504      504

Flag	Coverage Δ
unittests	`95.54% <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

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

andrey-medvedev-vk

Шикарная работа 👏

…ove absolute positioning

inomdzhon

сорри, пропустил последний моментик((

packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css

inomdzhon

🙏 👍 👏

   🚀

🔥🔥🔥 🔥

andrey-medvedev-vk

✨

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

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

537bc0e

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

SevereCloud requested a review from mendrew November 21, 2024 08:34

andrey-medvedev-vk previously approved these changes Nov 26, 2024

View reviewed changes

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

EldarMuhamethanov added 3 commits December 4, 2024 13:19

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

4350ce5

fix(ImageBase): refactor onMouseOver/Out Subscription

c8529ee

fix(ImageBase): fix types

9a5aa53

EldarMuhamethanov dismissed andrey-medvedev-vk’s stale review via 9a5aa53 December 4, 2024 11:30

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

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

View reviewed changes

EldarMuhamethanov added 2 commits December 10, 2024 17:40

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

8f200c8

fix(ImageBaseFloatElement): rename prop position to placement and rem…

6ae2521

…ove absolute positioning

EldarMuhamethanov dismissed andrey-medvedev-vk’s stale review via 6ae2521 December 10, 2024 14:57

inomdzhon reviewed Dec 10, 2024

View reviewed changes

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

fix(ImageBaseFloatElement): remove BEM

4ab0a62

EldarMuhamethanov requested review from andrey-medvedev-vk and inomdzhon December 10, 2024 16:54

inomdzhon approved these changes Dec 10, 2024

View reviewed changes

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

View reviewed changes

EldarMuhamethanov merged commit 2789dd1 into master Dec 11, 2024

EldarMuhamethanov deleted the e.muhamethanov/6924/image-overlay-components branch December 11, 2024 07:57

EldarMuhamethanov mentioned this pull request Apr 3, 2025

[v5][Feature]: Кастомные оверлеи для компонента Image #3552

Closed

SevereCloud mentioned this pull request Dec 5, 2025

fix(ImageBase): rm ref #9258

Merged

Conversation

EldarMuhamethanov commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Описание

Изменения

Release notes

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

Uh oh!

github-actions bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

codesandbox-ci bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

e2e tests

Uh oh!

github-actions bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👀 Docs deployed

Uh oh!

codecov bot commented Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mendrew left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mendrew left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mendrew left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

Uh oh!

inomdzhon left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

inomdzhon left a comment

Choose a reason for hiding this comment

Uh oh!

andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

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 left a comment •

edited

Loading