feat(HotkeysPanel): hotkeys panel redesign

src/components/HotkeysPanel/HotkeysPanel.scss

@@ -10,7 +10,7 @@ $block: '.#{variables.$ns}hotkeys-panel';
 
     --hotkeys-panel-width: 400px;
     --hotkeys-panel-vertical-padding: 18px;
-    --hotkeys-panel-horizontal-padding: 24px;
+    --hotkeys-panel-horizontal-padding: var(--g-spacing-6);
 
     &__drawer-item {
         width: var(--hotkeys-panel-width);
@@ -21,13 +21,17 @@ $block: '.#{variables.$ns}hotkeys-panel';
     }
 
     &__title {
-        margin: 0 var(--hotkeys-panel-horizontal-padding) 16px
+        margin: 0 var(--hotkeys-panel-horizontal-padding) var(--g-spacing-4)
             var(--hotkeys-panel-horizontal-padding);
+        display: flex;
+        gap: var(--g-spacing-2);
+        align-items: baseline;
+        justify-content: space-between;
     }
 
     &__search {
         padding: 0 var(--hotkeys-panel-horizontal-padding);
-        margin-bottom: 14px;
+        margin-bottom: var(--g-spacing-4);
         box-sizing: border-box;
     }
 
@@ -38,30 +42,37 @@ $block: '.#{variables.$ns}hotkeys-panel';
 
     &__item {
         height: auto;
-        padding: 8px var(--hotkeys-panel-horizontal-padding);
+        padding: var(--g-spacing-2) 0;
+        margin: 0 var(--hotkeys-panel-horizontal-padding);
 
         &.g-list__item_active {
             background: inherit;
         }
+
+        &:not(:first-child):has(#{$block}__item-content_type_group) {
+            border-top: 1px solid var(--g-color-line-generic);
+            margin-top: var(--g-spacing-3);
+            padding-top: var(--g-spacing-4);
+        }
     }
 
     &__item-content {
         display: flex;
         align-items: baseline;
         justify-content: space-between;
+        margin: 0;
 
         width: 100%;
 
-        font-size: var(--g-text-body-1-font-size);
-        line-height: var(--g-text-body-1-line-height);
-
         color: var(--g-color-text-primary);
+    }
 
-        &_group {
-            font-size: var(--g-text-body-2-font-size);
-            font-weight: 500;
-            line-height: var(--g-text-body-2-line-height);
-        }
+    &__item-hint {
+        margin-left: var(--g-spacing-1);
+    }
+
+    &__item-hint-tooltip {
+        max-width: 217px;
     }
 
     &__hotkey {

src/components/HotkeysPanel/HotkeysPanel.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import type {ReactNode} from 'react';
 
-import {Hotkey, List, TextInput} from '@gravity-ui/uikit';
+import {HelpMark, Hotkey, List, Text, TextInput} from '@gravity-ui/uikit';
 import type {ListProps} from '@gravity-ui/uikit';
 
 import {Drawer, DrawerItem} from '../Drawer/Drawer';
@@ -18,6 +18,7 @@ const b = block('hotkeys-panel');
 export type HotkeysPanelProps<T> = {
     hotkeys: HotkeysGroup<T>[];
     title?: ReactNode;
+    hotkey?: string;
     filterable?: boolean;
     filterPlaceholder?: string;
     emptyState?: ReactNode;
@@ -64,6 +65,7 @@ export function HotkeysPanel<T = {}>({
     filterable = true,
     filterPlaceholder,
     title,
+    hotkey,
     emptyState,
     ...listProps
 }: HotkeysPanelProps<T>) {
@@ -76,20 +78,40 @@ export function HotkeysPanel<T = {}>({
 
     const renderItem = useCallback(
         (item: HotkeysListItem) => (
-            <div
-                className={b('item-content', {group: item.group}, itemContentClassName)}
+            <Text
+                as={item.group ? ('h3' as const) : ('p' as const)}
+                variant={item.group ? 'subheader-2' : 'body-1'}
+                className={b(
+                    'item-content',
+                    {type: item.group ? 'group' : 'item'},
+                    itemContentClassName,
+                )}
                 key={item.title}
             >
-                {item.title}
+                <span>
+                    {item.title}
+                    {item.hint && (
+                        <HelpMark
+                            aria-hidden
+                            popoverProps={{className: b('item-hint-tooltip')}}
+                            className={b('item-hint')}
+                        >
+                            {item.hint}
+                        </HelpMark>
+                    )}
+                </span>
                 {item.value && <Hotkey className={b('hotkey')} value={item.value} />}
-            </div>
+            </Text>
         ),
-        [],
+        [itemContentClassName],
     );
 
     const drawerItemContent = (
         <React.Fragment>
-            <h2 className={b('title', titleClassName)}>{title}</h2>
+            <Text variant="subheader-3" as={'h2' as const} className={b('title', titleClassName)}>
+                {title}
+                {hotkey && <Hotkey value={hotkey} />}
+            </Text>
             {filterable && (
                 <TextInput
                     value={filter}
@@ -107,7 +129,7 @@ export function HotkeysPanel<T = {}>({
                 items={hotkeysList}
                 renderItem={renderItem}
                 itemClassName={b('item', itemClassName)}
-                emptyPlaceholder={emptyState as string}
+                emptyPlaceholder={emptyState}
                 {...listProps}
             />
         </React.Fragment>
@@ -127,8 +149,9 @@ export function HotkeysPanel<T = {}>({
                 id="hotkeys"
                 visible={visible}
                 className={b('drawer-item', drawerItemClassName)}
-                content={drawerItemContent}
-            />
+            >
+                {drawerItemContent}
+            </DrawerItem>
         </Drawer>
     );
 }

src/components/HotkeysPanel/README-ru.md

@@ -16,7 +16,8 @@ import {HotkeysPanel} from '@gravity-ui/navigation';
 | Свойство             | Тип             | Обязательное | Значение по умолчанию | Описание                                    |
 | :------------------- | :-------------- | :----------: | :-------------------- | :------------------------------------------ |
 | hotkeys              | `Array`         |      Да      |                       | Список групп горячих клавиш.                |
-| title                | `Array`         |              |                       | Заголовок панели.                           |
+| title                | `ReactNode`     |              |                       | Заголовок панели.                           |
+| hotkey               | `String`        |              |                       | Хоткей для открытия панели.                 |
 | visible              | `Boolean`       |      Да      |                       | Определяет видимость выдвижной панели.      |
 | onClose              | `Function`      |              |                       | Обработчик закрытия выдвижной панели.       |
 | filterable           | `Boolean`       |              | true                  | Определяет видимость поля поиска.           |

src/components/HotkeysPanel/README.md

@@ -16,7 +16,8 @@ import {HotkeysPanel} from '@gravity-ui/navigation';
 | Property             | Type            | Required | Default | Description                      |
 | :------------------- | :-------------- | :------: | :------ | :------------------------------- |
 | hotkeys              | `Array`         |   yes    |         | List of hotkey groups            |
-| title                | `Array`         |          |         | The panel title                  |
+| title                | `ReactNode`     |          |         | The panel title                  |
+| hotkey               | `String`        |          |         | The panel open hotkey            |
 | visible              | `Boolean`       |   yes    |         | Whether drawer visible or not    |
 | onClose              | `Function`      |          |         | Close drawer handler             |
 | filterable           | `Boolean`       |          | true    | Whether show search input or not |

src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.scss

@@ -14,12 +14,6 @@
         border-bottom: 1px solid var(--g-color-line-generic);
     }
 
-    &__title {
-        display: flex;
-        gap: 8px;
-        align-items: baseline;
-    }
-
     &__body {
         position: absolute;
         top: 77px;

src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Button, Hotkey} from '@gravity-ui/uikit';
+import {Button} from '@gravity-ui/uikit';
 
 import {HotkeysGroup, HotkeysPanel, HotkeysPanelProps} from '../../../components/HotkeysPanel';
 import {cn} from '../../utils/cn';
@@ -33,12 +33,8 @@ export function HotkeysPanelShowcase({filterable}: HotkeysPanelShowcaseProps) {
                 visible={visible}
                 onClose={handleClose}
                 topOffset={77}
-                title={
-                    <span className={b('title')}>
-                        Hotkeys
-                        <Hotkey value="shift+K" />
-                    </span>
-                }
+                title="Hotkeys"
+                hotkey="shift+K"
                 filterable={filterable}
                 filterPlaceholder="Search"
                 emptyState={<div className={b('empty')}>No hotkeys found</div>}

src/components/HotkeysPanel/__stories__/moc.ts

@@ -24,6 +24,7 @@ export const hotkeys: HotkeysGroup[] = [
             {
                 title: 'Go to history',
                 value: 'shift+h',
+                hint: 'Go to issue history tab',
             },
             {
                 title: 'Go to attachments',

src/components/HotkeysPanel/types.ts

@@ -1,6 +1,7 @@
 export type HotkeysItem = {
     title: string;
     value: string;
+    hint?: string;
 };
 
 export type HotkeysGroup<T = {}> = {
@@ -12,4 +13,5 @@ export type HotkeysListItem = {
     title: string;
     group?: boolean;
     value?: string;
+    hint?: string;
 };