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 {
-    background: ${({ theme, disabled }) =>
-      !disabled ? theme.background.transparent.lighter : 'transparent'};
+  &:hover .floating-icon-button-hovered {
+    display: flex;
   }
 
   &: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>