feat(Text): add noWrap prop for white-space control

.changeset/feat-text-no-wrap.md

@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Add noWrap prop to Text to control white-space wrapping

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. */
 

src/components/Text/Text.stories.tsx

@@ -116,3 +116,14 @@ export const FillWidth: Story = {
     </TextHarness>
   ),
 };
+
+export const NoWrap: Story = {
+  render: () => (
+    <div
+      data-testid="text-harness"
+      style={{ display: 'inline-block', padding: '8px', width: '120px' }}
+    >
+      <Text noWrap>{sample}</Text>
+    </div>
+  ),
+};

src/components/Text/Text.tsx

@@ -30,6 +30,8 @@ export interface TextProps<T extends ElementType = 'p'> {
   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 = <T extends ElementType = 'p'>(
@@ -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 = <T extends ElementType = 'p'>(
     children,
     component,
     fillWidth,
+    noWrap,
     ...props
   }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,
   ref: ComponentPropsWithRef<T>['ref']
@@ -116,7 +123,10 @@ const _Text = <T extends ElementType = 'p'>(
     <Component
       ref={ref}
       {...props}
-      className={cn(textVariants({ color, align, size, weight, fillWidth }), className)}
+      className={cn(
+        textVariants({ color, align, size, weight, fillWidth, noWrap }),
+        className
+      )}
     >
       {children}
     </Component>

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', () => {