Added tooltip on overflowing texts (#771)

* Ok * Fixes * Fix according to PR * Fix lint --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Jul 20, 2023 · 7670ae5 · 7670ae5
1 parent 60b5038
commit 7670ae5
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 28 deletions.
diff --git a/front/src/modules/activities/timeline/components/Timeline.tsx b/front/src/modules/activities/timeline/components/Timeline.tsx
@@ -18,6 +18,8 @@ import {
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
+import { OverflowingTextWithTooltip } from '../../../ui/tooltip/OverflowingTextWithTooltip';
+
 const StyledMainContainer = styled.div`
   align-items: flex-start;
   align-self: stretch;
@@ -144,17 +146,15 @@ const StyledCardTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
+
+  width: 100%;
 `;
 
 const StyledCardContent = styled.div`
-  -webkit-box-orient: vertical;
-
-  -webkit-line-clamp: 3;
   align-self: stretch;
   color: ${({ theme }) => theme.font.color.secondary};
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  width: 100%;
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -279,10 +279,18 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
                     }
                   >
                     <StyledCardTitle>
-                      {commentThread.title ? commentThread.title : '(No title)'}
+                      <OverflowingTextWithTooltip
+                        text={
+                          commentThread.title
+                            ? commentThread.title
+                            : '(No title)'
+                        }
+                      />
                     </StyledCardTitle>
                     <StyledCardContent>
-                      {body ? body : '(No content)'}
+                      <OverflowingTextWithTooltip
+                        text={body ? body : '(No content)'}
+                      />
                     </StyledCardContent>
                   </StyledCard>
                 </StyledCardContainer>

diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx
@@ -45,6 +45,7 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
 
 const StyledBoardCardWrapper = styled.div`
   padding-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
 `;
 
 const StyledBoardCardHeader = styled.div`
@@ -64,6 +65,7 @@ const StyledBoardCardHeader = styled.div`
     width: ${({ theme }) => theme.icon.size.md}px;
   }
 `;
+
 const StyledBoardCardBody = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/front/src/modules/ui/board/components/BoardColumn.tsx b/front/src/modules/ui/board/components/BoardColumn.tsx
@@ -12,7 +12,9 @@ export const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
       isFirstColumn ? 'none' : theme.border.color.light};
   display: flex;
   flex-direction: column;
+  max-width: 200px;
   min-width: 200px;
+
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 

diff --git a/front/src/modules/ui/chip/components/EntityChip.tsx b/front/src/modules/ui/chip/components/EntityChip.tsx
@@ -5,6 +5,8 @@ import styled from '@emotion/styled';
 
 import { Avatar, AvatarType } from '@/users/components/Avatar';
 
+import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
+
 export enum ChipVariant {
   opaque = 'opaque',
   transparent = 'transparent',
@@ -94,7 +96,9 @@ export function EntityChip({
         size={14}
         type={avatarType}
       />
-      <StyledName>{name}</StyledName>
+      <StyledName>
+        <OverflowingTextWithTooltip text={name} />
+      </StyledName>
     </StyledContainerLink>
   ) : (
     <StyledContainerReadOnly data-testid="entity-chip">
@@ -105,7 +109,9 @@ export function EntityChip({
         size={14}
         type={avatarType}
       />
-      <StyledName>{name}</StyledName>
+      <StyledName>
+        <OverflowingTextWithTooltip text={name} />
+      </StyledName>
     </StyledContainerReadOnly>
   );
 }
diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx
@@ -23,13 +23,17 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
 
   display: flex;
   justify-content: space-between;
+
+  max-width: 150px;
 `;
 
 const StyledLeftContainer = styled.div`
   align-items: center;
   display: flex;
 
   gap: ${({ theme }) => theme.spacing(2)};
+
+  overflow: hidden;
 `;
 
 const StyledRightIcon = styled.div`

diff --git a/front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx b/front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx
@@ -72,7 +72,7 @@ export function NumberEditableField({
           />
         }
         displayModeContent={internalValue}
-        isDisplayModeContentEmpty={!(internalValue !== '')}
+        isDisplayModeContentEmpty={!(internalValue !== '' && internalValue)}
       />
     </RecoilScope>
   );

diff --git a/front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx b/front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx
@@ -5,6 +5,8 @@ import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
 
+import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
+
 type OwnProps = {
   icon?: React.ReactNode;
   placeholder?: string;
@@ -54,7 +56,7 @@ export function TextEditableField({
             }}
           />
         }
-        displayModeContent={internalValue}
+        displayModeContent={<OverflowingTextWithTooltip text={internalValue} />}
         isDisplayModeContentEmpty={!(internalValue !== '')}
       />
     </RecoilScope>

diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
@@ -9,6 +9,8 @@ import {
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
+import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
+
 type OwnProps = {
   id?: string;
   logoOrAvatar?: string;
@@ -31,6 +33,7 @@ const StyledInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
 `;
 
 const StyledDate = styled.div`
@@ -42,6 +45,8 @@ const StyledTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  max-width: 100%;
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -50,6 +55,8 @@ const StyledTooltip = styled(Tooltip)`
 
   color: ${({ theme }) => theme.font.color.primary};
 
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
@@ -74,7 +81,9 @@ export function ShowPageSummaryCard({
         placeholder={title}
       />
       <StyledInfoContainer>
-        <StyledTitle>{title}</StyledTitle>
+        <StyledTitle>
+          <OverflowingTextWithTooltip text={title} />
+        </StyledTitle>
         <StyledDate id={dateElementId}>
           Added {beautifiedCreatedAt} ago
         </StyledDate>

diff --git a/front/src/modules/ui/layout/top-bar/components/TopBar.tsx b/front/src/modules/ui/layout/top-bar/components/TopBar.tsx
@@ -6,6 +6,8 @@ import { IconButton } from '@/ui/button/components/IconButton';
 import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
 
+import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
+
 export const TOP_BAR_MIN_HEIGHT = 40;
 
 const TopBarContainer = styled.div`
@@ -14,20 +16,27 @@ const TopBarContainer = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   flex-direction: row;
-  font-size: 14px;
+  font-size: ${({ theme }) => theme.font.size.lg};
+  justify-content: space-between;
   min-height: ${TOP_BAR_MIN_HEIGHT}px;
   padding: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(3)};
 `;
 
-const TitleContainer = styled.div`
+const StyledLeftContainer = styled.div`
+  align-items: center;
   display: flex;
-  font-family: 'Inter';
-  font-size: 14px;
-  margin-left: 4px;
+  flex-direction: row;
   width: 100%;
 `;
 
+const TitleContainer = styled.div`
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  max-width: 50%;
+`;
+
 const BackIconButton = styled(IconButton)`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
@@ -51,15 +60,19 @@ export function TopBar({
   return (
     <>
       <TopBarContainer>
-        <NavCollapseButton hideIfOpen={true} />
-        {hasBackButton && (
-          <BackIconButton
-            icon={<IconChevronLeft size={16} />}
-            onClick={navigateBack}
-          />
-        )}
-        {icon}
-        <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
+        <StyledLeftContainer>
+          <NavCollapseButton hideIfOpen={true} />
+          {hasBackButton && (
+            <BackIconButton
+              icon={<IconChevronLeft size={16} />}
+              onClick={navigateBack}
+            />
+          )}
+          {icon}
+          <TitleContainer data-testid="top-bar-title">
+            <OverflowingTextWithTooltip text={title} />
+          </TitleContainer>
+        </StyledLeftContainer>
         {onAddButtonClick && (
           <IconButton
             icon={<IconPlus size={16} />}

diff --git a/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx b/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx
@@ -9,6 +9,7 @@ import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
 import { isDefined } from '~/utils/isDefined';
 
+import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
 import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
@@ -86,7 +87,7 @@ export function SingleEntitySelectBase<
               size={16}
               type={entity.avatarType ?? 'rounded'}
             />
-            {entity.name}
+            <OverflowingTextWithTooltip text={entity.name} />
           </DropdownMenuSelectableItem>
         ))
       )}

diff --git a/front/src/modules/ui/themes/border.ts b/front/src/modules/ui/themes/border.ts
@@ -14,6 +14,7 @@ export const borderLight = {
     strong: grayScale.gray25,
     medium: grayScale.gray20,
     light: grayScale.gray15,
+    invertedSecondary: grayScale.gray50,
     inverted: grayScale.gray60,
   },
   ...common,
@@ -24,6 +25,7 @@ export const borderDark = {
     strong: grayScale.gray65,
     medium: grayScale.gray70,
     light: grayScale.gray75,
+    invertedSecondary: grayScale.gray40,
     inverted: grayScale.gray30,
   },
   ...common,

diff --git a/front/src/modules/ui/tooltip/AppTooltip.tsx b/front/src/modules/ui/tooltip/AppTooltip.tsx
@@ -0,0 +1,18 @@
+import { Tooltip } from 'react-tooltip';
+import styled from '@emotion/styled';
+
+export const AppTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  max-width: 40%;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  word-break: break-word;
+
+  z-index: ${({ theme }) => theme.lastLayerZIndex};
+`;