diff --git a/src/design-system/text/body.component.tsx b/src/design-system/text/body.component.tsx index eddb068..05d26be 100644 --- a/src/design-system/text/body.component.tsx +++ b/src/design-system/text/body.component.tsx @@ -11,11 +11,11 @@ export const Small = createText>({ export const Normal = createText({ type: 'body', as: 'span', - weight: '$regular', + weight: '$medium', }); export const Large = createText({ type: 'bodyLarge', as: 'span', - weight: '$regular', + weight: '$medium', }); diff --git a/src/design-system/tooltip/tooltip-content.component.tsx b/src/design-system/tooltip/tooltip-content.component.tsx index 9559418..67fbe4f 100644 --- a/src/design-system/tooltip/tooltip-content.component.tsx +++ b/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): JSX.Element => { return ( -
+
{label} diff --git a/src/design-system/tooltip/tooltip-content.css.ts b/src/design-system/tooltip/tooltip-content.css.ts index b415ea9..4310efa 100644 --- a/src/design-system/tooltip/tooltip-content.css.ts +++ b/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', +}); diff --git a/src/design-system/tooltip/tooltip-root.component.tsx b/src/design-system/tooltip/tooltip-root.component.tsx index c8a75ab..2d5e5aa 100644 --- a/src/design-system/tooltip/tooltip-root.component.tsx +++ b/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): JSX.Element => { return ( @@ -29,10 +30,9 @@ export const Root = ({ style={{ zIndex }} side={side} align={align} - className={cx.root} data-testid={'tooltip-content'} > - + diff --git a/src/design-system/tooltip/tooltip.component.tsx b/src/design-system/tooltip/tooltip.component.tsx index 2f3aab3..7dcbed4 100644 --- a/src/design-system/tooltip/tooltip.component.tsx +++ b/src/design-system/tooltip/tooltip.component.tsx @@ -13,6 +13,7 @@ export type Props = PropsWithChildren< delayDuration?: number; skipDelayDuration?: number; children: ReactNode; + preventTextWrap?: boolean; } >; @@ -22,6 +23,7 @@ export const Tooltip = ({ label, children, side, + preventTextWrap = false, ...props }: Readonly): JSX.Element => { return ( @@ -29,7 +31,12 @@ export const Tooltip = ({ skipDelayDuration={skipDelayDuration} delayDuration={delayDuration} > - +
{children}
diff --git a/src/design-system/tooltip/tooltip.stories.tsx b/src/design-system/tooltip/tooltip.stories.tsx index 0fda554..2ca3834 100644 --- a/src/design-system/tooltip/tooltip.stories.tsx +++ b/src/design-system/tooltip/tooltip.stories.tsx @@ -33,9 +33,10 @@ export default { const SampleTooltip = ({ label, + preventTextWrap, }: Readonly): JSX.Element => ( - + ); @@ -111,6 +112,22 @@ const VariantsTable = (): JSX.Element => ( ); +const LongTextComponents = (): JSX.Element => ( + + + + + + + + + + +); + export const Overview = (): JSX.Element => ( @@ -163,6 +180,15 @@ export const Overview = (): JSX.Element => ( + + + +
+ + + + +
);