BA-2250: Limit group name length

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 1.0.8
+
+### Patch Changes
+
+- Limit group name length
+- Use ellipsis to prevent text overflow
+
 ## 1.0.7
 
 ### Patch Changes

packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx

@@ -6,6 +6,7 @@ import { IconButton } from '@baseapp-frontend/design-system/components/web/butto
 import { ThreeDotsIcon } from '@baseapp-frontend/design-system/components/web/icons'
 import { Iconify } from '@baseapp-frontend/design-system/components/web/images'
 import { Popover } from '@baseapp-frontend/design-system/components/web/popovers'
+import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/components/web/typographies'
 import { usePopover } from '@baseapp-frontend/design-system/hooks/common'
 import { useResponsive } from '@baseapp-frontend/design-system/hooks/web'
 
@@ -98,9 +99,17 @@ const ChatRoomHeader: FC<ChatRoomHeaderProps> = ({
             sx={{ border: 'none', alignSelf: 'center' }}
           />
           <Box>
-            <Typography component="span" variant="subtitle2" sx={{ float: 'left', clear: 'left' }}>
+            <TypographyWithEllipsis
+              component="span"
+              variant="subtitle2"
+              maxWidth={isUpToMd ? '300px' : '200px'}
+              sx={{
+                float: 'left',
+                clear: 'left',
+              }}
+            >
               {title}
-            </Typography>
+            </TypographyWithEllipsis>
             {isGroup && (
               <Typography component="span" variant="caption" sx={{ float: 'left', clear: 'left' }}>
                 {members}

packages/components/modules/messages/web/ChatRoomsList/ChatRoomItem/index.tsx

@@ -7,9 +7,11 @@ import {
   UnarchiveIcon,
   UnreadIcon,
 } from '@baseapp-frontend/design-system/components/web/icons'
+import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/components/web/typographies'
 
 import { Box, Badge as DefaultBadge, Typography } from '@mui/material'
 import { useFragment } from 'react-relay'
+
 import { LastMessageFragment$key } from '../../../../../__generated__/LastMessageFragment.graphql'
 import { TitleFragment$key } from '../../../../../__generated__/TitleFragment.graphql'
 import { UnreadMessagesCountFragment$key } from '../../../../../__generated__/UnreadMessagesCountFragment.graphql'
@@ -123,7 +125,7 @@ const ChatRoomItem: FC<ChatRoomItemProps> = ({
           src={avatar}
         />
         <Box display="grid" gridTemplateRows="repeat(2, minmax(0, 1fr))">
-          <Typography variant="subtitle2">{title}</Typography>
+          <TypographyWithEllipsis variant="subtitle2">{title}</TypographyWithEllipsis>
           {lastMessage && lastMessageTime ? (
             <Box
               display="grid"

packages/components/modules/messages/web/CreateGroup/constants.ts

@@ -17,7 +17,10 @@ export const DEFAULT_FORM_VALUES: CreateGroupUpload = {
 }
 
 export const DEFAULT_FORM_VALIDATION = z.object({
-  [FORM_VALUE.title]: z.string().min(1, { message: 'Please enter a title' }),
+  [FORM_VALUE.title]: z
+    .string()
+    .min(1, { message: 'Please enter a title' })
+    .max(20, { message: "Title can't be more than 20 characters" }),
   [FORM_VALUE.participants]: z
     .array(z.any())
     .min(1, { message: 'Please select at least one member' }),

packages/components/modules/messages/web/EditGroup/constants.ts

@@ -22,7 +22,10 @@ export const getDefaultFormValues = (
 })
 
 export const DEFAULT_FORM_VALIDATION = z.object({
-  [FORM_VALUE.title]: z.string().min(1, { message: 'Please enter a title' }),
+  [FORM_VALUE.title]: z
+    .string()
+    .min(1, { message: 'Please enter a title' })
+    .max(20, { message: "Title can't be more than 20 characters" }),
   [FORM_VALUE.addParticipants]: z.array(z.any()),
   [FORM_VALUE.removeParticipants]: z.array(z.any()),
   [FORM_VALUE.image]: z.any(),

packages/components/modules/messages/web/GroupDetails/index.tsx

@@ -5,6 +5,7 @@ import { FC, Suspense, useRef, useState } from 'react'
 import { useCurrentProfile } from '@baseapp-frontend/authentication'
 import { CircledAvatar } from '@baseapp-frontend/design-system/components/web/avatars'
 import { LoadingState } from '@baseapp-frontend/design-system/components/web/displays'
+import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/components/web/typographies'
 
 import { Box, Typography, useTheme } from '@mui/material'
 import { ConnectionHandler, usePaginationFragment, usePreloadedQuery } from 'react-relay'
@@ -146,9 +147,9 @@ const GroupDetails: FC<GroupDetailsProps> = ({
         <GroupHeaderContainer>
           <CircledAvatar src={avatar} width={144} height={144} hasError={false} />
           <GroupTitleContainer>
-            <Typography variant="subtitle1" color="text.primary">
+            <TypographyWithEllipsis variant="subtitle1" color="text.primary">
               {title}
-            </Typography>
+            </TypographyWithEllipsis>
             <Typography variant="body2" color="text.secondary">
               {getParticipantCountString(group?.participantsCount)}
             </Typography>

packages/components/modules/messages/web/__shared__/EditGroupTitleAndImage/index.tsx

@@ -64,6 +64,7 @@ const EditGroupTitleAndImage: FC<EditGroupTitleAndImageProps> = ({
       </UploadImageContainer>
       <TextField
         label="Group Name"
+        inputProps={{ maxLength: 20 }}
         control={control}
         disabled={isMutationInFlight}
         name={FORM_VALUE.title}

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",