From 8f65326b47c8afdb274fb21affe9d793ee9b9e4a Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:07:45 +0200 Subject: [PATCH] Field name is oddly displayed when long (#6755) ### Description - we added a new styled component to handle the label styles - we added the title prop, and this will be applied for all fields, track the styles and only adding the title if the label is hidden would add unnecessary complexity to this issue, let us know if It's fine - On our internal QA review, we noticed this extra error in the name:\ when we have spaces between the characters on names the name is displayed in a weird way ![](https://assets-service.gitstart.com/28455/b3933bec-f5ec-48b9-a627-744507bc9fad.png) when we don't have spaces we use the space on the right to fit the full name\ like this: ![](https://assets-service.gitstart.com/28455/77aec9d1-7875-4164-b2ce-97ccee7fb25e.png)Do you want us to fix this problem too? when testing the new changes since we changed one component that is used on the main pages we created objects with a big name, to test the header on the table view, and we noticed that the object name has exactly the same issue as the field name on the settings page. !\[image\]() we added a fix for new field creation if the object name is long ![](https://assets-service.gitstart.com/28455/99faef48-99b4-480e-ae6d-71aa40030434.png)### Refs #6738 ### Demo Fixes #6738 --------- Co-authored-by: gitstart-twenty Co-authored-by: Marie Stoppa --- .../SettingsObjectFieldItemTableRow.tsx | 16 +++++++++++++-- .../components/SettingsObjectItemTableRow.tsx | 16 +++++++++++++-- .../src/modules/ui/layout/page/PageHeader.tsx | 3 ++- .../bread-crumb/components/Breadcrumb.tsx | 20 +++++++++++++++---- .../components/NavigationDrawerItem.tsx | 15 +++++++++++--- .../data-model/SettingsObjectFieldEdit.tsx | 7 ++++++- .../SettingsObjectNewFieldStep2.tsx | 7 ++++++- 7 files changed, 70 insertions(+), 14 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index 8793be03d5..c1cef9d42f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -48,6 +48,12 @@ const StyledNameTableCell = styled(TableCell)` gap: ${({ theme }) => theme.spacing(2)}; `; +const StyledNameLabel = styled.div` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +`; + const StyledIconTableCell = styled(TableCell)` justify-content: center; padding-right: ${({ theme }) => theme.spacing(1)}; @@ -203,9 +209,15 @@ export const SettingsObjectFieldItemTableRow = ({ > {!!Icon && ( - + )} - {fieldMetadataItem.label} + + {fieldMetadataItem.label} + {typeLabel} diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 0c69f4b81a..27e1a97823 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -25,6 +25,12 @@ const StyledNameTableCell = styled(TableCell)` gap: ${({ theme }) => theme.spacing(2)}; `; +const StyledNameLabel = styled.div` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +`; + const StyledActionTableCell = styled(TableCell)` justify-content: center; padding-right: ${({ theme }) => theme.spacing(1)}; @@ -46,9 +52,15 @@ export const SettingsObjectMetadataItemTableRow = ({ {!!Icon && ( - + )} - {objectMetadataItem.labelPlural} + + {objectMetadataItem.labelPlural} + diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index f9f9a1046e..5881e5cb25 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -56,7 +56,7 @@ const StyledTitleContainer = styled.div` font-size: ${({ theme }) => theme.font.size.md}; font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: ${({ theme }) => theme.spacing(1)}; - max-width: 50%; + width: 100%; `; const StyledTopBarIconStyledTitleContainer = styled.div` @@ -65,6 +65,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div` flex: 1 0 auto; gap: ${({ theme }) => theme.spacing(1)}; flex-direction: row; + width: 100%; `; const StyledPageActionContainer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx index d06cfc8263..54f1dfcdb7 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; -import { Fragment } from 'react'; +import { CSSProperties, Fragment } from 'react'; import { Link } from 'react-router-dom'; type BreadcrumbProps = { className?: string; - links: { children: string; href?: string }[]; + links: { children: string; href?: string; styles?: CSSProperties }[]; }; const StyledWrapper = styled.nav` @@ -15,15 +15,23 @@ const StyledWrapper = styled.nav` // font-weight: ${({ theme }) => theme.font.weight.semiBold}; gap: ${({ theme }) => theme.spacing(2)}; line-height: ${({ theme }) => theme.text.lineHeight.lg}; + max-width: 100%; + min-width: 0; `; const StyledLink = styled(Link)` color: inherit; text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const StyledText = styled.span` color: ${({ theme }) => theme.font.color.primary}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; export const Breadcrumb = ({ className, links }: BreadcrumbProps) => ( @@ -31,9 +39,13 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => ( {links.map((link, index) => ( {link.href ? ( - {link.children} + + {link.children} + ) : ( - {link.children} + + {link.children} + )} {index < links.length - 1 && '/'} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 8063397687..a1ef582aae 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -8,7 +8,12 @@ import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { Link, useNavigate } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; -import { IconComponent, MOBILE_VIEWPORT, Pill } from 'twenty-ui'; +import { + IconComponent, + MOBILE_VIEWPORT, + Pill, + TablerIconsProps, +} from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; const DEFAULT_INDENTATION_LEVEL = 1; @@ -22,7 +27,7 @@ export type NavigationDrawerItemProps = { subItemState?: NavigationDrawerSubItemState; to?: string; onClick?: () => void; - Icon: IconComponent; + Icon: IconComponent | ((props: TablerIconsProps) => JSX.Element); active?: boolean; danger?: boolean; soon?: boolean; @@ -185,7 +190,11 @@ export const NavigationDrawerItem = ({ )} {Icon && ( - + )} {label} {soon && } diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx index 8453e6837f..d20bb82601 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx @@ -176,10 +176,15 @@ export const SettingsObjectFieldEdit = () => { title={ {