Refactor icons passed as props with the new way (#1492)

* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/tab/components/Tab.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+type TabProps = {
   id: string;
   title: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   active?: boolean;
   className?: string;
   onClick?: () => void;
@@ -47,12 +50,13 @@ const StyledHover = styled.span`
 export function Tab({
   id,
   title,
-  icon,
+  Icon,
   active = false,
   onClick,
   className,
   disabled,
-}: OwnProps) {
+}: TabProps) {
+  const theme = useTheme();
   return (
     <StyledTab
       onClick={onClick}
@@ -62,7 +66,7 @@ export function Tab({
       data-testid={'tab-' + id}
     >
       <StyledHover>
-        {icon}
+        {Icon && <Icon size={theme.icon.size.md} />}
         {title}
       </StyledHover>
     </StyledTab>

front/src/modules/ui/tab/components/TabList.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { activeTabIdScopedState } from '../states/activeTabIdScopedState';
@@ -8,18 +9,18 @@ import { Tab } from './Tab';
 
 type SingleTabProps = {
   title: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   id: string;
   hide?: boolean;
   disabled?: boolean;
 };
 
-type OwnProps = {
+type TabListProps = {
   tabs: SingleTabProps[];
   context: React.Context<string | null>;
 };
 
-export function TabList({ tabs, context }: OwnProps) {
+export function TabList({ tabs, context }: TabListProps) {
   const initialActiveTabId = tabs[0].id;
 
   const [activeTabId, setActiveTabId] = useRecoilScopedState(
@@ -40,7 +41,7 @@ export function TabList({ tabs, context }: OwnProps) {
             id={tab.id}
             key={tab.id}
             title={tab.title}
-            icon={tab.icon}
+            Icon={tab.Icon}
             active={tab.id === activeTabId}
             onClick={() => {
               setActiveTabId(tab.id);

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
 };
 
 export const Catalog: Story = {
-  args: { title: 'Tab title', icon: <IconCheckbox /> },
+  args: { title: 'Tab title', Icon: IconCheckbox },
   argTypes: {
     active: { control: false },
     disabled: { control: false },

front/src/modules/ui/tab/components/__stories__/Tablist.stories.tsx

@@ -12,26 +12,26 @@ const tabs = [
   {
     id: '1',
     title: 'Tab1',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: true,
   },
   {
     id: '2',
     title: 'Tab2',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: false,
   },
   {
     id: '3',
     title: 'Tab3',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: false,
     disabled: true,
   },
   {
     id: '4',
     title: 'Tab4',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: false,
     disabled: false,
   },