feat(plasma-new-hope): Tooltip added

salute-developers · Nov 29, 2023 · 608295c · 608295c
1 parent 5260623
commit 608295c
Show file tree

Hide file tree

Showing 35 changed files with 1,533 additions and 135 deletions.
diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.styles.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.styles.ts
@@ -1,13 +1,6 @@
 import { styled } from '@linaria/react';
-import { css } from '@linaria/core';
 
-import { classes, tokens } from './Dropdown.tokens';
-
-export const base = css`
-    .${String(classes.nestedDropdown)} {
-        display: block;
-    }
-`;
+import { tokens } from './Dropdown.tokens';
 
 export const StyledDropdown = styled.div`
     box-sizing: border-box;

diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx
@@ -1,19 +1,42 @@
 import React, { forwardRef, useRef } from 'react';
 import { useFocusTrap, useForkRef, useUniqId } from '@salutejs/plasma-core';
+import { styled } from '@linaria/react';
 
 import { RootProps, component } from '../../engines';
-import { popoverConfig } from '../Popover';
+import { popoverClasses, popoverConfig } from '../Popover';
 import { cx } from '../../utils';
+import { PopoverPlacementBasic } from '../Popover/Popover.types';
 
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import { StyledDropdown, base } from './Dropdown.styles';
+import { StyledDropdown } from './Dropdown.styles';
 import { classes } from './Dropdown.tokens';
-import type { DropdownProps } from './Dropdown.types';
+import type { DropdownPlacement, DropdownPlacementBasic, DropdownProps } from './Dropdown.types';
+
+export const getPlacement = (placement: DropdownPlacement) => {
+    return `${placement}-start` as PopoverPlacementBasic;
+};
+
+export const getPlacements = (placements?: DropdownPlacement | DropdownPlacementBasic[]) => {
+    if (!placements) {
+        return;
+    }
+    const isArray = Array.isArray(placements);
+
+    if (!isArray) {
+        return getPlacement(placements as DropdownPlacement);
+    }
+    return ((placements || []) as DropdownPlacementBasic[]).map((placement) => getPlacement(placement));
+};
 
 // issue #823
 const Popover = component(popoverConfig);
 
+const StyledPopover = styled(Popover)`
+    .${String(classes.nestedDropdown)} > .${String(popoverClasses.target)} {
+        display: block;
+    }
+`;
 /**
  * Выпадающий список без внешнего контроля видимости.
  */
@@ -24,10 +47,11 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>
                 id,
                 target,
                 children,
-                arrow,
+                hasArrow,
                 role,
                 view,
                 size,
+                frame,
                 onToggle,
                 isFocusTrapped = true,
                 isOpen = false,
@@ -56,27 +80,29 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, DropdownProps>) =>
             const nestedClass = isNested ? classes.nestedDropdown : undefined;
 
             return (
-                <Root ref={handleRef} view={view} size={size} {...rest}>
-                    <Popover
-                        role={role}
-                        isOpen={isOpen}
-                        onToggle={(is, event) => onToggle?.(is, event)}
-                        id={innerId}
-                        ref={dropdownForkRef}
-                        target={target}
-                        offset={offset}
-                        preventOverflow={preventOverflow}
-                        className={cx(nestedClass)}
-                        arrow={arrow}
-                        placement={placement}
-                        trigger={trigger}
-                        closeOnOverlayClick={closeOnOverlayClick}
-                        closeOnEsc={closeOnEsc}
-                        isFocusTrapped={isFocusTrapped}
-                    >
+                <StyledPopover
+                    role={role}
+                    isOpen={isOpen}
+                    insidePortal={false}
+                    onToggle={(is, event) => onToggle?.(is, event)}
+                    id={innerId}
+                    ref={dropdownForkRef}
+                    target={target}
+                    offset={offset}
+                    preventOverflow={preventOverflow}
+                    className={cx(nestedClass)}
+                    hasArrow={hasArrow}
+                    placement={getPlacements(placement)}
+                    trigger={trigger}
+                    closeOnOverlayClick={closeOnOverlayClick}
+                    closeOnEsc={closeOnEsc}
+                    isFocusTrapped={isFocusTrapped}
+                    frame={frame}
+                >
+                    <Root ref={handleRef} view={view} size={size} {...rest}>
                         <StyledDropdown>{children}</StyledDropdown>
-                    </Popover>
-                </Root>
+                    </Root>
+                </StyledPopover>
             );
         },
     );
@@ -85,7 +111,7 @@ export const dropdownConfig = {
     name: 'Dropdown',
     tag: 'div',
     layout: dropdownRoot,
-    base,
+    base: '',
     variations: {
         view: {
             css: viewCSS,

diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts
@@ -45,7 +45,7 @@ export type CustomDropdownProps = {
     /**
      * Стрелка над элементом.
      */
-    arrow?: ReactNode;
+    hasArrow?: boolean;
     /**
      * Контент всплывающего окна.
      */
@@ -72,6 +72,10 @@ export type CustomDropdownProps = {
      * Событие сворачивания/разворачивания дропдауна.
      */
     onToggle?: (isOpen: boolean, event: SyntheticEvent | Event) => void;
+    /**
+     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.
+     */
+    frame?: 'document' | string | React.RefObject<HTMLElement>;
 
     size?: string;
     view?: string;

diff --git a/packages/plasma-new-hope/src/components/Popover/Popover.styles.ts b/packages/plasma-new-hope/src/components/Popover/Popover.styles.ts
@@ -0,0 +1,95 @@
+import { styled } from '@linaria/react';
+
+import { DEFAULT_Z_INDEX } from '../Popup/utils';
+
+import { tokens } from './Popover.tokens';
+import { PopoverProps } from './Popover.types';
+
+export const StyledRoot = styled.div`
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+`;
+
+export const StyledArrow = styled.div`
+    visibility: hidden;
+
+    &,
+    &::before {
+        position: absolute;
+        width: var(${String(tokens.arrowMaskWidth)});
+        height: var(${String(tokens.arrowMaskHeight)});
+        mask-image: var(${String(tokens.arrowMaskImage)});
+        background: var(${String(tokens.arrowBackground)});
+    }
+
+    &::before {
+        visibility: visible;
+        content: '';
+        transform: rotate(0deg);
+    }
+`;
+
+export const StyledPopover = styled.div<Pick<PopoverProps, 'zIndex'>>`
+    position: absolute;
+    z-index: ${({ zIndex }) => zIndex || DEFAULT_Z_INDEX};
+
+    &[data-popper-placement^='top'] > .popover-arrow {
+        bottom: calc(0px - var(${String(tokens.arrowHeight)}));
+    }
+
+    &[data-popper-placement^='bottom'] > .popover-arrow {
+        top: calc(0px - var(${String(tokens.arrowHeight)}));
+        &::before {
+            transform: rotate(180deg);
+        }
+    }
+
+    &[data-popper-placement^='left'] > .popover-arrow {
+        right: calc(0px - var(${String(tokens.arrowHeight)}));
+        &::before {
+            transform: rotate(-90deg);
+        }
+    }
+
+    &[data-popper-placement^='right'] > .popover-arrow {
+        left: calc(0px - var(${String(tokens.arrowHeight)}));
+        &::before {
+            transform: rotate(90deg);
+        }
+    }
+
+    &[data-popper-placement^='top-start'] > .popover-arrow {
+        bottom: calc(0px - var(${String(tokens.arrowHeight)}));
+        left: var(${String(tokens.arrowEdgeMargin)}) !important;
+        transform: unset !important;
+    }
+
+    &[data-popper-placement^='top-end'] > .popover-arrow {
+        bottom: calc(0px - var(${String(tokens.arrowHeight)}));
+        left: unset !important;
+        right: var(${String(tokens.arrowEdgeMargin)}) !important;
+        transform: unset !important;
+    }
+
+    &[data-popper-placement^='bottom-start'] > .popover-arrow {
+        top: calc(0px - var(${String(tokens.arrowHeight)}));
+        left: var(${String(tokens.arrowEdgeMargin)}) !important;
+        transform: unset !important;
+
+        &::before {
+            transform: rotate(180deg);
+        }
+    }
+
+    &[data-popper-placement^='bottom-end'] > .popover-arrow {
+        top: calc(0px - var(${String(tokens.arrowHeight)}));
+        left: unset !important;
+        right: var(${String(tokens.arrowEdgeMargin)}) !important;
+        transform: unset !important;
+
+        &::before {
+            transform: rotate(180deg);
+        }
+    }
+`;
diff --git a/packages/plasma-new-hope/src/components/Popover/Popover.tokens.ts b/packages/plasma-new-hope/src/components/Popover/Popover.tokens.ts
@@ -0,0 +1,14 @@
+export const classes = {
+    root: 'popover-root',
+    target: 'popover-target',
+    arrow: 'popover-arrow',
+};
+
+export const tokens = {
+    arrowMaskWidth: '--plasma-popover-arrow-mask-width',
+    arrowMaskHeight: '--plasma-popover-arrow-mask-height',
+    arrowMaskImage: '--plasma-popover-arrow-mask-image',
+    arrowBackground: '--plasma-popover-arrow-background',
+    arrowHeight: '--plasma-popover-arrow-height',
+    arrowEdgeMargin: '--plasma-popover-arrow-edge-margin',
+};