diff --git a/.changeset/feat-text-no-wrap.md b/.changeset/feat-text-no-wrap.md
new file mode 100644
index 000000000..9e7f35a0f
--- /dev/null
+++ b/.changeset/feat-text-no-wrap.md
@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Add noWrap prop to Text to control white-space wrapping
diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
index 320d2686a..b44d4b4e0 100644
--- a/src/components/Text/Text.module.css
+++ b/src/components/Text/Text.module.css
@@ -9,6 +9,14 @@
width: 100%;
}
+.text_no-wrap {
+ white-space: nowrap;
+}
+
+.text_wrap {
+ white-space: normal;
+}
+
/* font shorthand depends on both size and weight; one class per pairing
mirrors the single `font:` declaration emitted by styled-components. */
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
index 2a0d6be22..abca65f4d 100644
--- a/src/components/Text/Text.stories.tsx
+++ b/src/components/Text/Text.stories.tsx
@@ -116,3 +116,14 @@ export const FillWidth: Story = {
),
};
+
+export const NoWrap: Story = {
+ render: () => (
+
+ {sample}
+
+ ),
+};
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 458a42053..d528583ec 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -30,6 +30,8 @@ export interface TextProps {
component?: T;
/** Whether the text should fill the full width of its container */
fillWidth?: boolean;
+ /** Whether the text should stay on a single line */
+ noWrap?: boolean;
}
type TextPolymorphicComponent = (
@@ -53,6 +55,10 @@ const textVariants = cva(styles.text, {
fillWidth: {
true: styles['text_fill-width'],
},
+ noWrap: {
+ true: styles['text_no-wrap'],
+ false: styles['text_wrap'],
+ },
size: {
xs: '',
sm: '',
@@ -107,6 +113,7 @@ const _Text = (
children,
component,
fillWidth,
+ noWrap,
...props
}: Omit, keyof TextProps> & TextProps,
ref: ComponentPropsWithRef['ref']
@@ -116,7 +123,10 @@ const _Text = (
{children}
diff --git a/tests/display/text.spec.ts b/tests/display/text.spec.ts
index 816fe6176..9ba28aca7 100644
--- a/tests/display/text.spec.ts
+++ b/tests/display/text.spec.ts
@@ -26,6 +26,7 @@ const variants = [
{ story: 'align-center', name: 'align-center' },
{ story: 'align-right', name: 'align-right' },
{ story: 'fill-width', name: 'fill-width' },
+ { story: 'no-wrap', name: 'no-wrap' },
] as const;
describe('Text Visual Regression', () => {
diff --git a/tests/display/text.spec.ts-snapshots/text-no-wrap-dark-chromium-linux.png b/tests/display/text.spec.ts-snapshots/text-no-wrap-dark-chromium-linux.png
new file mode 100644
index 000000000..321fe0820
Binary files /dev/null and b/tests/display/text.spec.ts-snapshots/text-no-wrap-dark-chromium-linux.png differ
diff --git a/tests/display/text.spec.ts-snapshots/text-no-wrap-light-chromium-linux.png b/tests/display/text.spec.ts-snapshots/text-no-wrap-light-chromium-linux.png
new file mode 100644
index 000000000..908e4d59b
Binary files /dev/null and b/tests/display/text.spec.ts-snapshots/text-no-wrap-light-chromium-linux.png differ