feat(MobileHeader): add OverlapPanel (#309)

Author: sofiushko

src/components/MobileHeader/MobileHeader.scss

@@ -38,6 +38,10 @@ $block: '.#{variables.$ns}mobile-header';
         overflow-y: auto;
     }
 
+    &__overlap-panel {
+        z-index: var(--gn-mobile-header-panel-z-index, 98);
+    }
+
     &__panels {
         z-index: var(--gn-mobile-header-panel-z-index, 98);
         position: fixed;

src/components/MobileHeader/MobileHeader.tsx

@@ -9,11 +9,16 @@ import {block} from '../utils/cn';
 
 import {Burger} from './Burger/Burger';
 import {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu';
+import {
+    OverlapPanelProps as CommonOverlapPanelProps,
+    OverlapPanel,
+} from './OverlapPanel/OverlapPanel';
 import {
     BURGER_PANEL_ITEM_ID,
     MOBILE_HEADER_COMPACT_HEIGHT,
     MOBILE_HEADER_EVENT_NAMES,
     MOBILE_HEADER_EXPANDED_HEIGHT,
+    OVERLAP_PANEL_ITEM_ID,
 } from './constants';
 import i18n from './i18n';
 import {MobileHeaderEvent, MobileHeaderEventOptions, MobileMenuItem} from './types';
@@ -28,11 +33,14 @@ interface BurgerMenuProps extends Omit<BurgerMenuInnerProps, 'renderFooter'> {
     renderFooter?: (data: {size: number; isCompact: boolean}) => React.ReactNode;
 }
 
+type OverlapPanelProps = Omit<CommonOverlapPanelProps, 'onClose' | 'visible'>;
+
 interface PanelItem extends Omit<DrawerItemProps, 'visible'> {}
 
 export interface MobileHeaderProps {
     logo: LogoProps;
     burgerMenu: BurgerMenuProps;
+    overlapPanel?: OverlapPanelProps;
     burgerCloseTitle?: string;
     burgerOpenTitle?: string;
     panelItems?: PanelItem[];
@@ -58,12 +66,14 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
             onEvent,
             className,
             contentClassName,
+            overlapPanel,
         },
         ref,
     ): React.ReactElement => {
         const targetRef = useForwardRef<HTMLDivElement>(ref);
         const [compact] = useState(true);
         const [visiblePanel, setVisiblePanel] = useState<PanelName>(null);
+        const [overlapPanelVisible, setOverlapPanelVisible] = useState(false);
 
         // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design
         const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;
@@ -84,6 +94,8 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
 
                     return panelOpen ? null : name;
                 });
+
+                setOverlapPanelVisible(false);
             },
             [onEvent],
         );
@@ -102,6 +114,7 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                 if (typeof detail?.panelName === 'string') {
                     onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.openEvent);
                     setVisiblePanel(detail?.panelName);
+                    setOverlapPanelVisible(false);
                 }
             },
             [onEvent],
@@ -112,6 +125,7 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                 if (typeof detail?.panelName === 'string') {
                     onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.closeEvent);
                     setVisiblePanel(null);
+                    setOverlapPanelVisible(false);
                 }
             },
             [onEvent],
@@ -127,6 +141,16 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
             setVisiblePanel(null);
         }, [onEvent]);
 
+        const onOverlapOpen = useCallback(() => {
+            onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);
+            setOverlapPanelVisible(true);
+        }, [onEvent]);
+
+        const onOverlapClose = useCallback(() => {
+            onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);
+            setOverlapPanelVisible(false);
+        }, [onEvent]);
+
         const onCloseDrawer = useCallback(() => {
             if (visiblePanel) {
                 onEvent?.(visiblePanel, MOBILE_HEADER_EVENT_NAMES.closeEvent);
@@ -185,6 +209,9 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                 node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
                 node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
 
+                node.addEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);
+                node.addEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);
+
                 node.addEventListener(
                     'MOBILE_PANEL_TOGGLE',
                     onMobilePanelToggle as unknown as EventListener,
@@ -204,6 +231,9 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                     node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
                     node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
 
+                    node.removeEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);
+                    node.removeEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);
+
                     node.removeEventListener(
                         'MOBILE_PANEL_TOGGLE',
                         onMobilePanelToggle as unknown as EventListener,
@@ -225,6 +255,8 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
             onMobilePanelToggle,
             onMobilePanelOpen,
             onMobilePanelClose,
+            onOverlapOpen,
+            onOverlapClose,
         ]);
 
         return (
@@ -257,7 +289,17 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                         />
                     ))}
                 </Drawer>
-
+                {overlapPanel && (
+                    <OverlapPanel
+                        topOffset={size}
+                        className={b('overlap-panel')}
+                        title={overlapPanel.title}
+                        onClose={onOverlapClose}
+                        action={overlapPanel.action}
+                        visible={overlapPanelVisible}
+                        renderContent={overlapPanel.renderContent}
+                    />
+                )}
                 <Content
                     size={size}
                     renderContent={renderContent}

src/components/MobileHeader/OverlapPanel/OverlapPanel.scss

@@ -0,0 +1,70 @@
+@use '../../variables';
+
+$block: '.#{variables.$ns}mobile-overlap-panel';
+
+#{$block} {
+    $action-width: 40px;
+
+    position: fixed;
+    inset: 0;
+
+    &__drawer-item {
+        width: 100%;
+        max-width: 100%;
+        flex-direction: column;
+        height: 100%;
+        display: flex;
+
+        box-sizing: border-box;
+        max-height: 100%;
+    }
+
+    &_action {
+        #{$block}__title {
+            padding-right: 0;
+        }
+    }
+
+    &__close {
+        margin-right: var(--g-spacing-1);
+    }
+
+    &__action {
+        margin-left: var(--g-spacing-1);
+    }
+
+    &__close.g-button:hover::before,
+    &__action.g-button:hover::before {
+        background-color: transparent;
+    }
+
+    &__title {
+        display: inline-block;
+        flex: 1;
+        justify-content: center;
+
+        padding-right: #{$action-width};
+
+        text-align: center;
+        margin: 0;
+    }
+
+    &__content {
+        display: flex;
+        overflow-y: auto;
+        flex-direction: column;
+
+        box-sizing: border-box;
+        height: 100%;
+        padding: 0px var(--g-spacing-5);
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        margin-bottom: var(--g-spacing-3);
+        padding: var(--g-spacing-1) var(--g-spacing-3);
+    }
+}

src/components/MobileHeader/OverlapPanel/OverlapPanel.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import {ArrowLeft as CloseIcon} from '@gravity-ui/icons';
+import {Button, Icon, IconProps, Text} from '@gravity-ui/uikit';
+
+import {Drawer, DrawerItem} from '../../Drawer/Drawer';
+import {block} from '../../utils/cn';
+import {MOBILE_HEADER_ICON_SIZE} from '../constants';
+import i18n from '../i18n';
+
+import './OverlapPanel.scss';
+
+const b = block('mobile-overlap-panel');
+
+interface OverlapPanelActionProps {
+    icon: IconProps['data'];
+    className?: string;
+    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    title: string;
+}
+
+export interface OverlapPanelProps {
+    className?: string;
+    title?: string;
+    onClose: () => void;
+    action?: OverlapPanelActionProps;
+    renderContent: () => React.ReactNode;
+    closeTitle?: string;
+    visible: boolean;
+    topOffset?: number | string;
+}
+
+export const OverlapPanel = ({
+    title,
+    renderContent,
+    className,
+    onClose,
+    action,
+    closeTitle = i18n('overlap_button_close'),
+    visible,
+    topOffset,
+}: OverlapPanelProps) => {
+    return (
+        <Drawer
+            className={b('', {action: Boolean(action)}, className)}
+            onVeilClick={onClose}
+            onEscape={onClose}
+            preventScrollBody
+            style={{
+                top: topOffset,
+            }}
+        >
+            <DrawerItem id="overlap" visible={visible} className={b('drawer-item')}>
+                <div className={b('header')}>
+                    <Button
+                        size="l"
+                        view="flat"
+                        className={b('close')}
+                        onClick={onClose}
+                        extraProps={{
+                            'aria-label': closeTitle,
+                        }}
+                    >
+                        <Icon
+                            className={b('icon')}
+                            data={CloseIcon}
+                            size={MOBILE_HEADER_ICON_SIZE}
+                        />
+                    </Button>
+                    <Text
+                        whiteSpace="nowrap"
+                        ellipsis
+                        variant={'subheader-2'}
+                        className={b('title')}
+                        as={title ? ('h2' as const) : undefined}
+                    >
+                        {title}
+                    </Text>
+                    {action && (
+                        <Button
+                            size="l"
+                            type="button"
+                            view="flat"
+                            onClick={action.onClick}
+                            className={b('action')}
+                            extraProps={{
+                                'aria-label': action.title,
+                            }}
+                        >
+                            <Icon data={action.icon} size={MOBILE_HEADER_ICON_SIZE} />
+                        </Button>
+                    )}
+                </div>
+                <div className={b('content')}>{renderContent()}</div>
+            </DrawerItem>
+        </Drawer>
+    );
+};

src/components/MobileHeader/OverlapPanel/__snapshots__/OverlapPanel.visual.test.tsx-snapshots/OverlapPanel-render-story-Showcase-dark-chromium-linux.png

@@ -0,0 +1,20 @@
+.overlap-panel-showcase {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    width: 100dvw;
+    height: 100dvh;
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    &__header {
+        width: 100%;
+        padding: 20px;
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+}