#feature: Add nowrap and minRows props for Typography

Author: Kenneth

src/atomics/Typography/styles.tsx

@@ -24,16 +24,30 @@ export const TypographyTitleStyles = styled(Typography.Title, {
     }}
 `;
 
-export const TypographyTextStyles = styled(Typography.Text)<Pick<RdTypographyTextProps, 'size'>>`
+export const TypographyTextStyles = styled(Typography.Text, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdTypographyTextProps>(
+            ['noWrap', 'size'] as (keyof RdTypographyTextProps)[],
+            prop
+        ),
+})<Pick<RdTypographyTextProps, 'size' | 'noWrap'>>`
     ${({ size }) => {
         switch (size) {
             case 'small':
                 return `
                     font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px;
                 `;
-            // Case normal is the default size
         }
     }}
+
+    ${({ noWrap }) => {
+        return (
+            noWrap &&
+            css`
+                text-wrap: nowrap;
+            `
+        );
+    }}
 `;
 
 export const TypographyParagraphStyles = styled(Typography.Paragraph, {
@@ -47,7 +61,9 @@ export const TypographyParagraphStyles = styled(Typography.Paragraph, {
         return (
             minRows &&
             css`
-                min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) * Number(getComponentOrGlobalToken('Typography', 'fontSize')) * minRows}px;
+                min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) *
+                Number(getComponentOrGlobalToken('Typography', 'fontSize')) *
+                minRows}px;
             `
         );
     }}

src/atomics/Typography/types.ts

@@ -27,13 +27,20 @@ type TypographyParagraphPropsExtend = TypographyBaseProps & {
 };
 type TypographyTextPropsExtend = TypographyBaseProps & {
     /**
-     * @description The size of the text.
+     * If true, the text will not wrap to the next line and instead will be truncated with an ellipsis when it overflows.
+     * This is useful when you want to keep the text in a single line.
+     * @default false
+     */
+    noWrap?: boolean;
+
+    /**
+     * The size of the text.
      * @default "normal"
      */
     size?: 'small' | 'normal';
 
     /**
-     * @description Callback function that is triggered when the text value changes.
+     * Callback function that is triggered when the text value changes.
      * @param value The new value of the text.
      */
     onChange?: (value: string) => void;