feat(FilePreview): add tooltip props for actions (#174)

Co-authored-by: Maxim725 <[email protected]>
gravity-ui · Apr 15, 2024 · e16cef8 · e16cef8
1 parent 4c1bbab
commit e16cef8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/components/FilePreview/FilePreviewAction.tsx b/src/components/FilePreview/FilePreviewAction.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ActionTooltip, Button, Icon, IconData} from '@gravity-ui/uikit';
+import {ActionTooltip, ActionTooltipProps, Button, Icon, IconData} from '@gravity-ui/uikit';
 
 export interface FilePreviewActionProps {
     id?: string;
@@ -12,6 +12,7 @@ export interface FilePreviewActionProps {
     extraProps?:
         | React.ButtonHTMLAttributes<HTMLButtonElement>
         | React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    tooltipExtraProps?: Omit<ActionTooltipProps, 'id' | 'title' | 'children'>;
 }
 
 export function FilePreviewAction({
@@ -22,9 +23,10 @@ export function FilePreviewAction({
     disabled,
     onClick,
     extraProps,
+    tooltipExtraProps,
 }: FilePreviewActionProps) {
     return (
-        <ActionTooltip id={id} title={title}>
+        <ActionTooltip id={id} title={title} {...tooltipExtraProps}>
             <Button
                 onClick={onClick}
                 view="raised"

diff --git a/src/components/FilePreview/__stories__/FilePreview.stories.tsx b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
@@ -107,3 +107,29 @@ const NoClickableTemplate: StoryFn<Omit<FilePreviewProps, 'actions'>> = (args) =
 };
 
 export const NoClickable = NoClickableTemplate.bind({});
+
+const WithoutActionTooltipTemplate: StoryFn<Omit<FilePreviewProps, 'actions'>> = (args) => {
+    return (
+        <Flex gap={4}>
+            <FilePreview
+                {...args}
+                file={{name: 'Clicable without tooltip', type: 'text/docs'} as File}
+                onClick={() => {
+                    window.open('https://disk.yandex.com', '_blank');
+                }}
+                actions={[
+                    {
+                        icon: Xmark,
+                        onClick: () => alert('Are you sure you want to delete the file?'),
+                        title: 'Close',
+                        tooltipExtraProps: {
+                            disabled: true,
+                        },
+                    },
+                ]}
+            />
+        </Flex>
+    );
+};
+
+export const WithoutActionTooltip = WithoutActionTooltipTemplate.bind({});