From aad4f99f52e0167fe46a0fef2b3d26efbbbf6fd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Tue, 5 Sep 2023 17:45:05 +0200 Subject: [PATCH] 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 --- .../ui/button/components/ButtonGroup.tsx | 4 +++- .../button/components/FloatingIconButton.tsx | 22 +++++++++++++++---- .../components/FloatingIconButtonGroup.tsx | 8 +++++-- .../dropdown/components/DropdownMenuItem.tsx | 21 ++++++++++++++---- .../components/TableViewsDropdownButton.tsx | 7 +++--- 5 files changed, 48 insertions(+), 14 deletions(-) diff --git a/front/src/modules/ui/button/components/ButtonGroup.tsx b/front/src/modules/ui/button/components/ButtonGroup.tsx index 681b41a89..a4e73e6de 100644 --- a/front/src/modules/ui/button/components/ButtonGroup.tsx +++ b/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 ( - + {React.Children.map(children, (child, index) => { if (!React.isValidElement(child)) return null; diff --git a/front/src/modules/ui/button/components/FloatingIconButton.tsx b/front/src/modules/ui/button/components/FloatingIconButton.tsx index e2565a2d4..bb0db1879 100644 --- a/front/src/modules/ui/button/components/FloatingIconButton.tsx +++ b/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 && } {icon} ); diff --git a/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx b/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx index 40fae0d0f..f2b8a6a3d 100644 --- a/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx +++ b/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); })} diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx index 9bfd317db..f3fd76d42 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx +++ b/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({ {children} {actions && ( - - {actions} + + + {actions} + )} diff --git a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx index 988b0fea1..8b1f0aa78 100644 --- a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx +++ b/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" > {tableViews.map((view) => ( handleEditViewButtonClick(event, view.id)} icon={} />, tableViews.length > 1 ? ( - handleDeleteViewButtonClick(event, view.id)