Skip to content

feat: add whiteSpace prop to Text component to control CSS white-space property#7742

Open
mustafajw07 wants to merge 2 commits intoprimer:mainfrom
mustafajw07:feature/7607-whitespace-prop
Open

feat: add whiteSpace prop to Text component to control CSS white-space property#7742
mustafajw07 wants to merge 2 commits intoprimer:mainfrom
mustafajw07:feature/7607-whitespace-prop

Conversation

@mustafajw07
Copy link
Copy Markdown

@mustafajw07 mustafajw07 commented Apr 9, 2026

Closes #7607

N/A

N/A

Here's a summary of everything added in this PR:

Changes

Text.tsx — Core implementation

  • Added whiteSpace?: 'pre' | 'normal' | 'nowrap' | 'pre-wrap' | 'pre-line' to TextProps
  • Destructured whiteSpace from props and passed it as a data-white-space attribute (consistent with the data-size / data-weight pattern)

Text.module.css — Styling

  • Added 5 CSS rules scoped via :where([data-white-space='...']) selectors, one for each supported value

Text.test.tsx — Tests

  • Added test asserting data-white-space attribute is set for each valid value
  • Added test asserting the attribute is absent when the prop is omitted

Text.stories.tsx — Playground story (by you)

  • Added whiteSpace: 'normal' to default args
  • Added a whiteSpace radio control with all 5 options

Text.features.stories.tsx — Feature stories (by you)

  • Added 5 individual stories: PreWhiteSpace, NormalWhiteSpace, NowrapWhiteSpace, PreWrapWhiteSpace, PreLineWhiteSpace

styled-react/Text.tsx — Styled wrapper (by you)

  • Added whiteSpace to BaseTextProps to keep the styled variant in sync

Removed

N/A

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 9, 2026

🦋 Changeset detected

Latest commit: 2c980c2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@primer/react Minor
@primer/styled-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

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.

[Text] whiteSpace prop is documented but not supported

1 participant