Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/ui/editable-field/components/EditableField.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useEditableField } from '../hooks/useEditableField';
@@ -71,7 +72,7 @@ const StyledEditableFieldBaseContainer = styled.div`
 `;
 
 type OwnProps = {
-  iconLabel?: React.ReactNode;
+  IconLabel?: IconComponent;
   label?: string;
   labelFixedWidth?: number;
   useEditButton?: boolean;
@@ -87,7 +88,7 @@ type OwnProps = {
 };
 
 export function EditableField({
-  iconLabel,
+  IconLabel,
   label,
   labelFixedWidth,
   useEditButton,
@@ -125,7 +126,11 @@ export function EditableField({
       onMouseLeave={handleContainerMouseLeave}
     >
       <StyledLabelAndIconContainer>
-        {iconLabel && <StyledIconContainer>{iconLabel}</StyledIconContainer>}
+        {IconLabel && (
+          <StyledIconContainer>
+            <IconLabel />
+          </StyledIconContainer>
+        )}
         {label && (
           <StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
         )}

front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx

@@ -18,7 +18,7 @@ export function GenericEditableBooleanField() {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         displayModeContent={<GenericEditableBooleanFieldDisplayMode />}
         displayModeContentOnly
       />

front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx

@@ -32,7 +32,7 @@ export function GenericEditableDateField() {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditableDateFieldEditMode />}
         displayModeContent={<GenericEditableDateFieldDisplayMode />}
         isDisplayModeContentEmpty={!fieldValue}

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -31,7 +31,7 @@ export function GenericEditableNumberField() {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditableNumberFieldEditMode />}
         displayModeContent={fieldValue}
         isDisplayModeContentEmpty={!fieldValue}

front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx

@@ -33,7 +33,7 @@ export function GenericEditablePhoneField() {
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
         useEditButton
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditablePhoneFieldEditMode />}
         displayModeContent={<PhoneInputDisplay value={fieldValue} />}
         isDisplayModeContentEmpty={!fieldValue}

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -38,7 +38,7 @@ export function GenericEditableRelationField() {
           customEditHotkeyScope={{
             scope: RelationPickerHotkeyScope.RelationPicker,
           }}
-          iconLabel={currentEditableFieldDefinition.icon}
+          IconLabel={currentEditableFieldDefinition.Icon}
           editModeContent={<GenericEditableRelationFieldEditMode />}
           displayModeContent={<GenericEditableRelationFieldDisplayMode />}
           isDisplayModeContentEmpty={!fieldValue}

front/src/modules/ui/editable-field/components/GenericEditableTextField.tsx

@@ -31,7 +31,7 @@ export function GenericEditableTextField() {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditableTextFieldEditMode />}
         displayModeContent={fieldValue}
         isDisplayModeContentEmpty={!fieldValue}

front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx

@@ -33,7 +33,7 @@ export function GenericEditableURLField() {
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
         useEditButton
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditableURLFieldEditMode />}
         displayModeContent={<FieldDisplayURL URL={fieldValue} />}
         isDisplayModeContentEmpty={!fieldValue}

front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx

@@ -18,7 +18,7 @@ export function ProbabilityEditableField() {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <EditableField
-        iconLabel={currentEditableFieldDefinition.icon}
+        IconLabel={currentEditableFieldDefinition.Icon}
         displayModeContent={<ProbabilityEditableFieldEditMode />}
         displayModeContentOnly
         disableHoverEffect