feat(typography): add fontFamily, letterSpacing, and textTransform props - #333
Open
rinkydevi wants to merge 1 commit into
Open
Conversation
H4ad
reviewed
Jul 21, 2026
H4ad
left a comment
Contributor
There was a problem hiding this comment.
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; |
Contributor
There was a problem hiding this comment.
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; |
Contributor
There was a problem hiding this comment.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #328
Summary
Adds three new styling props to the
Typographycomponent so consumers can control font family, letter spacing, and text transformation directly via props, without needing to override via CSS.fontFamilystringinheritletterSpacingstring | numbernormal(number is treated aspx)textTransform'none' | 'capitalize' | 'uppercase' | 'lowercase'noneEach 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; refactoredtruncateStyleinto a unifiedcustomStyleobjecttypography.module.css— addletter-spacingandtext-transformdeclarations backed by the new custom propertiesindex.ts— exportTypographyTextTransformtype; update CSS token table with the two new tokenstypography.test.tsx— 9 new unit tests covering string, number, and omitted cases for all three propstypography.stories.tsx— newTextStylePropsstory demonstrating each prop individually and in combination##Evidence
Test plan
tsc --noEmit)TextStylePropsStorybook story showsfontFamily,letterSpacing, andtextTransformrendering correctly, including a combined usage example