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