Fix the design of the Variable chip (#9871)

- Use a React component for variable tags in tiptap
- Fix the design of the variable chip
- Always display a button to delete the chip

![CleanShot 2025-01-28 at 12 35
55@2x](https://github.com/user-attachments/assets/d78ffa52-fcc3-4bbc-b427-68edde255408)

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormBooleanFieldInput.tsx

@@ -1,7 +1,7 @@
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { BooleanInput } from '@/ui/field/input/components/BooleanInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
@@ -96,7 +96,7 @@ export const FormBooleanFieldInput = ({
               />
             </StyledBooleanInputContainer>
           ) : (
-            <VariableChip
+            <VariableChipStandalone
               rawVariableName={draftValue.value}
               onRemove={readonly ? undefined : handleUnlinkVariable}
             />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx

@@ -1,7 +1,7 @@
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import {
@@ -367,7 +367,7 @@ export const FormDateTimeFieldInput = ({
               ) : null}
             </>
           ) : (
-            <VariableChip
+            <VariableChipStandalone
               rawVariableName={draftValue.value}
               onRemove={readonly ? undefined : handleUnlinkVariable}
             />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
 import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
@@ -221,7 +221,7 @@ export const FormMultiSelectFieldInput = ({
               </StyledDisplayModeContainer>
             )
           ) : (
-            <VariableChip
+            <VariableChipStandalone
               rawVariableName={draftValue.value}
               onRemove={readonly ? undefined : handleUnlinkVariable}
             />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx

@@ -2,7 +2,7 @@ import { FormFieldHint } from '@/object-record/record-field/form-types/component
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { TextInput } from '@/ui/field/input/components/TextInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
@@ -117,7 +117,7 @@ export const FormNumberFieldInput = ({
               disabled={readonly}
             />
           ) : (
-            <VariableChip
+            <VariableChipStandalone
               rawVariableName={draftValue.value}
               onRemove={readonly ? undefined : handleUnlinkVariable}
             />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

@@ -1,7 +1,7 @@
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
 import { SINGLE_RECORD_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleRecordSelectBaseList';
@@ -282,7 +282,7 @@ export const FormSelectFieldInput = ({
               </StyledDisplayModeContainer>
             )
           ) : (
-            <VariableChip
+            <VariableChipStandalone
               rawVariableName={draftValue.value}
               onRemove={readonly ? undefined : handleUnlinkVariable}
             />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx

@@ -1,7 +1,7 @@
 import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
 import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { TextInput } from '@/ui/field/input/components/TextInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
@@ -108,7 +108,7 @@ export const FormUuidFieldInput = ({
               onChange={handleChange}
             />
           ) : (
-            <VariableChip
+            <VariableChipStandalone
               rawVariableName={draftValue.value}
               onRemove={readonly ? undefined : handleUnlinkVariable}
             />

packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx

@@ -1,32 +1,21 @@
 import { extractVariableLabel } from '@/workflow/workflow-variables/utils/extractVariableLabel';
-import styled from '@emotion/styled';
-
 import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import { IconX, isDefined } from 'twenty-ui';
 
-export const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-`;
-
 const StyledChip = styled.div<{ deletable: boolean }>`
-  align-items: center;
   background-color: ${({ theme }) => theme.accent.quaternary};
   border: 1px solid ${({ theme }) => theme.accent.tertiary};
   border-radius: 4px;
-  color: ${({ theme }) => theme.color.blue};
+  height: 20px;
-  height: 26px;
   box-sizing: border-box;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   flex-direction: row;
   flex-shrink: 0;
   column-gap: ${({ theme }) => theme.spacing(1)};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding: ${({ theme }) => theme.spacing(0.5)};
   padding-left: ${({ theme }) => theme.spacing(1)};
-  margin-left: ${({ theme }) => theme.spacing(2)};
   user-select: none;
   white-space: nowrap;
 
@@ -37,6 +26,11 @@ const StyledChip = styled.div<{ deletable: boolean }>`
     `}
 `;
 
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.color.blue};
+  line-height: 140%;
+`;
+
 const StyledDelete = styled.button`
   box-sizing: border-box;
   height: 20px;
@@ -51,11 +45,12 @@ const StyledDelete = styled.button`
   margin: 0;
   background: none;
   border: none;
-  color: inherit;
+  color: ${({ theme }) => theme.color.blue};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
+  border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm};
 
   &:hover {
     background-color: ${({ theme }) => theme.accent.secondary};
-    border-radius: ${({ theme }) => theme.border.radius.sm};
   }
 `;
 
@@ -71,16 +66,14 @@ export const VariableChip = ({
   const theme = useTheme();
 
   return (
-    <StyledContainer>
+    <StyledChip deletable={isDefined(onRemove)}>
-      <StyledChip deletable={isDefined(onRemove)}>
+      <StyledLabel>{extractVariableLabel(rawVariableName)}</StyledLabel>
-        {extractVariableLabel(rawVariableName)}
 
-        {onRemove ? (
+      {onRemove ? (
-          <StyledDelete onClick={onRemove}>
+        <StyledDelete onClick={onRemove}>
-            <IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
+          <IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
-          </StyledDelete>
+        </StyledDelete>
-        ) : null}
+      ) : null}
-      </StyledChip>
+    </StyledChip>
-    </StyledContainer>
   );
 };

packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChipStandalone.tsx

@@ -0,0 +1,24 @@
+import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+type VariableChipStandaloneProps = {
+  rawVariableName: string;
+  onRemove?: () => void;
+};
+
+export const VariableChipStandalone = ({
+  rawVariableName,
+  onRemove,
+}: VariableChipStandaloneProps) => {
+  return (
+    <StyledContainer>
+      <VariableChip rawVariableName={rawVariableName} onRemove={onRemove} />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx

@@ -110,14 +110,8 @@ export const DisplayDefaultValueWithVariablesProperly: Story = {
 
     await canvas.findByText(/{ "a": { "b" : /);
 
-    await waitFor(() => {
+    const variableTag = await canvas.findByText('test');
-      const variableTag = canvasElement.querySelector(
+    await expect(variableTag).toBeVisible();
-        '[data-type="variableTag"]',
-      );
-
-      expect(variableTag).toBeVisible();
-      expect(variableTag).toHaveTextContent('test');
-    });
 
     await canvas.findByText(/ } }/);
   },

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowSingleRecordFieldChip.tsx

@@ -1,6 +1,6 @@
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import {
@@ -48,7 +48,7 @@ export const WorkflowSingleRecordFieldChip = ({
     isStandaloneVariableString(draftValue.value)
   ) {
     return (
-      <VariableChip
+      <VariableChipStandalone
         rawVariableName={objectMetadataItem.labelSingular}
         onRemove={onRemove}
       />

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowTextEditorVariableChip.tsx

@@ -0,0 +1,25 @@
+import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import styled from '@emotion/styled';
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+
+const StyledWrapper = styled.span`
+  display: inline-block;
+  padding-inline: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+type WorkflowTextEditorVariableChipProps = NodeViewProps;
+
+export const WorkflowTextEditorVariableChip = ({
+  deleteNode,
+  node,
+}: WorkflowTextEditorVariableChipProps) => {
+  const attrs = node.attrs as {
+    variable: string;
+  };
+
+  return (
+    <NodeViewWrapper as={StyledWrapper} style={{ whiteSpace: 'nowrap' }}>
+      <VariableChip rawVariableName={attrs.variable} onRemove={deleteNode} />
+    </NodeViewWrapper>
+  );
+};

packages/twenty-front/src/modules/workflow/workflow-variables/utils/variableTag.ts

@@ -1,6 +1,7 @@
+import { WorkflowTextEditorVariableChip } from '@/workflow/workflow-variables/components/WorkflowTextEditorVariableChip';
 import { extractVariableLabel } from '@/workflow/workflow-variables/utils/extractVariableLabel';
 import { Node } from '@tiptap/core';
-import { mergeAttributes } from '@tiptap/react';
+import { mergeAttributes, ReactNodeViewRenderer } from '@tiptap/react';
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -41,6 +42,10 @@ export const VariableTag = Node.create({
     ];
   },
 
+  addNodeView: () => {
+    return ReactNodeViewRenderer(WorkflowTextEditorVariableChip);
+  },
+
   renderText: ({ node }) => {
     return node.attrs.variable;
   },