From e9a94007ad543c515056a792d022df8716b5e850 Mon Sep 17 00:00:00 2001 From: Rick <81699526+rick23p@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:48:43 +0330 Subject: [PATCH] SOV-4406: Fix Tooltip arrow color (#994) * feat: add styles to tooltip props * Create thick-flies-hope.md --- .changeset/thick-flies-hope.md | 5 ++++ .../2_molecules/Tooltip/Tooltip.module.css | 26 +++++++++++++++---- .../2_molecules/Tooltip/Tooltip.stories.tsx | 13 +++++++++- .../ui/src/2_molecules/Tooltip/Tooltip.tsx | 4 +++ .../src/2_molecules/Tooltip/Tooltip.types.ts | 5 ++++ 5 files changed, 47 insertions(+), 6 deletions(-) create mode 100644 .changeset/thick-flies-hope.md diff --git a/.changeset/thick-flies-hope.md b/.changeset/thick-flies-hope.md new file mode 100644 index 000000000..81f4eddc6 --- /dev/null +++ b/.changeset/thick-flies-hope.md @@ -0,0 +1,5 @@ +--- +"@sovryn/ui": patch +--- + +SOV-4406: Fix Tooltip arrow color diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.module.css b/packages/ui/src/2_molecules/Tooltip/Tooltip.module.css index d948dc543..f5749af78 100644 --- a/packages/ui/src/2_molecules/Tooltip/Tooltip.module.css +++ b/packages/ui/src/2_molecules/Tooltip/Tooltip.module.css @@ -1,5 +1,5 @@ .tooltip { - @apply bg-gray-10 text-xs rounded p-3 text-gray-90 absolute top-0 inline-block min-w-5 max-w-64 sm:max-w-96 leading-5 opacity-0; + @apply text-xs rounded p-3 absolute top-0 inline-block min-w-5 max-w-64 sm:max-w-96 leading-5 opacity-0; z-index: 999999; word-break: break-word; @@ -21,11 +21,27 @@ } } + &.primary { + @apply bg-gray-10 text-gray-90; + + &:after { + @apply border-gray-10; + } + } + + &.secondary { + @apply bg-gray-80 text-gray-10; + + &:after { + @apply border-gray-80; + } + } + &.top, &.top-start, &.top-end { &:after { - @apply border-t-[0.625rem] border-b-0 border-t-gray-10 border-b-transparent -bottom-[0.625rem] border-x-[0.516rem] border-x-transparent; + @apply border-t-[0.625rem] border-b-0 border-b-transparent -bottom-[0.625rem] border-x-[0.516rem] border-x-transparent; } } @@ -33,7 +49,7 @@ &.right-start, &.right-end { &:after { - @apply border-r-[0.625rem] border-l-0 border-r-gray-10 border-l-transparent -left-[0.625rem] border-y-[0.516rem] border-y-transparent; + @apply border-r-[0.625rem] border-l-0 border-l-transparent -left-[0.625rem] border-y-[0.516rem] border-y-transparent; } } @@ -41,7 +57,7 @@ &.left-start, &.left-end { &:after { - @apply border-l-[0.625rem] border-r-0 border-l-gray-10 border-r-transparent -right-[0.625rem] border-y-[0.516rem] border-y-transparent; + @apply border-l-[0.625rem] border-r-0 border-r-transparent -right-[0.625rem] border-y-[0.516rem] border-y-transparent; } } @@ -49,7 +65,7 @@ &.bottom-start, &.bottom-end { &:after { - @apply border-b-[0.625rem] border-t-0 border-b-gray-10 border-t-transparent -top-[0.625rem] border-x-[0.516rem] border-x-transparent; + @apply border-b-[0.625rem] border-t-0 border-t-transparent -top-[0.625rem] border-x-[0.516rem] border-x-transparent; } } diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx b/packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx index 2d0d7599c..53b047bff 100644 --- a/packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx +++ b/packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx @@ -4,7 +4,11 @@ import React, { ComponentProps } from 'react'; import { Button, Icon, Link } from '../../1_atoms'; import { Tooltip } from './Tooltip'; -import { TooltipPlacement, TooltipTrigger } from './Tooltip.types'; +import { + TooltipPlacement, + TooltipStyle, + TooltipTrigger, +} from './Tooltip.types'; export default { title: 'Molecule/Tooltip', @@ -40,6 +44,7 @@ Basic.args = { placement: TooltipPlacement.top, disabled: false, trigger: TooltipTrigger.hover, + style: TooltipStyle.primary, }; Basic.argTypes = { content: { @@ -97,6 +102,12 @@ Basic.argTypes = { description: 'The tooltip trigger behavior', defaultValue: TooltipTrigger.hover, }, + style: { + control: 'select', + options: Object.values(TooltipStyle), + defaultValue: TooltipStyle.primary, + description: 'The style to apply to the tooltip', + }, }; const InteractiveTemplate: Story> = args => ( diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.tsx b/packages/ui/src/2_molecules/Tooltip/Tooltip.tsx index d6b93f759..f938c793f 100644 --- a/packages/ui/src/2_molecules/Tooltip/Tooltip.tsx +++ b/packages/ui/src/2_molecules/Tooltip/Tooltip.tsx @@ -23,6 +23,7 @@ import { TooltipPlacement, TooltipTrigger, TooltipEvents, + TooltipStyle, } from './Tooltip.types'; import { CLOSE_DELAY, getTooltipPosition } from './Tooltip.utils'; @@ -41,6 +42,7 @@ type TooltipProps = { onHide?: () => void; disabled?: boolean; trigger?: TooltipTrigger; + style?: TooltipStyle; }; export const Tooltip: FC = ({ @@ -55,6 +57,7 @@ export const Tooltip: FC = ({ onHide, disabled = false, trigger = TooltipTrigger.hover, + style = TooltipStyle.secondary, }) => { const tooltipRef = useRef(null); const targetRef = useRef(null); @@ -177,6 +180,7 @@ export const Tooltip: FC = ({ styles.tooltip, styles[tooltipPosition?.arrowStyles], tooltipClassName, + styles[style], )} style={tooltipPosition?.positionStyles} ref={tooltipRef} diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.types.ts b/packages/ui/src/2_molecules/Tooltip/Tooltip.types.ts index f9b23e4ec..59042e266 100644 --- a/packages/ui/src/2_molecules/Tooltip/Tooltip.types.ts +++ b/packages/ui/src/2_molecules/Tooltip/Tooltip.types.ts @@ -29,3 +29,8 @@ export enum TooltipEvents { scroll = 'scroll', wheel = 'wheel', } + +export enum TooltipStyle { + primary = 'primary', + secondary = 'secondary', +}