diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx index ba646a01b4..224cd469c0 100644 --- a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx +++ b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx @@ -13,8 +13,11 @@ export type ParagraphProps = { size?: 'xs' | 'sm' | 'md' | 'lg'; /** Adds margin-bottom */ spacing?: boolean; - /** Adjusts styling for paragraph length */ - variant?: 'long' | 'short'; + /** + * Adjusts styling for paragraph length + * @default `default` + */ + variant?: 'long' | 'default' | 'short'; /** * Change the default rendered element for the one passed as a child, merging their props and behavior. * @default false @@ -22,6 +25,12 @@ export type ParagraphProps = { asChild?: boolean; } & HTMLAttributes; +const lineHeightMap = { + short: 'ds-line-height--sm', + default: 'ds-line-height--md', + long: 'ds-line-height--lg', +}; + /** Use `Paragraph` to display text with paragraph text styles. */ export const Paragraph = forwardRef( ({ className, spacing, size = 'md', asChild, variant, ...rest }, ref) => { @@ -34,9 +43,8 @@ export const Paragraph = forwardRef( 'ds-paragraph', spacing && 'ds-paragraph--spacing', - variant - ? `ds-paragraph-${variant}--${size}` - : `ds-paragraph--${size}`, // TODO find a better solution for this + `ds-paragraph--${size}`, + lineHeightMap[variant ?? 'default'], className, )} {...rest}