fix(ImageBase): children position absolute (#7511)

children стал вываливаться из ImageBase
VKCOM · Sep 2, 2024 · 91ffdf4 · 91ffdf4
1 parent dd77217
commit 91ffdf4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>