Skip to content

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

Closed
mustafajw07 wants to merge 2 commits into
primer:mainfrom
mustafajw07:feature/7607-whitespace-prop
Closed

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

Conversation

@mustafajw07

@mustafajw07 mustafajw07 commented Apr 9, 2026

Copy link
Copy Markdown

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

changeset-bot Bot commented Apr 9, 2026

Copy link
Copy Markdown

🦋 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

@TylerJDev TylerJDev 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.

Looks good to me! Thanks for the contribution @mustafajw07! I think all we'll need to do is fix the CI.

@TylerJDev TylerJDev added the integration-tests: skipped manually Changes in this PR do not require an integration test label Apr 20, 2026
@mustafajw07 mustafajw07 closed this by deleting the head repository Apr 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: skipped manually Changes in this PR do not require an integration test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Text] whiteSpace prop is documented but not supported

2 participants