feat: add EnumFieldDisplay and Enum field preview (#2487)

Closes #2428

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/display/tag/components/Tag.tsx

@@ -35,10 +35,17 @@ const StyledTag = styled.h3<{
   gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(5)};
   margin: 0;
+  overflow: hidden;
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledContent = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 export type TagProps = {
   className?: string;
   color: ThemeColor;
@@ -52,6 +59,6 @@ export const Tag = ({ className, color, text, onClick }: TagProps) => (
     color={castToTagColor(color)}
     onClick={onClick}
   >
-    {text}
+    <StyledContent>{text}</StyledContent>
   </StyledTag>
 );

front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx

@@ -34,6 +34,17 @@ export const Default: Story = {
   },
 };
 
+export const WithLongText: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  parameters: {
+    container: { width: 100 },
+  },
+};
+
 export const Catalog: CatalogStory<Story, typeof Tag> = {
   args: { text: 'Urgent' },
   argTypes: {