fix: fix chip font size in dropdown & use onSubmit

twentyhq · May 1, 2024 · 821f3b7 · 821f3b7
1 parent a3edd97
commit 821f3b7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
@@ -134,7 +134,7 @@ export const FieldInput = ({
           onShiftTab={onShiftTab}
         />
       ) : isFieldLinks(fieldDefinition) ? (
-        <LinksFieldInput onCancel={onCancel} />
+        <LinksFieldInput onCancel={onCancel} onSubmit={onSubmit} />
       ) : isFieldCurrency(fieldDefinition) ? (
         <CurrencyFieldInput
           onEnter={onEnter}

diff --git a/...nt/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx b/...nt/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
@@ -4,6 +4,7 @@ import { Key } from 'ts-key-enum';
 import { IconPlus } from 'twenty-ui';
 
 import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField';
+import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { LinkDisplay } from '@/ui/field/display/components/LinkDisplay';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -23,9 +24,13 @@ const StyledDropdownMenu = styled(DropdownMenu)`
 
 export type LinksFieldInputProps = {
   onCancel?: () => void;
+  onSubmit?: FieldInputEvent;
 };
 
-export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
+export const LinksFieldInput = ({
+  onCancel,
+  onSubmit,
+}: LinksFieldInputProps) => {
   const { persistLinksField, hotkeyScope, fieldValue } = useLinksField();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -75,22 +80,26 @@ export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
     setInputValue('');
 
     if (!links.length) {
-      persistLinksField({
-        primaryLinkUrl: inputValue,
-        primaryLinkLabel: '',
-        secondaryLinks: [],
-      });
+      onSubmit?.(() =>
+        persistLinksField({
+          primaryLinkUrl: inputValue,
+          primaryLinkLabel: '',
+          secondaryLinks: [],
+        }),
+      );
 
       return;
     }
 
-    persistLinksField({
-      ...fieldValue,
-      secondaryLinks: [
-        ...(fieldValue.secondaryLinks ?? []),
-        { label: '', url: inputValue },
-      ],
-    });
+    onSubmit?.(() =>
+      persistLinksField({
+        ...fieldValue,
+        secondaryLinks: [
+          ...(fieldValue.secondaryLinks ?? []),
+          { label: '', url: inputValue },
+        ],
+      }),
+    );
   };
 
   return (

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx
@@ -14,11 +14,8 @@ import { getUrlHostName } from '~/utils/url/getUrlHostName';
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 const StyledRawLink = styled(RoundedLink)`
-  overflow: hidden;
-
   a {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    font-size: ${({ theme }) => theme.font.size.md};
     white-space: nowrap;
   }
 `;

diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
@@ -6,6 +6,7 @@ import { Chip, ChipSize, ChipVariant } from 'twenty-ui';
 type RoundedLinkProps = {
   href: string;
   children?: React.ReactNode;
+  className?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };
 
@@ -27,10 +28,15 @@ const StyledChip = styled(Chip)`
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const RoundedLink = ({ children, href, onClick }: RoundedLinkProps) => (
+export const RoundedLink = ({
+  children,
+  className,
+  href,
+  onClick,
+}: RoundedLinkProps) => (
   <div>
     {children !== '' ? (
-      <StyledClickable>
+      <StyledClickable className={className}>
         <ReactLink target="_blank" to={href} onClick={onClick}>
           <StyledChip
             label={`${children}`}