From 1c5270e3019c87bc23ef1e9d73016e0afed021b9 Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Wed, 2 Jul 2025 14:32:14 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20enhance=20dropdown=20menu?= =?UTF-8?q?=20and=20quick=20search=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added a horizontal separator to the dropdown menu for better visual distinction between options. - Updated padding in the quick search input for improved layout consistency. - Adjusted margin in the quick search group for better spacing. - Increased vertical padding in quick search item content for enhanced readability. - Modified the horizontal separator to accept custom padding for more flexible styling. - Improved left panel styling to manage overflow behavior effectively. - Removed unused skeleton loading styles from globals.css to clean up the codebase. --- .../impress/src/components/DropdownMenu.tsx | 127 +++++++++--------- .../quick-search/QuickSearchGroup.tsx | 2 +- .../quick-search/QuickSearchInput.tsx | 2 +- .../quick-search/QuickSearchItemContent.tsx | 3 +- .../separators/HorizontalSeparator.tsx | 9 +- .../left-panel/components/LeftPanel.tsx | 2 + 6 files changed, 81 insertions(+), 64 deletions(-) diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx index 5513ccb7..fcbd9ebe 100644 --- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx +++ b/src/frontend/apps/impress/src/components/DropdownMenu.tsx @@ -1,4 +1,5 @@ -import { PropsWithChildren, useRef, useState } from 'react'; +import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit'; +import { Fragment, PropsWithChildren, useRef, useState } from 'react'; import { css } from 'styled-components'; import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components'; @@ -14,6 +15,7 @@ export type DropdownMenuOption = { isSelected?: boolean; disabled?: boolean; show?: boolean; + showSeparator?: boolean; }; export type DropdownMenuProps = { @@ -112,71 +114,76 @@ export const DropdownMenu = ({ } const isDisabled = option.disabled !== undefined && option.disabled; return ( - { - event.preventDefault(); - event.stopPropagation(); - onOpenChange?.(false); - void option.callback?.(); - }} - key={option.label} - $align="center" - $justify="space-between" - $background={colorsTokens['greyscale-000']} - $color={colorsTokens['primary-600']} - $padding={{ vertical: 'xs', horizontal: 'base' }} - $width="100%" - $gap={spacingsTokens['base']} - $css={css` - border: none; - ${index === 0 && - css` - border-top-left-radius: 4px; - border-top-right-radius: 4px; - `} - ${index === options.length - 1 && - css` - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - `} - font-size: var(--c--theme--font--sizes--sm); - color: var(--c--theme--colors--greyscale-1000); - font-weight: 500; - cursor: ${isDisabled ? 'not-allowed' : 'pointer'}; - user-select: none; - - &:hover { - background-color: var(--c--theme--colors--greyscale-050); - } - `} - > - + { + event.preventDefault(); + event.stopPropagation(); + onOpenChange?.(false); + void option.callback?.(); + }} + key={option.label} $align="center" + $justify="space-between" + $background={colorsTokens['greyscale-000']} + $color={colorsTokens['primary-600']} + $padding={{ vertical: 'xs', horizontal: 'base' }} + $width="100%" $gap={spacingsTokens['base']} + $css={css` + border: none; + ${index === 0 && + css` + border-top-left-radius: 4px; + border-top-right-radius: 4px; + `} + ${index === options.length - 1 && + css` + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + `} + font-size: var(--c--theme--font--sizes--sm); + color: var(--c--theme--colors--greyscale-1000); + font-weight: 500; + cursor: ${isDisabled ? 'not-allowed' : 'pointer'}; + user-select: none; + + &:hover { + background-color: var(--c--theme--colors--greyscale-050); + } + `} > - {option.icon && ( - + + {option.icon && ( + + )} + + {option.label} + + + {(option.isSelected || + selectedValues?.includes(option.value ?? '')) && ( + )} - - {option.label} - - - {(option.isSelected || - selectedValues?.includes(option.value ?? '')) && ( - + + {option.showSeparator && ( + )} - + ); })} diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx index 33cffcf8..375bac48 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx @@ -18,7 +18,7 @@ export const QuickSearchGroup = ({ renderElement, }: Props) => { return ( - + {!loading && } {loading && ( diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx index 09330bd5..070126a5 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx @@ -24,8 +24,9 @@ export const QuickSearchItemContent = ({ { const { colorsTokens } = useCunninghamTheme(); + const padding = $withPadding + ? (customPadding ?? 'base') + : ('none' as Spacings); + return ( { position: fixed; transform: translateX(${isPanelOpen ? '0' : '-100dvw'}); background-color: var(--c--theme--colors--greyscale-000); + overflow-y: auto; + overflow-x: hidden; `} className="--docs--left-panel-mobile" >