From 19581a12a86cfa98a65df2c913de07a0ec3946b3 Mon Sep 17 00:00:00 2001 From: Arsen Alkamyan Date: Mon, 3 Jul 2023 18:34:42 +0400 Subject: [PATCH] [feat] Update Tooltip component --- .../kit_v2/Popover/Popover.style.ts | 28 +++------- .../components/kit_v2/Tooltip/Tooltip.d.ts | 6 +++ .../kit_v2/Tooltip/Tooltip.style.ts | 54 ++++++++++--------- .../src/components/kit_v2/Tooltip/Tooltip.tsx | 3 +- .../web/ui/src/config/stitches/animations.ts | 34 +++++++++++- .../web/ui/src/config/stitches/theme.ts | 1 + .../web/ui/src/stories/Tooltip.stories.tsx | 7 ++- 7 files changed, 85 insertions(+), 48 deletions(-) diff --git a/src/aimcore/web/ui/src/components/kit_v2/Popover/Popover.style.ts b/src/aimcore/web/ui/src/components/kit_v2/Popover/Popover.style.ts index 4bac947b5c..dc95279e78 100644 --- a/src/aimcore/web/ui/src/components/kit_v2/Popover/Popover.style.ts +++ b/src/aimcore/web/ui/src/components/kit_v2/Popover/Popover.style.ts @@ -1,26 +1,12 @@ import * as PopoverPrimitive from '@radix-ui/react-popover'; -import { keyframes, styled } from 'config/stitches'; - -const slideUpAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateY(2px)' }, - '100%': { opacity: 1, transform: 'translateY(0)' }, -}); - -const slideRightAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateX(-2px)' }, - '100%': { opacity: 1, transform: 'translateX(0)' }, -}); - -const slideDownAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateY(-2px)' }, - '100%': { opacity: 1, transform: 'translateY(0)' }, -}); - -const slideLeftAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateX(2px)' }, - '100%': { opacity: 1, transform: 'translateX(0)' }, -}); +import { styled } from 'config/stitches'; +import { + slideDownAndFade, + slideLeftAndFade, + slideRightAndFade, + slideUpAndFade, +} from 'config/stitches/animations'; const StyledContent = styled(PopoverPrimitive.Content, { br: '5px', diff --git a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.d.ts b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.d.ts index d7f86213a7..5ea98a370a 100644 --- a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.d.ts +++ b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.d.ts @@ -36,4 +36,10 @@ export interface ITooltipProps extends TooltipProps { * @optional */ hasArrow?: boolean; + /** + * The color of the tooltip. + * @defaultValue 'info' + * @optional + */ + color?: 'info' | 'success' | 'warning' | 'danger'; } diff --git a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.style.ts b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.style.ts index 68b6625973..f77ade7c15 100644 --- a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.style.ts +++ b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.style.ts @@ -1,37 +1,24 @@ import * as Tooltip from '@radix-ui/react-tooltip'; -import { keyframes, styled } from 'config/stitches'; - -const slideUpAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateY(2px)' }, - '100%': { opacity: 1, transform: 'translateY(0)' }, -}); - -const slideRightAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateX(-2px)' }, - '100%': { opacity: 1, transform: 'translateX(0)' }, -}); - -const slideDownAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateY(-2px)' }, - '100%': { opacity: 1, transform: 'translateY(0)' }, -}); - -const slideLeftAndFade = keyframes({ - '0%': { opacity: 0, transform: 'translateX(2px)' }, - '100%': { opacity: 1, transform: 'translateX(0)' }, -}); +import { styled } from 'config/stitches'; +import { + slideDownAndFade, + slideLeftAndFade, + slideRightAndFade, + slideUpAndFade, +} from 'config/stitches/animations'; const TooltipContent = styled(Tooltip.Content, { borderRadius: 4, - padding: '10px 15px', + p: '$4 $5', maxWidth: 400, fontSize: '$3', - border: '1px solid rgba(90, 102, 122, 0.2)', + border: '1px solid $colors$border-bgborder-airly-opacity', wordBreak: 'break-word', lineHeight: 1, backgroundColor: 'white', - bs: 'rgba(90, 102, 122, 0.3) 0px 10px 38px -10px, rgba(90, 102, 122, 0.3) 0px 10px 20px -15px', + bs: '$moderate', + zIndex: 1000, userSelect: 'none', animationDuration: '300ms', animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)', @@ -42,6 +29,25 @@ const TooltipContent = styled(Tooltip.Content, { '&[data-side="bottom"]': { animationName: slideUpAndFade }, '&[data-side="left"]': { animationName: slideRightAndFade }, }, + variants: { + colorPalette: { + info: { + bc: 'white', + }, + success: { + bc: '$background-default-success-plain', + color: 'white', + }, + warning: { + bc: '$background-default-warning-plain', + color: 'white', + }, + danger: { + bc: '$background-default-danger-plain', + color: 'white', + }, + }, + }, }); const TooltipArrow = styled(Tooltip.Arrow, { diff --git a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.tsx b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.tsx index ab095f04ea..d4b8ffab75 100644 --- a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.tsx +++ b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.tsx @@ -36,6 +36,7 @@ function Tooltip({ skipDelayDuration = 300, hasArrow = false, contentProps = {}, + color = 'info', children, ...props }: ITooltipProps): React.FunctionComponentElement { @@ -57,7 +58,7 @@ function Tooltip({ ref={ref} data-testid='tooltip-content' sideOffset={5} - style={{ zIndex: 1000 }} + colorPalette={color} {...contentProps} > {content} diff --git a/src/aimcore/web/ui/src/config/stitches/animations.ts b/src/aimcore/web/ui/src/config/stitches/animations.ts index e01540da27..236d2da1dc 100644 --- a/src/aimcore/web/ui/src/config/stitches/animations.ts +++ b/src/aimcore/web/ui/src/config/stitches/animations.ts @@ -30,4 +30,36 @@ const slideOut = keyframes({ '100%': { transform: 'translateY(100%)' }, }); -export { fadeIn, fadeOut, toastSlideIn, toastSwipeOut, slideIn, slideOut }; +// Tooltip and Popover animations +const slideUpAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateY(2px)' }, + '100%': { opacity: 1, transform: 'translateY(0)' }, +}); + +const slideRightAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateX(-2px)' }, + '100%': { opacity: 1, transform: 'translateX(0)' }, +}); + +const slideDownAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateY(-2px)' }, + '100%': { opacity: 1, transform: 'translateY(0)' }, +}); + +const slideLeftAndFade = keyframes({ + '0%': { opacity: 0, transform: 'translateX(2px)' }, + '100%': { opacity: 1, transform: 'translateX(0)' }, +}); + +export { + fadeIn, + fadeOut, + toastSlideIn, + toastSwipeOut, + slideIn, + slideOut, + slideUpAndFade, + slideRightAndFade, + slideDownAndFade, + slideLeftAndFade, +}; diff --git a/src/aimcore/web/ui/src/config/stitches/theme.ts b/src/aimcore/web/ui/src/config/stitches/theme.ts index f227c6fa1d..587ba46d44 100644 --- a/src/aimcore/web/ui/src/config/stitches/theme.ts +++ b/src/aimcore/web/ui/src/config/stitches/theme.ts @@ -400,6 +400,7 @@ export const lightTheme: ConfigType.Theme = { 'border-default-bgborder-soft': '#B4BFCA', 'border-default-bgborder-light': '#D9DFE4', 'border-default-bgborder-airly': '#E8EBEF', + 'border-default-bgborder-airly-opacity': 'hsla(210, 17%, 75%, 0.3)', 'border-default-bgborder-lumos': '#F7F8FA', 'border-default-bgborder-pastel-opacity': 'hsla(210, 17%, 75%, 0.3)', diff --git a/src/aimcore/web/ui/src/stories/Tooltip.stories.tsx b/src/aimcore/web/ui/src/stories/Tooltip.stories.tsx index dcbf10cfd8..91ad63cbcc 100644 --- a/src/aimcore/web/ui/src/stories/Tooltip.stories.tsx +++ b/src/aimcore/web/ui/src/stories/Tooltip.stories.tsx @@ -6,7 +6,12 @@ import TooltipComponent from 'components/kit_v2/Tooltip'; export default { title: 'Kit/Data Display', component: TooltipComponent, - argTypes: {}, + argTypes: { + color: { + control: 'select', + options: ['info', 'success', 'warning', 'danger'], + }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => (