fix: view dropdown incorrect button position and floating icon button doesn't match design (#1458)

* fix: view dropdown incorrect button position

* fix: className instead of style drill down

* fix: view drop down width

front/src/modules/ui/button/components/ButtonGroup.tsx

@@ -12,17 +12,19 @@ export type ButtonGroupProps = Pick<
   ButtonProps,
   'variant' | 'size' | 'accent'
 > & {
+  className?: string;
   children: ReactNode[];
 };
 
 export function ButtonGroup({
+  className,
   children,
   variant,
   size,
   accent,
 }: ButtonGroupProps) {
   return (
-    <StyledButtonGroupContainer>
+    <StyledButtonGroupContainer className={className}>
       {React.Children.map(children, (child, index) => {
         if (!React.isValidElement(child)) return null;
 

front/src/modules/ui/button/components/FloatingIconButton.tsx

@@ -53,6 +53,7 @@ const StyledButton = styled.button<
       : focus
       ? `0 0 0 3px ${theme.color.blue10}`
       : 'none'};
+  box-sizing: border-box;
   color: ${({ theme, disabled, focus }) => {
     return !disabled
       ? focus
@@ -62,22 +63,22 @@ const StyledButton = styled.button<
   }};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
-
   flex-direction: row;
+
   font-family: ${({ theme }) => theme.font.family};
   font-weight: ${({ theme }) => theme.font.weight.regular};
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   justify-content: center;
   padding: 0;
+  position: relative;
   transition: background 0.1s ease;
   white-space: nowrap;
 
   width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
 
-  &:hover {
+  &:hover .floating-icon-button-hovered {
-    background: ${({ theme, disabled }) =>
+    display: flex;
-      !disabled ? theme.background.transparent.lighter : 'transparent'};
   }
 
   &:active {
@@ -90,6 +91,18 @@ const StyledButton = styled.button<
   }
 `;
 
+const StyledHover = styled.div`
+  background: ${({ theme }) => theme.background.transparent.lighter};
+  border-radius: calc(${({ theme }) => theme.border.radius.sm} - 2px);
+  bottom: 2px;
+  box-sizing: border-box;
+  display: none;
+  left: 2px;
+  position: absolute;
+  right: 2px;
+  top: 2px;
+`;
+
 export function FloatingIconButton({
   className,
   icon: initialIcon,
@@ -122,6 +135,7 @@ export function FloatingIconButton({
       position={position}
       onClick={onClick}
     >
+      {!disabled && <StyledHover className="floating-icon-button-hovered" />}
       {icon}
     </StyledButton>
   );

front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx

@@ -16,9 +16,9 @@ const StyledFloatingIconButtonGroupContainer = styled.div`
 
 export type FloatingIconButtonGroupProps = Pick<
   FloatingIconButtonProps,
-  'size'
+  'size' | 'className'
 > & {
-  children: React.ReactElement[];
+  children: React.ReactNode[];
 };
 
 export function FloatingIconButtonGroup({
@@ -49,6 +49,10 @@ export function FloatingIconButtonGroup({
           additionalProps.size = size;
         }
 
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
         return React.cloneElement(child, additionalProps);
       })}
     </StyledFloatingIconButtonGroupContainer>

front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx

@@ -1,7 +1,8 @@
 import { ComponentProps } from 'react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
-import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
+import { FloatingIconButtonGroup } from '@/ui/button/components/FloatingIconButtonGroup';
 import { hoverBackground } from '@/ui/theme/constants/effects';
 
 export type DropdownMenuItemAccent = 'regular' | 'danger';
@@ -34,9 +35,13 @@ const StyledItem = styled.li<{ accent: DropdownMenuItemAccent }>`
   user-select: none;
 
   width: calc(100% - 2 * var(--horizontal-padding));
+
+  &:hover .actions-hover-container {
+    display: flex;
+  }
 `;
 
-const StyledActions = styled(ButtonGroup)`
+const StyledActions = styled(motion.div)`
   display: none;
   position: absolute;
   right: ${({ theme }) => theme.spacing(1)};
@@ -57,8 +62,16 @@ export function DropdownMenuItem({
     <StyledItem {...props} accent={accent}>
       {children}
       {actions && (
-        <StyledActions variant="tertiary" size="small">
+        <StyledActions
-          {actions}
+          className="actions-hover-container"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <FloatingIconButtonGroup size="small">
+            {actions}
+          </FloatingIconButtonGroup>
         </StyledActions>
       )}
     </StyledItem>

front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
-import { IconButton } from '@/ui/button/components/IconButton';
+import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
@@ -199,19 +199,20 @@ export const TableViewsDropdownButton = ({
       onIsUnfoldedChange={setIsUnfolded}
       anchor="left"
       HotkeyScope={HotkeyScope}
+      menuWidth="auto"
     >
       <StyledDropdownMenuItemsContainer>
         {tableViews.map((view) => (
           <DropdownMenuItem
             key={view.id}
             actions={[
-              <IconButton
+              <FloatingIconButton
                 key="edit"
                 onClick={(event) => handleEditViewButtonClick(event, view.id)}
                 icon={<IconPencil size={theme.icon.size.sm} />}
               />,
               tableViews.length > 1 ? (
-                <IconButton
+                <FloatingIconButton
                   key="delete"
                   onClick={(event) =>
                     handleDeleteViewButtonClick(event, view.id)