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 8793be03d..c1cef9d42 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 0c69f4b81..27e1a9782 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 f9f9a1046..5881e5cb2 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 d06cfc826..54f1dfcdb 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 806339768..a1ef582aa 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 8453e6837..d20bb8260 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={ {