Merge remote-tracking branch 'origin/develop' into chore/4733-improve-tooltip-configurability

apps/trading/components/header/header.tsx

@@ -53,7 +53,7 @@ export const HeaderStat = ({
       <div data-testid="item-header" id={id}>
         {heading}
       </div>
-      <Tooltip description={description}>
+      <Tooltip description={description} underline>
         <div
           data-testid="item-value"
           aria-labelledby={id}

libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -282,7 +282,6 @@ export const DealTicketMarginDetails = ({
                       assetDecimals
                     ) ?? '-'
                   }
-                  noUnderline
                 >
                   <div className="font-mono text-right">
                     {formatRange(

libs/deal-ticket/src/components/deal-ticket/key-value.tsx

@@ -47,7 +47,7 @@ export const KeyValue = ({
       <Tooltip description={labelDescription}>
         <div className="text-muted">{label}</div>
       </Tooltip>
-      <Tooltip description={`${value ?? '-'} ${symbol || ''}`} noUnderline>
+      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
         {valueElement}
       </Tooltip>
     </div>

libs/ui-toolkit/src/components/tooltip/tooltip.tsx

@@ -19,14 +19,14 @@ export interface TooltipProps {
   align?: 'start' | 'center' | 'end';
   side?: 'top' | 'right' | 'bottom' | 'left';
   sideOffset?: number;
-  noUnderline?: boolean;
+  underline?: boolean;
 }
 
-export const TOOLTIP_TRIGGER_CLASS_NAME = (noUnderline?: boolean) =>
-  classNames(
-    { 'underline underline-offset-2': !noUnderline },
-    'decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed'
-  );
+export const TOOLTIP_TRIGGER_CLASS_NAME = (underline?: boolean) =>
+  classNames({
+    'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed':
+      underline,
+  });
 
 // Conditionally rendered tooltip if description content is provided.
 export const Tooltip = ({
@@ -36,12 +36,12 @@ export const Tooltip = ({
   sideOffset,
   align = 'start',
   side = 'bottom',
-  noUnderline,
+  underline,
 }: TooltipProps) =>
   description ? (
     <Provider delayDuration={200} skipDelayDuration={100}>
       <Root open={open}>
-        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(noUnderline)}>
+        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(underline)}>
           {children}
         </Trigger>
         {description && (