From a023aaba8f310b4ddd063258ff418b1287ce45e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=A2=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=BD=D1=86=D0=B5=D0=B2?= <smsochneg@yandex-team.ru>
Date: Wed, 15 Nov 2023 19:00:57 +0100
Subject: [PATCH] fix: improvements for toolbar hidden actions

---
 src/i18n/common/en.json            |   3 +
 src/i18n/common/index.ts           |   8 +++
 src/i18n/common/ru.json            |   3 +
 src/toolbar/FlexToolbar.tsx        |   1 -
 src/toolbar/ToolbarButton.scss     |   6 ++
 src/toolbar/ToolbarButton.tsx      |  57 +++++++++-------
 src/toolbar/ToolbarListButton.scss |  17 +++++
 src/toolbar/ToolbarListButton.tsx  | 101 +++++++++++++++++------------
 src/toolbar/types.ts               |   1 +
 9 files changed, 132 insertions(+), 65 deletions(-)
 create mode 100644 src/i18n/common/en.json
 create mode 100644 src/i18n/common/index.ts
 create mode 100644 src/i18n/common/ru.json
 create mode 100644 src/toolbar/ToolbarButton.scss

diff --git a/src/i18n/common/en.json b/src/i18n/common/en.json
new file mode 100644
index 00000000..9655032c
--- /dev/null
+++ b/src/i18n/common/en.json
@@ -0,0 +1,3 @@
+{
+  "toolbar_action_disabled": "Incompatible markup element"
+}
diff --git a/src/i18n/common/index.ts b/src/i18n/common/index.ts
new file mode 100644
index 00000000..90fd2b74
--- /dev/null
+++ b/src/i18n/common/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const KEYSET = 'common';
+
+export const i18n = registerKeyset(KEYSET, {en, ru});
diff --git a/src/i18n/common/ru.json b/src/i18n/common/ru.json
new file mode 100644
index 00000000..90c6316f
--- /dev/null
+++ b/src/i18n/common/ru.json
@@ -0,0 +1,3 @@
+{
+  "toolbar_action_disabled": "Несовместимый элемент разметки"
+}
diff --git a/src/toolbar/FlexToolbar.tsx b/src/toolbar/FlexToolbar.tsx
index 456fe360..79fcd6d9 100644
--- a/src/toolbar/FlexToolbar.tsx
+++ b/src/toolbar/FlexToolbar.tsx
@@ -69,7 +69,6 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
                         onClick={props.onClick}
                         className={b('dots')}
                         alwaysActive={true}
-                        hideDisabled={true}
                     />
                 )}
             </div>
diff --git a/src/toolbar/ToolbarButton.scss b/src/toolbar/ToolbarButton.scss
new file mode 100644
index 00000000..54f0b5b0
--- /dev/null
+++ b/src/toolbar/ToolbarButton.scss
@@ -0,0 +1,6 @@
+.ye-toolbar-button {
+    &__action-disabled-tooltip {
+        min-height: fit-content;
+        padding: 6px 12px;
+    }
+}
diff --git a/src/toolbar/ToolbarButton.tsx b/src/toolbar/ToolbarButton.tsx
index 3e887df5..0e9db15d 100644
--- a/src/toolbar/ToolbarButton.tsx
+++ b/src/toolbar/ToolbarButton.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import isFunction from 'lodash/isFunction';
-import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Icon, Popover} from '@gravity-ui/uikit';
 import {cn} from '../classname';
+import {i18n} from '../i18n/common';
 import {ToolbarTooltipDelay} from './const';
 import type {ToolbarBaseProps, ToolbarItemData} from './types';
 
+import './ToolbarButton.scss';
+
 const b = cn('toolbar-button');
 
 export type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;
@@ -16,6 +19,7 @@ export function ToolbarButton<E>({
     hotkey,
     editor,
     icon,
+    disabledPopoverVisible = true,
     exec,
     focus,
     onClick,
@@ -25,31 +29,40 @@ export function ToolbarButton<E>({
     const active = isActive(editor);
     const enabled = isEnable(editor);
     const disabled = !active && !enabled;
+    const buttonRef = useRef<HTMLElement>(null);
 
     const titleText: string = isFunction(title) ? title() : title;
 
     return (
-        <ActionTooltip
-            openDelay={ToolbarTooltipDelay.Open}
-            closeDelay={ToolbarTooltipDelay.Close}
-            title={titleText}
-            hotkey={hotkey}
+        <Popover
+            content={i18n('toolbar_action_disabled')}
+            disabled={!disabledPopoverVisible || !disabled}
+            tooltipContentClassName={b('action-disabled-tooltip')}
+            placement={['bottom']}
         >
-            <Button
-                size="m"
-                selected={active}
-                disabled={disabled}
-                view={active ? 'normal' : 'flat'}
-                onClick={() => {
-                    focus();
-                    exec(editor);
-                    onClick?.(id);
-                }}
-                className={b(null, [className])}
-                extraProps={{'aria-label': titleText}}
+            <ActionTooltip
+                openDelay={ToolbarTooltipDelay.Open}
+                closeDelay={ToolbarTooltipDelay.Close}
+                title={titleText}
+                hotkey={hotkey}
             >
-                <Icon data={icon.data} size={icon.size ?? 16} />
-            </Button>
-        </ActionTooltip>
+                <Button
+                    ref={buttonRef}
+                    size="m"
+                    selected={active}
+                    disabled={disabled}
+                    view={active ? 'normal' : 'flat'}
+                    onClick={() => {
+                        focus();
+                        exec(editor);
+                        onClick?.(id);
+                    }}
+                    className={b(null, [className])}
+                    extraProps={{'aria-label': titleText}}
+                >
+                    <Icon data={icon.data} size={icon.size ?? 16} />
+                </Button>
+            </ActionTooltip>
+        </Popover>
     );
 }
diff --git a/src/toolbar/ToolbarListButton.scss b/src/toolbar/ToolbarListButton.scss
index 555b3e10..42f1b7ae 100644
--- a/src/toolbar/ToolbarListButton.scss
+++ b/src/toolbar/ToolbarListButton.scss
@@ -26,6 +26,10 @@
         display: flex;
         align-items: center;
         column-gap: 8px;
+
+        .yc-icon {
+            display: block;
+        }
     }
 
     &__hint {
@@ -36,4 +40,17 @@
             display: flex;
         }
     }
+
+    &__action-disabled-popover {
+        display: block;
+
+        .yc-popover__handler {
+            display: block;
+        }
+    }
+
+    &__action-disabled-tooltip {
+        min-height: fit-content;
+        padding: 6px 12px;
+    }
 }
diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx
index ccfcf7f5..e2113c0d 100644
--- a/src/toolbar/ToolbarListButton.tsx
+++ b/src/toolbar/ToolbarListButton.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import isFunction from 'lodash/isFunction';
-import {Button, Hotkey, Icon, Menu, Popup, Tooltip} from '@gravity-ui/uikit';
+import {Button, Hotkey, Icon, Menu, Popover, Popup, Tooltip} from '@gravity-ui/uikit';
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
 
 import {cn} from '../classname';
+import {i18n} from '../i18n/common';
 import {useBooleanState} from '../react-utils/hooks';
 import {ToolbarTooltipDelay} from './const';
 import {ToolbarBaseProps, ToolbarIconData, ToolbarItemData} from './types';
@@ -34,7 +35,6 @@ export function ToolbarListButton<E>({
     withArrow,
     data,
     alwaysActive,
-    hideDisabled,
 }: ToolbarListButtonProps<E>) {
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
@@ -62,24 +62,32 @@ export function ToolbarListButton<E>({
 
     return (
         <>
-            <Tooltip
-                content={titleText}
-                disabled={popupOpen}
-                openDelay={ToolbarTooltipDelay.Open}
-                closeDelay={ToolbarTooltipDelay.Close}
+            <Popover
+                className={b('action-disabled-popover')}
+                tooltipContentClassName={b('action-disabled-tooltip')}
+                content={i18n('toolbar_action_disabled')}
+                placement={'bottom'}
+                disabled={!everyDisabled}
             >
-                <Button
-                    size="m"
-                    ref={buttonRef}
-                    view={someActive || popupOpen ? 'normal' : 'flat'}
-                    selected={someActive}
-                    disabled={everyDisabled}
-                    className={b({arrow: withArrow}, [className])}
-                    onClick={toggleOpen}
+                <Tooltip
+                    content={titleText}
+                    disabled={popupOpen}
+                    openDelay={ToolbarTooltipDelay.Open}
+                    closeDelay={ToolbarTooltipDelay.Close}
                 >
-                    {buttonContent}
-                </Button>
-            </Tooltip>
+                    <Button
+                        size="m"
+                        ref={buttonRef}
+                        view={someActive || popupOpen ? 'normal' : 'flat'}
+                        selected={someActive}
+                        disabled={everyDisabled}
+                        className={b({arrow: withArrow}, [className])}
+                        onClick={toggleOpen}
+                    >
+                        {buttonContent}
+                    </Button>
+                </Tooltip>
+            </Popover>
             <Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data
@@ -87,33 +95,42 @@ export function ToolbarListButton<E>({
                             const titleText = isFunction(title) ? title() : title;
                             const hintText = isFunction(hint) ? hint() : hint;
                             const disabled = !isEnable(editor);
-                            return hideDisabled && disabled ? null : (
-                                <Menu.Item
+                            return (
+                                <Popover
+                                    className={b('action-disabled-popover')}
+                                    tooltipContentClassName={b('action-disabled-tooltip')}
+                                    content={i18n('toolbar_action_disabled')}
+                                    placement={'left'}
+                                    disabled={!disabled}
                                     key={id}
-                                    active={isActive(editor)}
-                                    disabled={!isEnable(editor)}
-                                    onClick={() => {
-                                        hide();
-                                        focus();
-                                        exec(editor);
-                                        onClick?.(id);
-                                    }}
-                                    icon={<Icon data={icon.data} size={icon.size ?? 16} />}
-                                    extraProps={{'aria-label': titleText}}
                                 >
-                                    <div className={b('item')}>
-                                        {titleText}
-                                        <div className={b('extra')}>
-                                            {hotkey && <Hotkey value={hotkey} />}
-                                            {hintText && (
-                                                <HelpPopover
-                                                    className={b('hint')}
-                                                    content={hintText}
-                                                />
-                                            )}
+                                    <Menu.Item
+                                        key={id}
+                                        active={isActive(editor)}
+                                        disabled={!isEnable(editor)}
+                                        onClick={() => {
+                                            hide();
+                                            focus();
+                                            exec(editor);
+                                            onClick?.(id);
+                                        }}
+                                        icon={<Icon data={icon.data} size={icon.size ?? 16} />}
+                                        extraProps={{'aria-label': titleText}}
+                                    >
+                                        <div className={b('item')}>
+                                            {titleText}
+                                            <div className={b('extra')}>
+                                                {hotkey && <Hotkey value={hotkey} />}
+                                                {hintText && (
+                                                    <HelpPopover
+                                                        className={b('hint')}
+                                                        content={hintText}
+                                                    />
+                                                )}
+                                            </div>
                                         </div>
-                                    </div>
-                                </Menu.Item>
+                                    </Menu.Item>
+                                </Popover>
                             );
                         })
                         .filter(Boolean)}
diff --git a/src/toolbar/types.ts b/src/toolbar/types.ts
index 7c1bd722..cb1c5df7 100644
--- a/src/toolbar/types.ts
+++ b/src/toolbar/types.ts
@@ -16,6 +16,7 @@ export type ToolbarItemData<E> = {
     title: string | (() => string);
     hint?: string | (() => string);
     hotkey?: HotkeyProps['value'];
+    disabledPopoverVisible?: boolean;
     exec(editor: E): void;
     isActive(editor: E): boolean;
     isEnable(editor: E): boolean;