feat(redmine 1305754): correction github comments

Smile-SA · Aug 2, 2024 · 18e7356 · 18e7356
1 parent 8890e70
commit 18e7356
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 65 deletions.
diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css
@@ -6,7 +6,6 @@
   flex-direction: row;
   background-color: white;
   width: 100%;
-  gap: 5px;
   z-index: 190;
 
   /*noinspection CssInvalidAtRule*/
@@ -18,51 +17,52 @@
     height: max-content;
     box-shadow: -6px 6px 7px 3px #00000008;
     transform: translateY(-50%);
+    gap: 5px;
   }
 }
+@mixin larger-than $mantine-breakpoint-xs {
+  .left {
+    left: 0;
+    border-radius: 0px 8px 8px 0px;
+    .floatingMenuItem {
+      left: calc(-138px + 56px);
+      transition: left 0.3s ease;
+    }
 
-.positionLeft {
-  left: 0;
-  border-radius: 0px 8px 8px 0px;
-  .floatingMenuItem {
-    left: calc(-138px + 56px);
-    transition: left 0.3s ease;
-  }
-
-  .floatingMenuItem {
-    justify-content: flex-end;
-    align-items: center;
-  }
+    .floatingMenuItem {
+      justify-content: flex-end;
+      align-items: center;
+    }
 
-  .isOpened {
-    justify-content: flex-start;
-    border-radius: 0px 28px 28px 0px;
-    left: 0;
-  }
-  .floatingMenuButton {
-    span {
+    .isOpened {
       justify-content: flex-start;
-      flex-direction: row-reverse;
+      border-radius: 0px 28px 28px 0px;
+      left: 0;
+    }
+    .floatingMenuButton {
+      span {
+        justify-content: flex-start;
+        flex-direction: row-reverse;
+      }
     }
   }
-}
-
-.positionRight {
-  right: 0;
-  border-radius: 8px 0px 0px 8px;
 
-  .floatingMenuItem {
+  .right {
     right: 0;
-    transition: right 0.3s ease;
-  }
+    border-radius: 8px 0px 0px 8px;
 
-  .isOpened {
-    flex-direction: column;
-    border-radius: 28px 0px 0px 28px;
-    right: calc(138px - 56px);
+    .floatingMenuItem {
+      right: 0;
+      transition: right 0.3s ease;
+    }
+
+    .isOpened {
+      flex-direction: column;
+      border-radius: 28px 0px 0px 28px;
+      right: calc(138px - 56px);
+    }
   }
 }
-
 .floatingMenuItem {
   position: relative;
   padding: 10px 5px;
@@ -75,6 +75,7 @@
     justify-content: flex-start;
     align-items: center;
     text-align: center;
+    gap: 5px;
   }
 
   /*noinspection CssInvalidAtRule*/
@@ -86,6 +87,7 @@
     span {
       flex-direction: row;
       max-width: 100%;
+      gap: 0;
     }
   }
 }
@@ -119,3 +121,13 @@
     border-radius: 28px 0px 0px 28px;
   }
 }
+
+.floatingMenuLabel {
+  @mixin larger-than $mantine-breakpoint-xs {
+    display: none;
+
+    &.show {
+      display: block;
+    }
+  }
+}
diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx
@@ -22,6 +22,6 @@ type IStory = StoryObj<typeof meta>;
 export const FloatingMenu: IStory = {
   args: {
     items: floatingMenuLabelMock.children,
-    position: 'Right',
+    position: 'right',
   },
 };
diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx
@@ -2,7 +2,6 @@
 import type { ReactElement } from 'react';
 
 import { ActionIcon, Flex, Group, Modal, Text } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
 import {
   CalendarBlank,
   FileText,
@@ -14,7 +13,7 @@ import { useState } from 'react';
 
 import classes from './FloatingMenu.module.css';
 
-type IMenuPosition = 'Left' | 'Right';
+type IMenuPosition = 'left' | 'right';
 
 export interface IMenuItems {
   hasModal: boolean;
@@ -28,10 +27,11 @@ export interface IFloatingMenuProps {
   position?: IMenuPosition;
 }
 
-export function FloatingMenu({
-  position = 'Right',
-  items,
-}: IFloatingMenuProps): ReactElement {
+const icons = [FileText, Star, Newspaper, CalendarBlank, Question];
+
+export function FloatingMenu(props: IFloatingMenuProps): ReactElement {
+  const { position = 'right', items } = props;
+
   const [openedItem, setOpenedItem] = useState<number | null>(null);
   const [hoveredItem, setHoveredItem] = useState<number | null>(null);
 
@@ -48,15 +48,7 @@ export function FloatingMenu({
     setHoveredItem(null);
   };
 
-  const icons = [FileText, Star, Newspaper, CalendarBlank, Question];
-
-  const matches = useMediaQuery('(max-width: 36em)');
-  const positionClass = !matches
-    ? position === 'Right'
-      ? classes.positionRight
-      : classes.positionLeft
-    : '';
-
+  const positionClass = position === 'right' ? classes.right : classes.left;
   return (
     <Flex
       bg="white"
@@ -82,7 +74,7 @@ export function FloatingMenu({
           >
             <ActionIcon
               aria-label={item.text}
-              className={`${classes.floatingMenuButton}`}
+              className={classes.floatingMenuButton}
               color={
                 openedItem === index || hoveredItem === index
                   ? 'white'
@@ -94,20 +86,16 @@ export function FloatingMenu({
               variant="transparent"
             >
               <Icon size={24} />
-              {hoveredItem === index || matches ? (
-                <Text
-                  ml={!matches && position === 'Right' ? '10px' : ''}
-                  mr={!matches && position === 'Left' ? '10px' : ''}
-                  mt={matches ? '10px' : ''}
-                  size="12px"
-                  style={{ width: '100%' }}
-                  truncate="end"
-                >
-                  {item.text}
-                </Text>
-              ) : (
-                ''
-              )}
+              <Text
+                className={`${classes.floatingMenuLabel} ${
+                  hoveredItem === index ? classes.show : ''
+                }`}
+                size="12px"
+                style={{ width: '100%' }}
+                truncate="end"
+              >
+                {item.text}
+              </Text>
             </ActionIcon>
 
             {item.hasModal ? (

diff --git a/packages/haring-react/src/index.tsx b/packages/haring-react/src/index.tsx
@@ -29,6 +29,7 @@ export { ButtonList } from './Components/ButtonList/ButtonList';
 export { ActionBar } from './Components/ActionBar/ActionBar';
 export type { IActionBarProps } from './Components/ActionBar/ActionBar';
 export { FloatingMenu } from './Components/FloatingMenu/FloatingMenu';
+export type { IFloatingMenuProps } from './Components/FloatingMenu/FloatingMenu';
 export { ActionList } from './Components/ActionList/ActionList';
 export type {
   IActionListProps,