Skip to content

feat(Text): add noWrap prop for white-space control - #1094

Open
gjones wants to merge 6 commits into
mainfrom
feat/text-no-wrap
Open

feat(Text): add noWrap prop for white-space control#1094
gjones wants to merge 6 commits into
mainfrom
feat/text-no-wrap

Conversation

@gjones

@gjones gjones commented Jun 23, 2026

Copy link
Copy Markdown
Collaborator

Why?

Adds a noWrap prop to the Text component. I opted for a boolean to keep things as simple as possible until we get more requests for things like pre, prewrap etc etc.

Tickets?

#853

Co-authored-by: Cursor <cursoragent@cursor.com>
@gjones gjones self-assigned this Jun 23, 2026
@gjones
gjones requested a review from hoorayimhelping June 23, 2026 00:07
@gjones

gjones commented Jun 23, 2026

Copy link
Copy Markdown
Collaborator Author

@hoorayimhelping This was your request, does this fulfil your expectations?

@hoorayimhelping hoorayimhelping left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Easily the best code I've ever seen

Comment thread src/components/Text/Text.test.tsx Outdated
@ClickHouse ClickHouse deleted a comment from changeset-bot Bot Jun 24, 2026
@workflow-authentication-public

Copy link
Copy Markdown
Contributor

Storybook Preview Deployed

✅ Preview URL: https://click-lfdwmxe54-clickhouse.vercel.app

Built from commit: c53ebf5ebcaf4ab66717a996fdb4ead6090889d7

/** Whether the text should fill the full width of its container */
fillWidth?: boolean;
/** Whether the text should stay on a single line */
noWrap?: boolean;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I see where the need for the change is coming from,
but there are a couple of things to consider:

  • nowrap for the sake of nowrap is called sparingly, the top usage is to set the truncation (ellipsis or not)
  • using boolean prop is not advised, as it limits the API of the component on one hand and on the other spawns other similar props

Proposal: change to

overflowMode?: 'wrap' (default) | 'nowrap' | 'ellipsis' | 'truncate' | 'break-word' 

this prop can be consistently used in components featuring text that might need adjustments, i.e. tooltip or badge.

as the scope of PR would grow I would suggest to add only wrap and nowrap for now.
note: separately we'll need to address the truncation components to avoid duplicated patterns

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.

3 participants