fix(FilePreview): fix visual of actions

gravity-ui · Jan 23, 2025 · dfe9c58 · dfe9c58
1 parent 3f580e1
commit dfe9c58
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/FilePreview/FilePreview.scss b/src/components/FilePreview/FilePreview.scss
@@ -9,6 +9,7 @@ $smallRoundedButtonSize: 24px;
     --_-box-shadow: none;
     --_-border-radius: 4px;
     --_-color-base-background: transparent;
+    --_-action-button-size: 24px;
 
     position: relative;
 
@@ -145,4 +146,15 @@ $smallRoundedButtonSize: 24px;
         height: 100%;
         width: 100%;
     }
+
+    &__action-button {
+        height: var(--_-action-button-size);
+        width: var(--_-action-button-size);
+        display: flex;
+        align-items: center;
+    }
+
+    &__action-icon-wrapper {
+        display: flex;
+    }
 }
diff --git a/src/components/FilePreview/FilePreviewAction.tsx b/src/components/FilePreview/FilePreviewAction.tsx
@@ -3,7 +3,11 @@ import type * as React from 'react';
 import {ActionTooltip} from '../ActionTooltip';
 import type {ActionTooltipProps} from '../ActionTooltip';
 import {Button} from '../Button';
+import {block} from '../utils/cn';
 
+import './FilePreview.scss';
+
+const cn = block('file-preview');
 export interface FilePreviewActionProps {
     id?: string;
     icon: React.ReactNode;
@@ -37,9 +41,10 @@ export function FilePreviewAction({
                 href={href}
                 disabled={disabled}
                 size="s"
+                className={cn('action-button')}
                 extraProps={{'aria-label': title, 'aria-describedby': id, ...extraProps}}
             >
-                {icon}
+                <div className={cn('action-icon-wrapper')}>{icon}</div>
             </Button>
         </ActionTooltip>
     );

diff --git a/src/components/FilePreview/__stories__/FilePreview.stories.tsx b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
@@ -2,6 +2,7 @@ import {CircleExclamation, Link, Xmark} from '@gravity-ui/icons';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryFn} from '@storybook/react';
 
+import {Icon} from '../../Icon';
 import {Flex} from '../../layout';
 import type {FilePreviewProps} from '../FilePreview';
 import {FilePreview} from '../FilePreview';
@@ -71,7 +72,7 @@ const CollageTemplate: StoryFn<FilePreviewProps> = () => {
                             onClick: () => action('onLink'),
                         },
                         {
-                            icon: <Xmark width={14} height={14} />,
+                            icon: <Icon data={Xmark} width={14} height={14} />,
                             title: 'delete a file',
                             onClick: () => action('onClose'),
                         },