diff --git a/README.md b/README.md index b488d3e..1205678 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/icons@2.2.0 @gravity-ui/ - MobileLogo - Footer - MobileFooter +- [HotkeysPanel](/src/components/HotkeysPanel/README.md) ## CSS variables diff --git a/src/components/HotkeysPanel/HotkeysPanel.scss b/src/components/HotkeysPanel/HotkeysPanel.scss index 1d6c66c..7b386e1 100644 --- a/src/components/HotkeysPanel/HotkeysPanel.scss +++ b/src/components/HotkeysPanel/HotkeysPanel.scss @@ -28,6 +28,7 @@ $block: '.#{variables.$ns}hotkeys-panel'; &__search { padding: 0 var(--hotkeys-panel-horizontal-padding); margin-bottom: 14px; + box-sizing: border-box; } &__list { diff --git a/src/components/HotkeysPanel/HotkeysPanel.tsx b/src/components/HotkeysPanel/HotkeysPanel.tsx index c4295a1..88c830a 100644 --- a/src/components/HotkeysPanel/HotkeysPanel.tsx +++ b/src/components/HotkeysPanel/HotkeysPanel.tsx @@ -19,15 +19,36 @@ const b = block('hotkeys-panel'); export type HotkeysPanelProps = { hotkeys: HotkeysGroup[]; title?: ReactNode; + filterable?: boolean; filterPlaceholder?: string; emptyState?: ReactNode; visible: boolean; onClose?: () => void; className?: string; + drawerItemClassName?: string; + filterClassName?: string; + titleClassName?: string; + itemContentClassName?: string; + listClassName?: string; leftOffset?: number | string; topOffset?: number | string; preventScrollBody?: DrawerProps['preventScrollBody']; -} & Omit, 'items' | 'emptyPlaceholder'>; +} & Omit< + ListProps, + | 'items' + | 'emptyPlaceholder' + | 'className' + | 'size' + | 'renderItem' + | 'filterable' + | 'autoFocus' + | 'filterPlaceholder' + | 'filterClassName' + | 'filter' + | 'filterItem' + | 'onFilterEnd' + | 'onFilterUpdate' +>; export function HotkeysPanel({ visible, @@ -35,9 +56,15 @@ export function HotkeysPanel({ leftOffset, topOffset, className, + drawerItemClassName, + filterClassName, + titleClassName, + listClassName, + itemContentClassName, preventScrollBody, hotkeys, itemClassName, + filterable = true, filterPlaceholder, title, emptyState, @@ -52,7 +79,10 @@ export function HotkeysPanel({ const renderItem = useCallback( (item: HotkeysListItem) => ( -
+
{item.title} {item.value && }
@@ -62,17 +92,19 @@ export function HotkeysPanel({ const drawerItemContent = ( -

{title}

- +

{title}

+ {filterable && ( + + )} - className={b('list')} + className={b('list', listClassName)} virtualized={false} filterable={false} items={hotkeysList} @@ -98,7 +130,7 @@ export function HotkeysPanel({ diff --git a/src/components/HotkeysPanel/README.md b/src/components/HotkeysPanel/README.md index 27b19f6..d657bf4 100644 --- a/src/components/HotkeysPanel/README.md +++ b/src/components/HotkeysPanel/README.md @@ -1,20 +1,46 @@ + + ## HotkeysPanel -A panel for hotkeys documentation + + +A navigation panel for hotkeys documentation. +The panel displays a set of hotkeys for your application with a description of their purpose. + +```ts +import {HotkeysPanel} from '@gravity-ui/navigation'; +``` ### PropTypes -| Property | Type | Required | Default | Description | -| :---------------- | :-------------- | :------: | :------ | :------------------------------- | -| className | `String` | | | Drawer class | -| visible | `Boolean` | yes | | Whether drawer visible or not | -| onClose | `Function` | | | close drawer handler | -| leftOffset | `Number/String` | | 0 | drawer left offset | -| topOffset | `Number/String` | | 0 | drawer top offset | -| preventScrollBody | `Boolean` | | true | Disable body scroll when visible | -| hotkeys | `Array` | yes | | List of hotkey groups | - -And all the `List` PropTypes, but not `items` (you can find them [here](https://github.com/gravity-ui/uikit/blob/main/src/components/List/README.md)) +| Property | Type | Required | Default | Description | +| :------------------- | :-------------- | :------: | :------ | :---------------------------------------------- | +| hotkeys | `Array` | yes | | List of hotkey groups | +| title | `Array` | | | The panel title | +| visible | `Boolean` | yes | | Whether drawer visible or not | +| onClose | `Function` | | | Close drawer handler | +| filterable | `Boolean` | yes | | Whether show search input or not | +| filterPlaceholder | `String` | | | Search input placeholder | +| filterClassName | `String` | | | Search input class name | +| leftOffset | `Number/String` | | 0 | Drawer left offset | +| topOffset | `Number/String` | | 0 | Drawer top offset | +| preventScrollBody | `Boolean` | | true | Whether disable body scroll when visible or not | +| emptyState | `ReactNode` | | | No search results placeholder | +| className | `String` | | | Drawer class name | +| drawerItemClassName | `String` | | | Drawer item class name | +| titleClassName | `String` | | | Title class name | +| itemContentClassName | `String` | | | List item content class name | +| listClassName | `String` | | | List class name | + +And all the `List` PropTypes, but not `items` and filter props (you can find them [here](https://github.com/gravity-ui/uikit/blob/main/src/components/List/README.md)) + +## CSS API + +| Name | Description | Default | +| :----------------------------------- | :-------------------------------- | :-----: | +| `--hotkeys-panel-width` | The width of the panel | `400px` | +| `--hotkeys-panel-vertical-padding` | The panel top and bottom paddings | `18px` | +| `--hotkeys-panel-horizontal-padding` | The panel left and right paddings | `24px` | ### Usage