fix: add preventTextWrap prop to Tooltip

Author: greatertomi

src/design-system/tooltip/tooltip-content.component.tsx

@@ -1,19 +1,27 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 
+import cn from 'classnames';
+
 import { Text } from '../text';
 
 import * as cx from './tooltip-content.css';
 
 export interface TooltipContentProps {
   label: ReactNode | string;
+  preventTextWrap?: boolean;
 }
 
 export const TooltipContent = ({
   label,
+  preventTextWrap = false,
 }: Readonly<TooltipContentProps>): JSX.Element => {
   return (
-    <div className={cx.tooltipContent}>
+    <div
+      className={cn(cx.tooltipContent, {
+        [cx.preventTextWrap]: preventTextWrap,
+      })}
+    >
       <Text.Body.Small color="secondary" weight="$medium">
         {label}
       </Text.Body.Small>

src/design-system/tooltip/tooltip-content.css.ts

@@ -15,3 +15,8 @@ export const tooltipContent = style([
     wordBreak: 'break-word',
   },
 ]);
+
+export const preventTextWrap = style({
+  whiteSpace: 'nowrap',
+  maxWidth: 'none',
+});

src/design-system/tooltip/tooltip-root.component.tsx

@@ -4,14 +4,14 @@ import type { ReactNode } from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 import { TooltipContent } from './tooltip-content.component';
-import * as cx from './tooltip-root.css';
 
 export type Props = typeof Tooltip.Root & {
-  align?: Tooltip.PopperContentProps['align'];
-  children?: Tooltip.PopperContentProps['children'];
-  side?: Tooltip.PopperContentProps['side'];
+  align?: Tooltip.TooltipContentProps['align'];
+  children?: Tooltip.TooltipContentProps['children'];
+  side?: Tooltip.TooltipContentProps['side'];
   label: ReactNode | string;
   zIndex?: number;
+  preventTextWrap?: boolean;
 };
 
 export const Root = ({
@@ -20,6 +20,7 @@ export const Root = ({
   align = 'center',
   zIndex,
   children,
+  preventTextWrap = false,
 }: Readonly<Props>): JSX.Element => {
   return (
     <Tooltip.Root>
@@ -29,10 +30,9 @@ export const Root = ({
           style={{ zIndex }}
           side={side}
           align={align}
-          className={cx.root}
           data-testid={'tooltip-content'}
         >
-          <TooltipContent label={label} />
+          <TooltipContent label={label} preventTextWrap={preventTextWrap} />
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>

src/design-system/tooltip/tooltip.component.tsx

@@ -13,6 +13,7 @@ export type Props = PropsWithChildren<
     delayDuration?: number;
     skipDelayDuration?: number;
     children: ReactNode;
+    preventTextWrap?: boolean;
   }
 >;
 
@@ -22,14 +23,20 @@ export const Tooltip = ({
   label,
   children,
   side,
+  preventTextWrap = false,
   ...props
 }: Readonly<Props>): JSX.Element => {
   return (
     <Provider
       skipDelayDuration={skipDelayDuration}
       delayDuration={delayDuration}
     >
-      <Root side={side} label={label} {...props}>
+      <Root
+        side={side}
+        label={label}
+        preventTextWrap={preventTextWrap}
+        {...props}
+      >
         <Trigger asChild>
           <div>{children}</div>
         </Trigger>

src/design-system/tooltip/tooltip.stories.tsx

@@ -33,9 +33,10 @@ export default {
 
 const SampleTooltip = ({
   label,
+  preventTextWrap,
 }: Readonly<TooltipContentProps>): JSX.Element => (
   <StorybookContentRenderer>
-    <TooltipContent label={label} />
+    <TooltipContent label={label} preventTextWrap={preventTextWrap} />
   </StorybookContentRenderer>
 );
 
@@ -111,6 +112,22 @@ const VariantsTable = (): JSX.Element => (
   </Section>
 );
 
+const LongTextComponents = (): JSX.Element => (
+  <Variants.Table headers={['Long text default', 'Long text on single line']}>
+    <Variants.Row>
+      <Variants.Cell>
+        <SampleTooltip label="This is a very long tooltip text that will not wrap and will display on a single line no matter how long it gets" />
+      </Variants.Cell>
+      <Variants.Cell>
+        <SampleTooltip
+          label="This is a very long tooltip text that will not wrap and will display on a single line no matter how long it gets"
+          preventTextWrap
+        />
+      </Variants.Cell>
+    </Variants.Row>
+  </Variants.Table>
+);
+
 export const Overview = (): JSX.Element => (
   <Grid columns="$1">
     <Cell>
@@ -163,6 +180,15 @@ export const Overview = (): JSX.Element => (
           </Variants.Table>
         </LocalThemeProvider>
       </Section>
+
+      <Divider my="$64" />
+
+      <Section title="Long Text Wrapping">
+        <LongTextComponents />
+        <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
+          <LongTextComponents />
+        </LocalThemeProvider>
+      </Section>
     </Cell>
   </Grid>
 );