fix: custom icon colors + table tooltips

Smile-SA · Sep 26, 2023 · 328ff8a · 328ff8a
1 parent b470faf
commit 328ff8a
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 459 deletions.
diff --git a/.changeset/red-donuts-march.md b/.changeset/red-donuts-march.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': patch
+---
+
+Fix icon colors and table tooltips
diff --git a/packages/react-front-kit/src/1-styleGuide/Icons/ColumnPlus.tsx b/packages/react-front-kit/src/1-styleGuide/Icons/ColumnPlus.tsx
@@ -10,33 +10,24 @@ const weights = new Map<IconWeight, ReactElement>([
   [
     'regular',
     <>
-      <path
-        d="M3 1.86005V10.11"
-        stroke="black"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M3 1.86005V10.11" strokeLinecap="round" strokeLinejoin="round" />
       <path
         d="M5.99988 1.875V10.125"
-        stroke="black"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M9.0083 1.88995V6.76495"
-        stroke="black"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M8.9812 8.63989V10.8899"
-        stroke="black"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M7.8562 9.76489H10.1062"
-        stroke="black"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -46,11 +37,13 @@ const weights = new Map<IconWeight, ReactElement>([
 
 export const ColumnPlus: Icon = forwardRef<SVGSVGElement, IconProps>(
   function ColumnPlus(props, ref) {
+    const { color = 'currentColor', ...iconProps } = props;
     return (
       <IconBase
         ref={ref}
-        {...props}
+        {...iconProps}
         fill="none"
+        stroke={color}
         viewBox="0 0 12 12"
         weights={weights}
       />

diff --git a/packages/react-front-kit/src/1-styleGuide/Icons/FolderMove.tsx b/packages/react-front-kit/src/1-styleGuide/Icons/FolderMove.tsx
@@ -12,33 +12,24 @@ const weights = new Map<IconWeight, ReactElement>([
     <>
       <path
         d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
-        stroke="black"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M6 9H11"
-        stroke="black"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M9 7L11 9L9 11"
-        stroke="black"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
+      <path d="M6 9H11" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M9 7L11 9L9 11" strokeLinecap="round" strokeLinejoin="round" />
     </>,
   ],
 ]);
 
 export const FolderMove: Icon = forwardRef<SVGSVGElement, IconProps>(
   function FolderMove(props, ref) {
+    const { color = 'currentColor', ...iconProps } = props;
     return (
       <IconBase
         ref={ref}
-        {...props}
+        {...iconProps}
         fill="none"
+        stroke={color}
         viewBox="0 0 12 12"
         weights={weights}
       />

diff --git a/packages/react-front-kit/src/1-styleGuide/Icons/index.ts b/packages/react-front-kit/src/1-styleGuide/Icons/index.ts
@@ -1,6 +1,3 @@
 /* eslint react-refresh/only-export-components: 0 */
-export * from './Edit';
 export * from './ColumnPlus';
 export * from './FolderMove';
-export * from './MenuTable';
-export * from './TreeStructure';
diff --git a/packages/react-front-kit/src/3-custom/Components/Table/Table.tsx b/packages/react-front-kit/src/3-custom/Components/Table/Table.tsx
@@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 
 'use client';
+import type { FloatingPosition } from '@mantine/core/lib/Floating';
 import type { MRT_ColumnDef } from 'mantine-react-table';
 import type { ReactElement, ReactNode } from 'react';
 
@@ -14,17 +15,20 @@ import {
   Button,
   Menu,
   Modal,
+  Tooltip,
   createStyles,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
   CaretDown,
   CaretUp,
   CaretUpDown,
+  DotsThreeVertical,
   DownloadSimple,
   Eye,
   FolderNotchOpen,
   Funnel,
+  PencilSimple,
   ShareNetwork,
   Star,
   Trash,
@@ -38,14 +42,7 @@ import {
 import { MRT_Localization_FR } from 'mantine-react-table/locales/fr';
 import { useState } from 'react';
 
-import {
-  ColumnPlus,
-  Edit,
-  MenuTable,
-  TreeStructure,
-} from '../../../1-styleGuide/Icons';
-
-import { TableTooltip } from './TableTooltip';
+import { ColumnPlus, FolderMove } from '../../../1-styleGuide/Icons';
 
 interface IDocument {
   creator: string;
@@ -140,7 +137,15 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-/** */
+const tooltipProps = {
+  color: 'gray.7',
+  position: 'bottom' as FloatingPosition,
+  radius: 6,
+  withArrow: true,
+  withinPortal: true,
+};
+
+/** Additional props will be forwarded to the [Mantine React Table useMantineReactTable hook](https://www.mantine-react-table.com/docs/api/table-options) */
 export function Table(props: ITableProps): ReactElement {
   const { action, data, columns } = props;
   const [opened, { open, close }] = useDisclosure(false);
@@ -365,102 +370,82 @@ export function Table(props: ITableProps): ReactElement {
         onMouseLeave={() => actionButtonOnMouseHandler(cell.row.index, false)}
         style={{ opacity: displayActionsButtons[cell.row.index] ? 1 : 0 }}
       >
-        <TableTooltip
-          element={
-            <ActionIcon
-              onClick={() => handleTree(cell.row.original)}
-              radius={4}
-              type="button"
+        <Tooltip label="Déplacer dans l’arborescence" {...tooltipProps}>
+          <ActionIcon
+            onClick={() => handleTree(cell.row.original)}
+            radius={4}
+            type="button"
+          >
+            <FolderMove />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Ouvrir le document" {...tooltipProps}>
+          <ActionIcon
+            onClick={() =>
+              sendCurrentElementValueWithAction(
+                cell.row.original,
+                'OPEN_ELEMENT',
+              )
+            }
+            radius={4}
+            type="button"
+          >
+            <Eye className={classes.iconsColor} size={16} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Modifier le document" {...tooltipProps}>
+          <ActionIcon
+            onClick={() =>
+              sendCurrentElementValueWithAction(
+                cell.row.original,
+                'UPDATE_ELEMENT',
+              )
+            }
+            radius={4}
+            type="button"
+          >
+            <PencilSimple />
+          </ActionIcon>
+        </Tooltip>
+        <Menu radius={4} shadow="lg" width={200} withinPortal>
+          <Menu.Target>
+            <Tooltip label="Affiche les autres actions" {...tooltipProps}>
+              <ActionIcon radius={4} type="button">
+                <DotsThreeVertical size={16} />
+              </ActionIcon>
+            </Tooltip>
+          </Menu.Target>
+
+          <Menu.Dropdown>
+            <Menu.Item
+              icon={<Star size={14} />}
+              onClick={() => handleAddToFav(cell.row.original)}
             >
-              <TreeStructure />
-            </ActionIcon>
-          }
-          text="Déplacer dans l’arborescence"
-        />
-        <TableTooltip
-          element={
-            <ActionIcon
-              onClick={() =>
-                sendCurrentElementValueWithAction(
-                  cell.row.original,
-                  'OPEN_ELEMENT',
-                )
-              }
-              radius={4}
-              type="button"
+              Ajout aux favoris
+            </Menu.Item>
+            <Menu.Item
+              icon={<ShareNetwork size={14} />}
+              onClick={() => handleshare(cell.row.original)}
             >
-              <Eye className={classes.iconsColor} size={16} />
-            </ActionIcon>
-          }
-          text="Ouvrir le document"
-        />
-        <TableTooltip
-          element={
-            <ActionIcon
+              Partager
+            </Menu.Item>
+            <Menu.Item
+              icon={<DownloadSimple size={14} />}
               onClick={() =>
-                sendCurrentElementValueWithAction(
-                  cell.row.original,
-                  'UPDATE_ELEMENT',
-                )
+                sendCurrentElementValueWithAction(cell.row.original, 'DOWNLOAD')
               }
-              radius={4}
-              type="button"
             >
-              <Edit />
-            </ActionIcon>
-          }
-          text="Modifier le document"
-        />
-        <TableTooltip
-          element={
-            <ActionIcon radius={4} type="button">
-              <Menu radius={4} shadow="lg" width={200} withinPortal>
-                <Menu.Target>
-                  <div
-                    className={classes.menuButton}
-                    style={{ display: 'flex', height: '28px', width: '28px' }}
-                  >
-                    <MenuTable />
-                  </div>
-                </Menu.Target>
-
-                <Menu.Dropdown>
-                  <Menu.Item
-                    icon={<Star size={14} />}
-                    onClick={() => handleAddToFav(cell.row.original)}
-                  >
-                    Ajout aux favoris
-                  </Menu.Item>
-                  <Menu.Item
-                    icon={<ShareNetwork size={14} />}
-                    onClick={() => handleshare(cell.row.original)}
-                  >
-                    Partager
-                  </Menu.Item>
-                  <Menu.Item
-                    icon={<DownloadSimple size={14} />}
-                    onClick={() =>
-                      sendCurrentElementValueWithAction(
-                        cell.row.original,
-                        'DOWNLOAD',
-                      )
-                    }
-                  >
-                    Télécharger
-                  </Menu.Item>
-                  <Menu.Item
-                    color="red"
-                    icon={<Trash size={14} />}
-                    onClick={() => handleRemove(cell.row.original)}
-                  >
-                    Supprimer
-                  </Menu.Item>
-                </Menu.Dropdown>
-              </Menu>
-            </ActionIcon>
-          }
-          text="Affiche les autres actions"
-        />
+              Télécharger
+            </Menu.Item>
+            <Menu.Item
+              color="red"
+              icon={<Trash size={14} />}
+              onClick={() => handleRemove(cell.row.original)}
+            >
+              Supprimer
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
       </div>
     ),
     renderToolbarAlertBannerContent: (cell) => (

diff --git a/packages/react-front-kit/src/3-custom/Components/Table/TableTooltip.tsx b/packages/react-front-kit/src/3-custom/Components/Table/TableTooltip.tsx