@snack-uikit/drawer 0.6.20 → 0.7.1-preview-b98b3b80.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2024-05-23)
+
+
+### Features
+
+* **FF-4716:** add tooltip to drawer buttons ([053c122](https://github.com/cloud-ru-tech/snack-uikit/commit/053c1226d8688a77dbdedce1448bcb8367136837))
+
+
+
+
+
 ## 0.6.20 (2024-05-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -42,9 +42,9 @@
 | image | `{ src: string; alt: string; }` | - | Изображение |
 | subtitle | `string` | - | Подзаголовок |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
-| approveButton | `Omit<ButtonFilledProps, "data-test-id" \| "size">` | - | Основная кнопка |
-| cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size">` | - | Кнопка отмены |
-| additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size">` | - | Дополнительная кнопка |
+| approveButton | `Omit<ButtonFilledProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; }` | - | Основная кнопка |
+| cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; }` | - | Кнопка отмены |
+| additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; }` | - | Дополнительная кнопка |
 | nestedDrawer | `ReactElement<DrawerProps, string \| JSXElementConstructor<any>>` | - | Вложенный Drawer |
 
 

package/dist/components/Drawer/Drawer.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
 import { Size } from '../../types';
 import { DrawerCustomProps } from '../DrawerCustom';
@@ -11,11 +12,17 @@ export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedD
     /** Размер */
     size?: Size;
     /** Основная кнопка */
-    approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'>;
+    approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'> & {
+        tooltip?: TooltipProps;
+    };
     /** Кнопка отмены */
-    cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'>;
+    cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'> & {
+        tooltip?: TooltipProps;
+    };
     /** Дополнительная кнопка */
-    additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'>;
+    additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'> & {
+        tooltip?: TooltipProps;
+    };
     /** Вложенный Drawer */
     nestedDrawer?: ReactElement<DrawerProps>;
 };

package/dist/components/Drawer/Drawer.js

@@ -13,10 +13,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ButtonFilled, ButtonOutline, ButtonSimple, } from '@snack-uikit/button';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { NESTED_DRAWER_PUSH_DISTANCE, TEST_IDS } from '../../constants';
+import { WithTooltip } from '../../helperComponents/WithTooltip';
 import { DrawerCustom } from '../DrawerCustom';
 /** Готовый компонент Drawer */
 export function Drawer(_a) {
     var { title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton, nestedDrawer } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "content", "approveButton", "cancelButton", "additionalButton", "nestedDrawer"]);
     const needFooter = Boolean(approveButton) || Boolean(cancelButton) || Boolean(additionalButton);
-    return (_jsxs(DrawerCustom, Object.assign({}, rest, { push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [_jsx(DrawerCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(DrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && _jsx(ButtonFilled, Object.assign({}, approveButton, { size: 'm', "data-test-id": TEST_IDS.approveButton })), cancelButton && _jsx(ButtonOutline, Object.assign({}, cancelButton, { size: 'm', "data-test-id": TEST_IDS.cancelButton })), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: 'm', "data-test-id": TEST_IDS.additionalButton })))] }) })), nestedDrawer] })));
+    return (_jsxs(DrawerCustom, Object.assign({}, rest, { push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [_jsx(DrawerCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(DrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && (_jsx(WithTooltip, { tooltip: approveButton.tooltip, children: _jsx(ButtonFilled, Object.assign({}, approveButton, { size: 'm', "data-test-id": TEST_IDS.approveButton })) })), cancelButton && (_jsx(WithTooltip, { tooltip: cancelButton.tooltip, children: _jsx(ButtonOutline, Object.assign({}, cancelButton, { size: 'm', "data-test-id": TEST_IDS.cancelButton })) })), additionalButton && (_jsx(WithTooltip, { tooltip: additionalButton.tooltip, children: _jsx(ButtonSimple, Object.assign({}, additionalButton, { size: 'm', "data-test-id": TEST_IDS.additionalButton })) }))] }) })), nestedDrawer] })));
 }

package/dist/helperComponents/WithTooltip/WithTooltip.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+type WithTooltipProps = PropsWithChildren<{
+    /** Тултип над кнопкой */
+    tooltip?: TooltipProps;
+}>;
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/WithTooltip/WithTooltip.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@snack-uikit/tooltip';
+export function WithTooltip({ tooltip, children }) {
+    if (!tooltip) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(Tooltip, Object.assign({}, tooltip, { children: children }));
+}

package/dist/helperComponents/WithTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/dist/helperComponents/WithTooltip/index.js

@@ -0,0 +1 @@
+export * from './WithTooltip';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Drawer",
-  "version": "0.6.20",
+  "version": "0.7.1-preview-b98b3b80.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
     "@snack-uikit/icons": "0.21.0",
-    "@snack-uikit/scroll": "0.5.3",
+    "@snack-uikit/scroll": "0.5.4-preview-b98b3b80.0",
     "@snack-uikit/tooltip": "0.13.3",
     "@snack-uikit/truncate-string": "0.4.15",
     "@snack-uikit/typography": "0.6.2",
@@ -42,5 +42,5 @@
     "classnames": "2.3.2",
     "rc-drawer": "6.4.1"
   },
-  "gitHead": "4ed0075faec0375fee125764be942849a20100a4"
+  "gitHead": "df95f1ff7d7633d7ce1c8311807d8f9bac72cda0"
 }

package/src/components/Drawer/Drawer.tsx

@@ -8,10 +8,12 @@ import {
   ButtonSimple,
   ButtonSimpleProps,
 } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { TruncateString } from '@snack-uikit/truncate-string';
 
 import { NESTED_DRAWER_PUSH_DISTANCE, TEST_IDS } from '../../constants';
 import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
+import { WithTooltip } from '../../helperComponents/WithTooltip';
 import { Size } from '../../types';
 import { DrawerCustom, DrawerCustomProps } from '../DrawerCustom';
 
@@ -25,11 +27,11 @@ export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedD
     /** Размер */
     size?: Size;
     /** Основная кнопка */
-    approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'>;
+    approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'> & { tooltip?: TooltipProps };
     /** Кнопка отмены */
-    cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'>;
+    cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'> & { tooltip?: TooltipProps };
     /** Дополнительная кнопка */
-    additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'>;
+    additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'> & { tooltip?: TooltipProps };
     /** Вложенный Drawer */
     nestedDrawer?: ReactElement<DrawerProps>;
   };
@@ -66,12 +68,22 @@ export function Drawer({
           data-test-id={TEST_IDS.footer}
           actions={
             <>
-              {approveButton && <ButtonFilled {...approveButton} size='m' data-test-id={TEST_IDS.approveButton} />}
+              {approveButton && (
+                <WithTooltip tooltip={approveButton.tooltip}>
+                  <ButtonFilled {...approveButton} size='m' data-test-id={TEST_IDS.approveButton} />
+                </WithTooltip>
+              )}
 
-              {cancelButton && <ButtonOutline {...cancelButton} size='m' data-test-id={TEST_IDS.cancelButton} />}
+              {cancelButton && (
+                <WithTooltip tooltip={cancelButton.tooltip}>
+                  <ButtonOutline {...cancelButton} size='m' data-test-id={TEST_IDS.cancelButton} />
+                </WithTooltip>
+              )}
 
               {additionalButton && (
-                <ButtonSimple {...additionalButton} size='m' data-test-id={TEST_IDS.additionalButton} />
+                <WithTooltip tooltip={additionalButton.tooltip}>
+                  <ButtonSimple {...additionalButton} size='m' data-test-id={TEST_IDS.additionalButton} />
+                </WithTooltip>
               )}
             </>
           }

package/src/helperComponents/WithTooltip/WithTooltip.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+
+import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
+
+type WithTooltipProps = PropsWithChildren<{
+  /** Тултип над кнопкой */
+  tooltip?: TooltipProps;
+}>;
+
+export function WithTooltip({ tooltip, children }: WithTooltipProps) {
+  if (!tooltip) {
+    return <>{children}</>;
+  }
+
+  return <Tooltip {...tooltip}>{children}</Tooltip>;
+}

package/src/helperComponents/WithTooltip/index.ts

@@ -0,0 +1 @@
+export * from './WithTooltip';