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

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

@@ -87,10 +87,9 @@ const WithPositionedComponents = () => {
         <Image size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
           {showContextMenu && (
             <Image.PositionedComponent
-              position={{
-                insetInlineEnd: '5%',
-                insetBlockStart: '5%',
-              }}
+              position="top-end"
+              horizontalIndent="l"
+              verticalIndent="l"
               visibility={contextMenuOpened ? 'always' : contextMenuVisibility}
             >
               <ContextMenu onShownChange={setContextMenuOpened} />

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

@@ -10,6 +10,7 @@ import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay
 import {
   ImageBasePositionedComponent,
   type ImageBasePositionedComponentProps,
+  type PositionedComponentIndentation,
   type PositionedComponentPlacement,
   type PositionedComponentPosition,
 } from './ImageBasePositionedComponent/ImageBasePositionedComponent';
@@ -27,6 +28,7 @@ export type {
   ImageBasePositionedComponentProps,
   PositionedComponentPlacement,
   PositionedComponentPosition,
+  PositionedComponentIndentation,
 };
 
 export {

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

@@ -6,46 +6,105 @@
   inset-inline-end: var(--vkui_internal--PositionedComponent_inset_inline_end, initial);
   inset-block-start: var(--vkui_internal--PositionedComponent_inset_block_start, initial);
   inset-block-end: var(--vkui_internal--PositionedComponent_inset_block_end, initial);
+
+  --vkui_internal--PositionedComponent_horizontal_indent: 0;
+  --vkui_internal--PositionedComponent_vertical_indent: 0;
+}
+
+.PositionedComponent--horizontalIndent-xs {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_xs);
+}
+
+.PositionedComponent--horizontalIndent-s {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_s);
+}
+
+.PositionedComponent--horizontalIndent-m {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_m);
+}
+
+.PositionedComponent--horizontalIndent-l {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_l);
+}
+
+.PositionedComponent--horizontalIndent-xl {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_xl);
+}
+
+.PositionedComponent--horizontalIndent-2xl {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_2xl);
+}
+
+.PositionedComponent--horizontalIndent-3xl {
+  --vkui_internal--PositionedComponent_horizontal_indent: var(--vkui--spacing_size_3xl);
+}
+
+.PositionedComponent--verticalIndent-xs {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_xs);
+}
+
+.PositionedComponent--verticalIndent-s {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_s);
+}
+
+.PositionedComponent--verticalIndent-m {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_m);
+}
+
+.PositionedComponent--verticalIndent-l {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_l);
+}
+
+.PositionedComponent--verticalIndent-xl {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_xl);
+}
+
+.PositionedComponent--verticalIndent-2xl {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_2xl);
+}
+
+.PositionedComponent--verticalIndent-3xl {
+  --vkui_internal--PositionedComponent_vertical_indent: var(--vkui--spacing_size_3xl);
 }
 
 .PositionedComponent--hidden {
   opacity: 0;
 }
 
 .PositionedComponent--position-topStart {
-  inset-inline-start: 0;
-  inset-block-start: 0;
+  inset-inline-start: var(--vkui_internal--PositionedComponent_horizontal_indent);
+  inset-block-start: var(--vkui_internal--PositionedComponent_vertical_indent);
 }
 
 .PositionedComponent--position-top {
   inset-inline-start: 50%;
-  inset-block-start: 0;
+  inset-block-start: var(--vkui_internal--PositionedComponent_vertical_indent);
   transform: translateX(-50%);
 }
 
 .PositionedComponent--position-topEnd {
-  inset-inline-end: 0;
-  inset-block-start: 0;
+  inset-inline-end: var(--vkui_internal--PositionedComponent_horizontal_indent);
+  inset-block-start: var(--vkui_internal--PositionedComponent_vertical_indent);
 }
 
 .PositionedComponent--position-bottomStart {
-  inset-inline-start: 0;
-  inset-block-end: 0;
+  inset-inline-start: var(--vkui_internal--PositionedComponent_horizontal_indent);
+  inset-block-end: var(--vkui_internal--PositionedComponent_vertical_indent);
 }
 
 .PositionedComponent--position-bottom {
   inset-inline-start: 50%;
-  inset-block-end: 0;
+  inset-block-end: var(--vkui_internal--PositionedComponent_vertical_indent);
   transform: translateX(-50%);
 }
 
 .PositionedComponent--position-bottomEnd {
-  inset-block-end: 0;
-  inset-inline-end: 0;
+  inset-block-end: var(--vkui_internal--PositionedComponent_vertical_indent);
+  inset-inline-end: var(--vkui_internal--PositionedComponent_horizontal_indent);
 }
 
 .PositionedComponent--position-middleStart {
-  inset-inline-start: 0;
+  inset-inline-start: var(--vkui_internal--PositionedComponent_horizontal_indent);
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
@@ -57,7 +116,7 @@
 }
 
 .PositionedComponent--position-middleEnd {
-  inset-inline-end: 0;
+  inset-inline-end: var(--vkui_internal--PositionedComponent_horizontal_indent);
   inset-block-start: 50%;
   transform: translateY(-50%);
 }

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

@@ -3,6 +3,7 @@ import { baselineComponent } from '../../../testing/utils';
 import { Image } from '../../Image/Image';
 import {
   ImageBasePositionedComponent,
+  PositionedComponentIndentation,
   PositionedComponentPlacement,
 } from './ImageBasePositionedComponent';
 import styles from './ImageBasePositionedComponent.module.css';
@@ -88,6 +89,46 @@ describe(ImageBasePositionedComponent, () => {
     expect(screen.getByTestId('component')).toHaveClass(styles['PositionedComponent--hidden']);
   });
 
+  it('check visibility on image hover without use Image', async () => {
+    const containerRef: React.RefObject<HTMLDivElement> = {
+      current: null,
+    };
+    render(
+      <>
+        <div ref={containerRef}>
+          <ImageBasePositionedComponent
+            data-testid="component"
+            visibility="on-image-hover"
+            containerRef={containerRef}
+            position="top"
+          />
+        </div>
+      </>,
+    );
+
+    expect(screen.getByTestId('component')).toHaveClass(styles['PositionedComponent--hidden']);
+
+    fireEvent(
+      containerRef.current!,
+      new MouseEvent('mouseover', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(screen.getByTestId('component')).not.toHaveClass(styles['PositionedComponent--hidden']);
+
+    fireEvent(
+      containerRef.current!,
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(screen.getByTestId('component')).toHaveClass(styles['PositionedComponent--hidden']);
+  });
+
   const placementFixtures = Object.entries({
     'top-start': styles['PositionedComponent--position-topStart'],
     'top': styles['PositionedComponent--position-top'],
@@ -107,4 +148,102 @@ describe(ImageBasePositionedComponent, () => {
     render(<ImageBasePositionedComponent data-testid="component" position={placement} />);
     expect(screen.getByTestId('component')).toHaveClass(className);
   });
+
+  const horizontalIndentationFixtures = Object.entries({
+    'xs': styles['PositionedComponent--horizontalIndent-xs'],
+    's': styles['PositionedComponent--horizontalIndent-s'],
+    'm': styles['PositionedComponent--horizontalIndent-m'],
+    'l': styles['PositionedComponent--horizontalIndent-l'],
+    'xl': styles['PositionedComponent--horizontalIndent-xl'],
+    '2xl': styles['PositionedComponent--horizontalIndent-2xl'],
+    '3xl': styles['PositionedComponent--horizontalIndent-3xl'],
+  }).map(([indent, className]) => ({
+    indent: indent as Exclude<PositionedComponentIndentation, string | number>,
+    className,
+  }));
+
+  it.each(horizontalIndentationFixtures)(
+    'should have horizontal indentation className %j',
+    ({ indent, className }) => {
+      render(
+        <ImageBasePositionedComponent
+          data-testid="component"
+          position="top"
+          horizontalIndent={indent}
+        />,
+      );
+      expect(screen.getByTestId('component')).toHaveClass(className);
+    },
+  );
+
+  const verticalIndentationFixtures = Object.entries({
+    'xs': styles['PositionedComponent--verticalIndent-xs'],
+    's': styles['PositionedComponent--verticalIndent-s'],
+    'm': styles['PositionedComponent--verticalIndent-m'],
+    'l': styles['PositionedComponent--verticalIndent-l'],
+    'xl': styles['PositionedComponent--verticalIndent-xl'],
+    '2xl': styles['PositionedComponent--verticalIndent-2xl'],
+    '3xl': styles['PositionedComponent--verticalIndent-3xl'],
+  }).map(([indent, className]) => ({
+    indent: indent as Exclude<PositionedComponentIndentation, string | number>,
+    className,
+  }));
+
+  it.each(verticalIndentationFixtures)(
+    'should have vertical indentation className %j',
+    ({ indent, className }) => {
+      render(
+        <ImageBasePositionedComponent
+          data-testid="component"
+          position="top"
+          verticalIndent={indent}
+        />,
+      );
+      expect(screen.getByTestId('component')).toHaveClass(className);
+    },
+  );
+
+  it('check number indentation', () => {
+    render(
+      <ImageBasePositionedComponent
+        data-testid="component"
+        position="top"
+        verticalIndent={10}
+        horizontalIndent={15}
+      />,
+    );
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--PositionedComponent_horizontal_indent'),
+    ).toBe('15px');
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--PositionedComponent_vertical_indent'),
+    ).toBe('10px');
+  });
+
+  it('check string indentation', () => {
+    render(
+      <ImageBasePositionedComponent
+        data-testid="component"
+        position="top"
+        verticalIndent="5%"
+        horizontalIndent="10%"
+      />,
+    );
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--PositionedComponent_horizontal_indent'),
+    ).toBe('10%');
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--PositionedComponent_vertical_indent'),
+    ).toBe('5%');
+  });
 });