diff --git a/src/components/HotkeysPanel/HotkeysPanel.scss b/src/components/HotkeysPanel/HotkeysPanel.scss index 7b386e12..af685ef9 100644 --- a/src/components/HotkeysPanel/HotkeysPanel.scss +++ b/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 { diff --git a/src/components/HotkeysPanel/HotkeysPanel.tsx b/src/components/HotkeysPanel/HotkeysPanel.tsx index 581e8181..9778b198 100644 --- a/src/components/HotkeysPanel/HotkeysPanel.tsx +++ b/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 = { hotkeys: HotkeysGroup[]; title?: ReactNode; + hotkey?: string; filterable?: boolean; filterPlaceholder?: string; emptyState?: ReactNode; @@ -64,6 +65,7 @@ export function HotkeysPanel({ filterable = true, filterPlaceholder, title, + hotkey, emptyState, ...listProps }: HotkeysPanelProps) { @@ -76,20 +78,40 @@ export function HotkeysPanel({ const renderItem = useCallback( (item: HotkeysListItem) => ( -
- {item.title} + + {item.title} + {item.hint && ( + + {item.hint} + + )} + {item.value && } -
+ ), - [], + [itemContentClassName], ); const drawerItemContent = ( -

{title}

+ + {title} + {hotkey && } + {filterable && ( ({ items={hotkeysList} renderItem={renderItem} itemClassName={b('item', itemClassName)} - emptyPlaceholder={emptyState as string} + emptyPlaceholder={emptyState} {...listProps} />
@@ -127,8 +149,9 @@ export function HotkeysPanel({ id="hotkeys" visible={visible} className={b('drawer-item', drawerItemClassName)} - content={drawerItemContent} - /> + > + {drawerItemContent} + ); } diff --git a/src/components/HotkeysPanel/README-ru.md b/src/components/HotkeysPanel/README-ru.md index 26c28a72..38a07efd 100644 --- a/src/components/HotkeysPanel/README-ru.md +++ b/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 | Определяет видимость поля поиска. | diff --git a/src/components/HotkeysPanel/README.md b/src/components/HotkeysPanel/README.md index aedda82b..9b003ab0 100644 --- a/src/components/HotkeysPanel/README.md +++ b/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 | diff --git a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-chromium-linux.png b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-chromium-linux.png index 09ef7fca..0ad6afb0 100644 Binary files a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-chromium-linux.png and b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-chromium-linux.png differ diff --git a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-webkit-linux.png b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-webkit-linux.png index 8c718671..8d4591d9 100644 Binary files a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-webkit-linux.png and b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-dark-webkit-linux.png differ diff --git a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-chromium-linux.png b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-chromium-linux.png index 6f1e828d..bd1d25ed 100644 Binary files a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-chromium-linux.png and b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-chromium-linux.png differ diff --git a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-webkit-linux.png b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-webkit-linux.png index 7e5d3c5c..4bd5f0e1 100644 Binary files a/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-webkit-linux.png and b/src/components/HotkeysPanel/__snapshots__/HotkeysPanel.visual.test.tsx-snapshots/HotkeysPanel-render-story-Showcase-light-webkit-linux.png differ diff --git a/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.scss b/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.scss index 755f37bc..b1b11946 100644 --- a/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.scss +++ b/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; diff --git a/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.tsx b/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.tsx index 6d4ff336..fe0969fa 100644 --- a/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.tsx +++ b/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={ - - Hotkeys - - - } + title="Hotkeys" + hotkey="shift+K" filterable={filterable} filterPlaceholder="Search" emptyState={
No hotkeys found
} diff --git a/src/components/HotkeysPanel/__stories__/moc.ts b/src/components/HotkeysPanel/__stories__/moc.ts index 1769e20f..f824a070 100644 --- a/src/components/HotkeysPanel/__stories__/moc.ts +++ b/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', diff --git a/src/components/HotkeysPanel/types.ts b/src/components/HotkeysPanel/types.ts index af08ab1f..98436cd2 100644 --- a/src/components/HotkeysPanel/types.ts +++ b/src/components/HotkeysPanel/types.ts @@ -1,6 +1,7 @@ export type HotkeysItem = { title: string; value: string; + hint?: string; }; export type HotkeysGroup = { @@ -12,4 +13,5 @@ export type HotkeysListItem = { title: string; group?: boolean; value?: string; + hint?: string; };