diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png index 0da086895e..27016c87ec 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png index 31d732aa6f..51b8bdfaba 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png index 2274672cb3..6e6db39b4d 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png index b101ed142a..9217932c19 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png index 1caf3193cf..045070f327 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png index a9c52ac672..22f7a545bd 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png index f3e3098d50..0dcb0808b6 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png index fb5facf00f..257e7691bd 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png index 826168fb53..4e303d375c 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png index 92892357dd..bf57087f72 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png index 380a106a28..818068b75e 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png index 360f09a520..c1652c5a65 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png index 0e14818fb4..e4ed3e4170 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png index cc9abad961..a461baa091 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png index 65f830be7e..0ad1bc3b6a 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png index a524156133..bb516b26a7 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png differ diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 932d3ddf22..9862475319 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -886,7 +886,7 @@ export { ToastProvider } export { toCssSize } // @public (undocumented) -export const Tooltip: React_2.ForwardRefExoticComponent>; +export const Tooltip: ForwardRefExoticComponent>; export { TooltipProps } diff --git a/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts b/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts index 3ceb96e8cb..49f52fe0c8 100644 --- a/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts +++ b/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); - `, - }, - }, -}; diff --git a/packages/plasma-b2c/src/components/Tooltip/Tooltip.tsx b/packages/plasma-b2c/src/components/Tooltip/Tooltip.tsx index 9d5ed49ebe..1c20045539 100644 --- a/packages/plasma-b2c/src/components/Tooltip/Tooltip.tsx +++ b/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 +export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent< + TooltipProps & RefAttributes >; - -export const Tooltip = forwardRef((props, outerRef) => { - const popoverInnerConfig = props.size === 'm' ? mergedPopoverConfigM : mergedPopoverConfigS; - return ; -}); diff --git a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tokens.ts b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tokens.ts index d9e4b0a8df..a43cf3bedb 100644 --- a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tokens.ts +++ b/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', }; diff --git a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx index 0a4d580f35..73eeaf2cb1 100644 --- a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx +++ b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx @@ -1,14 +1,15 @@ -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; @@ -16,12 +17,23 @@ 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>) => - forwardRef( + forwardRef( ( { id, @@ -39,11 +51,12 @@ export const tooltipRoot = (Root: RootProps { + const [ref, setRef] = useState(null); + useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { if (event.keyCode === ESCAPE_KEYCODE) { @@ -56,17 +69,12 @@ export const tooltipRoot = (Root: RootProps { window.removeEventListener('keydown', onKeyDown); }; - }, [config]); + }, []); const withContentLeft = contentLeft ? classes.hasContentLeft : undefined; - const Popover = useMemo( - () => component(config) as ForwardRefExoticComponent>, - [], - ); - return ( - - + - + ); }, ); diff --git a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts index 6e0366a4af..14fd641468 100644 --- a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts +++ b/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 { /** @@ -72,10 +71,3 @@ export interface TooltipProps extends React.HTMLAttributes { */ view?: string; } - -export interface TooltipPropsWithConfig extends TooltipProps { - /** - * Конфиг компонента Popover. - */ - config: ComponentConfig, PopoverProps & RefAttributes>; -} diff --git a/packages/plasma-new-hope/src/components/Tooltip/index.ts b/packages/plasma-new-hope/src/components/Tooltip/index.ts index aaf9f44268..3051f955e7 100644 --- a/packages/plasma-new-hope/src/components/Tooltip/index.ts +++ b/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'; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.config.ts index 9b3cd72165..23a1ffd3f0 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.config.ts +++ b/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); - `, - }, - }, -}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.tsx index 3420e28e66..d656e5260e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.tsx +++ b/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 +export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent< + TooltipProps & RefAttributes >; - -export const Tooltip = forwardRef((props, outerRef) => { - const popoverInnerConfig = props.size === 'm' ? mergedPopoverConfigM : mergedPopoverConfigS; - return ; -}); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Tooltip/Tooltip.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Tooltip/Tooltip.config.ts index 9b3cd72165..23a1ffd3f0 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/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); - `, - }, - }, -}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Tooltip/Tooltip.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Tooltip/Tooltip.tsx index 3420e28e66..d656e5260e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Tooltip/Tooltip.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/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 +export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent< + TooltipProps & RefAttributes >; - -export const Tooltip = forwardRef((props, outerRef) => { - const popoverInnerConfig = props.size === 'm' ? mergedPopoverConfigM : mergedPopoverConfigS; - return ; -}); diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.config.ts index a7da34e45a..123d54230c 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-new-hope/src/examples/sds_engineer/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}: 1rem; ${tooltipTokens.contentLeftMargin}: 0.25rem; + + ${tooltipTokens.arrowMaskWidth}: 1rem; + ${tooltipTokens.arrowMaskHeight}: 1rem; + ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0ibTgsMTUuNzhsLTIuMjQsLTQuMzRjLTAuOTIsLTEuNzkgLTEuMzgsLTIuNjggLTIuMTUsLTMuMTdjLTAuNzcsLTAuNDkgLTEuNzIsLTAuNDkgLTMuNjEsLTAuNDlsMTYsMGMtMS44OSwwIC0yLjgzLDAgLTMuNiwwLjQ5Yy0wLjc4LDAuNDkgLTEuMjQsMS4zOCAtMi4xNiwzLjE2bC0yLjI0LDQuMzV6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLW9wYWNpdHk9IjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9InBvaW50ZXIiLz4KPC9zdmc+"); + ${tooltipTokens.arrowHeight}: 0.5rem; + ${tooltipTokens.arrowEdgeMargin}: 0.625rem; + ${tooltipTokens.arrowBackground}: #475056; `, }, view: { @@ -38,21 +44,3 @@ export const config = { }, }, }; - -export const popoverCustomConfig = { - defaults: { - view: 'default', - }, - variations: { - view: { - default: css` - ${popoverTokens.arrowMaskWidth}: 1rem; - ${popoverTokens.arrowMaskHeight}: 1rem; - ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0ibTgsMTUuNzhsLTIuMjQsLTQuMzRjLTAuOTIsLTEuNzkgLTEuMzgsLTIuNjggLTIuMTUsLTMuMTdjLTAuNzcsLTAuNDkgLTEuNzIsLTAuNDkgLTMuNjEsLTAuNDlsMTYsMGMtMS44OSwwIC0yLjgzLDAgLTMuNiwwLjQ5Yy0wLjc4LDAuNDkgLTEuMjQsMS4zOCAtMi4xNiwzLjE2bC0yLjI0LDQuMzV6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLW9wYWNpdHk9IjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9InBvaW50ZXIiLz4KPC9zdmc+"); - ${popoverTokens.arrowHeight}: 0.5rem; - ${popoverTokens.arrowEdgeMargin}: 0.625rem; - ${popoverTokens.arrowBackground}: #475056; - `, - }, - }, -}; diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.tsx index 30e0a6d03a..d656e5260e 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.tsx +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Tooltip/Tooltip.tsx @@ -1,20 +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, popoverCustomConfig } from './Tooltip.config'; +import { config } from './Tooltip.config'; export type { TooltipProps } from '../../../../components/Tooltip'; -const mergedPopoverConfig = mergeConfig(popoverConfig, popoverCustomConfig); const mergedConfig = mergeConfig(tooltipConfig, config); -export const TooltipComponent = component(mergedConfig) as ForwardRefExoticComponent< - TooltipPropsWithConfig & RefAttributes +export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent< + TooltipProps & RefAttributes >; - -export const Tooltip = forwardRef((props, outerRef) => { - return ; -}); diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 1d4eab2fb5..5bef28f47a 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -886,7 +886,7 @@ export { ToastProvider } export { toCssSize } // @public (undocumented) -export const Tooltip: React_2.ForwardRefExoticComponent>; +export const Tooltip: ForwardRefExoticComponent>; export { TooltipProps } diff --git a/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts b/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts index 3ceb96e8cb..49f52fe0c8 100644 --- a/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-web/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); - `, - }, - }, -}; diff --git a/packages/plasma-web/src/components/Tooltip/Tooltip.tsx b/packages/plasma-web/src/components/Tooltip/Tooltip.tsx index 9d5ed49ebe..1c20045539 100644 --- a/packages/plasma-web/src/components/Tooltip/Tooltip.tsx +++ b/packages/plasma-web/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 +export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent< + TooltipProps & RefAttributes >; - -export const Tooltip = forwardRef((props, outerRef) => { - const popoverInnerConfig = props.size === 'm' ? mergedPopoverConfigM : mergedPopoverConfigS; - return ; -});