fix(BaseMenuItem): truncate text without spaces and add htmlTitle

.changeset/gold-moose-move.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(ActionListItem, MenuItem): truncate text without spaces and add htmlTitle 

packages/blade/src/components/ActionList/ActionList.stories.tsx

@@ -235,7 +235,7 @@ ActionListWithSections.parameters = {
 const ActionListWithCustomItemsExample: StoryFn<typeof ActionListComponent> = () => {
   return (
     <BaseBox display="flex" flexDirection="column">
-      <Box backgroundColor="surface.background.gray.intense">
+      <Box backgroundColor="surface.background.gray.intense" maxWidth="300px">
         <ActionListComponent>
           <ActionListSection title="Account">
             <ActionListItem
@@ -279,6 +279,11 @@ const ActionListWithCustomItemsExample: StoryFn<typeof ActionListComponent> = ()
               </ActionListItemBadgeGroup>
             }
           />
+          <ActionListItem
+            leading={<ActionListItemIcon icon={UserIcon} />}
+            title="saurabhdaware.razorpay@gmail.com"
+            value="email"
+          />
           <ActionListItem
             leading={<ActionListItemIcon icon={LogOutIcon} />}
             title="Log Out"

packages/blade/src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx

@@ -3,11 +3,13 @@ import type { BaseMenuItemProps } from '../types';
 import { BaseMenuItemContext } from '../BaseMenuContext';
 import { StyledMenuItemContainer } from './StyledMenuItemContainer';
 import { Box } from '~components/Box';
-import { Text } from '~components/Typography';
+import { getTextProps, Text } from '~components/Typography';
 import { size } from '~tokens/global';
 import { makeSize } from '~utils';
 import { makeAccessible } from '~utils/makeAccessible';
 import type { BladeElementRef } from '~utils/types';
+import { BaseText } from '~components/Typography/BaseText';
+import { useTruncationTitle } from '~utils/useTruncationTitle';
 
 const menuItemTitleColor = {
   negative: {
@@ -44,6 +46,7 @@ const _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuIte
   },
   ref,
 ): React.ReactElement => {
+  const { containerRef, textRef } = useTruncationTitle({ content: title });
   return (
     <BaseMenuItemContext.Provider value={{ color, isDisabled }}>
       <StyledMenuItemContainer
@@ -67,54 +70,59 @@ const _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuIte
         {children ? (
           children
         ) : (
-          <>
-            <Box display="flex" alignItems="flex-start" width="100%" justifyContent="center">
+          <Box display="flex" alignItems="flex-start" width="100%" justifyContent="center">
+            <Box
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              height={itemFirstRowHeight}
+            >
+              {leading}
+            </Box>
+            <Box
+              paddingLeft={leading ? 'spacing.3' : 'spacing.0'}
+              paddingRight="spacing.3"
+              display="flex"
+              flexDirection="column"
+            >
               <Box
                 display="flex"
-                justifyContent="center"
                 alignItems="center"
+                flexDirection="row"
                 height={itemFirstRowHeight}
+                ref={containerRef as never}
               >
-                {leading}
-              </Box>
-              <Box
-                paddingLeft={leading ? 'spacing.3' : 'spacing.0'}
-                paddingRight="spacing.3"
-                display="flex"
-                flexDirection="column"
-              >
-                <Box
-                  display="flex"
-                  alignItems="center"
-                  flexDirection="row"
-                  height={itemFirstRowHeight}
-                >
-                  <Text
-                    truncateAfterLines={1}
-                    color={
+                <BaseText
+                  as="p"
+                  ref={textRef as never}
+                  truncateAfterLines={1}
+                  wordBreak="break-all"
+                  {...getTextProps({
+                    size: 'medium',
+                    color:
                       menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][
                         isDisabled ? 'disabled' : 'default'
-                      ]
-                    }
+                      ],
+                    weight: 'regular',
+                  })}
+                >
+                  {title}
+                </BaseText>
+                {titleSuffix}
+              </Box>
+              <Box>
+                {description ? (
+                  <Text
+                    color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}
+                    size="small"
                   >
-                    {title}
+                    {description}
                   </Text>
-                  {titleSuffix}
-                </Box>
-                <Box>
-                  {description ? (
-                    <Text
-                      color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}
-                      size="small"
-                    >
-                      {description}
-                    </Text>
-                  ) : null}
-                </Box>
+                ) : null}
               </Box>
-              <Box marginLeft="auto">{trailing}</Box>
             </Box>
-          </>
+            <Box marginLeft="auto">{trailing}</Box>
+          </Box>
         )}
       </StyledMenuItemContainer>
     </BaseMenuItemContext.Provider>

packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap

@@ -258,6 +258,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .c26.c26.c26.c26.c26 {
@@ -281,6 +282,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .c7.c7.c7.c7.c7 {

packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap

@@ -577,6 +577,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .c60.c60.c60.c60.c60 {

packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap

@@ -393,6 +393,7 @@ exports[`Menu renders a Menu 1`] = `
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .c27.c27.c27.c27.c27 {
@@ -433,6 +434,7 @@ exports[`Menu renders a Menu 1`] = `
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 .c6.c6.c6.c6.c6:focus-visible {

packages/blade/src/components/Typography/BaseText/BaseText.native.tsx

@@ -1,10 +1,12 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import styled from 'styled-components/native';
 import getBaseTextStyles from './getBaseTextStyles';
 import type { BaseTextProps, StyledBaseTextProps } from './types';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { getStyledProps, useStyledProps } from '~components/Box/styledProps';
 import { makeAccessible } from '~utils/makeAccessible';
+import type { BladeElementRef } from '~utils/types';
 
 const StyledBaseText = styled.Text<StyledBaseTextProps>(
   ({
@@ -44,28 +46,32 @@ const StyledBaseText = styled.Text<StyledBaseTextProps>(
   },
 );
 
-export const BaseText = ({
-  id,
-  color,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  fontStyle,
-  textDecorationLine,
-  lineHeight,
-  textAlign,
-  children,
-  truncateAfterLines,
-  opacity,
-  className,
-  style,
-  accessibilityProps = {},
-  componentName = MetaConstants.BaseText,
-  testID,
-  ...styledProps
-}: BaseTextProps): ReactElement => {
+const _BaseText: React.ForwardRefRenderFunction<BladeElementRef, BaseTextProps> = (
+  {
+    id,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    textDecorationLine,
+    lineHeight,
+    textAlign,
+    children,
+    truncateAfterLines,
+    opacity,
+    className,
+    style,
+    accessibilityProps = {},
+    componentName = MetaConstants.BaseText,
+    testID,
+    ...styledProps
+  },
+  ref,
+): ReactElement => {
   return (
     <StyledBaseText
+      ref={ref}
       {...getStyledProps(styledProps)}
       color={color}
       fontFamily={fontFamily}
@@ -88,3 +94,7 @@ export const BaseText = ({
     </StyledBaseText>
   );
 };
+
+const BaseText = React.forwardRef(_BaseText);
+
+export { BaseText };

packages/blade/src/components/Typography/BaseText/BaseText.web.tsx

@@ -7,6 +7,7 @@ import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { getStyledProps, useStyledProps } from '~components/Box/styledProps';
 import { makeAccessible } from '~utils/makeAccessible';
 import { omitPropsFromHTML } from '~utils/omitPropsFromHTML';
+import type { BladeElementRef } from '~utils/types';
 
 const StyledBaseText = styled.div.withConfig({
   shouldForwardProp: omitPropsFromHTML,
@@ -49,31 +50,35 @@ const StyledBaseText = styled.div.withConfig({
   },
 );
 
-export const BaseText = ({
-  id,
-  color,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  fontStyle,
-  textDecorationLine,
-  lineHeight,
-  letterSpacing,
-  as,
-  textAlign,
-  children,
-  truncateAfterLines,
-  wordBreak,
-  opacity,
-  className,
-  style,
-  accessibilityProps = {},
-  componentName = MetaConstants.BaseText,
-  testID,
-  ...styledProps
-}: BaseTextProps): ReactElement => {
+const _BaseText: React.ForwardRefRenderFunction<BladeElementRef, BaseTextProps> = (
+  {
+    id,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    textDecorationLine,
+    lineHeight,
+    letterSpacing,
+    as,
+    textAlign,
+    children,
+    truncateAfterLines,
+    wordBreak,
+    opacity,
+    className,
+    style,
+    accessibilityProps = {},
+    componentName = MetaConstants.BaseText,
+    testID,
+    ...styledProps
+  },
+  ref,
+): ReactElement => {
   return (
     <StyledBaseText
+      ref={ref as never}
       {...getStyledProps(styledProps)}
       color={color}
       fontFamily={fontFamily}
@@ -98,3 +103,6 @@ export const BaseText = ({
     </StyledBaseText>
   );
 };
+
+const BaseText = React.forwardRef(_BaseText);
+export { BaseText };

packages/blade/src/utils/useTruncationTitle/index.tsx

@@ -0,0 +1 @@
+export { useTruncationTitle } from './useTruncationTitle';

packages/blade/src/utils/useTruncationTitle/useTruncationTitle.native.tsx

@@ -0,0 +1,15 @@
+const useTruncationTitle = ({
+  content: _,
+}: {
+  content?: string;
+}): {
+  containerRef: { current: null };
+  textRef: { current: null };
+} => {
+  return {
+    containerRef: { current: null },
+    textRef: { current: null },
+  };
+};
+
+export { useTruncationTitle };