feat(HotkeysPanel): add customization props to hotkeys panel and impr…

…ove docs (#311) Co-authored-by: kseniyakuzina <[email protected]>
gravity-ui · Sep 25, 2024 · eaf3129 · eaf3129
1 parent 7361b25
commit eaf3129
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/[email protected] @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
@@ -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
@@ -19,25 +19,52 @@ const b = block('hotkeys-panel');
 export type HotkeysPanelProps<T> = {
     hotkeys: HotkeysGroup<T>[];
     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<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder'>;
+} & Omit<
+    ListProps<HotkeysListItem>,
+    | 'items'
+    | 'emptyPlaceholder'
+    | 'className'
+    | 'size'
+    | 'renderItem'
+    | 'filterable'
+    | 'autoFocus'
+    | 'filterPlaceholder'
+    | 'filterClassName'
+    | 'filter'
+    | 'filterItem'
+    | 'onFilterEnd'
+    | 'onFilterUpdate'
+>;
 
 export function HotkeysPanel<T = {}>({
     visible,
     onClose,
     leftOffset,
     topOffset,
     className,
+    drawerItemClassName,
+    filterClassName,
+    titleClassName,
+    listClassName,
+    itemContentClassName,
     preventScrollBody,
     hotkeys,
     itemClassName,
+    filterable = true,
     filterPlaceholder,
     title,
     emptyState,
@@ -52,7 +79,10 @@ export function HotkeysPanel<T = {}>({
 
     const renderItem = useCallback(
         (item: HotkeysListItem) => (
-            <div className={b('item-content', {group: item.group})} key={item.title}>
+            <div
+                className={b('item-content', {group: item.group}, itemContentClassName)}
+                key={item.title}
+            >
                 {item.title}
                 {item.value && <Hotkey className={b('hotkey')} value={item.value} />}
             </div>
@@ -62,17 +92,19 @@ export function HotkeysPanel<T = {}>({
 
     const drawerItemContent = (
         <React.Fragment>
-            <h2 className={b('title')}>{title}</h2>
-            <TextInput
-                value={filter}
-                onUpdate={setFilter}
-                placeholder={filterPlaceholder}
-                autoFocus
-                className={b('search')}
-                hasClear
-            />
+            <h2 className={b('title', titleClassName)}>{title}</h2>
+            {filterable && (
+                <TextInput
+                    value={filter}
+                    onUpdate={setFilter}
+                    placeholder={filterPlaceholder}
+                    autoFocus
+                    className={b('search', filterClassName)}
+                    hasClear
+                />
+            )}
             <List<HotkeysListItem>
-                className={b('list')}
+                className={b('list', listClassName)}
                 virtualized={false}
                 filterable={false}
                 items={hotkeysList}
@@ -98,7 +130,7 @@ export function HotkeysPanel<T = {}>({
             <DrawerItem
                 id="hotkeys"
                 visible={visible}
-                className={b('drawer-item')}
+                className={b('drawer-item', drawerItemClassName)}
                 content={drawerItemContent}
             />
         </Drawer>

diff --git a/src/components/HotkeysPanel/README.md b/src/components/HotkeysPanel/README.md
@@ -1,20 +1,46 @@
+<!--GITHUB_BLOCK-->
+
 ## HotkeysPanel
 
-A panel for hotkeys documentation
+<!--/GITHUB_BLOCK-->
+
+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`       |          | true    | 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
 

diff --git a/src/components/HotkeysPanel/__stories__/HotkeysPanel.stories.tsx b/src/components/HotkeysPanel/__stories__/HotkeysPanel.stories.tsx
@@ -30,3 +30,6 @@ export default {
 
 const ShowcaseTemplate: StoryFn = () => <HotkeysPanelShowcase />;
 export const Showcase = ShowcaseTemplate.bind({});
+
+const WithoutFilterTemplate: StoryFn = () => <HotkeysPanelShowcase filterable={false} />;
+export const WithoutFilter = WithoutFilterTemplate.bind({});
diff --git a/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.scss b/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.scss
@@ -6,12 +6,6 @@
     position: relative;
     box-sizing: border-box;
 
-    *,
-    *::before,
-    *::after {
-        box-sizing: inherit;
-    }
-
     &__header {
         width: 100%;
         padding: 20px;

diff --git a/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.tsx b/src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Button, Hotkey} from '@gravity-ui/uikit';
 
-import {HotkeysPanel} from '../../../components/HotkeysPanel';
+import {HotkeysGroup, HotkeysPanel, HotkeysPanelProps} from '../../../components/HotkeysPanel';
 import {cn} from '../../utils/cn';
 
 import {hotkeys} from './moc';
@@ -11,7 +11,9 @@ import './HotkeysPanelShowcase.scss';
 
 const b = cn('hotkeys-panel-showcase');
 
-export function HotkeysPanelShowcase() {
+type HotkeysPanelShowcaseProps = Pick<HotkeysPanelProps<HotkeysGroup>, 'filterable'>;
+
+export function HotkeysPanelShowcase({filterable}: HotkeysPanelShowcaseProps) {
     const [visible, setVisible] = React.useState<boolean>(true);
 
     const handleClose = () => {
@@ -37,6 +39,7 @@ export function HotkeysPanelShowcase() {
                         <Hotkey value="shift+K" />
                     </span>
                 }
+                filterable={filterable}
                 filterPlaceholder="Search"
                 emptyState={<div className={b('empty')}>No hotkeys found</div>}
             />