feat: add arrows towards the trigger and add isCompact prop for a sma… (

#2134)

feat: add compact version and fix arrow color

.changeset/chilly-comics-cry.md

@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": patch
+---
+
+Add indication arrow and add an compact version of the tooltip

packages/libs/react-ui/src/components/Tooltip/Tooltip.css.ts

@@ -1,14 +1,12 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { atoms } from '../../styles/atoms.css';
-import { tokens } from '../../styles/index';
+import { token } from '../../styles/index';
 
 export const base = style([
   atoms({
     position: 'absolute',
     fontSize: 'sm',
-    paddingBlock: 'sm',
-    paddingInline: 'md',
-    borderRadius: 'md',
+    borderRadius: 'xs',
     color: 'text.base.inverse.default',
     pointerEvents: 'none',
     backgroundColor: 'base.inverse.default',
@@ -21,18 +19,18 @@ export const base = style([
       position: 'absolute',
       borderTop: '6px solid transparent',
       borderRight: '6px solid transparent',
-      borderBottom: `6px solid ${tokens.kda.foundation.color.background.layer.default}`,
+      borderBottom: `6px solid ${token('color.background.base.inverse.default')}`,
       borderLeft: '6px solid transparent',
     },
-    zIndex: tokens.kda.foundation.zIndex.overlay,
+    zIndex: token('zIndex.overlay'),
   },
 ]);
 
 export const tooltipPositionVariants = styleVariants({
   bottom: [
     base,
     {
-      marginTop: tokens.kda.foundation.spacing.md,
+      marginTop: token('spacing.md'),
       top: '100%',
       left: '50%',
       transform: 'translateX(-50%)',
@@ -46,7 +44,7 @@ export const tooltipPositionVariants = styleVariants({
   top: [
     base,
     {
-      marginBottom: tokens.kda.foundation.spacing.md,
+      marginBottom: token('spacing.md'),
       bottom: '100%',
       left: '50%',
       transform: 'translateX(-50%)',
@@ -60,7 +58,7 @@ export const tooltipPositionVariants = styleVariants({
   right: [
     base,
     {
-      marginLeft: tokens.kda.foundation.spacing.md,
+      marginLeft: token('spacing.md'),
       left: '100%',
       top: '50%',
       transform: 'translateY(-50%)',
@@ -74,7 +72,7 @@ export const tooltipPositionVariants = styleVariants({
   left: [
     base,
     {
-      marginRight: tokens.kda.foundation.spacing.md,
+      marginRight: token('spacing.md'),
       right: '100%',
       top: '50%',
       transform: 'translateY(-50%)',
@@ -86,3 +84,14 @@ export const tooltipPositionVariants = styleVariants({
     },
   ],
 });
+
+export const tooltipSizes = styleVariants({
+  default: {
+    paddingInline: token('spacing.n4'),
+    paddingBlock: token('spacing.n3'),
+  },
+  compact: {
+    paddingInline: token('spacing.n3'),
+    paddingBlock: token('spacing.n1'),
+  },
+});

packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<ITooltipProps> = {
   decorators: [onLayer1],
   parameters: {
     status: {
-      type: ['releaseCandidate'],
+      type: ['stable'],
     },
     docs: {
       description: {
@@ -34,6 +34,10 @@ const meta: Meta<ITooltipProps> = {
     position: {
       description:
         'The position of the tooltip relative to the element that triggers it.',
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'right', 'bottom', 'left'],
       table: {
         defaultValue: { summary: 'right' },
       },
@@ -60,6 +64,18 @@ const meta: Meta<ITooltipProps> = {
     },
     isOpen: {
       description: 'Allows the user to control the open state of the tooltip.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    isCompact: {
+      description: 'Shows a more compact version of the tooltip',
+      control: {
+        type: 'boolean',
+      },
       table: {
         defaultValue: { summary: false },
       },
@@ -84,16 +100,11 @@ export const Dynamic: Story = {
     isDisabled: false,
     delay: 500,
     closeDelay: 300,
+    defaultOpen: true,
   },
-  render: ({ content, position, isDisabled, delay, closeDelay }) => {
+  render: (props) => {
     return (
-      <Tooltip
-        content={content}
-        position={position}
-        isDisabled={isDisabled}
-        delay={delay}
-        closeDelay={closeDelay}
-      >
+      <Tooltip {...props}>
         <Button>Trigger</Button>
       </Tooltip>
     );
@@ -128,7 +139,7 @@ export const TooltipReactNode: Story = {
   },
 };
 
-export const DefaultOpen: Story = {
+export const DefaultOpenRight: Story = {
   name: 'Tooltip that is set to defaultOpen',
   args: {
     content: "I'm a tooltip, look at me!",
@@ -153,6 +164,81 @@ export const DefaultOpen: Story = {
   },
 };
 
+export const DefaultOpenLeft: Story = {
+  name: 'Tooltip that is set to defaultOpen',
+  args: {
+    content: "I'm a tooltip, look at me!",
+    position: 'left',
+    isDisabled: false,
+    delay: 500,
+    closeDelay: 300,
+  },
+  render: ({ content, position, isDisabled, delay, closeDelay }) => {
+    return (
+      <Tooltip
+        content={content}
+        position={position}
+        isDisabled={isDisabled}
+        delay={delay}
+        closeDelay={closeDelay}
+        defaultOpen={true}
+      >
+        <Button>Trigger</Button>
+      </Tooltip>
+    );
+  },
+};
+
+export const DefaultOpenTop: Story = {
+  name: 'Tooltip that is set to defaultOpen',
+  args: {
+    content: "I'm a tooltip, look at me!",
+    position: 'top',
+    isDisabled: false,
+    delay: 500,
+    closeDelay: 300,
+  },
+  render: ({ content, position, isDisabled, delay, closeDelay }) => {
+    return (
+      <Tooltip
+        content={content}
+        position={position}
+        isDisabled={isDisabled}
+        delay={delay}
+        closeDelay={closeDelay}
+        defaultOpen={true}
+      >
+        <Button>Trigger</Button>
+      </Tooltip>
+    );
+  },
+};
+
+export const DefaultOpenBottom: Story = {
+  name: 'Tooltip that is set to defaultOpen',
+  args: {
+    content: "I'm a tooltip, look at me!",
+    position: 'bottom',
+    isDisabled: false,
+    delay: 500,
+    closeDelay: 300,
+  },
+  render: ({ content, position, isDisabled, delay, closeDelay }) => {
+    return (
+      <Tooltip
+        content={content}
+        position={position}
+        isDisabled={isDisabled}
+        delay={delay}
+        closeDelay={closeDelay}
+        defaultOpen={true}
+      >
+        <Button>Trigger</Button>
+      </Tooltip>
+    );
+  },
+};
+
 export const Controlled: Story = {
   name: 'Tooltip that is controlled by a button',
   args: {

packages/libs/react-ui/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,25 @@
 import { FocusableProvider } from '@react-aria/focus';
+import classNames from 'classnames';
 import type { FC, ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import { useTooltip, useTooltipTrigger } from 'react-aria';
 import type { TooltipTriggerProps } from 'react-stately';
 import { useTooltipTriggerState } from 'react-stately';
 import { Box } from '../Layout';
-import { tooltipPositionVariants } from './Tooltip.css';
+import { tooltipPositionVariants, tooltipSizes } from './Tooltip.css';
 export interface ITooltipProps
   extends Omit<TooltipTriggerProps, 'trigger' | 'onOpenChange'> {
   children: ReactElement;
   content: ReactNode;
+  isCompact?: boolean;
   position?: keyof typeof tooltipPositionVariants;
 }
 
 export const Tooltip: FC<ITooltipProps> = ({
   children,
   content,
   position = 'right',
+  isCompact = false,
   ...props
 }) => {
   const config = {
@@ -44,7 +47,13 @@ export const Tooltip: FC<ITooltipProps> = ({
       </FocusableProvider>
 
       {state.isOpen && (
-        <span className={tooltipPositionVariants[position]} {...tooltipProps}>
+        <span
+          className={classNames(
+            tooltipPositionVariants[position],
+            tooltipSizes[isCompact ? 'compact' : 'default'],
+          )}
+          {...tooltipProps}
+        >
           {content}
         </span>
       )}