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

…ove absolute positioning
VKCOM · Dec 10, 2024 · 6ae2521 · 6ae2521
1 parent 8f200c8
commit 6ae2521
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 84 deletions.
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
@@ -109,7 +109,7 @@ const WithFloatElements = () => {
         <Image size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
           {showContextMenu && (
             <Image.FloatElement
-              position="top-end"
+              placement="top-end"
               inlineIndent="l"
               blockIndent="l"
               visibility={contextMenuOpened ? 'always' : contextMenuVisibility}

diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -12,7 +12,6 @@ import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/Image
 import {
   type FloatElementIndentation,
   type FloatElementPlacement,
-  type FloatElementPosition,
   ImageBaseFloatElement,
   type ImageBaseFloatElementProps,
 } from './ImageBaseFloatElement/ImageBaseFloatElement';
@@ -30,7 +29,6 @@ export type {
   ImageBaseContextProps,
   ImageBaseFloatElementProps,
   FloatElementPlacement,
-  FloatElementPosition,
   FloatElementIndentation,
 };
 

diff --git a/...ages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css b/...ages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css
@@ -2,10 +2,6 @@
   position: absolute;
   z-index: var(--vkui_internal--z_index_image_base_positioned_element);
   transition: opacity 0.3s ease-in-out;
-  inset-inline-start: var(--vkui_internal--FloatElement_inset_inline_start, initial);
-  inset-inline-end: var(--vkui_internal--FloatElement_inset_inline_end, initial);
-  inset-block-start: var(--vkui_internal--FloatElement_inset_block_start, initial);
-  inset-block-end: var(--vkui_internal--FloatElement_inset_block_end, initial);
 
   --vkui_internal--FloatElement_horizontal_indent: 0;
   --vkui_internal--FloatElement_vertical_indent: 0;

diff --git a/...ges/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx b/...ges/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx
@@ -60,10 +60,9 @@ type Story = StoryObj<ImageBaseFloatElementProps>;
 
 export const Playground: Story = {
   args: {
-    position: {
-      insetInlineEnd: '5%',
-      insetBlockStart: '5%',
-    },
+    placement: 'top-start',
+    blockIndent: '5%',
+    inlineIndent: '5%',
     children: <ContextMenu />,
   },
 };
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx
@@ -11,56 +11,14 @@ import styles from './ImageBaseFloatElement.module.css';
 describe(ImageBaseFloatElement, () => {
   baselineComponent(ImageBaseFloatElement);
 
-  it('check component position', () => {
-    render(
-      <ImageBaseFloatElement
-        data-testid="component"
-        position={{
-          insetBlockStart: '10px',
-          insetBlockEnd: '10px',
-          insetInlineEnd: '20px',
-          insetInlineStart: '20px',
-        }}
-      />,
-    );
-
-    expect(screen.getByTestId('component')).not.toHaveClass(styles['FloatElement--hidden']);
-
-    expect(
-      screen
-        .getByTestId('component')
-        .style.getPropertyValue('--vkui_internal--FloatElement_inset_block_start'),
-    ).toBe('10px');
-    expect(
-      screen
-        .getByTestId('component')
-        .style.getPropertyValue('--vkui_internal--FloatElement_inset_block_end'),
-    ).toBe('10px');
-    expect(
-      screen
-        .getByTestId('component')
-        .style.getPropertyValue('--vkui_internal--FloatElement_inset_inline_start'),
-    ).toBe('20px');
-    expect(
-      screen
-        .getByTestId('component')
-        .style.getPropertyValue('--vkui_internal--FloatElement_inset_inline_end'),
-    ).toBe('20px');
-  });
-
   it('check visibility on image hover', async () => {
     render(
       <>
         <Image size={96} src="test" alt="Приложение шторм онлайн" data-testid="image">
           <ImageBaseFloatElement
             data-testid="component"
             visibility="on-hover"
-            position={{
-              insetBlockStart: '10px',
-              insetBlockEnd: '10px',
-              insetInlineEnd: '20px',
-              insetInlineStart: '20px',
-            }}
+            placement="top-start"
           />
         </Image>
       </>,
@@ -105,7 +63,7 @@ describe(ImageBaseFloatElement, () => {
   }));
 
   it.each(placementFixtures)('should have placement className %j', ({ placement, className }) => {
-    render(<ImageBaseFloatElement data-testid="component" position={placement} />);
+    render(<ImageBaseFloatElement data-testid="component" placement={placement} />);
     expect(screen.getByTestId('component')).toHaveClass(className);
   });
 
@@ -128,7 +86,7 @@ describe(ImageBaseFloatElement, () => {
     'should have horizontal indentation className %j',
     ({ indent, className }) => {
       render(
-        <ImageBaseFloatElement data-testid="component" position="top" inlineIndent={indent} />,
+        <ImageBaseFloatElement data-testid="component" placement="top" inlineIndent={indent} />,
       );
       expect(screen.getByTestId('component')).toHaveClass(className);
     },
@@ -152,7 +110,9 @@ describe(ImageBaseFloatElement, () => {
   it.each(verticalIndentationFixtures)(
     'should have vertical indentation className %j',
     ({ indent, className }) => {
-      render(<ImageBaseFloatElement data-testid="component" position="top" blockIndent={indent} />);
+      render(
+        <ImageBaseFloatElement data-testid="component" placement="top" blockIndent={indent} />,
+      );
       expect(screen.getByTestId('component')).toHaveClass(className);
     },
   );
@@ -161,7 +121,7 @@ describe(ImageBaseFloatElement, () => {
     render(
       <ImageBaseFloatElement
         data-testid="component"
-        position="top"
+        placement="top"
         blockIndent={10}
         inlineIndent={15}
       />,
@@ -183,7 +143,7 @@ describe(ImageBaseFloatElement, () => {
     render(
       <ImageBaseFloatElement
         data-testid="component"
-        position="top"
+        placement="top"
         blockIndent="5%"
         inlineIndent="10%"
       />,

diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx
@@ -20,13 +20,6 @@ export type FloatElementPlacement =
   | 'middle'
   | 'middle-end';
 
-export type FloatElementPosition = {
-  insetInlineStart?: React.CSSProperties['insetInlineStart'];
-  insetInlineEnd?: React.CSSProperties['insetInlineEnd'];
-  insetBlockStart?: React.CSSProperties['insetBlockStart'];
-  insetBlockEnd?: React.CSSProperties['insetBlockEnd'];
-};
-
 export type FloatElementIndentation =
   | '2xs'
   | 'xs'
@@ -80,7 +73,7 @@ export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HT
   /**
    * Позиция компонента относительно родителя
    */
-  position: FloatElementPlacement | FloatElementPosition;
+  placement: FloatElementPlacement;
   /**
    * Отступ компонента от края контейнера по горизонтали
    */
@@ -99,7 +92,7 @@ export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HT
 }
 
 export const ImageBaseFloatElement = ({
-  position,
+  placement,
   visibility = 'always',
   style,
   className,
@@ -136,19 +129,6 @@ export const ImageBaseFloatElement = ({
     [visibility],
   );
 
-  const positionStyle = React.useMemo(
-    () =>
-      typeof position === 'object'
-        ? {
-            '--vkui_internal--FloatElement_inset_inline_start': position.insetInlineStart,
-            '--vkui_internal--FloatElement_inset_inline_end': position.insetInlineEnd,
-            '--vkui_internal--FloatElement_inset_block_start': position.insetBlockStart,
-            '--vkui_internal--FloatElement_inset_block_end': position.insetBlockEnd,
-          }
-        : {},
-    [position],
-  );
-
   const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =
     React.useMemo(() => {
       const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(
@@ -170,14 +150,13 @@ export const ImageBaseFloatElement = ({
       {...restProps}
       style={{
         ...style,
-        ...positionStyle,
         ...inlineIndentStyle,
         ...blockIndentStyle,
       }}
       className={classNames(
         styles['FloatElement'],
         hidden && styles['FloatElement--hidden'],
-        typeof position === 'string' && positionPlacementClassNames[position],
+        positionPlacementClassNames[placement],
         inlineIndentClassName,
         blockIndentClassName,
         className,

diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
@@ -62,7 +62,6 @@ export type {
   ImageBaseOverlayProps,
   ImageBaseFloatElementProps,
   FloatElementPlacement,
-  FloatElementPosition,
   FloatElementIndentation,
 } from './components/ImageBase/ImageBase';