fix(Text): types

Author: tenphi

.changeset/bright-rabbits-walk.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Allow text wrapping in labels.

src/components/content/Paragraph.tsx

@@ -22,11 +22,10 @@ export interface CubeParagraphProps
   extends CubeTextProps,
     ContainerStyleProps {}
 
-export const Paragraph = forwardRef(function Paragraph(
-  props: CubeParagraphProps,
-  ref,
-) {
-  const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+export const Paragraph = forwardRef<HTMLElement, CubeParagraphProps>(
+  function Paragraph(props, ref) {
+    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
 
-  return <Text as="p" qa="Paragraph" {...props} ref={ref} styles={styles} />;
-});
+    return <Text as="p" qa="Paragraph" {...props} ref={ref} styles={styles} />;
+  },
+);

src/components/content/Text.tsx

@@ -1,4 +1,9 @@
-import { CSSProperties, forwardRef } from 'react';
+import {
+  CSSProperties,
+  forwardRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
 
 import {
   AllBaseProps,
@@ -141,23 +146,28 @@ const PlaceholderText = tasty(Text, {
   },
 });
 
-const _Text = Object.assign(Text, {
-  Minor: MinorText,
-  Danger: DangerText,
-  Success: SuccessText,
-  Strong: StrongText,
-  Emphasis: EmphasisText,
-  Selection: SelectionText,
-  Placeholder: PlaceholderText,
-}) as typeof Text & {
+export interface TextComponent
+  extends ForwardRefExoticComponent<
+    CubeTextProps & RefAttributes<HTMLElement>
+  > {
   Minor: typeof MinorText;
   Danger: typeof DangerText;
   Success: typeof SuccessText;
   Strong: typeof StrongText;
   Emphasis: typeof EmphasisText;
   Selection: typeof SelectionText;
   Placeholder: typeof PlaceholderText;
-};
+}
+
+const _Text: TextComponent = Object.assign(Text, {
+  Minor: MinorText,
+  Danger: DangerText,
+  Success: SuccessText,
+  Strong: StrongText,
+  Emphasis: EmphasisText,
+  Selection: SelectionText,
+  Placeholder: PlaceholderText,
+});
 
 _Text.displayName = 'Text';
 

src/components/form/Label.tsx

@@ -54,7 +54,6 @@ export const INLINE_LABEL_STYLES: Styles = {
     '': '#dark-02',
     invalid: '#danger-text',
   },
-  whiteSpace: 'nowrap',
 } as const;
 
 export const LABEL_STYLES: Styles = {
@@ -67,7 +66,6 @@ export const LABEL_STYLES: Styles = {
     '': '#dark',
     invalid: '#danger-text',
   },
-  whiteSpace: 'nowrap',
   width: {
     '': 'initial',
     side: '($label-width, initial)',