Skip to content

feat(typography): add fontFamily, letterSpacing, and textTransform props - #333

Open
rinkydevi wants to merge 1 commit into
SigNoz:mainfrom
rinkydevi:feat/typography-font-family-letter-spacing-text-transform
Open

feat(typography): add fontFamily, letterSpacing, and textTransform props#333
rinkydevi wants to merge 1 commit into
SigNoz:mainfrom
rinkydevi:feat/typography-font-family-letter-spacing-text-transform

Conversation

@rinkydevi

@rinkydevi rinkydevi commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Closes #328

Summary

Adds three new styling props to the Typography component so consumers can control font family, letter spacing, and text transformation directly via props, without needing to override via CSS.

Prop Type Default
fontFamily string inherit
letterSpacing string | number normal (number is treated as px)
textTransform 'none' | 'capitalize' | 'uppercase' | 'lowercase' none

Each prop sets a CSS custom property (--typography-font-family, --typography-letter-spacing, --typography-text-transform) that the component's stylesheet already consumes, keeping the pattern consistent with existing token-based styling.

Changes

  • typography.tsx — destructure and apply the three new props as inline CSS custom properties; refactored truncateStyle into a unified customStyle object
  • typography.module.css — add letter-spacing and text-transform declarations backed by the new custom properties
  • index.ts — export TypographyTextTransform type; update CSS token table with the two new tokens
  • typography.test.tsx — 9 new unit tests covering string, number, and omitted cases for all three props
  • typography.stories.tsx — new TextStyleProps story demonstrating each prop individually and in combination

##Evidence

image

Test plan

  • All 36 typography unit tests pass
  • Zero TypeScript errors (tsc --noEmit)
  • TextStyleProps Storybook story shows fontFamily, letterSpacing, and textTransform rendering correctly, including a combined usage example

@H4ad H4ad left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some little changes, sorry for not detailing it first on the ticket

/**
* Set the letter spacing. Accepts a CSS string (`'0.05em'`, `'1px'`) or a number (treated as px).
*/
letterSpacing?: string | number;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you mind changing this to be an enum with predefined values?

I was planning to use the naming/values from: https://github.com/SigNoz/design-tokens/blob/main/src/style.css#L405-L413

/**
* Override the font family.
*/
fontFamily?: string;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one we can do similar to letterSpacing, use a enum/type to describe only inter and monospaced, default is inter, both from https://github.com/SigNoz/design-tokens/blob/main/src/style.css#L372-L373

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Typography: add font-family, letter-spacing, text-transform as props

2 participants