diff --git a/.changeset/text-white-space-prop.md b/.changeset/text-white-space-prop.md
new file mode 100644
index 00000000000..166b22a3e25
--- /dev/null
+++ b/.changeset/text-white-space-prop.md
@@ -0,0 +1,6 @@
+---
+'@primer/react': minor
+'@primer/styled-react': minor
+---
+
+Text: Add `whiteSpace` prop supporting `'pre' | 'normal' | 'nowrap' | 'pre-wrap' | 'pre-line'` values, fixing a discrepancy where the prop was documented but not implemented.
diff --git a/packages/react/src/Text/Text.features.stories.tsx b/packages/react/src/Text/Text.features.stories.tsx
index 2f96033076f..529b585d6f4 100644
--- a/packages/react/src/Text/Text.features.stories.tsx
+++ b/packages/react/src/Text/Text.features.stories.tsx
@@ -64,3 +64,34 @@ export const SemiboldWeight = () => (
Stylized text
)
+
+export const PreWhiteSpace = () => (
+
+ Stylized text
+
+)
+
+export const NormalWhiteSpace = () => (
+
+ Stylized text
+
+)
+
+export const NowrapWhiteSpace = () => (
+
+ Stylized text
+
+)
+
+export const PreWrapWhiteSpace = () => (
+
+ Stylized text
+
+)
+
+export const PreLineWhiteSpace = () => (
+
+ Stylized text
+
+)
+
diff --git a/packages/react/src/Text/Text.module.css b/packages/react/src/Text/Text.module.css
index 6b7b5552bcc..66ea88707dd 100644
--- a/packages/react/src/Text/Text.module.css
+++ b/packages/react/src/Text/Text.module.css
@@ -29,4 +29,24 @@
&:where([data-weight='semibold']) {
font-weight: var(--base-text-weight-semibold);
}
+
+ &:where([data-white-space='pre']) {
+ white-space: pre;
+ }
+
+ &:where([data-white-space='normal']) {
+ white-space: normal;
+ }
+
+ &:where([data-white-space='nowrap']) {
+ white-space: nowrap;
+ }
+
+ &:where([data-white-space='pre-wrap']) {
+ white-space: pre-wrap;
+ }
+
+ &:where([data-white-space='pre-line']) {
+ white-space: pre-line;
+ }
}
diff --git a/packages/react/src/Text/Text.stories.tsx b/packages/react/src/Text/Text.stories.tsx
index 36f2bab2566..1e09a9c70de 100644
--- a/packages/react/src/Text/Text.stories.tsx
+++ b/packages/react/src/Text/Text.stories.tsx
@@ -14,6 +14,7 @@ Playground.args = {
as: 'span',
size: 'medium',
weight: 'normal',
+ whiteSpace: 'normal',
}
Playground.argTypes = {
@@ -38,4 +39,10 @@ Playground.argTypes = {
},
options: ['light', 'normal', 'medium', 'semibold'],
},
+ whiteSpace: {
+ control: {
+ type: 'radio',
+ },
+ options: ['pre', 'normal', 'nowrap', 'pre-wrap', 'pre-line'],
+ },
}
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index f6ed9002d77..901610ac596 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -114,4 +114,17 @@ describe('Text', () => {
expect(textElement).toBeInTheDocument()
expect(textElement).toHaveClass(testClasses.ResponsiveLine)
})
+
+ it('applies data-white-space attribute when whiteSpace prop is provided', () => {
+ const values = ['pre', 'normal', 'nowrap', 'pre-wrap', 'pre-line'] as const
+ for (const value of values) {
+ const {container} = render(Text)
+ expect(container.firstChild).toHaveAttribute('data-white-space', value)
+ }
+ })
+
+ it('does not set data-white-space attribute when whiteSpace prop is omitted', () => {
+ const {container} = render(Text)
+ expect(container.firstChild).not.toHaveAttribute('data-white-space')
+ })
})
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 530c30ae8d1..9f27baf8323 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -10,16 +10,24 @@ export type TextProps = PolymorphicProps<
{
size?: 'large' | 'medium' | 'small'
weight?: 'light' | 'normal' | 'medium' | 'semibold'
+ whiteSpace?: 'pre' | 'normal' | 'nowrap' | 'pre-wrap' | 'pre-line'
className?: string
}
>
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function Text(props: TextProps, ref: ForwardedRef) {
- const {as: Component = 'span', className, size, weight, ...rest} = props
+ const {as: Component = 'span', className, size, weight, whiteSpace, ...rest} = props
return (
-
+
)
}
diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
index efee4e79acf..d02f8ae4a9a 100644
--- a/packages/styled-react/src/components/Text.tsx
+++ b/packages/styled-react/src/components/Text.tsx
@@ -9,6 +9,7 @@ import type {ForwardRefComponent} from '../polymorphic'
type BaseTextProps = {
size?: 'large' | 'medium' | 'small'
weight?: 'light' | 'normal' | 'medium' | 'semibold'
+ whiteSpace?: 'pre' | 'normal' | 'nowrap' | 'pre-wrap' | 'pre-line'
className?: string
children?: React.ReactNode
as?: React.ElementType