Hide ImageBase__img when img is loaded

packages/vkui/src/components/Avatar/Readme.md

@@ -65,7 +65,7 @@ const OthersFeatures = () => {
       >
         {[16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96].map((size) => (
           <Avatar
-            key={size}
+            key={`${size}-${useInitials}`}
             size={size}
             src={useInitials ? undefined : getAvatarUrl('user_id34')}
             gradientColor={gradientColor}

packages/vkui/src/components/ImageBase/ImageBase.e2e-playground.tsx

@@ -0,0 +1,45 @@
+import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';
+import { ImageBase, type ImageBaseProps } from './ImageBase';
+
+const base64Image =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAC4jAAAuIwF4pT92AAAA+' +
+  '0lEQVR4nO3cwQmAMBQFQSP2Ze1WFltwURFhpoBHWP45Y865cM369QP+RKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxge2' +
+  'xpHI9NvWHu9zdcViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFY' +
+  'gViBWIFYgViBWIFYgViBWIFYgViBWIFYgVjB8RH2dywrECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxArECsQKxApOni4IwwZ+iSIAAAAA' +
+  'SUVORK5CYII=';
+
+export const ImageWithParentWithBorderRadius = (props: ComponentPlaygroundProps) => (
+  <ComponentPlayground
+    {...props}
+    propSets={[
+      {
+        size: [72],
+        src: [base64Image],
+      },
+    ]}
+  >
+    {(props: ImageBaseProps) => (
+      <div
+        style={{
+          margin: '20px',
+          width: '72px',
+          height: '72px',
+          borderRadius: '8px',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        {/* Специально оборачиваем в провайдер, чтобы фон ImageBase бы темныи и выглядывал
+         /* из-за img если img не полностью перекрывает ImageBase
+          */}
+        <AppearanceProvider value="dark">
+          <ImageBase
+            {...props}
+            style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
+          />
+        </AppearanceProvider>
+      </div>
+    )}
+  </ComponentPlayground>
+);

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

@@ -0,0 +1,23 @@
+import { test } from '@vkui-e2e/test';
+import { Platform } from '../../lib/platform';
+import { ImageWithParentWithBorderRadius } from './ImageBase.e2e-playground';
+
+test.describe('ImageBase', () => {
+  test.use({
+    onlyForPlatforms: [Platform.ANDROID],
+    onlyForAppearances: ['light'],
+  });
+
+  test('Parent with border-radius: Image does not have visible corners from Image background', async ({
+    page,
+    mount,
+    expectScreenshotClippedToContent,
+    componentPlaygroundProps,
+  }) => {
+    // есть неприятный эффект, где видно край фона в одном из углов обрезанных с помощью border-radius и overflow: hidden у родителя
+    // сейчас мы прячем фон после загрузки изображения, чтобы он не выглядывал, а тут проверяем, что такой ситуации больше не происходит.
+    await mount(<ImageWithParentWithBorderRadius {...componentPlaygroundProps} />);
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 500)));
+    await expectScreenshotClippedToContent();
+  });
+});

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

@@ -11,6 +11,7 @@
   isolation: isolate;
 }
 
+.ImageBase--loaded,
 .ImageBase--transparent-background {
   background-color: transparent;
 }

packages/vkui/src/components/ToolButton/ToolButton.e2e-playground.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Icon20Add, Icon24Add } from '@vkontakte/icons';
 import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';

packages/vkui/src/components/ToolButton/ToolButton.e2e.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { test } from '@vkui-e2e/test';
 import { ToolButtonPlayground } from './ToolButton.e2e-playground';
 

packages/vkui/src/components/ToolButton/ToolButton.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Icon20Add, Icon24Add } from '@vkontakte/icons';
 import { baselineComponent } from '../../testing/utils';

packages/vkui/src/components/ToolButton/ToolButton.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import {

packages/vkui/src/styles/constants.css

@@ -17,7 +17,7 @@
     var(--vkui--color_stroke_accent);
   /**
    * [a11y][windows high contrast mode]
-   * 
+   *
    * windows compatible outline reset
    * @see https://benmyers.dev/blog/whcm-outlines/
    */