From 91ffdf4b6f5f0d53b7c27cb0ff0ec983cc60789a Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Mon, 2 Sep 2024 18:53:41 +0300
Subject: [PATCH] fix(ImageBase): children position absolute (#7511)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

children стал вываливаться из ImageBase
---
 .../src/components/Image/Image.e2e-playground.tsx |  4 ++++
 .../src/components/ImageBase/ImageBase.module.css | 15 +++++++++++++--
 .../vkui/src/components/ImageBase/ImageBase.tsx   |  2 +-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/vkui/src/components/Image/Image.e2e-playground.tsx b/packages/vkui/src/components/Image/Image.e2e-playground.tsx
index 76c1f2aea6..0060da71e3 100644
--- a/packages/vkui/src/components/Image/Image.e2e-playground.tsx
+++ b/packages/vkui/src/components/Image/Image.e2e-playground.tsx
@@ -97,6 +97,10 @@ export const ImagePlayground = (props: ComponentPlaygroundProps) => {
           borderRadius: ['s'],
           borderEndEndRadius: ['l'],
         },
+        {
+          src: [base64Image],
+          children: ['CH'],
+        },
       ]}
     >
       {(props: ImageProps) => <Image {...props} />}
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.module.css b/packages/vkui/src/components/ImageBase/ImageBase.module.css
index ce53996250..c2b24e4310 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.module.css
+++ b/packages/vkui/src/components/ImageBase/ImageBase.module.css
@@ -16,14 +16,25 @@
   background-color: transparent;
 }
 
+.ImageBase__children,
 .ImageBase__border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_border);
   inset-inline-start: 0;
   inset-block-start: 0;
   inline-size: 100%;
   block-size: 100%;
+}
+
+.ImageBase__children {
+  display: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  border-radius: inherit;
+}
+
+.ImageBase__border {
+  pointer-events: none;
+  z-index: var(--vkui_internal--z_index_image_base_border);
   box-sizing: border-box;
   transform-origin: left top;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
index 3cabeb4d72..f478d1e6cf 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.tsx
+++ b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -248,7 +248,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
           />
         )}
         {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}
-        {children}
+        {children && <div className={styles['ImageBase__children']}>{children}</div>}
         {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}
       </Clickable>
     </ImageBaseContext.Provider>