fix: refined text input label truncation for single-word overflow (#1782

) Co-authored-by: Nitin Kumar <snitin315@gmail.com>
razorpay · Dec 1, 2023 · 2219e9a · 2219e9a
1 parent 998e596
commit 2219e9a
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 0 deletions.
diff --git a/.changeset/pretty-clocks-end.md b/.changeset/pretty-clocks-end.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: refined text input label truncation for single-word overflow
diff --git a/packages/blade/src/components/Form/FormLabel.tsx b/packages/blade/src/components/Form/FormLabel.tsx
@@ -112,6 +112,7 @@ const FormLabel = ({
         size={isLabelLeftPositioned ? 'medium' : 'small'}
         truncateAfterLines={2}
         weight="bold"
+        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}
       >
         {children}
       </Text>

diff --git a/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx b/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx
@@ -22,6 +22,7 @@ const StyledBaseText = styled.div.withConfig({
     numberOfLines,
     lineHeight,
     textAlign,
+    wordBreak,
     ...props
   }) => {
     const styledPropsCSSObject = useStyledProps(props);
@@ -36,6 +37,7 @@ const StyledBaseText = styled.div.withConfig({
         numberOfLines,
         lineHeight,
         textAlign,
+        wordBreak,
         theme: props.theme,
       }),
       ...styledPropsCSSObject,
@@ -56,6 +58,7 @@ export const BaseText = ({
   textAlign,
   children,
   truncateAfterLines,
+  wordBreak,
   className,
   style,
   accessibilityProps = {},
@@ -76,6 +79,7 @@ export const BaseText = ({
       as={as}
       textAlign={textAlign}
       numberOfLines={truncateAfterLines}
+      wordBreak={wordBreak}
       className={className}
       style={style}
       id={id}

diff --git a/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts b/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts
@@ -12,6 +12,7 @@ const getBaseTextStyles = ({
   fontStyle = 'normal',
   textDecorationLine = 'none',
   numberOfLines,
+  wordBreak,
   lineHeight = 100,
   textAlign,
   theme,
@@ -22,6 +23,7 @@ const getBaseTextStyles = ({
   const themeFontWeight = theme.typography.fonts.weight[fontWeight];
   const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);
   let truncateStyles: CSSObject = {};
+  let wordBreakStyles: CSSObject = {};
   if (numberOfLines !== undefined) {
     if (isReactNative()) {
       truncateStyles = {};
@@ -35,6 +37,15 @@ const getBaseTextStyles = ({
       };
     }
   }
+  if (wordBreak !== undefined) {
+    if (isReactNative()) {
+      wordBreakStyles = {};
+    } else {
+      wordBreakStyles = {
+        wordBreak,
+      };
+    }
+  }
 
   return {
     color: textColor,
@@ -51,6 +62,7 @@ const getBaseTextStyles = ({
     margin: 0,
     padding: 0,
     ...truncateStyles,
+    ...wordBreakStyles,
   };
 };
 

diff --git a/packages/blade/src/components/Typography/BaseText/types.ts b/packages/blade/src/components/Typography/BaseText/types.ts
@@ -56,6 +56,7 @@ export type BaseTextProps = {
   fontStyle?: 'italic' | 'normal';
   textDecorationLine?: 'line-through' | 'none' | 'underline';
   lineHeight?: keyof Theme['typography']['lineHeights'];
+  wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
   /**
    * Web only
    */
@@ -87,6 +88,7 @@ export type StyledBaseTextProps = Pick<
   | 'textAlign'
   | 'numberOfLines'
   | 'truncateAfterLines'
+  | 'wordBreak'
 > & { theme: Theme };
 
 export type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
diff --git a/packages/blade/src/components/Typography/Text/Text.tsx b/packages/blade/src/components/Typography/Text/Text.tsx
@@ -28,6 +28,7 @@ type TextCommonProps = {
   color?: BaseTextProps['color'];
   textAlign?: BaseTextProps['textAlign'];
   textDecorationLine?: BaseTextProps['textDecorationLine'];
+  wordBreak?: BaseTextProps['wordBreak'];
 } & TestID &
   StyledPropsBlade;
 
@@ -142,11 +143,13 @@ const _Text = <T extends { variant: TextVariant }>({
   testID,
   textAlign,
   textDecorationLine,
+  wordBreak,
   ...styledProps
 }: TextProps<T>): ReactElement => {
   const props: Omit<BaseTextProps, 'children'> = {
     as,
     truncateAfterLines,
+    wordBreak,
     ...getTextProps({
       variant,
       type,