fix(plasma-new-hope): fix tokens usage in Tooltip

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -886,7 +886,7 @@ export { ToastProvider }
 export { toCssSize }
 
 // @public (undocumented)
-export const Tooltip: React_2.ForwardRefExoticComponent<TooltipProps & React_2.RefAttributes<HTMLDivElement>>;
+export const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>>;
 
 export { TooltipProps }
 

packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts

@@ -1,4 +1,4 @@
-import { css, tooltipTokens, popoverTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components';
 
 export const config = {
     defaults: {
@@ -24,6 +24,13 @@ export const config = {
                 ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tooltipTokens.contentLeftMargin}: 0.25rem;
+
+                ${tooltipTokens.arrowMaskWidth}: 1rem;
+                ${tooltipTokens.arrowMaskHeight}: 1rem;
+                ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
+                ${tooltipTokens.arrowHeight}: 0.375rem;
+                ${tooltipTokens.arrowEdgeMargin}: 0.5625rem;
+                ${tooltipTokens.arrowBackground}: var(--plasma-colors-background-primary);
             `,
             m: css`
                 ${tooltipTokens.paddingTop}: 0.6875rem;
@@ -42,6 +49,13 @@ export const config = {
                 ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height);
 
                 ${tooltipTokens.contentLeftMargin}: 0.375rem;
+
+                ${tooltipTokens.arrowMaskWidth}: 1.25rem;
+                ${tooltipTokens.arrowMaskHeight}: 1.25rem;
+                ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
+                ${tooltipTokens.arrowHeight}: 0.5rem;
+                ${tooltipTokens.arrowEdgeMargin}: 0.625rem;
+                ${tooltipTokens.arrowBackground}: var(--plasma-colors-background-primary);
             `,
         },
         view: {
@@ -53,39 +67,3 @@ export const config = {
         },
     },
 };
-
-export const popoverCustomConfigS = {
-    defaults: {
-        view: 'default',
-    },
-    variations: {
-        view: {
-            default: css`
-                ${popoverTokens.arrowMaskWidth}: 1rem;
-                ${popoverTokens.arrowMaskHeight}: 1rem;
-                ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
-                ${popoverTokens.arrowHeight}: 0.375rem;
-                ${popoverTokens.arrowEdgeMargin}: 0.5625rem;
-                ${popoverTokens.arrowBackground}: var(--plasma-colors-background-primary);
-            `,
-        },
-    },
-};
-
-export const popoverCustomConfigM = {
-    defaults: {
-        view: 'default',
-    },
-    variations: {
-        view: {
-            default: css`
-                ${popoverTokens.arrowMaskWidth}: 1.25rem;
-                ${popoverTokens.arrowMaskHeight}: 1.25rem;
-                ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
-                ${popoverTokens.arrowHeight}: 0.5rem;
-                ${popoverTokens.arrowEdgeMargin}: 0.625rem;
-                ${popoverTokens.arrowBackground}: var(--plasma-colors-background-primary);
-            `,
-        },
-    },
-};

packages/plasma-b2c/src/components/Tooltip/Tooltip.tsx

@@ -1,24 +1,10 @@
-import React, { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';
-import {
-    TooltipProps,
-    TooltipPropsWithConfig,
-    tooltipConfig,
-    popoverConfig,
-    component,
-    mergeConfig,
-} from '@salutejs/plasma-new-hope/styled-components';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TooltipProps, tooltipConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
 
-import { config, popoverCustomConfigS, popoverCustomConfigM } from './Tooltip.config';
+import { config } from './Tooltip.config';
 
-const mergedPopoverConfigS = mergeConfig(popoverConfig, popoverCustomConfigS);
-const mergedPopoverConfigM = mergeConfig(popoverConfig, popoverCustomConfigM);
 const mergedConfig = mergeConfig(tooltipConfig, config);
 
-export const TooltipComponent = component(mergedConfig) as ForwardRefExoticComponent<
-    TooltipPropsWithConfig & RefAttributes<HTMLSpanElement>
+export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent<
+    TooltipProps & RefAttributes<HTMLDivElement>
 >;
-
-export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, outerRef) => {
-    const popoverInnerConfig = props.size === 'm' ? mergedPopoverConfigM : mergedPopoverConfigS;
-    return <TooltipComponent ref={outerRef} {...props} config={popoverInnerConfig} />;
-});

packages/plasma-new-hope/src/components/Tooltip/Tooltip.tokens.ts

@@ -22,4 +22,11 @@ export const tokens = {
     textFontLineHeight: '--plasma-tooltip-text-font-line-height',
 
     contentLeftMargin: '--plasma-tooltip-content-left-margin',
+
+    arrowMaskWidth: '--plasma-tooltip-arrow-mask-width',
+    arrowMaskHeight: '--plasma-tooltip-arrow-mask-height',
+    arrowMaskImage: '--plasma-tooltip-arrow-mask-image',
+    arrowBackground: '--plasma-tooltip-arrow-background',
+    arrowHeight: '--plasma-tooltip-arrow-height',
+    arrowEdgeMargin: '--plasma-tooltip-arrow-edge-margin',
 };

packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx

@@ -1,27 +1,39 @@
-import React, { useEffect, forwardRef, ForwardRefExoticComponent, RefAttributes, useMemo } from 'react';
+import React, { useEffect, forwardRef, useState } from 'react';
+import { styled } from '@linaria/react';
 
 import { RootProps, component } from '../../engines';
-import { PopoverProps } from '../Popover';
+import { popoverConfig, popoverTokens } from '../Popover';
 import { cx } from '../../utils';
 
-import { TooltipProps, TooltipPropsWithConfig } from './Tooltip.types';
+import { TooltipProps } from './Tooltip.types';
 import { StyledContentLeft, TooltipRoot } from './Tooltip.styles';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import { classes } from './Tooltip.tokens';
+import { classes, tokens } from './Tooltip.tokens';
 
 const ESCAPE_KEYCODE = 27;
 
 const getStringValue = (value?: number | string) => {
     return typeof value === 'number' ? `${value}rem` : value;
 };
 
+const Popover = component(popoverConfig);
+
+const StyledPopover = styled(Popover)`
+    ${popoverTokens.arrowMaskWidth}: var(${tokens.arrowMaskWidth});
+    ${popoverTokens.arrowMaskHeight}: var(${tokens.arrowMaskHeight});
+    ${popoverTokens.arrowMaskImage}: var(${tokens.arrowMaskImage});
+    ${popoverTokens.arrowBackground}: var(${tokens.arrowBackground});
+    ${popoverTokens.arrowHeight}: var(${tokens.arrowHeight});
+    ${popoverTokens.arrowEdgeMargin}: var(${tokens.arrowEdgeMargin});
+`;
+
 /**
  * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
  */
 
 export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, 'isOpen' | 'text'>>) =>
-    forwardRef<HTMLDivElement, TooltipPropsWithConfig>(
+    forwardRef<HTMLDivElement, TooltipProps>(
         (
             {
                 id,
@@ -39,11 +51,12 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, '
                 size,
                 contentLeft,
                 zIndex = '9200',
-                config,
                 ...rest
             },
             outerRef,
         ) => {
+            const [ref, setRef] = useState<HTMLDivElement | null>(null);
+
             useEffect(() => {
                 const onKeyDown = (event: KeyboardEvent) => {
                     if (event.keyCode === ESCAPE_KEYCODE) {
@@ -56,17 +69,12 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, '
                 return () => {
                     window.removeEventListener('keydown', onKeyDown);
                 };
-            }, [config]);
+            }, []);
 
             const withContentLeft = contentLeft ? classes.hasContentLeft : undefined;
 
-            const Popover = useMemo(
-                () => component(config) as ForwardRefExoticComponent<PopoverProps & RefAttributes<HTMLDivElement>>,
-                [],
-            );
-
             return (
-                <Popover
+                <StyledPopover
                     isOpen={isOpen && Boolean(text?.length)}
                     placement={placement}
                     offset={offset}
@@ -77,9 +85,10 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, '
                     aria-hidden={!isOpen}
                     aria-live="polite"
                     role="tooltip"
+                    className={cx(ref?.classList.toString())} // прокидываем стили для Popover из Root Tooltip-а
                     {...rest}
                 >
-                    <Root view={view} size={size}>
+                    <Root view={view} size={size} ref={setRef}>
                         <TooltipRoot
                             ref={outerRef}
                             id={id}
@@ -91,7 +100,7 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, '
                             {text}
                         </TooltipRoot>
                     </Root>
-                </Popover>
+                </StyledPopover>
             );
         },
     );

packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts

@@ -1,7 +1,6 @@
-import { ReactNode, RefAttributes } from 'react';
+import { ReactNode } from 'react';
 
-import { PopoverPlacement, PopoverPlacementBasic, PopoverProps } from '../Popover';
-import { ComponentConfig, PropsType, Variants } from '../../engines/types';
+import { PopoverPlacement, PopoverPlacementBasic } from '../Popover';
 
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -72,10 +71,3 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     view?: string;
 }
-
-export interface TooltipPropsWithConfig extends TooltipProps {
-    /**
-     * Конфиг компонента Popover.
-     */
-    config: ComponentConfig<string, Variants, PropsType<Variants>, PopoverProps & RefAttributes<HTMLDivElement>>;
-}

packages/plasma-new-hope/src/components/Tooltip/index.ts

@@ -1,3 +1,3 @@
 export { tooltipRoot, tooltipConfig } from './Tooltip';
 export { tokens as tooltipTokens } from './Tooltip.tokens';
-export type { TooltipProps, TooltipPropsWithConfig } from './Tooltip.types';
+export type { TooltipProps } from './Tooltip.types';

packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.config.ts

@@ -1,7 +1,6 @@
 import { css } from '@linaria/core';
 
 import { tooltipTokens } from '../../../../components/Tooltip';
-import { popoverTokens } from '../../../../components/Popover';
 
 export const config = {
     defaults: {
@@ -27,6 +26,13 @@ export const config = {
                 ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tooltipTokens.contentLeftMargin}: 0.25rem;
+
+                ${tooltipTokens.arrowMaskWidth}: 1rem;
+                ${tooltipTokens.arrowMaskHeight}: 1rem;
+                ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
+                ${tooltipTokens.arrowHeight}: 0.375rem;
+                ${tooltipTokens.arrowEdgeMargin}: 0.5625rem;
+                ${tooltipTokens.arrowBackground}: var(--surface-solid-card);
             `,
             m: css`
                 ${tooltipTokens.paddingTop}: 0.6875rem;
@@ -45,6 +51,13 @@ export const config = {
                 ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height);
 
                 ${tooltipTokens.contentLeftMargin}: 0.375rem;
+
+                ${tooltipTokens.arrowMaskWidth}: 1.25rem;
+                ${tooltipTokens.arrowMaskHeight}: 1.25rem;
+                ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
+                ${tooltipTokens.arrowHeight}: 0.5rem;
+                ${tooltipTokens.arrowEdgeMargin}: 0.625rem;
+                ${tooltipTokens.arrowBackground}: var(--surface-solid-card);
             `,
         },
         view: {
@@ -56,39 +69,3 @@ export const config = {
         },
     },
 };
-
-export const popoverCustomConfigS = {
-    defaults: {
-        view: 'default',
-    },
-    variations: {
-        view: {
-            default: css`
-                ${popoverTokens.arrowMaskWidth}: 1rem;
-                ${popoverTokens.arrowMaskHeight}: 1rem;
-                ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
-                ${popoverTokens.arrowHeight}: 0.375rem;
-                ${popoverTokens.arrowEdgeMargin}: 0.5625rem;
-                ${popoverTokens.arrowBackground}: var(--surface-solid-card);
-            `,
-        },
-    },
-};
-
-export const popoverCustomConfigM = {
-    defaults: {
-        view: 'default',
-    },
-    variations: {
-        view: {
-            default: css`
-                ${popoverTokens.arrowMaskWidth}: 1.25rem;
-                ${popoverTokens.arrowMaskHeight}: 1.25rem;
-                ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
-                ${popoverTokens.arrowHeight}: 0.5rem;
-                ${popoverTokens.arrowEdgeMargin}: 0.625rem;
-                ${popoverTokens.arrowBackground}: var(--surface-solid-card);
-            `,
-        },
-    },
-};

packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,14 @@
-import React, { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-import { TooltipProps, TooltipPropsWithConfig, tooltipConfig } from '../../../../components/Tooltip';
+import { TooltipProps, tooltipConfig } from '../../../../components/Tooltip';
 import { component, mergeConfig } from '../../../../engines';
-import { popoverConfig } from '../../../../components/Popover';
 
-import { config, popoverCustomConfigS, popoverCustomConfigM } from './Tooltip.config';
+import { config } from './Tooltip.config';
 
 export type { TooltipProps } from '../../../../components/Tooltip';
 
-const mergedPopoverConfigS = mergeConfig(popoverConfig, popoverCustomConfigS);
-const mergedPopoverConfigM = mergeConfig(popoverConfig, popoverCustomConfigM);
 const mergedConfig = mergeConfig(tooltipConfig, config);
 
-export const TooltipComponent = component(mergedConfig) as ForwardRefExoticComponent<
-    TooltipPropsWithConfig & RefAttributes<HTMLSpanElement>
+export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent<
+    TooltipProps & RefAttributes<HTMLSpanElement>
 >;
-
-export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, outerRef) => {
-    const popoverInnerConfig = props.size === 'm' ? mergedPopoverConfigM : mergedPopoverConfigS;
-    return <TooltipComponent ref={outerRef} {...props} config={popoverInnerConfig} />;
-});